/*
Theme Name: Techory2026 (Zenphoto)
Description: Gallery theme matching the Techory 2026 WordPress theme.
Fonts: IBM Plex Sans (body, nav, meta), IBM Plex Serif (headings), Josefin Sans (tagline only).
Breakpoints: 860px (hamburger menu), 700px (stacked logo + tagline, narrow stage), 520px (pager).
*/
/* ---------- Tokens ---------- */
:root {
--techory-sky: #3CAEF8;
--techory-blue: #18709B;
--techory-green: #89A968;
--techory-yellow: #E4DF91;
--techory-blue-soft: #EAF6FD;
--techory-green-soft: #E9F0E2;
--techory-yellow-soft: #F7F5D9;
--techory-text: #252B30;
--techory-muted: #68747B;
--techory-border: #E1E5E8;
--strip-1: #3caef8;
--strip-2: #18709B;
--strip-3: #89A968;
--strip-4: #E4DF91;
--strip-5: #FFFFFF;
}
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: 'IBM Plex Sans', sans-serif; color: var(--techory-text); background: #FFFFFF; -webkit-text-size-adjust: 100%; }
img { max-width: 100%; }
a { color: #18709B; text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, input:focus-visible, textarea:focus-visible, button:focus-visible, select:focus-visible { outline: 2px solid var(--techory-blue); outline-offset: 3px; }
.serif { font-family: 'IBM Plex Serif', Georgia, serif; }
.title { font-family: 'IBM Plex Serif', Georgia, serif; font-weight: 600; color: #1F2428; }
.rule { border: 0; border-top: 1px solid var(--techory-border); margin: 0; }
.meta { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--techory-muted); }
.more { font-size: 15px; font-weight: 600; color: #18709B; }
.sr { position: absolute; left: -9999px; }
.crumbs { font-size: 13px; color: var(--techory-muted); margin-bottom: 20px; }
.tagline { font-family: 'Josefin Sans', sans-serif; font-size: 12px; line-height: 1.6; letter-spacing: 0.22em; text-transform: uppercase; color: #AEB8BF; }
/* ---------- Five-colour strip ---------- */
.strip { display: flex; height: 8px; }
.strip span { flex: 1; }
.strip span:nth-child(1) { background: var(--strip-1); }
.strip span:nth-child(2) { background: var(--strip-2); }
.strip span:nth-child(3) { background: var(--strip-3); }
.strip span:nth-child(4) { background: var(--strip-4); }
.strip span:nth-child(5) { background: var(--strip-5); }
.strip-bottom { height: 4px; }
/* ---------- Header ---------- */
.site-header { background: linear-gradient(#2A3238, #1E2429); }
.header-inner { max-width: 1100px; margin: 0 auto; padding: 16px 32px; display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; align-items: center; }
.lockup { display: flex; align-items: center; gap: 18px; }
.logo { display: block; }
.logo img { display: block; }
.lockup-extra { display: flex; align-items: center; gap: 18px; }
.lockup-extra svg { display: block; flex: 0 0 auto; }
.nav { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; }
.nav a { color: #E4E8EB; font-weight: 500; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover { text-decoration: none; border-bottom-color: #3caef8; }
.nav a[aria-current] { border-bottom-color: #3caef8; }
.search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 4px; background: transparent; color: #E4E8EB; cursor: pointer; padding: 0; margin-left: -6px; }
.search-toggle:hover { background: rgba(255,255,255,0.08); }
.search-toggle:focus-visible, .hamburger:focus-visible { outline: 2px solid #3caef8; outline-offset: 2px; }
.hamburger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,0.28); border-radius: 4px; background: transparent; color: #E4E8EB; cursor: pointer; padding: 0; }
.hamburger:hover { border-color: #3caef8; }
.i-close { display: none; }
[aria-expanded="true"] > .i-open { display: none; }
[aria-expanded="true"] > .i-close { display: inline-flex; }
.i-open { display: inline-flex; }
.search-panel { background: #181D21; border-top: 1px solid rgba(255,255,255,0.08); }
.search-panel[hidden], .mobile-nav[hidden] { display: none; }
.search-panel form { max-width: 1100px; margin: 0 auto; padding: 14px 32px; display: flex; gap: 10px; height: 72px; }
.dark-input { flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid rgba(255,255,255,0.22); border-radius: 4px; background: #232A30; color: #FFFFFF; font-family: inherit; font-size: 16px; }
.dark-input::placeholder { color: #9AA5AD; }
.dark-input:focus-visible { outline: 2px solid #3caef8; outline-offset: 1px; }
.dark-btn { border: 0; border-radius: 4px; background: #18709B; color: #FFFFFF; padding: 0 20px; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.dark-btn:hover { background: #1B82B3; }
.mobile-nav { background: #181D21; border-top: 1px solid rgba(255,255,255,0.08); }
.mobile-nav-inner { max-width: 1100px; margin: 0 auto; padding: 14px 32px 22px; display: flex; flex-direction: column; }
.mobile-search { display: flex; gap: 8px; padding-bottom: 6px; }
.mobile-search .dark-btn { height: 46px; }
.mlink { display: block; padding: 14px 0; color: #E4E8EB; font-weight: 500; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.08); }
.mlink:hover { color: #FFFFFF; text-decoration: none; }
.mlink[aria-current] { color: #FFFFFF; box-shadow: inset 3px 0 0 #3caef8; padding-left: 14px; }
@media (max-width: 860px) {
.nav-desktop { display: none; }
.hamburger { display: flex; }
.search-panel { display: none !important; }
}
@media (min-width: 861px) {
.mobile-nav { display: none !important; }
}
@media (max-width: 700px) {
.header-inner { column-gap: 16px; }
.lockup { flex-direction: column; align-items: flex-start; gap: 8px; }
.lockup-extra svg { display: none; }
.lockup-extra .tagline { font-size: 10px; letter-spacing: 0.12em; white-space: nowrap; }
.lockup-extra .tagline br { display: none; }
}
/* ---------- Page frame ---------- */
.wrap { max-width: 1100px; margin: 0 auto; padding: 36px 32px 72px; }
.wrap-narrow { max-width: 900px; padding-top: 32px; }
.gal-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin: 0 0 40px; }
.gal-head-stack { display: block; margin-bottom: 36px; }
.gal-h1 { margin: 0 0 10px; font-size: 40px; line-height: 1.15; letter-spacing: -0.01em; }
.gal-h1-image { margin-bottom: 24px; }
.gal-sub { margin: 0; font-size: 18px; line-height: 1.5; color: var(--techory-muted); }
.gal-meta { margin: 0 0 14px; }
.gal-desc { margin: 0 0 22px; max-width: 640px; font-size: 18px; line-height: 1.6; color: #4A5056; }
.gal-search { margin: 0 0 18px; }
.gal-search { display: flex; gap: 8px; max-width: 480px; }
.gal-search input[type="text"] { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid #C3C8CC; border-radius: 4px; font-family: inherit; font-size: 16px; }
.gal-search input[type="submit"], .gal-search button { height: 40px; padding: 0 18px; border: 0; border-radius: 4px; background: #18709B; color: #FFFFFF; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
@media (max-width: 860px) { .gal-h1 { font-size: clamp(2rem, 4vw, 2.75rem); letter-spacing: -0.02em; } }
/* ---------- Share icons, buttons ---------- */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.share .meta { letter-spacing: 0.075em; }
.share-icons { display: flex; gap: 10px; }
.icon { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #C3C8CC; border-radius: 4px; background: #FFFFFF; color: #1F2428; transition: color .15s ease, border-color .15s ease, background-color .15s ease; }
.icon::after { content: ""; position: absolute; inset: -4px; }
.icon:hover, .icon:focus-visible { color: #1E8FD6; border-color: #1E8FD6; background: var(--techory-blue-soft); text-decoration: none; }
.act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.act-image { margin-top: 20px; gap: 10px 24px; }
.act-spacer { flex: 1; }
.act .tl, .tl-slide a { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; }
.cap-meta { font-size: 15px; color: var(--techory-muted); }
.cap-meta b { font-weight: 500; color: #2B2F33; }
/* slideshow plugin link rendered as the primary button */
.btn-slide a.slideshowlink, .btn-slide a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 4px; background: #18709B; color: #FFFFFF; font-size: 15px; font-weight: 600; text-decoration: none; }
.btn-slide a::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; }
.btn-slide a:hover { background: #0E4F6E; color: #FFFFFF; text-decoration: none; }
.btn-slide form, .tl-slide form { margin: 0; }
.sel { appearance: none; -webkit-appearance: none; height: 40px; padding: 0 38px 0 14px; border: 1px solid #C3C8CC; border-radius: 4px; font-family: inherit; font-size: 15px; color: #2B2F33; cursor: pointer; background: #FFFFFF url("data:image/svg+xml;utf8,") no-repeat right 14px center; }
.sel:hover { border-color: #1E8FD6; }
/* ---------- Photos and albums ---------- */
.gal-img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 3px; border: 1px solid rgba(20,30,40,0.14); background: #EEF1F3; }
.ratio-43 { aspect-ratio: 4 / 3; }
.ratio-1 { aspect-ratio: 1 / 1; }
.gal-head + .rule { margin-bottom: 36px; }
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 44px 32px; }
.album-grid-sub { margin-bottom: 44px; }
a.album { display: block; color: inherit; }
a.album:hover { text-decoration: none; }
a.album .gal-img { transition: border-color .15s ease; }
a.album:hover .gal-img, a.album:focus-visible .gal-img { border-color: #1E8FD6; }
a.album .title { margin: 16px 0 6px; font-size: 21px; line-height: 1.25; }
a.album:hover .title { color: #18709B; }
a.album p { margin: 0; font-size: 15px; line-height: 1.6; color: #4A5056; }
.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
a.thumb { display: block; }
a.thumb:hover { text-decoration: none; }
a.thumb .gal-img { transition: border-color .15s ease; }
a.thumb:hover .gal-img, a.thumb:focus-visible .gal-img { border-color: #1E8FD6; }
.thumb-t { display: block; margin-top: 10px; font-size: 13px; line-height: 1.5; font-weight: 400; color: var(--techory-muted); text-align: center; }
a.thumb:hover .thumb-t { color: #18709B; }
.gal-foot { margin-top: 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.gal-foot-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-left: auto; }
.gal-foot-jump .meta { letter-spacing: 0.075em; }
/* ---------- Pager (Zenphoto printPageListWithNav) ---------- */
div.pagelist { display: inline-block; max-width: 100%; }
ul.pagelist { display: inline-flex; max-width: 100%; margin: 0; padding: 0; list-style: none; border: 1px solid var(--techory-border); border-radius: 4px; overflow: hidden; background: #FFFFFF; font-size: 14px; font-weight: 600; line-height: 1; }
ul.pagelist li { display: flex; border-left: 1px solid var(--techory-border); }
ul.pagelist li:first-child { border-left: 0; }
ul.pagelist li > a, ul.pagelist li > span, ul.pagelist li.current { display: flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; color: #18709B; text-decoration: none; }
ul.pagelist li > a:hover { background: var(--techory-blue-soft); color: #0E4F6E; box-shadow: inset 0 -3px 0 #3caef8; }
ul.pagelist li > a:focus-visible { outline-offset: -3px; }
ul.pagelist li.current { background: #18709B; color: #FFFFFF; box-shadow: inset 0 -3px 0 #3caef8; }
ul.pagelist li .disabledlink { color: var(--techory-muted); font-weight: 400; opacity: .6; }
ul.pagelist li.prev > *, ul.pagelist li.next > * { padding: 0 18px; }
@media (max-width: 520px) { ul.pagelist li:not(.prev):not(.next):not(.current):not(.first):not(.last) { display: none; } }
/* ---------- Single photo ---------- */
.stage { position: relative; background: #F6F8F9; border: 1px solid var(--techory-border); border-radius: 4px; padding: 28px 72px; display: flex; justify-content: center; }
.gal-img-main { width: auto; max-width: 100%; max-height: 680px; aspect-ratio: auto; object-fit: contain; background: #DDE3E8; }
.nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #C3C8CC; border-radius: 4px; background: #FFFFFF; color: #18709B; }
.nav-arrow.prev { left: 14px; }
.nav-arrow.next { right: 14px; }
a.nav-arrow:hover { color: #1E8FD6; border-color: #1E8FD6; background: var(--techory-blue-soft); text-decoration: none; }
.nav-arrow[aria-disabled="true"] { opacity: .38; pointer-events: none; }
@media (max-width: 700px) {
.stage { padding: 16px 16px 72px; }
.nav-arrow { top: auto; bottom: 14px; transform: none; }
.nav-arrow.prev { left: 16px; }
.nav-arrow.next { right: 16px; }
}
.image-desc { margin: 20px 0 0; font-size: 16px; }
.tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 20px; }
.tag-row .meta { letter-spacing: 0.075em; }
ul.taglist { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
ul.taglist li a { display: inline-block; padding: 2px 10px; border: 1px solid #C3C8CC; border-radius: 999px; font-size: 12px; color: #4A5056; background: #FFFFFF; }
ul.taglist li a:hover { background: var(--techory-green-soft); border-color: var(--techory-green); text-decoration: none; }
.image-meta { margin-top: 20px; font-size: 13px; color: var(--techory-muted); }
.stage-foot { margin: 28px 0 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
/* ---------- Comments (Zenphoto comment_form plugin markup) ---------- */
.comments-block { margin-top: 28px; }
.comments-block #commentcontent > h3, .comments-block #commententry h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-family: 'IBM Plex Serif', Georgia, serif; font-size: 22px; font-weight: 600; line-height: 1.2; color: #1F2428; }
.comments-block #commentcontent > h3::before { content: ""; width: 4px; height: 22px; border-radius: 1px; background: var(--strip-3); flex: 0 0 auto; }
.comments-block #commententry { margin-top: 24px; }
.comments-block #comments { display: flex; flex-direction: column; gap: 12px; }
.comments-block .comment { padding: 16px 18px; background: #F6F8F9; border: 1px solid #E7E9EB; border-radius: 4px; }
.comments-block .commentinfo h4 { margin: 0; font-size: 16px; font-weight: 600; color: #1F2428; }
.comments-block .commentinfo h4 a { color: inherit; }
.comments-block .commenttext { margin-top: 6px; font-size: 16px; line-height: 1.6; color: #2B2F33; }
#commentform { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
#commentform br { display: none; }
#commentform p { margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--techory-muted); }
#commentform label { font-size: 13px; font-weight: 500; color: #2B2F33; }
#commentform input[type="text"], #commentform input[type="email"], #commentform input[type="url"] { width: 100%; padding: 10px 12px; border: 1px solid #C3C8CC; border-radius: 4px; background: #FFFFFF; font-family: inherit; font-size: 16px; }
#commentform textarea { grid-column: 1 / -1; order: -1; width: 100%; padding: 10px 12px; border: 1px solid #C3C8CC; border-radius: 4px; background: #FFFFFF; font-family: inherit; font-size: 16px; line-height: 1.5; resize: vertical; }
#commentform p:has(#name) { order: 1; }
#commentform p:has(#email) { order: 2; }
#commentform p:has(#website) { order: 3; }
#commentform p:has(#anon), #commentform p:has(#private), #commentform p:has(#remember) { order: 4; grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; }
#commentform p:has(#anon) label, #commentform p:has(#private) label, #commentform p:has(#remember) label { order: 2; font-weight: 400; color: #4A5056; }
#commentform input[type="submit"] { grid-column: 1 / -1; order: 10; justify-self: start; background: #18709B; color: #FFFFFF; border: 0; border-radius: 4px; padding: 10px 22px; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
#commentform input[type="submit"]:hover { background: #0E4F6E; }
#commentform p:last-of-type { order: 9; grid-column: 1 / -1; display: block; }
#comment_toggle { margin: 0 0 14px; }
#comment_toggle button { height: 36px; padding: 0 14px; border: 1px solid #C3C8CC; border-radius: 4px; background: #FFFFFF; color: #18709B; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
#comment_toggle button:hover { border-color: #1E8FD6; background: var(--techory-blue-soft); }
.comments-block a[href*="rss"], .comments-block .commentrss { font-size: 14px; }
.errorbox { padding: 12px 16px; border-left: 4px solid #B3402A; background: #FBEDEA; border-radius: 3px; font-size: 14px; }
/* ---------- Footer ---------- */
.site-footer { background: linear-gradient(#2A3238, #1E2429); color: #D5DBE0; }
.footer-main { max-width: 1100px; margin: 0 auto; padding: 44px 32px 40px; display: flex; flex-wrap: wrap; gap: 36px 64px; }
.footer-col { flex: 1 1 200px; min-width: 0; }
.footer-col-wide { flex: 2 1 320px; }
.footer-col h3 { margin: 0 0 16px; font-size: 19px; font-weight: 600; color: #FFFFFF; }
.flink { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.45; }
.flink-tight { gap: 10px; }
.flink a { color: #D5DBE0; text-decoration: underline; text-decoration-color: rgba(213,219,224,0.4); text-underline-offset: 3px; }
.flink a:hover { color: #FFFFFF; text-decoration-color: #3caef8; }
.fl2 { color: #D5DBE0; }
.fl2:hover { color: #FFFFFF; }
.footer-base { background: #181D21; border-top: 1px solid rgba(255,255,255,0.08); }
.footer-base-inner { max-width: 1100px; margin: 0 auto; padding: 18px 32px; display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; align-items: flex-start; font-size: 13px; line-height: 1.6; color: #AEB8BF; }
.footer-nav { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.footer-nav .subscribe { display: inline-flex; gap: 6px; align-items: center; }
.footer-nav .subscribe svg { color: #3caef8; stroke-width: 3; }
/* ---------- Slideshow page ---------- */
body.zp-slideshow { background: #14181B; color: #E4E8EB; }
body.zp-slideshow a { color: #7CC7F5; }
/* Single-column grids on phones */
@media (max-width: 560px) {
.album-grid, .thumb-grid { grid-template-columns: 1fr; }
}