/* ============================================
   Lyn Harmony Kung Fu — Design System
   Navy / Purple / White — dark theme
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* Schemerblauw — mid-dark indigo, vermilion accent */
  --bg:         #232E45;
  --bg-alt:     #232E45;
  --bg-deep:    #182135;
  --text:       #F1F2F0;
  --text-soft:  rgba(241,242,240,0.82);
  --text-mute:  #A6B0C2;
  --line:       rgba(241,242,240,0.16);
  --card-bg:    rgba(241,242,240,0.07);
  --card-bg-hi: rgba(241,242,240,0.12);

  /* Accent */
  --purple:     #E05F35;
  --purple-deep:#BE4820;
  --purple-light:#F5A184;

  /* Header */
  --header-bg:    #182135;
  --header-text:  #F1F2F0;
  --header-mute:  rgba(241,242,240,0.72);
  --header-line:  rgba(241,242,240,0.18);

  --display: 'Shippori Mincho B1', serif;
  --body:    'Noto Sans', sans-serif;
  --mono:    'IBM Plex Mono', monospace;

  --max: 1120px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  line-height:1.1;
  color:var(--text);
}
h1{ font-size:clamp(2.4rem, 5vw, 4rem); font-weight:500; }
h2{ font-size:clamp(1.7rem, 3vw, 2.4rem); }
h3{ font-size:1.3rem; }

.eyebrow{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--purple-light);
}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px;
}

/* ---------- Seal / signature element ---------- */
.seal{
  width:34px;
  height:34px;
  flex-shrink:0;
  background:var(--purple);
  color:#FFFFFF;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--display);
  font-size:1.05rem;
  font-weight:600;
  transform:rotate(-3deg);
  box-shadow:0 3px 10px rgba(91,79,224,0.45);
}
.seal.small{ width:24px; height:24px; font-size:0.75rem; }

/* ---------- Header (light, fixed) ---------- */
header.site{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--header-bg);
  box-shadow:0 1px 0 0 var(--header-bg);
}
.nav-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--display);
  font-size:1.15rem;
  font-weight:600;
  white-space:nowrap;
}
.brand small{
  display:block;
  font-family:var(--mono);
  font-size:0.68rem;
  color:var(--header-mute);
  font-weight:400;
  letter-spacing:0.05em;
}
nav.links{
  display:flex;
  gap:28px;
  align-items:center;
  flex-wrap:wrap;
}
nav.links a{
  font-size:0.95rem;
  color:var(--header-text);
  position:relative;
  padding:4px 0;
}
nav.links a:hover, nav.links a.active{ color:#FFFFFF; opacity:0.75; }
nav.links a.active::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:2px;
  background:#FFFFFF;
}

.lang-switch{
  display:flex;
  gap:4px;
  font-family:var(--mono);
  font-size:0.78rem;
}
.lang-switch button{
  background:none;
  border:1px solid var(--header-line);
  color:var(--header-mute);
  padding:4px 8px;
  cursor:pointer;
}
.lang-switch button.active{
  background:#FFFFFF;
  color:var(--purple);
  border-color:#FFFFFF;
}

.menu-toggle{
  display:none;
  background:none;
  border:none;
  font-size:1.6rem;
  cursor:pointer;
  color:var(--header-text);
}

/* ---------- Hero ---------- */
.hero{
  padding:24px 0 40px;
  background:
    linear-gradient(to bottom, rgba(35,46,69,0) 64%, rgba(35,46,69,0.58) 85%, #232E45 100%),
    linear-gradient(150deg, #2A3E6B 0%, rgba(217,84,46,0.55) 55%, #141C2B 100%),
    url('../img/hero-sunset.jpg');
  background-blend-mode: normal, soft-light, normal;
  background-size:cover;
  background-position:center 72%;
  color:var(--text);
  position:relative;
  overflow:hidden;
}
/* Legibility is handled locally rather than by dimming the whole photograph:
   a directional scrim plus a blurred panel that follows the text column. */
.hero::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg,
    rgba(13,20,33,0.50) 0%, rgba(13,20,33,0.32) 48%,
    rgba(13,20,33,0.06) 80%, rgba(13,20,33,0) 100%);
}
.hero::after{
  content:''; position:absolute; z-index:1; pointer-events:none;
  left:-6%; width:78%; top:6%; height:74%;
  background:radial-gradient(70% 60% at 34% 50%,
    rgba(13,20,33,0.52) 0%, rgba(13,20,33,0.26) 52%, rgba(13,20,33,0) 78%);
  filter:blur(26px);
}
.hero .wrap{ position:relative; z-index:2; }
.hero .eyebrow{
  margin-bottom:14px; display:block; color:#FFFFFF;
  text-shadow:0 1px 10px rgba(10,14,24,0.65);
}
.hero h1{
  max-width:820px; margin-bottom:22px; color:#FFFFFF;
  text-shadow:0 2px 4px rgba(10,14,24,0.45), 0 4px 28px rgba(10,14,24,0.55);
}
.hero p.lead{
  max-width:600px;
  font-size:1.15rem;
  color:#FFFFFF;
  text-shadow:0 1px 2px rgba(10,14,24,0.55), 0 2px 20px rgba(10,14,24,0.65);
  margin-bottom:32px;
}
.hero-img{
  margin-top:48px;
  width:100%;
  aspect-ratio:16/7;
  object-fit:cover;
  border:1px solid var(--line);
}
.chapter-logo{
  height:64px;
  width:auto;
  max-width:220px;
  object-fit:contain;
  margin-bottom:20px;
  border-radius:2px;
}
/* All hero sections are centred. The rule lives here rather than as an inline
   style per page, so every page — including any added later — matches without
   needing to remember to set it. */
.hero{ text-align:center; }
.hero h1,
.hero p.lead{
  margin-left:auto;
  margin-right:auto;
}
/* Button rows inside a hero follow the same centring. */
.hero .wrap > div{ justify-content:center; }
.portrait-round{
  width:168px;
  height:168px;
  object-fit:cover;
  object-position:center 16%;
  border-radius:50%;
  border:4px solid var(--purple);
  box-shadow:0 8px 28px rgba(0,0,0,0.35);
  margin:0 auto 24px;
}
.chapter-card-logo{
  height:52px;
  width:180px;
  object-fit:contain;
  object-position:left center;
  margin-bottom:16px;
  border-radius:2px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--body);
  font-weight:600;
  font-size:0.95rem;
  letter-spacing:0.005em;
  padding:15px 30px;
  border:1px solid transparent;
  border-radius:3px;
  cursor:pointer;
  transition:background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.btn-primary{
  background:var(--purple); color:#FFFFFF; border-color:var(--purple);
  box-shadow:0 4px 16px rgba(224,95,53,0.30);
}
.btn-primary:hover{
  background:var(--purple-deep); border-color:var(--purple-deep);
  transform:translateY(-1px); box-shadow:0 8px 22px rgba(224,95,53,0.38);
}
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--line); }
.btn-ghost:hover{ background:rgba(241,242,240,0.09); border-color:var(--purple); }

/* On the hero the outline button sits on a photograph, so a border alone is
   not enough — it gets a translucent, blurred backing of its own. */
.hero .btn-ghost{
  background:rgba(255,255,255,0.14);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-color:rgba(255,255,255,0.55);
  color:#FFFFFF;
}
.hero .btn-ghost:hover{
  background:rgba(255,255,255,0.24); border-color:#FFFFFF; transform:translateY(-1px);
}
.hero .btn-primary{ box-shadow:0 6px 20px rgba(0,0,0,0.32); }

/* ---------- Sections ---------- */
section{ padding:40px 0; }
section.alt{ background:var(--bg-alt); }
section.dark{
  background:var(--bg-deep);
  position:relative;
  overflow:hidden;
}
section.dark .wrap{ position:relative; z-index:1; }
section.dark p{ color:var(--text-soft); }
.section-head{
  margin-bottom:24px;
  max-width:680px;
}
.section-head p{ color:var(--text-mute); margin-top:10px; }
.divider{
  height:1px;
  background:var(--line);
  border:none;
  margin:0;
}

/* ---------- Grid cards (styles / classes) ---------- */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.card{
  border:1px solid var(--line);
  padding:24px 22px;
  background:var(--card-bg);
  box-shadow:0 4px 20px rgba(0,0,0,0.18);
  transition:transform 0.18s, box-shadow 0.18s, background 0.18s;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(0,0,0,0.28);
  background:var(--card-bg-hi);
}
.card .seal{ margin-bottom:18px; }
.card h3{ margin-bottom:10px; }
.card p{ color:var(--text-mute); font-size:0.98rem; }
.card .label{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--purple-light);
  margin-bottom:8px;
  display:block;
}

/* ---------- Schedule table ---------- */
.schedule{
  border:1px solid var(--line);
  background:var(--card-bg);
}
.schedule-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 26px;
  border-bottom:1px solid var(--line);
  font-family:var(--mono);
  font-size:0.95rem;
}
.schedule-row:last-child{ border-bottom:none; }
.schedule-row .day{ font-family:var(--body); font-weight:600; font-size:1rem; color:var(--text); }
.schedule-row .time{ color:var(--purple-light); }
.schedule-row .closed{ color:var(--text-mute); }

/* ---------- Quote / testimonial ---------- */
.quote{
  border-left:3px solid var(--purple);
  padding-left:24px;
  font-family:var(--display);
  font-size:1.3rem;
  font-style:italic;
  color:var(--text-soft);
  max-width:720px;
}
.quote cite{
  display:block;
  margin-top:14px;
  font-family:var(--mono);
  font-size:0.8rem;
  font-style:normal;
  color:var(--text-mute);
}

/* ---------- Testimonials carousel ---------- */
.testimonial-track{
  display:flex;
  gap:20px;
  overflow-x:auto;
  padding:6px 6px 4px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--purple) transparent;
}
.testimonial-track::-webkit-scrollbar{ height:6px; }
.testimonial-track::-webkit-scrollbar-thumb{ background:var(--purple); border-radius:3px; }
.testimonial-card{
  flex:0 0 82%;
  background:var(--card-bg);
  border:1px solid var(--line);
  padding:26px 24px;
  display:flex;
  flex-direction:column;
}
.testimonial-card p{
  font-family:var(--display);
  font-style:italic;
  font-size:1.05rem;
  color:var(--text-soft);
  line-height:1.5;
  flex-grow:1;
}
.testimonial-card cite{
  display:block;
  margin-top:16px;
  font-family:var(--mono);
  font-size:0.78rem;
  font-style:normal;
  color:var(--purple-light);
}
.testimonial-hint{
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--text-mute);
  margin-top:8px;
}
@media (min-width:640px){
  .testimonial-card{ flex-basis:340px; }
}

/* ---------- Links list (network) ---------- */
.link-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 4px;
  border-bottom:1px solid var(--line);
}
.link-row:first-child{ border-top:1px solid var(--line); }
.link-row .name{ font-weight:600; color:var(--text); }
.link-row .desc{ font-size:0.9rem; color:var(--text-mute); }
.link-row .go{ font-family:var(--mono); font-size:0.8rem; color:var(--purple-light); white-space:nowrap; }

/* ---------- Contact ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:48px;
}
.contact-item{ margin-bottom:22px; }
.contact-item .label{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-mute);
  display:block;
  margin-bottom:4px;
}
form.contact-form input,
form.contact-form textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  padding:12px 4px;
  font-family:var(--body);
  font-size:1rem;
  color:var(--text);
  margin-bottom:20px;
}
form.contact-form input::placeholder,
form.contact-form textarea::placeholder{ color:var(--text-mute); }
form.contact-form input:focus,
form.contact-form textarea:focus{
  outline:none;
  border-bottom-color:var(--purple);
}
form.contact-form textarea{ min-height:110px; resize:vertical; }

/* ---------- Footer ---------- */
footer.site{
  background:var(--bg-deep);
  color:var(--text-mute);
  padding:48px 0 28px;
  border-top:1px solid var(--line);
}
footer.site .footer-top{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:32px;
}
footer.site a{ color:var(--text-soft); }
footer.site a:hover{ color:var(--purple-light); }
.social-row{ display:flex; gap:10px; }
.social-btn{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--line);
  border-radius:2px;
  transition:background 0.15s, border-color 0.15s, transform 0.15s;
}
.social-btn:hover{
  background:var(--purple);
  border-color:var(--purple);
  transform:translateY(-2px);
}
footer.site .foot-bottom{
  margin-top:36px;
  padding-top:20px;
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:0.75rem;
  color:var(--text-mute);
}

/* ---------- Focus visibility ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--purple-light);
  outline-offset:2px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .grid-3{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  nav.links{
    display:none;
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--header-bg);
    border-bottom:1px solid var(--header-line);
    flex-direction:column;
    gap:0;
    padding:8px 24px 20px;
  }
  nav.links.open{ display:flex; }
  nav.links a{ padding:12px 0; border-bottom:1px solid var(--header-line); }
  .menu-toggle{ display:block; }
  footer.site .wrap{ flex-direction:column; }
}

/* Multi-line values (e.g. the postal address) are stored with real newlines
   in content.json and rendered via textContent, so no HTML is involved. */
.addr{ white-space:pre-line; }

/* ---------- Social channel rows (Links page) ---------- */
.social-list{ border-top:1px solid var(--line); }
.social-item{
  display:flex; align-items:center; gap:18px;
  padding:18px 6px;
  border-bottom:1px solid var(--line);
  transition:background 0.15s, padding-left 0.15s;
}
.social-item:hover{ background:var(--card-bg); padding-left:14px; }
.social-mark{
  width:42px; height:42px; flex:0 0 42px;
  display:flex; align-items:center; justify-content:center;
  border-radius:4px;
  background:rgba(255,255,255,0.96);
}
.social-meta{ flex:1 1 auto; min-width:0; }
.social-name{ display:block; font-weight:600; font-size:1.05rem; color:var(--text); }
.social-handle{
  display:block; font-family:var(--mono); font-size:0.8rem; color:var(--text-mute);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.social-go{
  font-family:var(--mono); font-size:0.8rem; color:var(--purple-light);
  white-space:nowrap; flex:0 0 auto;
}
/* Official brand colours, on a white tile so each mark stays recognisable. */
.social-mark[data-brand="youtube"] svg{ fill:#FF0033; }
.social-mark[data-brand="instagram"] svg{ fill:#E1306C; }
.social-mark[data-brand="facebook"] svg{ fill:#1877F2; }
.social-mark[data-brand="tiktok"] svg{ fill:#010101; }
@media (max-width:520px){
  .social-go{ display:none; }
  .social-item{ gap:14px; }
}

/* ---------- Fun: game cards ---------- */
.game-card{
  display:flex; align-items:center; gap:20px;
  text-decoration:none;
}
.game-art{
  flex:0 0 auto;
  width:76px; height:76px;
  display:flex; align-items:center; justify-content:center;
  border-radius:6px;
  background:linear-gradient(150deg, rgba(224,95,53,0.16) 0%, rgba(241,242,240,0.06) 100%);
  border:1px solid var(--line);
  color:var(--text);
}
.game-card:hover .game-art{ border-color:var(--purple); }
.game-body{ flex:1 1 auto; min-width:0; }
.game-body h3{ margin:2px 0 6px; }
.game-body p{ margin:0; }
.game-go{
  flex:0 0 auto;
  font-family:var(--mono); font-size:0.8rem; color:var(--purple-light);
  white-space:nowrap;
}
@media (max-width:520px){
  .game-go{ display:none; }
  .game-card{ gap:16px; }
  .game-art{ width:62px; height:62px; }
}

/* Cheerful mark used for the Fun entry on the Links page. */
.fun-mark{
  width:42px; height:42px; flex:0 0 42px;
  display:flex; align-items:center; justify-content:center;
  border-radius:4px;
  background:linear-gradient(145deg, #E05F35 0%, #F5A184 100%);
  color:#FFFFFF;
}