/* Rotary Club Budapest-City — production stylesheet.
   Ported from the design handoff prototype (design_handoff_club_website/club-website.html).
   Design is deliberately squared: no border-radius, no box-shadow anywhere. */

:root{
  --blue:#17458F;--blue-deep:#17458F;--ink:#0A1F3A;
  --gold:#F7A81B;--gold-soft:#F7A81B;
  --paper:#FAF7F2;--paper-2:#F0EBE0;--white:#fff;
  --muted:#5C6B82;--nav-h:68px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.5;}
a{text-decoration:none;color:inherit;}
img{display:block;max-width:100%;}
button{cursor:pointer;font:inherit;}
.muted-45{color:rgba(255,255,255,0.45);}

/* ====== ACCESSIBILITY ====== */
.skip-link{
  position:absolute;left:12px;top:-48px;z-index:2000;
  background:var(--gold);color:var(--blue-deep);
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;
  padding:10px 16px;transition:top .15s;
}
.skip-link:focus{top:12px;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;
}
.section-ink :focus-visible,.hero :focus-visible,.pg-hero :focus-visible,.cta-strip :focus-visible,#site-nav :focus-visible,footer :focus-visible{
  outline-color:var(--gold-soft);
}

/* ====== NAV ====== */
#site-nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);
  background:var(--blue-deep);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 56px;z-index:1000;
  border-bottom:2px solid var(--gold);
}
.nav-logo{
  font-family:'Source Serif 4',serif;font-weight:500;font-size:17px;
  color:var(--white);letter-spacing:-0.01em;flex-shrink:0;
}
.nav-logo em{color:var(--gold);font-style:normal;}
/* display:contents keeps #nav-links and .lang-pill as direct flex children
   of #site-nav on desktop (space-between across 3 items, matching the
   prototype exactly); only at the mobile breakpoint does this become a real
   box (the dropdown panel). */
.nav-main{display:contents;}
#nav-links{display:flex;gap:28px;align-items:center;}
#nav-links a{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(255,255,255,0.6);transition:color .15s;
}
#nav-links a:hover,#nav-links a.active{color:var(--gold);}
.lang-pill{display:flex;border:1px solid rgba(247,168,27,0.45);}
.lang-pill a{
  display:block;background:none;border:none;padding:7px 14px;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.5);transition:all .15s;
}
.lang-pill a:hover{color:var(--gold-soft);}
.lang-pill a.active{background:var(--gold);color:var(--blue-deep);}
.lang-pill a.active:hover{color:var(--blue-deep);}

/* Mobile nav toggle (hamburger) — hidden on desktop */
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:32px;height:32px;background:none;border:none;padding:0;margin-left:16px;
}
.nav-toggle span{display:block;width:100%;height:2px;background:var(--white);transition:transform .18s,opacity .18s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ====== LAYOUT ====== */
main{padding-top:var(--nav-h);min-height:100vh;}
.section{padding:88px 88px;}
.section-white{background:var(--white);}
.section-paper{background:var(--paper);}
.section-paper2{background:var(--paper-2);}
.section-blue{background:var(--blue);color:var(--white);}
.section-ink{background:var(--blue);color:var(--white);}

/* ====== TYPE ====== */
.eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:12px;
  letter-spacing:0.28em;text-transform:uppercase;color:var(--gold);
  margin-bottom:16px;
}
.eyebrow.inv{color:var(--gold-soft);}
.sec-title{
  font-family:'Source Serif 4',serif;font-weight:380;
  font-size:clamp(32px,3.6vw,54px);letter-spacing:-0.015em;line-height:1.1;
  color:var(--blue-deep);margin-bottom:20px;
}
.sec-title.inv{color:var(--white);}
.sec-body{font-size:17px;line-height:1.7;color:#2e3d58;max-width:620px;}
.sec-body.inv{color:rgba(255,255,255,0.7);}
.gold-rule{width:56px;height:2px;background:var(--gold);margin-bottom:28px;}

/* ====== HERO ====== */
.hero{
  background:var(--blue-deep);
  min-height:calc(100vh - var(--nav-h));
  padding:100px 88px 80px;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(
    -45deg,transparent,transparent 64px,
    rgba(247,168,27,0.035) 64px,rgba(247,168,27,0.035) 65px);
}
.hero::after{
  content:'';position:absolute;right:-120px;top:50%;transform:translateY(-50%);
  width:560px;height:560px;border-radius:50%;
  border:1px solid rgba(247,168,27,0.12);
}
.hero-inner{position:relative;z-index:1;max-width:840px;}
.hero-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:12px;
  letter-spacing:0.3em;text-transform:uppercase;color:var(--gold);
  margin-bottom:36px;
}
.hero h1{
  font-family:'Source Serif 4',serif;font-weight:340;
  font-size:clamp(52px,6.5vw,100px);
  line-height:1.0;letter-spacing:-0.025em;color:var(--white);
  margin-bottom:36px;
}
.hero h1 em{font-style:italic;color:var(--gold-soft);}
.hero-sub{font-size:18px;line-height:1.65;color:rgba(255,255,255,0.65);max-width:500px;margin-bottom:52px;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}
.hero-aside{
  position:absolute;bottom:60px;right:88px;text-align:right;z-index:1;
}
.hero-aside .k{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;
}
.hero-aside .v{font-family:'Source Serif 4',serif;font-size:20px;color:rgba(255,255,255,0.75);line-height:1.4;}

/* ====== PAGE HERO ====== */
.pg-hero{
  background:var(--blue-deep);padding:72px 88px 64px;
  position:relative;overflow:hidden;
}
.pg-hero::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(
    -45deg,transparent,transparent 64px,
    rgba(247,168,27,0.035) 64px,rgba(247,168,27,0.035) 65px);
}
.pg-hero .eyebrow{position:relative;}
.pg-hero h2{
  font-family:'Source Serif 4',serif;font-weight:340;
  font-size:clamp(36px,4.5vw,66px);color:var(--white);
  letter-spacing:-0.015em;line-height:1.05;position:relative;
  max-width:760px;
}

/* ====== BUTTONS ====== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:0.22em;text-transform:uppercase;
  padding:15px 32px;border:none;transition:all .18s;
}
.btn-gold{background:var(--gold);color:var(--blue-deep);}
.btn-gold:hover{background:var(--gold-soft);}
.btn-outline{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,0.36);}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);}
.btn-blue{background:var(--blue);color:var(--white);}
.btn-blue:hover{background:var(--blue-deep);}
.btn-white{background:var(--white);color:var(--blue);}
.btn-white:hover{background:var(--paper);}
.btn:disabled{opacity:0.6;cursor:not-allowed;}

/* ====== CARDS ====== */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2px;margin-top:52px;}
.card{
  background:var(--white);padding:44px 38px;
  border:1px solid rgba(23,69,143,0.1);
  display:flex;flex-direction:column;
}
.card-tag{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;
}
.card-h{
  font-family:'Source Serif 4',serif;font-weight:500;
  font-size:24px;line-height:1.2;color:var(--blue-deep);margin-bottom:14px;
}
.card-p{font-size:14px;line-height:1.65;color:#3a4a66;flex-grow:1;margin-bottom:28px;}
.card-link{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--blue);
  display:inline-flex;align-items:center;gap:8px;transition:color .15s;
  background:none;border:none;padding:0;
}
.card-link::after{content:'→';}
.card-link:hover{color:var(--gold);}

/* ====== CTA STRIP ====== */
.cta-strip{
  background:var(--blue);padding:72px 88px;
  display:flex;align-items:center;justify-content:space-between;gap:40px;
  flex-wrap:wrap;
}
.cta-strip h3{
  font-family:'Source Serif 4',serif;font-weight:340;
  font-size:clamp(26px,3vw,44px);color:var(--white);letter-spacing:-0.01em;max-width:580px;
}
.cta-strip h3 em{color:var(--gold-soft);font-style:italic;}
.cta-strip-side{display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
.cta-strip-side p{color:rgba(255,255,255,0.62);font-size:16px;max-width:300px;}

/* ====== TWO-COL ====== */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start;}
.two-col-lg{display:grid;grid-template-columns:5fr 4fr;gap:80px;align-items:start;}

/* ====== ABOUT VALUES ====== */
.values-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:48px;}
.val-card{
  background:rgba(255,255,255,0.07);padding:40px 36px;
  border:1px solid rgba(247,168,27,0.18);
}
.val-title{
  font-family:'Source Serif 4',serif;font-size:22px;font-weight:500;
  color:var(--white);margin-bottom:10px;
}
.val-body{font-size:14px;line-height:1.6;color:rgba(255,255,255,0.58);}

/* ====== BOARD ====== */
.board-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.board-year{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.18em;color:var(--gold);}

/* ====== TEAM ====== */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:28px;margin-top:52px;}
.team-card{background:var(--white);border:1px solid rgba(23,69,143,0.1);}
.team-card .img-ph{width:100%;aspect-ratio:3/4;}
.team-info{padding:24px 26px 28px;}
.team-role{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);margin-bottom:6px;
}
.team-name{font-family:'Source Serif 4',serif;font-weight:500;font-size:20px;color:var(--blue-deep);margin-bottom:4px;}
.team-meta{font-size:12px;color:var(--muted);}

/* ====== GALLERY ====== */
.gallery-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:52px;
}
.gallery-grid .img-ph{width:100%;aspect-ratio:4/3;}

/* ====== NEWS ====== */
.news-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:52px;}
.news-card{background:var(--white);border:1px solid rgba(23,69,143,0.1);display:flex;flex-direction:column;}
.news-card .img-ph{width:100%;aspect-ratio:16/9;}
.news-body{padding:36px 32px;flex-grow:1;display:flex;flex-direction:column;}
.news-date{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;
}
.news-h{
  font-family:'Source Serif 4',serif;font-weight:500;
  font-size:22px;line-height:1.2;color:var(--blue-deep);margin-bottom:12px;
}
.news-p{font-size:14px;line-height:1.65;color:#3a4a66;flex-grow:1;margin-bottom:20px;}

/* ====== IMAGE PLACEHOLDER ======
   Stands in for real photography (see /images/README.txt). Replace the
   containing element with a plain <img> once the club supplies real assets —
   keep the same aspect-ratio so surrounding grids don't reflow. */
.img-ph{
  width:100%;display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--paper-2);border:1px dashed rgba(23,69,143,0.28);
  padding:16px;
}
.img-ph.ar-4-3{aspect-ratio:4/3;}
.img-ph.ar-3-4{aspect-ratio:3/4;}
.img-ph.ar-16-9{aspect-ratio:16/9;}
.img-ph span{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);
  line-height:1.5;
}
.section-ink .img-ph,.hero .img-ph{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.22);}
.section-ink .img-ph span,.hero .img-ph span{color:rgba(255,255,255,0.5);}

/* ====== EVENTS ====== */
.event-list{margin-top:40px;display:grid;gap:0;}
.event-row{
  display:grid;grid-template-columns:80px 1fr;gap:28px;
  padding:26px 0;border-top:1px solid rgba(23,69,143,0.12);align-items:start;
}
.event-row:last-child{border-bottom:1px solid rgba(23,69,143,0.12);}
.ev-date-day{
  font-family:'Source Serif 4',serif;font-style:italic;
  font-size:38px;font-weight:300;color:var(--gold);line-height:1;
}
.ev-date-mo{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);
}
.ev-title{
  font-family:'Source Serif 4',serif;font-weight:500;
  font-size:20px;color:var(--blue-deep);margin-bottom:4px;
}
.ev-meta{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.1em;color:var(--muted);}

/* ====== CALENDAR PLACEHOLDER ====== */
.cal-placeholder{
  background:var(--paper-2);border:1px solid rgba(23,69,143,0.14);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:20px;margin-top:48px;padding:64px;min-height:420px;
}
.cal-icon{
  width:56px;height:60px;border:2px solid var(--blue);overflow:hidden;display:flex;flex-direction:column;
}
.cal-icon-top{background:var(--blue);height:18px;flex-shrink:0;}
.cal-icon-grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:3px;}
.cal-icon-grid div{background:rgba(23,69,143,0.18);}
.cal-note{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);
  max-width:400px;line-height:1.9;
}

/* ====== FORMS ====== */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px;max-width:680px;}
.form-grid.form-grid-1{grid-template-columns:1fr;margin-top:24px;max-width:100%;}
.form-grid .full{grid-column:1/-1;}
.fg{display:flex;flex-direction:column;gap:7px;}
.fg label{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--blue);
}
.fg input,.fg textarea,.fg select{
  border:1px solid rgba(23,69,143,0.28);background:var(--white);
  padding:13px 15px;font-family:'Inter',sans-serif;font-size:15px;
  color:var(--ink);outline:none;transition:border-color .15s;
}
.fg input:focus,.fg textarea:focus{border-color:var(--blue);}
.fg input:invalid:not(:placeholder-shown){border-color:#b3261e;}
.fg textarea{resize:vertical;min-height:110px;}
.fg textarea.tall{min-height:150px;}
.form-status{
  margin-top:20px;padding:16px 20px;border-left:3px solid var(--gold);background:var(--paper);
  font-size:14px;line-height:1.6;max-width:680px;display:none;
}
.form-status.is-visible{display:block;}
.form-status.is-err{border-left-color:#b3261e;}
.form-status a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;}

/* ====== JOIN STEPS ====== */
.join-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:52px;}
.join-step{background:var(--white);padding:44px 34px;border:1px solid rgba(23,69,143,0.1);}
.join-num{
  font-family:'Source Serif 4',serif;font-style:italic;font-weight:300;
  font-size:60px;color:var(--gold);line-height:1;margin-bottom:20px;
}
.join-h{font-family:'Source Serif 4',serif;font-weight:500;font-size:20px;color:var(--blue-deep);margin-bottom:10px;}
.join-p{font-size:14px;line-height:1.6;color:#3a4a66;}

/* ====== CONTACT ====== */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;}
.cinfo-item{margin-bottom:36px;}
.cinfo-label{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);margin-bottom:7px;
}
.cinfo-val{font-family:'Source Serif 4',serif;font-size:20px;color:var(--blue-deep);line-height:1.4;}
.cinfo-val a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;}
.cinfo-val a:hover{color:var(--gold);}
.map-ph{
  background:var(--paper-2);border:1px solid rgba(23,69,143,0.14);
  height:260px;display:flex;align-items:center;justify-content:center;
  margin-top:36px;
}
.map-ph span{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:0.2em;color:var(--muted);text-transform:uppercase;
}

/* ====== QUOTE BLOCK ====== */
.quote-block{
  padding:40px 44px;background:var(--paper);
  border-left:3px solid var(--gold);margin-top:36px;
}
.quote-label{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--gold);margin-bottom:10px;
}
.quote-text{
  font-family:'Source Serif 4',serif;font-style:italic;
  font-size:28px;color:var(--blue-deep);line-height:1.25;
}

/* ====== FOOTER ====== */
footer{
  background:var(--blue);color:rgba(255,255,255,0.6);
  padding:72px 88px 44px;
}
.footer-top{
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:56px;
  padding-bottom:48px;margin-bottom:36px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.footer-brand h3{
  font-family:'Source Serif 4',serif;font-weight:500;font-size:20px;
  color:var(--white);margin-bottom:12px;
}
.footer-brand h3 em{color:var(--gold);font-style:normal;}
.footer-brand p{font-size:13px;line-height:1.7;max-width:280px;margin-bottom:24px;}
.footer-social{display:flex;gap:10px;}
.footer-social a{
  width:34px;height:34px;border:1px solid rgba(255,255,255,0.18);
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  color:rgba(255,255,255,0.5);transition:all .15s;
}
.footer-social a:hover{border-color:var(--gold);color:var(--gold);}
.footer-col h4{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;
}
.footer-col ul{list-style:none;display:grid;gap:9px;}
.footer-col ul li a{font-size:13px;color:rgba(255,255,255,0.55);transition:color .15s;}
.footer-col ul li a:hover{color:var(--gold);}
.footer-col address{font-style:normal;font-size:13px;line-height:1.8;}
.footer-col address a{color:rgba(255,255,255,0.75);text-decoration:underline;text-underline-offset:2px;}
.footer-col address a:hover{color:var(--gold);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:0.14em;color:rgba(255,255,255,0.3);
  flex-wrap:wrap;gap:12px;
}

/* ====== TRANSITIONS ====== */
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: no-preference){
  main #content-fade{animation:fadein .28s ease;}
}

/* ====== RESPONSIVE ====== */
/* The full nav row (logo + 9 links + EN/HU pill, longest of EN/HU measured)
   needs ~1272px before it fits without overlapping — verified by measuring
   rendered content width, not guessed. 1320px gives a safety margin. This is
   its own breakpoint (wider than the 960px one below) because the overlap
   starts well above typical tablet/small-laptop widths, not just on phones. */
@media(max-width:1320px){
  .nav-toggle{display:flex;}
  .nav-main{
    position:absolute;top:100%;left:0;right:0;
    background:var(--blue-deep);border-bottom:2px solid var(--gold);
    flex-direction:column;align-items:stretch;gap:0;
    display:none;
  }
  .nav-main.is-open{display:flex;}
  #nav-links{flex-direction:column;align-items:stretch;gap:0;}
  #nav-links a{padding:16px 24px;font-size:11px;border-top:1px solid rgba(255,255,255,0.08);}
  /* align-self overrides .nav-main's align-items:stretch -- without it the
     bordered pill stretches to the dropdown's full width while the EN/HU
     buttons inside stay content-sized, leaving a big empty bordered gap. */
  .lang-pill{align-self:flex-start;margin:16px 24px 20px;}
}
@media(max-width:960px){
  #site-nav{padding:0 24px;}
  .section,.hero,.pg-hero,.cta-strip{padding-left:32px;padding-right:32px;}
  .hero{padding:72px 32px 60px;}
  .pg-hero{padding:56px 32px 48px;}
  .cta-strip{padding:56px 32px;}
  footer{padding:56px 32px 36px;}
  .two-col,.contact-layout,.news-grid{grid-template-columns:1fr;}
  .join-steps{grid-template-columns:1fr 1fr;}
  .footer-top{grid-template-columns:1fr;}
}
@media(max-width:600px){
  /* The prototype floats this bottom-right over the hero at a fixed offset,
     which overlaps the CTAs once the fluid h1 wraps to 3+ lines on a phone
     screen. Drop it back into normal flow below the CTAs instead. */
  .hero{padding-bottom:40px;}
  .hero-aside{position:static;text-align:left;margin-top:40px;}
  .gallery-grid{grid-template-columns:1fr 1fr;}
  .join-steps{grid-template-columns:1fr;}
  .values-grid{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
}