/* ============================================================
   NIKON Z FLAGSHIP CAMERA COMMUNITY — SHARED STYLESHEET v2
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --obsidian:   #1A1A2E; --midnight: #16213E; --steel: #0F3C60;
  --gold:       #FFB800; --gold-light: #FFCC40; --gold-dim: rgba(255,184,0,.15);
  --near-white: #F9F9FB; --charcoal:  #4A4A5A; --muted: #888899;
  --border:     rgba(255,255,255,.08); --card-bg: #1E2140;
  --success:    #2ECC71; --danger: #E74C3C; --warning: #F39C12;
  --font-display: Georgia,'Times New Roman',serif;
  --font-ui:    'Inter',system-ui,-apple-system,sans-serif;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:40px;--s6:48px;--s8:64px;--s10:80px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.35); --shadow-md: 0 8px 32px rgba(0,0,0,.45);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.55); --glow: 0 0 24px rgba(255,184,0,.25);
  --r1:4px;--r2:8px;--r3:12px;--r4:16px;--r-full:999px;
  --t1:.15s ease;--t2:.25s ease;--t3:.35s cubic-bezier(.4,0,.2,1);
  --nav-h: 64px; /* slim fixed navbar */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-ui);background:var(--obsidian);color:var(--near-white);line-height:1.6;min-height:100vh;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{cursor:pointer;font-family:var(--font-ui);border:none;background:none;}
ul,ol{list-style:none;}
input,textarea,select{font-family:var(--font-ui);font-size:1rem;}

/* ── NAVBAR — Nikon Z Creators Branding ── */
.navbar{position:fixed;top:0;left:0;right:0;width:100%;height:var(--nav-h);background:rgba(22,33,62,.93);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 var(--s4);z-index:1000;gap:var(--s3);max-width:none !important;}
.nav-brand{display:flex;align-items:center;gap:14px;font-family:var(--font-display);font-size:1.3rem;font-weight:700;letter-spacing:.03em;color:var(--near-white);flex-shrink:0;text-decoration:none;}

/* LOGO — Z Creators circular badge (transparent PNG, no border-radius needed) */
.nav-logo{
  width:44px; height:44px;
  border-radius:0;
  object-fit:contain;
  object-position:center;
  flex-shrink:0;
  filter:drop-shadow(0 1px 5px rgba(0,0,0,.5)) drop-shadow(0 0 8px rgba(255,184,0,.3));
  transition:filter var(--t2);
}
.nav-brand:hover .nav-logo{filter:drop-shadow(0 2px 10px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(255,184,0,.6));}

.nav-links{display:flex;gap:var(--s1);flex:1;}
.nav-links a{padding:var(--s1) var(--s2);border-radius:var(--r2);font-size:.875rem;font-weight:500;color:rgba(249,249,251,.65);transition:color var(--t1),background var(--t1);}
.nav-links a:hover,.nav-links a.active{color:var(--gold);background:var(--gold-dim);}
.nav-actions{display:flex;align-items:center;gap:var(--s2);margin-left:auto;}
.nav-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--steel),var(--gold));display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;cursor:pointer;border:2px solid var(--gold);}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);padding:10px var(--s3);border-radius:var(--r2);font-size:.875rem;font-weight:600;letter-spacing:.02em;transition:all var(--t2);cursor:pointer;border:none;}
.btn-primary{background:var(--gold);color:var(--obsidian);}
.btn-primary:hover{background:var(--gold-light);box-shadow:var(--glow);transform:translateY(-1px);}
.btn-outline{background:transparent;color:var(--near-white);border:1px solid rgba(249,249,251,.3);}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-dim);}
.btn-ghost{background:transparent;color:var(--muted);}
.btn-ghost:hover{color:var(--near-white);}
.btn-sm{padding:6px var(--s2);font-size:.8rem;}
.btn-lg{padding:var(--s2) var(--s4);font-size:1rem;}
.btn-danger{background:var(--danger);color:#fff;}
.btn-success{background:var(--success);color:#fff;}

/* ── LAYOUT ── */
.page-body{padding-top:var(--nav-h);min-height:100vh;}
.container{max-width:1200px;margin:0 auto;padding:0 var(--s4);}
.container-sm{max-width:760px;margin:0 auto;padding:0 var(--s4);}
.section{padding:var(--s10) 0;}
.section-sm{padding:var(--s6) 0;}
.section-title{font-family:var(--font-display);font-size:clamp(1.75rem,3vw,2.5rem);font-weight:normal;color:var(--near-white);line-height:1.2;}
.section-subtitle{font-size:1rem;color:var(--muted);margin-top:var(--s1);max-width:600px;}
.gold-accent{color:var(--gold);}
.section-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:var(--s5);gap:var(--s3);flex-wrap:wrap;}

/* ── CARDS ── */
.card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--r3);overflow:hidden;transition:transform var(--t2),box-shadow var(--t2),border-color var(--t2);}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(255,184,0,.3);}
.card-body{padding:var(--s3);}
.card-title{font-family:var(--font-display);font-size:1.05rem;margin-bottom:var(--s1);}
.card-meta{font-size:.78rem;color:var(--muted);display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;}

/* ── PHOTO PLACEHOLDERS ── */
.ph{width:100%;aspect-ratio:3/2;background-size:cover;background-position:center;position:relative;overflow:hidden;}
.ph-wildlife{background:linear-gradient(135deg,#1a2a1a 0%,#2d4a2d 30%,#1a3a1a 60%,#0d1f0d 100%);}
.ph-landscape{background:linear-gradient(135deg,#1a2a3a 0%,#2d4a6a 40%,#1a3a5a 70%,#0d1f2f 100%);}
.ph-bird{background:linear-gradient(160deg,#2a1a0a 0%,#5a3a1a 35%,#8a5a2a 60%,#4a2a0a 100%);}
.ph-sunset{background:linear-gradient(160deg,#2a0a0a 0%,#6a1a0a 30%,#c9602a 55%,#6a3a0a 80%,#2a1a0a 100%);}
.ph-portrait{background:linear-gradient(135deg,#1a1a2a 0%,#2a2a4a 40%,#3a3a5a 70%,#1a1a2a 100%);}
.ph-macro{background:linear-gradient(135deg,#0a2a0a 0%,#1a4a1a 35%,#2a6a2a 60%,#0a2a0a 100%);}
.ph-street{background:linear-gradient(135deg,#1a1a1a 0%,#3a3a3a 40%,#1a1a1a 70%,#0a0a0a 100%);}
.ph-astro{background:linear-gradient(160deg,#050510 0%,#0a0a2a 30%,#0f0f3a 55%,#050510 100%);}
.ph-lake{background:linear-gradient(160deg,#0a1a2a 0%,#1a3a5a 40%,#2a5a7a 65%,#0a1a2a 100%);}
.ph-tiger{background:linear-gradient(135deg,#2a1a0a 0%,#5a3a0a 35%,#8a5a1a 60%,#2a1a0a 100%);}

/* ── BADGE ── */
.badge{display:inline-block;padding:3px 10px;border-radius:var(--r-full);font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;}
.badge-gold{background:var(--gold-dim);color:var(--gold);border:1px solid rgba(255,184,0,.3);}
.badge-green{background:rgba(46,204,113,.15);color:#2ecc71;border:1px solid rgba(46,204,113,.3);}
.badge-red{background:rgba(231,76,60,.15);color:#e74c3c;border:1px solid rgba(231,76,60,.3);}
.badge-blue{background:rgba(15,60,96,.6);color:#7eceff;border:1px solid rgba(126,206,255,.3);}
.badge-grey{background:rgba(255,255,255,.08);color:var(--muted);border:1px solid var(--border);}

/* ── FORMS ── */
.form-group{margin-bottom:var(--s3);}
.form-label{display:block;font-size:.85rem;font-weight:600;color:rgba(249,249,251,.75);margin-bottom:6px;letter-spacing:.02em;}
.form-label .required{color:var(--gold);margin-left:2px;}
.form-control{width:100%;padding:11px var(--s2);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r2);color:var(--near-white);font-size:.9rem;transition:border-color var(--t1),background var(--t1);}
.form-control:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.09);}
.form-control::placeholder{color:var(--muted);}
select.form-control option{background:var(--midnight);}
textarea.form-control{resize:vertical;min-height:100px;}
.form-hint{font-size:.78rem;color:var(--muted);margin-top:4px;}
.form-error{font-size:.78rem;color:var(--danger);margin-top:4px;display:none;}
.form-control.error{border-color:var(--danger);}
.form-control.error+.form-error{display:block;}

/* ── HERO ── */
.hero{min-height:calc(100vh - var(--nav-h));display:flex;align-items:center;background:linear-gradient(160deg,var(--midnight) 0%,var(--obsidian) 50%,#0a0f1e 100%);position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 600px 400px at 75% 40%,rgba(255,184,0,.07) 0%,transparent 70%),radial-gradient(ellipse 400px 300px at 20% 70%,rgba(15,60,96,.3) 0%,transparent 60%);pointer-events:none;}
.hero-content{position:relative;z-index:1;}
.hero-eyebrow{font-size:.8rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--s2);}
.hero-title{font-family:var(--font-display);font-size:clamp(2.5rem,6vw,4.5rem);font-weight:normal;line-height:1.1;margin-bottom:var(--s3);max-width:700px;}
.hero-subtitle{font-size:clamp(1rem,2vw,1.2rem);color:rgba(249,249,251,.65);margin-bottom:var(--s5);max-width:560px;line-height:1.7;}
.hero-actions{display:flex;gap:var(--s2);flex-wrap:wrap;}
.hero-stats{display:flex;gap:var(--s5);margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--border);flex-wrap:wrap;}
.hero-stat-num{font-family:var(--font-display);font-size:2rem;color:var(--gold);font-weight:bold;line-height:1;}
.hero-stat-label{font-size:.8rem;color:var(--muted);margin-top:4px;}

/* ── GRIDS ── */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4);}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s3);}
@media(max-width:960px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr;}.navbar{padding:0 var(--s2);}.nav-links{display:none;}.container{padding:0 var(--s2);}}

/* ── PAGE HEADER ── */
.page-header{background:linear-gradient(160deg,var(--midnight) 0%,var(--obsidian) 100%);padding:var(--s8) 0 var(--s6);border-bottom:1px solid var(--border);position:relative;overflow:hidden;}
.page-header::before{content:'';position:absolute;right:-100px;top:-80px;width:400px;height:400px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,184,0,.06) 0%,transparent 70%);}
.page-header .container{position:relative;z-index:1;}
.breadcrumb{display:flex;gap:var(--s1);align-items:center;font-size:.8rem;color:var(--muted);margin-bottom:var(--s3);}
.breadcrumb a{color:var(--muted);transition:color var(--t1);}
.breadcrumb a:hover{color:var(--gold);}
.breadcrumb .sep{opacity:.4;}

/* ── PHOTO CARD ── */
.photo-card{position:relative;overflow:hidden;border-radius:var(--r3);cursor:pointer;}
.photo-card .ph{border-radius:var(--r3) var(--r3) 0 0;}
.photo-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(22,33,62,.95) 0%,transparent 50%);opacity:0;transition:opacity var(--t2);display:flex;align-items:flex-end;padding:var(--s2);border-radius:var(--r3);}
.photo-card:hover .photo-overlay{opacity:1;}
.overlay-btn{padding:6px 12px;border-radius:var(--r2);font-size:.78rem;font-weight:600;cursor:pointer;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:var(--near-white);backdrop-filter:blur(8px);transition:all var(--t1);}
.overlay-btn:hover{background:var(--gold);color:var(--obsidian);border-color:var(--gold);}

/* ── LIGHTBOX ── */
#lightbox{display:none;position:fixed;inset:0;z-index:9999;background:rgba(10,10,20,.95);backdrop-filter:blur(20px);align-items:center;justify-content:center;flex-direction:column;gap:var(--s3);}
#lightbox.open{display:flex;}
#lightbox .lb-close{position:absolute;top:var(--s3);right:var(--s3);font-size:1.5rem;color:var(--muted);cursor:pointer;transition:color var(--t1);}
#lightbox .lb-close:hover{color:var(--near-white);}
#lightbox .lb-caption{color:var(--muted);font-size:.9rem;}

/* ── FILTER BAR ── */
.filter-bar{display:flex;gap:var(--s1);flex-wrap:wrap;margin-bottom:var(--s4);}
.filter-btn{padding:7px var(--s2);border-radius:var(--r-full);font-size:.82rem;font-weight:500;border:1px solid var(--border);color:var(--muted);background:transparent;cursor:pointer;transition:all var(--t1);}
.filter-btn:hover{border-color:var(--gold);color:var(--gold);}
.filter-btn.active{background:var(--gold);color:var(--obsidian);border-color:var(--gold);font-weight:700;}

/* ── SEARCH BAR ── */
.search-bar{position:relative;max-width:440px;width:100%;}
.search-bar input{width:100%;padding:10px 44px 10px var(--s2);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-full);color:var(--near-white);font-size:.875rem;}
.search-bar input:focus{outline:none;border-color:var(--gold);}
.search-bar input::placeholder{color:var(--muted);}
.search-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;font-size:1rem;}

/* ── STATS BAR ── */
.stats-bar{display:flex;gap:var(--s4);padding:var(--s3) var(--s4);background:var(--card-bg);border:1px solid var(--border);border-radius:var(--r3);flex-wrap:wrap;}
.stat-item{text-align:center;flex:1;min-width:80px;}
.stat-num{font-family:var(--font-display);font-size:1.5rem;color:var(--gold);font-weight:bold;display:block;}
.stat-lbl{font-size:.75rem;color:var(--muted);margin-top:2px;}

/* ── KB CARD ── */
.kb-card{background:var(--card-bg);border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:var(--r3);padding:var(--s3);transition:all var(--t2);cursor:pointer;}
.kb-card:hover{background:rgba(30,33,64,.9);border-left-color:var(--gold-light);transform:translateX(3px);box-shadow:var(--shadow-sm);}
.kb-card-title{font-family:var(--font-display);font-size:1.05rem;color:var(--near-white);margin-bottom:var(--s1);}
.kb-card-excerpt{font-size:.875rem;color:var(--muted);line-height:1.6;}
.kb-card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:var(--s2);font-size:.78rem;color:var(--muted);}

/* ── CONTEST CARD ── */
.contest-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--r3);overflow:hidden;transition:all var(--t2);}
.contest-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.contest-banner{height:140px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.3rem;color:var(--gold);letter-spacing:.05em;}
.cb-wildlife{background:linear-gradient(135deg,#0a1a0a,#1a3a1a);}
.cb-landscape{background:linear-gradient(135deg,#0a1a2a,#1a3a5a);}
.cb-portrait{background:linear-gradient(135deg,#1a1a2a,#2a2a4a);}
.cb-macro{background:linear-gradient(135deg,#0a2a0a,#1a5a1a);}
.countdown{font-size:.85rem;color:var(--gold-light);font-weight:600;}

/* ── MEMBER CARD ── */
.member-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--r3);padding:var(--s3);text-align:center;transition:all var(--t2);}
.member-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(255,184,0,.3);}
.member-avatar{width:72px;height:72px;border-radius:50%;margin:0 auto var(--s2);border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:700;background:linear-gradient(135deg,var(--steel),var(--obsidian));}
.member-name{font-weight:700;font-size:1rem;margin-bottom:4px;}
.member-location{font-size:.8rem;color:var(--muted);margin-bottom:var(--s2);}
.member-gear{font-size:.78rem;color:var(--gold);background:var(--gold-dim);padding:3px 10px;border-radius:var(--r-full);display:inline-block;}
.member-stats{display:flex;justify-content:center;gap:var(--s3);margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--border);}
.member-stat{text-align:center;}
.member-stat .num{font-weight:700;font-size:.95rem;display:block;}
.member-stat .lbl{font-size:.7rem;color:var(--muted);}

/* ── DASHBOARD ── */
.dashboard-layout{display:grid;grid-template-columns:260px 1fr;gap:var(--s4);align-items:start;}
.sidebar{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--r3);overflow:hidden;position:sticky;top:calc(var(--nav-h) + var(--s3));}
.sidebar-header{padding:var(--s3);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:var(--s2);}
.sidebar-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--steel),var(--gold));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;flex-shrink:0;}
.sidebar-name{font-weight:700;font-size:.95rem;}
.sidebar-role{font-size:.75rem;color:var(--gold);}
.sidebar-nav{padding:var(--s2) 0;}
.sidebar-nav a{display:flex;align-items:center;gap:var(--s2);padding:10px var(--s3);font-size:.875rem;color:rgba(249,249,251,.65);transition:all var(--t1);}
.sidebar-nav a:hover{color:var(--near-white);background:rgba(255,255,255,.05);}
.sidebar-nav a.active{color:var(--gold);background:var(--gold-dim);}
.sidebar-nav .icon{width:18px;text-align:center;}
@media(max-width:900px){.dashboard-layout{grid-template-columns:1fr;}.sidebar{position:static;}}

/* ── UPLOAD ── */
.dropzone{border:2px dashed rgba(255,184,0,.4);border-radius:var(--r3);padding:var(--s8) var(--s4);text-align:center;cursor:pointer;transition:all var(--t2);background:rgba(255,184,0,.04);}
.dropzone:hover,.dropzone.dragover{border-color:var(--gold);background:var(--gold-dim);}
.dropzone-icon{font-size:3rem;margin-bottom:var(--s2);opacity:.5;}
.dropzone-title{font-size:1.1rem;font-weight:600;margin-bottom:var(--s1);}
.dropzone-sub{font-size:.875rem;color:var(--muted);}
.progress-wrap{background:rgba(255,255,255,.08);border-radius:var(--r-full);height:8px;overflow:hidden;}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--steel),var(--gold));border-radius:var(--r-full);transition:width .3s ease;width:0%;}

/* ── TOAST ── */
#toast{position:fixed;bottom:var(--s4);right:var(--s4);background:var(--card-bg);border:1px solid var(--border);border-radius:var(--r3);padding:var(--s2) var(--s3);font-size:.875rem;box-shadow:var(--shadow-md);z-index:5000;display:none;gap:var(--s2);align-items:center;max-width:360px;}
#toast.show{display:flex;}
#toast.success{border-left:3px solid var(--success);}
#toast.error{border-left:3px solid var(--danger);}
#toast.info{border-left:3px solid var(--gold);}

/* ── FOOTER ── */
footer{
  background:#09090f;
  border-top:1px solid rgba(255,255,255,.07);
  padding:1.25rem 2rem 1rem;
  text-align:center;
  margin-top:0;
}
.footer-logo{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.6rem;margin-bottom:.65rem;
}
.footer-logo img{height:28px;width:auto;opacity:.85;}
.footer-logo-fallback{font-size:.9rem;font-weight:800;color:var(--gold);}
.footer-links{
  display:flex;flex-direction:row;flex-wrap:wrap;
  justify-content:center;gap:.15rem .2rem;
  margin-bottom:.65rem;
}
.footer-links a{
  font-size:.76rem;color:rgba(255,255,255,.42);
  transition:color .15s;padding:.2rem .55rem;border-radius:.3rem;
}
.footer-links a:hover{color:var(--gold);background:rgba(255,184,0,.07);}
.footer-links a+a::before{content:'·';margin-right:.2rem;color:rgba(255,255,255,.15);pointer-events:none;}
.footer-copy{font-size:.7rem;color:rgba(255,255,255,.25);line-height:1.7;}
footer p{font-size:.7rem;color:rgba(255,255,255,.3);line-height:1.7;}
footer p a{color:var(--gold);opacity:.8;}
footer p a:hover{opacity:1;}
/* Unused grid classes kept for backwards compat */
.footer-grid,.footer-brand,.footer-desc,.footer-heading,.footer-bottom{display:none;}
@media(max-width:600px){
  footer{padding:1rem 1rem .85rem;}
  .footer-links{gap:.1rem .15rem;}
}

/* ── UTILITY ── */
.text-gold{color:var(--gold);}.text-muted{color:var(--muted);}.text-center{text-align:center;}
.text-sm{font-size:.875rem;}.text-xs{font-size:.78rem;}
.mt-2{margin-top:var(--s2);}.mt-3{margin-top:var(--s3);}.mt-4{margin-top:var(--s4);}
.mb-2{margin-bottom:var(--s2);}.mb-3{margin-bottom:var(--s3);}
.flex{display:flex;}.items-center{align-items:center;}.justify-between{justify-content:space-between;}
.gap-2{gap:var(--s2);}.gap-3{gap:var(--s3);}
.w-full{width:100%;}.hidden{display:none!important;}
.divider{border:none;border-top:1px solid var(--border);margin:var(--s5) 0;}

/* ── SECTION EYEBROW (shared by all pages) ── */
.section-eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.75rem;display:block;}

/* ── AVATAR DROPDOWN ── */
.avatar-circle{width:40px;height:40px;border-radius:50%;background:var(--gold);color:#111;
  font-size:.85rem;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;
  border:2px solid rgba(255,184,0,.4);transition:border-color .2s;}
.avatar-circle:hover{border-color:var(--gold);}
.avatar-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:#fff;
  border-radius:.75rem;box-shadow:0 8px 28px rgba(0,0,0,.15);min-width:160px;overflow:hidden;z-index:2000;}
.avatar-dropdown a{display:block;padding:.65rem 1rem;font-size:.85rem;color:#333;text-decoration:none;transition:background .15s;}
.avatar-dropdown a:hover{background:#f8f8fb;color:var(--gold);}

/* ── SITE NAV wrapper ── */
.site-nav{position:fixed;top:0;left:0;right:0;width:100%;height:var(--nav-h);
  background:rgba(10,10,18,.93);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;padding:0 2rem;
  z-index:1000;gap:1rem;
  max-width:none !important;
}
.site-nav .nav-brand{display:flex;align-items:center;gap:1.1rem;
  font-family:var(--font-display);font-size:1.15rem;font-weight:700;letter-spacing:.02em;
  color:#fff;flex-shrink:0;text-decoration:none;}
.site-nav .nav-links{display:flex;gap:.25rem;flex:1;}
.site-nav .nav-links a{padding:.5rem .85rem;border-radius:.4rem;font-size:.85rem;font-weight:500;
  color:rgba(255,255,255,.65);transition:color .15s,background .15s;text-decoration:none;}
.site-nav .nav-links a:hover,.site-nav .nav-links a.active{color:var(--gold);background:rgba(255,184,0,.1);}
.site-nav .nav-actions{display:flex;align-items:center;gap:.75rem;margin-left:auto;position:relative;}

/* ── NAV DROPDOWN ── */
.nav-dropdown{position:relative;display:flex;align-items:center;}
.nav-dropdown-toggle{
  display:flex;align-items:center;gap:.28rem;
  padding:.5rem .85rem;border-radius:.4rem;
  font-size:.85rem;font-weight:500;
  color:rgba(255,255,255,.65);background:none;border:none;cursor:pointer;
  transition:color .15s,background .15s;
  font-family:var(--font-ui);white-space:nowrap;line-height:1;
}
.nav-dropdown-toggle:hover,.nav-dropdown:hover .nav-dropdown-toggle,.nav-dropdown.open .nav-dropdown-toggle{
  color:var(--gold);background:rgba(255,184,0,.1);
}
.nav-dropdown-toggle.active{color:var(--gold);}
.nav-caret{
  font-size:.55rem;opacity:.55;display:inline-block;
  transition:transform .2s;margin-top:1px;
}
.nav-dropdown:hover .nav-caret,.nav-dropdown.open .nav-caret{transform:rotate(180deg);}
.nav-dropdown-menu{
  position:absolute;top:calc(100% + 8px);left:0;
  background:rgba(8,8,20,.97);
  border:1px solid rgba(255,255,255,.1);
  border-radius:.7rem;min-width:195px;
  padding:.45rem;
  box-shadow:0 16px 48px rgba(0,0,0,.55);
  opacity:0;pointer-events:none;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease;
  z-index:2000;
}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown.open .nav-dropdown-menu{
  opacity:1;pointer-events:auto;transform:translateY(0);
}
.nav-dropdown-menu a{
  display:flex;align-items:center;gap:.6rem;
  padding:.55rem .85rem;border-radius:.45rem;
  font-size:.83rem;font-weight:500;
  color:rgba(255,255,255,.72);text-decoration:none;
  transition:background .15s,color .15s;
}
.nav-dropdown-menu a:hover{background:rgba(255,184,0,.1);color:var(--gold);}
.nav-dropdown-menu a.active{color:var(--gold);background:rgba(255,184,0,.07);}
.nav-dropdown-divider{height:1px;background:rgba(255,255,255,.07);margin:.3rem .4rem;}
.nav-dropdown-label{
  font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.28);padding:.5rem .85rem .25rem;
}

/* Nikon yellow accent on primary btn */
.btn-primary{background:var(--gold) !important;color:#111 !important;font-weight:700 !important;}
.btn-primary:hover{background:var(--gold-light) !important;box-shadow:0 0 20px rgba(255,184,0,.4) !important;}

/* ── MOBILE HAMBURGER NAVIGATION ── */
.nav-hamburger{display:none;flex-direction:column;justify-content:space-between;
  width:44px;height:44px;cursor:pointer;background:none;border:none;
  padding:12px 9px;  /* 12px top/bottom centres a 20px icon in 44px; 9px sides = 26px icon */
  margin-left:auto;flex-shrink:0;min-width:44px;z-index:1100;
  -webkit-appearance:none;appearance:none;} /* iOS Safari: prevent system button rendering */
.nav-hamburger span{display:block;width:26px;height:2px;background:#fff;border-radius:2px;
  /* explicit width overrides *{max-width:100%} which can collapse spans on iOS Safari */
  transition:transform .25s,opacity .25s;}
.nav-hamburger.open span:nth-child(1){transform:translateY(9px) rotate(45deg);}
.nav-hamburger.open span:nth-child(2){opacity:0;}
.nav-hamburger.open span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}

@media(max-width:760px){
  /* ── Tighten navbar padding so brand text fits ── */
  .site-nav{padding:0 1rem;gap:.5rem;}
  /* Scale brand text so "Nikon Z Flagship Camera Community" fits in ~280px.
     flex-shrink:1 + min-width:0 + overflow:hidden allows the brand to compress
     when the 44px hamburger takes space on narrow phones (iPhone SE 375px etc.).
     The span inside already has white-space:nowrap + text-overflow:ellipsis. */
  .site-nav .nav-brand,.navbar .nav-brand{font-size:.95rem;
    flex-shrink:1;min-width:0;overflow:hidden;}
  .site-nav .nav-brand span,.navbar .nav-brand span{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
  }

  .nav-hamburger{display:flex;}

  /* Desktop nav-links hidden on mobile */
  #nav-links-menu{display:none !important;}

  /* Hide Sign In / Join buttons from top bar on mobile —
     they are added to the hamburger drawer instead (see main.js) */
  .site-nav .nav-actions{display:none !important;}

  /* Mobile drawer */
  #nav-mobile-menu{
    position:fixed;top:var(--nav-h);left:0;right:0;
    flex-direction:column;background:rgba(8,8,20,.98);
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    padding:1rem 1.25rem 2rem;gap:.15rem;
    border-bottom:1px solid rgba(255,184,0,.2);
    z-index:999;max-height:calc(100vh - var(--nav-h));overflow-y:auto;
    max-width:none !important;
  }
  #nav-mobile-menu a{padding:.75rem 1rem;font-size:.95rem;border-radius:.4rem;
    color:rgba(255,255,255,.75);text-decoration:none;display:block;transition:color .15s,background .15s;}
  #nav-mobile-menu a:hover,#nav-mobile-menu a.active{color:var(--gold);background:rgba(255,184,0,.1);}

  /* Auth buttons inside the drawer */
  #nav-mobile-menu .mob-auth-row{
    display:flex;gap:.6rem;padding:.75rem 1rem .25rem;
  }
  #nav-mobile-menu .mob-auth-row a{
    flex:1;text-align:center;padding:.6rem .5rem;font-size:.88rem;
    border-radius:.4rem;font-weight:600;
  }
  #nav-mobile-menu .mob-auth-signin{
    border:1px solid rgba(255,255,255,.3);color:#fff !important;background:transparent !important;
  }
  #nav-mobile-menu .mob-auth-join{
    background:var(--gold) !important;color:#111 !important;border:none;
  }
}

/* ============================================================
   COMPREHENSIVE MOBILE RESPONSIVENESS
   Targets: iPhone/Android current + 2 previous generations
   Breakpoints: 768px (tablet), 480px (phone), 360px (small phone)
   ============================================================ */

/* ── TABLET (≤768px) ── */
@media(max-width:768px){

  /* Base spacing reductions */
  :root{
    --s8:48px;
    --s10:56px;
  }

  /* Layout containers */
  .container,.container-sm{padding:0 var(--s3);}

  /* Section padding — eliminate the large gaps */
  .section{padding:var(--s6) 0;}
  .section-sm{padding:var(--s4) 0;}

  /* Page header */
  .page-header{padding:var(--s6) 0 var(--s4);}

  /* Section headers stack */
  .section-header{flex-direction:column;align-items:flex-start;margin-bottom:var(--s4);}

  /* Grids → 2 columns max on tablet */
  .grid-auto{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}

  /* Cards */
  .card-body{padding:var(--s2);}

  /* Stats bar wrap */
  .stats-bar{gap:var(--s3);padding:var(--s2) var(--s3);}
  .stat-item{min-width:60px;}

  /* Dashboard sidebar stacks */
  .dashboard-layout{grid-template-columns:1fr;}
  .sidebar{position:static;}

  /* Toast full-width on mobile */
  #toast{right:var(--s2);left:var(--s2);max-width:unset;}

  /* Filter bar wraps */
  .filter-bar{gap:6px;}
  .filter-btn{padding:6px var(--s2);font-size:.8rem;}

  /* Member card */
  .member-avatar{width:60px;height:60px;}
}

/* ── PHONE (≤480px) ── */
@media(max-width:480px){

  :root{
    --s8:40px;
    --s10:48px;
  }

  /* Containers full-bleed with padding */
  .container,.container-sm{padding:0 var(--s2);}

  /* Tighter sections — the main gap fix */
  .section{padding:var(--s5) 0;}
  .section-sm{padding:var(--s3) 0;}
  .page-header{padding:var(--s4) 0 var(--s3);}

  /* Typography scale-down */
  .section-title{font-size:clamp(1.4rem,5vw,1.9rem);}
  .section-subtitle{font-size:.88rem;}

  /* All grids → single column */
  .grid-2,.grid-3,.grid-4,.grid-auto{grid-template-columns:1fr;}

  /* Section header */
  .section-header{margin-bottom:var(--s3);}

  /* Buttons touch-friendly */
  .btn{min-height:44px;padding:10px var(--s3);}
  .btn-sm{min-height:36px;padding:6px var(--s2);}
  .btn-lg{min-height:48px;padding:12px var(--s4);}

  /* Nav brand text — keep full title visible, just slightly smaller */
  .nav-brand{font-size:.9rem;}
  .nav-logo{width:36px;height:36px;}

  /* Member card layout */
  .member-stats{gap:var(--s2);}

  /* Awards grid — smaller minimum so 2 fit on phone */
  .grid-auto{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}

  /* Stats bar → 2 cols */
  .stats-bar{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);}
  .stat-item{text-align:left;}

  /* Filter bar scrollable */
  .filter-bar{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;}
  .filter-bar::-webkit-scrollbar{height:2px;}
  .filter-btn{flex-shrink:0;}

  /* KB card */
  .kb-card{padding:var(--s2);}

  /* Dropzone smaller */
  .dropzone{padding:var(--s5) var(--s3);}
}

/* ── SMALL PHONE (≤480px) — scale brand text to fit full title ── */
@media(max-width:480px){
  .site-nav .nav-brand,.navbar .nav-brand{font-size:.82rem;}
}

/* ── SMALL PHONE (≤360px) ── */
@media(max-width:360px){
  .container,.container-sm{padding:0 12px;}
  .section-title{font-size:1.35rem;}
  .btn{font-size:.82rem;}
  .site-nav .nav-brand,.navbar .nav-brand{font-size:.72rem;}
  .hero-stat-num{font-size:1.6rem;}
}

/* ── INDEX PAGE: SECTION PADDING OVERRIDES (inline style targets) ── */
/* These target sections that use inline padding:5rem styles */
@media(max-width:768px){
  /* Feature section (white bg) */
  section.features,[style*="padding:5rem"],[style*="padding: 5rem"]{
    padding-top:2.5rem !important;
    padding-bottom:2.5rem !important;
  }
  /* Trips teaser */
  .trips-teaser{padding-top:2.5rem !important;padding-bottom:2.5rem !important;}
  /* Testimonials */
  .testimonials{padding-top:2.5rem !important;padding-bottom:2.5rem !important;}
  /* CTA Banner */
  .cta-banner{padding-top:2.5rem !important;padding-bottom:2.5rem !important;}
  /* Featured photos / Nikon creators sections */
  #nikon-creators-section,#featured-photos,#workshops-section,#events-teaser,
  #distinguished-members,#awards-section{
    padding-top:2.5rem !important;
    padding-bottom:2.5rem !important;
  }

  /* Hero fixes */
  .hero-slide{background-size:cover !important;}

  /* Hero stats bar — centered below text on mobile */
  .hero-stats{
    position:static !important;
    right:auto !important;
    transform:none !important;
    width:100%;
    border-radius:0 !important;
    justify-content:center;
    padding:.5rem 0 !important;
  }

  /* Hero content single column */
  .hero-content{
    grid-template-columns:1fr !important;
    padding:0 1rem 1.5rem !important;
  }
  .hero-credit{display:none !important;}

  /* Featured photos: hero+right → stack */
  .feat-grid-hero{grid-template-columns:1fr !important;}

  /* Featured bottom row: 5→2 */
  .feat-grid-bottom{grid-template-columns:repeat(2,1fr) !important;}

  /* Mosaic full-width first cell */
  .photo-mosaic{grid-template-columns:1fr 1fr !important;height:auto !important;}
  .photo-mosaic .mosaic-cell:first-child{grid-column:1/-1 !important;height:200px !important;}
  .photo-mosaic .mosaic-cell:not(:first-child){height:130px !important;}

  /* Awards grid min-width fix */
  [style*="minmax(310px"]{grid-template-columns:repeat(auto-fill,minmax(260px,1fr)) !important;}

  /* Trips stats row → 2 cols */
  .trips-stats-row{gap:1rem !important;}
  .trips-stat{flex-basis:calc(50% - .5rem);}

  /* Workshop spotlight single column */
  .workshop-grid,[style*="grid-template-columns:1fr auto"]{
    grid-template-columns:1fr !important;
  }

  /* CTA banner font */
  .cta-banner h2{font-size:1.6rem !important;}
  .cta-banner p{font-size:.9rem !important;}

  /* Features grid */
  .feat-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) !important;gap:1rem !important;margin-top:1.5rem !important;}
}

@media(max-width:480px){
  /* Hero */
  .hero{min-height:420px !important;max-height:unset !important;}
  .hero-slide{background-size:cover !important;}
  .hero h1{font-size:clamp(1.5rem,6vw,2.2rem) !important;}
  .hero p{font-size:.88rem !important;}
  .hero-cta{gap:.5rem !important;}
  .hero-cta .btn{padding:.65rem 1.25rem !important;font-size:.85rem !important;}
  .hero-dots{bottom:.65rem !important;}

  /* Hero stats bar compact */
  .hero-stats{flex-wrap:wrap !important;gap:0 !important;}
  .hero-stat{padding:.45rem .85rem !important;}
  .hero-stat span{font-size:1rem !important;}
  .hero-stat small{font-size:.58rem !important;}

  /* Featured photos: hero → full width, right col below */
  .feat-grid-hero{grid-template-columns:1fr !important;max-height:unset !important;}
  /* Bottom 5-column row → 2 on phone */
  .feat-grid-bottom{grid-template-columns:repeat(2,1fr) !important;gap:.5rem !important;}

  /* Nikon creators grid */
  #nc-grid{grid-template-columns:repeat(2,1fr) !important;gap:1rem !important;}

  /* Distinguished members → 1 col */
  [style*="minmax(250px"]{grid-template-columns:1fr !important;}

  /* Events teaser grid */
  [style*="minmax(240px"]{grid-template-columns:1fr !important;}

  /* Trips destinations */
  .trips-dest-grid{grid-template-columns:1fr 1fr !important;gap:.75rem !important;margin:1.5rem 0 !important;}
  .trips-stats-row{flex-direction:column !important;gap:.75rem !important;}
  .trips-stat{flex-basis:100% !important;}

  /* Test grid → 1 col */
  .test-grid{grid-template-columns:1fr !important;gap:1rem !important;margin-top:1.5rem !important;}

  /* Awards → 1 col on small phone */
  [style*="minmax(310px"]{grid-template-columns:1fr !important;}

  /* Section eyebrow */
  .section-eyebrow{font-size:.72rem !important;}

  /* Feat cards */
  .feat-card{padding:1.25rem 1rem !important;}
  .feat-icon{font-size:2rem !important;}
}

@media(max-width:360px){
  /* Absolute minimum phone — Galaxy A series, older iPhones */
  #nc-grid{grid-template-columns:1fr !important;}
  .trips-dest-grid{grid-template-columns:1fr !important;}
  .feat-grid-bottom{grid-template-columns:1fr 1fr !important;gap:.4rem !important;}
  .hero h1{font-size:1.4rem !important;}
  .hero-stat{padding:.35rem .6rem !important;}
  .hero-stat span{font-size:.95rem !important;}
}

/* ============================================================
   PAGE-SPECIFIC MOBILE FIXES (Gallery, About, KB, Trips, etc.)
   ============================================================ */

/* ── PAGE HERO (used on gallery, contests, kb, etc.) ── */
@media(max-width:768px){
  .page-hero{padding:2.5rem 1rem 2rem !important;}
  .page-hero h1{font-size:clamp(1.6rem,5vw,2.2rem) !important;}
  .page-hero p{font-size:.9rem !important;}
  /* fb-hero (feedback.html) and mp-hero (marketplace.html) — same treatment */
  .fb-hero{padding:2.5rem 1rem 2rem !important;}
  .fb-hero h1{font-size:clamp(1.6rem,5vw,2.2rem) !important;}
  .mp-hero{padding:2.5rem 1rem 1.5rem !important;}
  .guide-hero{padding:2.5rem 1rem 2rem !important;}
}
@media(max-width:480px){
  .page-hero{padding:2rem .75rem 1.5rem !important;}
  .page-hero h1{font-size:clamp(1.4rem,6vw,1.9rem) !important;}
  .fb-hero{padding:2rem .75rem 1.5rem !important;}
  .mp-hero{padding:2rem .75rem 1rem !important;}
}

/* ── KNOWLEDGE BASE — sidebar+content grid collapse ── */
@media(max-width:768px){
  .kb-hero{padding:2.5rem 1rem 2rem !important;}
  .kb-hero h1{font-size:clamp(1.6rem,5vw,2.2rem) !important;}
  .kb-wrap{grid-template-columns:1fr !important;gap:1.5rem !important;padding:1.5rem 1rem 3rem !important;}
  .kb-sidebar{position:static !important;}
  .vl-grid{grid-template-columns:1fr !important;}
}
@media(max-width:480px){
  .kb-hero{padding:2rem .75rem 1.5rem !important;}
  .kb-wrap{padding:1rem .75rem 2rem !important;}
  .kb-empty{padding:2rem 1rem !important;}
}

/* ── GALLERY ── */
@media(max-width:768px){
  .gallery-grid,[class*="gallery-grid"]{grid-template-columns:repeat(auto-fill,minmax(200px,1fr)) !important;}
}
@media(max-width:480px){
  .gallery-grid,[class*="gallery-grid"]{grid-template-columns:repeat(2,1fr) !important;}
}

/* ── TRIPS ── */
@media(max-width:768px){
  .dest-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr)) !important;gap:1rem !important;}
  .trip-hero,.trips-hero{padding:2.5rem 1rem 2rem !important;}
  .modal-2col{grid-template-columns:1fr !important;}
}
@media(max-width:480px){
  .dest-grid{grid-template-columns:1fr !important;}
}

/* ── EVENTS ── */
@media(max-width:768px){
  .events-grid,[class*="events"]{gap:1rem !important;}
}
@media(max-width:480px){
  [style*="minmax(300px"]{grid-template-columns:1fr !important;}
}

/* ── MARKETPLACE ── */
@media(max-width:768px){
  [style*="minmax(290px"]{grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important;}
  /* Tab row inside the hero: make it horizontally scrollable on phones */
  .mp-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap !important;}
  .mp-tabs::-webkit-scrollbar{display:none;}
  .mp-tab{flex-shrink:0;padding:.9rem 1.1rem !important;font-size:.82rem !important;}
  /* Toolbar: wrap chips above the sort select on small screens */
  .mp-toolbar{flex-direction:column;align-items:flex-start !important;}
  .mp-filter-chips{width:100%;}
  /* Body wrap padding */
  .mp-body{padding:1.75rem 1rem 4rem !important;}
}
@media(max-width:480px){
  [style*="minmax(290px"]{grid-template-columns:1fr !important;}
  .mp-tab{padding:.8rem .85rem !important;font-size:.78rem !important;}
}

/* ── CONTESTS ── */
@media(max-width:768px){
  .contests-hero,[class*="contest-hero"]{padding:2.5rem 1rem 2rem !important;}
  .contests-hero h1{font-size:clamp(1.6rem,5vw,2.2rem) !important;}
  .contest-banner{height:110px !important;}
}
@media(max-width:480px){
  .contests-hero{padding:2rem .75rem 1.5rem !important;}
  .contest-card .card-body{padding:var(--s2) !important;}
}

/* ── ABOUT ── */
@media(max-width:768px){
  .about-hero,[class*="about-hero"]{padding:2.5rem 1rem 2rem !important;}
  /* About values/stats grid */
  [style*="padding: 5rem 1.5rem"]{padding:2.5rem 1rem !important;}
  [style*="padding:5rem 1.5rem"]{padding:2.5rem 1rem !important;}
  /* About page class-based sections */
  .about-body{padding:2.5rem 1rem !important;}
  .values-section{padding:2.5rem 1rem !important;}
  .values-header{margin-bottom:1.5rem !important;}
  .nikon-band{padding:2rem 1rem !important;}
  /* Sections with background and large padding (about leadership, timeline etc.) */
  .timeline-section,.leadership-section,.gear-section,.location-section{
    padding:2.5rem 1rem !important;
  }
}
@media(max-width:480px){
  .about-body{padding:2rem .75rem !important;}
  .values-section{padding:2rem .75rem !important;}
  .nikon-band{padding:1.5rem .75rem !important;}
}

/* ── DIRECTORY ── */
@media(max-width:768px){
  [style*="minmax(280px"]{grid-template-columns:repeat(auto-fill,minmax(200px,1fr)) !important;}
}
@media(max-width:480px){
  [style*="minmax(280px"]{grid-template-columns:repeat(2,1fr) !important;}
}

/* ── LOGIN / JOIN ── */
@media(max-width:480px){
  .container-sm{padding:0 var(--s2);}
  .form-control{padding:10px var(--s2);}
}

/* ── MEMBER PROFILE ── */
@media(max-width:768px){
  .fp-results{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important;}
  /* Profile hero: reduce large padding to prevent excessive blank space */
  .profile-hero{padding:2.5rem 1rem 2rem !important;}
}
@media(max-width:480px){
  .fp-results{grid-template-columns:repeat(2,1fr) !important;}
  [style*="minmax(160px"]{grid-template-columns:repeat(2,1fr) !important;}
  .profile-hero{padding:2rem .75rem 1.5rem !important;}
}

/* ── UNIVERSAL INLINE SECTION PADDING OVERRIDES ── */
/* Catches any section with padding:5rem or 4rem or 6rem set via inline style */
@media(max-width:768px){
  [style*="padding:5rem"],[style*="padding: 5rem"]{padding-top:2.5rem !important;padding-bottom:2.5rem !important;}
  [style*="padding:4rem"],[style*="padding: 4rem"]{padding-top:2rem !important;padding-bottom:2rem !important;}
  [style*="padding:6rem"],[style*="padding: 6rem"]{padding-top:2.75rem !important;padding-bottom:2.75rem !important;}
}
@media(max-width:480px){
  [style*="padding:5rem"],[style*="padding: 5rem"]{padding-top:2rem !important;padding-bottom:2rem !important;}
  [style*="padding:4rem"],[style*="padding: 4rem"]{padding-top:1.5rem !important;padding-bottom:1.5rem !important;}
  [style*="padding:6rem"],[style*="padding: 6rem"]{padding-top:2rem !important;padding-bottom:2rem !important;}
}

/* ── TOUCH TARGETS — minimum 44px on all interactive elements ── */
@media(max-width:768px){
  button:not(.nav-hamburger):not(.hero-dot):not(.filter-btn),
  .btn,a.btn,[role="button"]{min-height:44px;}
  input[type="checkbox"],input[type="radio"]{width:20px;height:20px;}
  select.form-control{min-height:44px;}
}

/* ── iOS / SAFARI GLOBAL FIXES ─────────────────────────────────────── */

/* 1. Remove the grey/blue tap-highlight flash Safari shows on every tap.
      Without this the hamburger button and links look unresponsive on iPhone. */
*{-webkit-tap-highlight-color:transparent;}

/* 2. Prevent the 300ms tap delay on interactive elements (Safari legacy). */
a,button,[onclick],[role="button"],.filter-chip,.nav-hamburger,.react-btn,
.g-comment-btn,.filter-btn,.filter-bar button{touch-action:manipulation;}

/* 3. Prevent iOS auto-zoom when a text input is focused.
      Safari zooms in when font-size < 16px; this shift makes the navbar
      appear to jump/disappear. Scoped to mobile only so desktop
      input typography is unchanged. */
@media(max-width:768px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
  textarea,
  select{font-size:16px !important;}
}

/* 4. Momentum scrolling on all horizontally/vertically scrollable regions. */
#nav-mobile-menu,
.admin-tabs,
.filter-bar,
.tbl-wrap,
.kb-tabs,
.fb-submissions-list{-webkit-overflow-scrolling:touch;}

/* 5. Hide scrollbars on swipeable rows (tabs/filter bars) — they
      scroll on swipe but the scrollbar track looks wrong on mobile. */
.admin-tabs::-webkit-scrollbar,
.filter-bar::-webkit-scrollbar,
.kb-tabs::-webkit-scrollbar{display:none;}
.admin-tabs,.filter-bar,.kb-tabs{scrollbar-width:none;}

/* ── PREVENT HORIZONTAL OVERFLOW ── */
*{max-width:100%;box-sizing:border-box;}
img,video,iframe,embed,object{max-width:100%;}
pre,code{overflow-x:auto;max-width:100%;}
table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
/* Exempt fixed/absolute positioned elements from max-width constraint */
.site-nav,.navbar,
#nav-mobile-menu,
.avatar-dropdown,
.nav-dropdown-menu,
[style*="position:fixed"],[style*="position: fixed"]{max-width:none !important;}

/* ── iOS SAFE AREA (notch / Dynamic Island support) ──────────────────
   viewport-fit=cover in the <meta name="viewport"> tag is required.
   env(safe-area-inset-top) = 0px on Android / desktop.
   On iPhone X–15 Pro it ranges from ~44px to ~59px.
   ──────────────────────────────────────────────────────────────────── */
@supports(padding-top: env(safe-area-inset-top)){

  /* Grow the navbar so it fills the status-bar area (notch / island). */
  .site-nav,.navbar{
    height:calc(var(--nav-h) + env(safe-area-inset-top,0px));
    padding-top:env(safe-area-inset-top,0px);
  }

  /* Pages that use the .page-body wrapper get the right top offset. */
  .page-body{
    padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px));
  }

  /* ── Mobile drawer: start just below the (now taller) navbar ──────
     Bug without this fix: the drawer overlaps the bottom of the navbar
     on notch / Dynamic Island iPhones (drawer top = 64px but nav
     bottom = 64px + 47–59px safe area). */
  #nav-mobile-menu{
    top:calc(var(--nav-h) + env(safe-area-inset-top,0px)) !important;
    /* Use 100dvh (dynamic viewport height) so the drawer doesn't extend
       behind Safari's address bar. Falls back to 100vh on older iOS. */
    max-height:calc(100dvh - var(--nav-h)
                    - env(safe-area-inset-top,0px)
                    - env(safe-area-inset-bottom,0px)) !important;
    /* Reserve space for the home-indicator bar at the bottom. */
    padding-bottom:calc(1.5rem + env(safe-area-inset-bottom,0px)) !important;
  }

  /* ── Page hero / header sections: push content below the taller nav ─
     Pages like the Gallery, Knowledge Base, Marketplace, Feedback use
     .page-hero with a fixed padding-top (4–5rem). When the navbar
     grows taller on iPhone the hero content would slide behind it.
     Adding margin-top equal to the safe-area shifts the whole section
     down without changing its internal padding. The body and the
     section share the same dark background so no gap is visible. */
  /* Covers ALL first-section hero/header variants across every page:
     .page-hero / .page-header  — gallery, contests, about, events, trips…
     .fb-hero                   — feedback.html
     .mp-hero                   — marketplace.html
     .kb-hero                   — knowledge-base.html
     .guide-hero                — guide.html
     .profile-hero              — member-profile.html */
  .page-hero,
  .page-header,
  .fb-hero,
  .mp-hero,
  .kb-hero,
  .guide-hero,
  .profile-hero{
    margin-top:env(safe-area-inset-top,0px) !important;
  }

  /* ── Hero (home page): same treatment ── */
  .hero{
    padding-top:env(safe-area-inset-top,0px);
    min-height:calc(100dvh - var(--nav-h) - env(safe-area-inset-top,0px));
  }
}

/* ── 100dvh fallback for older iOS (pre-15.4) ──────────────────────
   100vh in Safari = full page height including browser chrome (address
   bar). 100dvh = visible viewport only. Use dvh where supported. */
.hero{
  min-height:calc(100vh - var(--nav-h));  /* safe fallback */
  min-height:calc(100dvh - var(--nav-h)); /* iOS 15.4+ / modern Android */
}
#nav-mobile-menu{
  max-height:calc(100vh - var(--nav-h));  /* safe fallback */
  max-height:calc(100dvh - var(--nav-h)); /* modern */
}

/* ══════════════════════════════════════════════════════════════════════
   ADDITIONAL MOBILE RESPONSIVENESS — phones 480px and below
   ══════════════════════════════════════════════════════════════════════ */

/* ── Upload page ── */
@media(max-width:600px){
  /* Drop zone: cut the heavy padding so it doesn't dominate the screen */
  .drop-zone{padding:1.75rem 1.25rem !important;}
  /* Requirements grid: single column on small phones */
  .pg-grid{grid-template-columns:1fr 1fr !important;}
}
@media(max-width:400px){
  .pg-grid{grid-template-columns:1fr !important;}
}

/* ── Admin panel ── */
@media(max-width:600px){
  /* Reduce the admin tab bar side padding so more tabs fit without scrolling */
  .admin-tabs{padding:0 .5rem !important;}
  /* Compress the admin content area on phones */
  .admin-main{padding:1rem .75rem 4rem !important;}
  /* Show icon only on very small screens to save tab bar width */
  .admin-tab .tab-label{display:none;}
}
@media(max-width:400px){
  .admin-tab{padding:.85rem .6rem !important;font-size:.75rem !important;}
}

/* ── Dashboard ── */
@media(max-width:480px){
  /* Stats row: 2 columns on small phones */
  .stats-row{grid-template-columns:1fr 1fr !important;}
  .stat-box{padding:1rem .85rem !important;}
  .stat-box .stat-val{font-size:1.6rem !important;}
}
@media(max-width:360px){
  /* 1 column on the very smallest phones */
  .stats-row{grid-template-columns:1fr !important;}
}

/* ── Gallery photo modal ── */
@media(max-width:480px){
  /* Give the comment/critique panel more vertical room on small phones */
  .pm2-side{max-height:55vh !important;}
  /* Tighten modal meta padding */
  .pm2-meta{padding:.9rem 1rem .7rem !important;}
  .pm2-meta h3{font-size:.95rem !important;}
  /* Make reaction buttons smaller */
  .react-btn{padding:.3rem .45rem !important;font-size:.82rem !important;}
}

/* ── Member profile ── */
@media(max-width:480px){
  .member-hero{padding:2rem 1rem 1.5rem !important;}
  .member-avatar{width:72px !important;height:72px !important;font-size:1.6rem !important;}
  .member-name{font-size:1.3rem !important;}
}

/* ── Knowledge Base ── */
@media(max-width:480px){
  .kb-article-grid{grid-template-columns:1fr !important;}
  .vl-grid{grid-template-columns:1fr !important;}
}

/* ── Forms (join, login, feedback) ── */
@media(max-width:480px){
  .form-group{margin-bottom:1rem !important;}
  /* Reduce vertical spacing in stacked form cards */
  .fb-card,.upload-card{padding:1.25rem !important;}
}

/* ── Contests & Events ── */
@media(max-width:480px){
  .contest-card .card-body{padding:.85rem !important;}
  .event-card{padding:1rem !important;}
}

/* ── Nav brand: shorten on very small screens ──────────────────────
   "Nikon Z Flagship Camera Community" (35 chars) overflows below 360px.
   The brand span in buildNav() has no .nav-brand-text class, so target
   .nav-brand span directly and constrain width so ellipsis kicks in. */
@media(max-width:360px){
  .site-nav .nav-brand{gap:.6rem !important;}
  /* Shorten displayed name via text truncation */
  .site-nav .nav-brand span,.navbar .nav-brand span,.nav-brand-text{
    max-width:150px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

/* ── Global: prevent any element from creating horizontal scroll ── */
@media(max-width:768px){
  /* Ensure inline style sections don't overflow */
  [style*="min-width"]{min-width:0 !important;}
  /* Long words / URLs in text blocks should break */
  p,li,td,th,blockquote{overflow-wrap:break-word;word-break:break-word;}
}

/* ══════════════════════════════════════════════════════════════════════
   CROSS-DEVICE AUDIT FIXES — iPhone / Android / Samsung Tab / iPad
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. iOS Safe-Area: fix ALL sticky secondary bars below the navbar ──
   Every page-local tab bar, filter bar, and step bar uses
   top:var(--nav-h). On iPhone X–15 Pro the fixed navbar is taller by
   env(safe-area-inset-top), so without this fix those bars visually
   overlap the bottom of the navbar on notch / Dynamic Island devices.

   Classes covered (with source page):
     .tab-bar          — contests.html
     .event-tabs       — events.html
     .kb-top-tabs      — knowledge-base.html
     .continent-tabs   — trips.html
     .tab-nav          — guidelines.html
     .quick-nav        — terms.html
     .steps-bar        — contest-entry.html
     .filter-bar       — directory.html (and global filter bar component)
   The !important flag ensures page-local <style> blocks are overridden. */
@supports(padding-top: env(safe-area-inset-top)){
  .tab-bar,
  .event-tabs,
  .kb-top-tabs,
  .continent-tabs,
  .tab-nav,
  .quick-nav,
  .steps-bar,
  .filter-bar,
  .admin-tabs{
    top:calc(var(--nav-h) + env(safe-area-inset-top,0px)) !important;
  }
  /* knowledge-base.html secondary toolbar sits 54px below kb-top-tabs */
  .vl-toolbar{
    top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 54px) !important;
  }
}

/* ── 2. Gallery grid: show overlay & like-btn on touch devices ──────────
   Hover is not available on touch screens. Without this, the reaction
   bar, like button, and comment button inside .gallery-item are invisible
   on all iOS and Android devices — users could tap to open a photo but
   had no way to react or comment directly from the grid view.
   The @media(hover:none) query targets touch-primary devices (pointer
   events are 'coarse' on mobile) without affecting desktop. */
@media(hover:none){
  /* Show the gradient overlay at reduced opacity so it doesn't
     dominate the photo but makes the action buttons legible */
  .gallery-item .g-overlay{
    opacity:1;
    background:linear-gradient(to top,rgba(0,0,0,.6) 0%,transparent 45%);
  }
  /* Make the like button always visible in the top-right corner */
  .like-btn{opacity:.85;}
}

/* ── 3. Gallery: full-width search input on phones ──────────────────────
   The fixed width:220px search box becomes too narrow relative to the
   filter chip row on phones, and margin-left:auto pushes it off-screen
   when chips wrap. Full-width on ≤600px gives a cleaner stacked layout.*/
@media(max-width:600px){
  .search-wrap{width:100%;margin-left:0;margin-top:.35rem;}
  .search-wrap input{width:100% !important;min-width:0 !important;box-sizing:border-box;}
}

/* ── 4. Contests: cc-meta 3-column grid → 1 col on tiny phones ──────────
   At 320–360px screen width the three equal columns in .cc-meta
   (entries / prizes / format) become cramped (~100px each).
   On very small phones stack them vertically for legibility. */
@media(max-width:400px){
  .cc-meta{grid-template-columns:1fr !important;}
}

/* ── 5. Tablet (768-1024px): ensure key grids use 2 columns ─────────────
   iPad and Samsung Tab sit between the phone (≤480px) and desktop
   (≥1024px) breakpoints. The existing 960px rule handles most grids
   but a few specific patterns need a nudge. */
@media(min-width:601px) and (max-width:900px){
  /* Dashboard stats: 4 cols → 2 cols on tablets */
  .stats-row{grid-template-columns:repeat(2,1fr) !important;}
  /* Contest card meta: 3 cols stays on tablet — fine at 900px */
}

/* ── 6. Galaxy-fold / very narrow phones (≤320px) ───────────────────────
   For Galaxy Z Fold outer screen (320px) and similar ultra-narrow views */
@media(max-width:320px){
  .container,.container-sm{padding:0 10px;}
  .nav-brand-text{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .btn,.btn-lg{padding:10px var(--s2);font-size:.8rem;}
}