/*
Theme Name: Svarva Frisbeegolf PRO
Theme URI: https://svarvafrisbeegolf.no
Author: Fabian / Svarva Frisbeegolf
Description: Custom one-page WordPress theme for Svarva Frisbeegolf, based on supplied HTML/CSS design.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: svarva-frisbeegolf
*/

:root{
    --forest: #14261F;
    --forest-2: #1E3A2E;
    --forest-3: #274A38;
    --chalk: #EEF1E7;
    --chalk-dim: #C9D1C2;
    --disc: #FF5A1F;
    --chain: #FFC331;
    --sky: #7FB6A8;
    --ink: #0D1712;
    --max: 1180px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--forest);
    color:var(--chalk);
    font-family:'Inter', sans-serif;
    line-height:1.5;
    overflow-x:hidden;
  }
  h1,h2,h3, .display{
    font-family:'Anton', sans-serif;
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:0.01em;
    line-height:0.95;
  }
  .mono{ font-family:'Space Mono', monospace; }
  a{ color:inherit; text-decoration:none; }
  .wrap{ max-width:var(--max); margin:0 auto; padding:0 28px; }
  img{ max-width:100%; display:block; }
  button{ font-family:inherit; cursor:pointer; }

  /* focus visibility */
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline:3px solid var(--chain);
    outline-offset:3px;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
  }

  /* ---------- NAV ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(20,38,31,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(238,241,231,0.1);
  }
  nav.wrap{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:16px; padding-bottom:16px;
  }
  .logo{
    display:flex; flex-direction:column; line-height:0.85;
  }
  .logo .top{ font-family:'Anton',sans-serif; font-size:22px; letter-spacing:0.03em; }
  .logo .bottom{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.25em; color:var(--disc); margin-top:4px; }
  .navlinks{ display:flex; gap:32px; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }
  .navlinks a{ position:relative; padding:4px 0; }
  .navlinks a::after{
    content:''; position:absolute; left:0; bottom:0; height:2px; width:0;
    background:var(--disc); transition:width 0.25s ease;
  }
  .navlinks a:hover::after{ width:100%; }
  .navcta{
    background:var(--disc); color:var(--chalk); font-size:13px; font-weight:700;
    text-transform:uppercase; letter-spacing:0.04em; padding:10px 18px; border-radius:2px;
    border:none; white-space:nowrap;
  }
  .navcta:hover{ background:#ff7440; }
  .burger{ display:none; background:none; border:none; color:var(--chalk); font-size:26px; }

  @media (max-width:860px){
    .navlinks{ display:none; }
    .navcta{ display:none; }
    .burger{ display:block; }
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    padding:90px 0 70px;
    overflow:hidden;
    background:
      radial-gradient(ellipse at 80% 20%, rgba(127,182,168,0.12), transparent 55%),
      var(--forest);
  }
  .hero .wrap{ position:relative; z-index:2; }
  .eyebrow{
    font-family:'Space Mono',monospace; font-size:13px; letter-spacing:0.3em;
    color:var(--chain); text-transform:uppercase; margin-bottom:18px; display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{ content:''; width:26px; height:2px; background:var(--chain); display:inline-block; }
  .hero h1{
    font-size:clamp(48px, 8vw, 96px);
    max-width:820px;
    color:var(--chalk);
  }
  .hero h1 span{ color:var(--disc); }
  .hero .sub{
    max-width:520px; font-size:18px; color:var(--chalk-dim); margin-top:26px;
  }
  .hero .ctas{ display:flex; gap:16px; margin-top:38px; flex-wrap:wrap; }
  .btn-primary{
    background:var(--disc); color:var(--chalk); padding:16px 30px; border:none; border-radius:2px;
    font-weight:700; text-transform:uppercase; letter-spacing:0.04em; font-size:14px;
  }
  .btn-primary:hover{ background:#ff7440; }
  .btn-ghost{
    background:transparent; color:var(--chalk); padding:16px 30px; border:2px solid rgba(238,241,231,0.3); border-radius:2px;
    font-weight:700; text-transform:uppercase; letter-spacing:0.04em; font-size:14px;
  }
  .btn-ghost:hover{ border-color:var(--chalk); }

  .flight-svg{ position:absolute; right:-4%; top:0; width:62%; height:100%; z-index:1; opacity:0.95; }
  .flight-path{
    fill:none; stroke:var(--sky); stroke-width:2.5; stroke-dasharray:6 8; opacity:0.55;
  }
  .flight-disc{ animation: fly 4.5s ease-in-out infinite; }
  @keyframes fly{
    0%{ offset-distance:0%; }
    100%{ offset-distance:100%; }
  }
  .flight-disc{
    offset-path: path('M 40 340 C 160 40, 380 20, 520 160 S 560 380, 420 400');
    offset-rotate:auto;
  }

  @media (max-width:860px){ .flight-svg{ display:none; } }

  /* ---------- SECTION SHARED ---------- */
  section{ padding:100px 0; position:relative; }
  .section-head{ max-width:640px; margin-bottom:56px; }
  .section-head .eyebrow{ color:var(--disc); }
  .section-head h2{ font-size:clamp(34px,5vw,54px); color:var(--chalk); }
  .section-head p{ color:var(--chalk-dim); margin-top:16px; font-size:16px; }

  .band{ background:var(--forest-2); }
  .band-alt{ background:var(--ink); }

  /* ---------- ABOUT / STATS ---------- */
  .about-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:start; }
  @media (max-width:860px){ .about-grid{ grid-template-columns:1fr; gap:40px; } }
  .about-portrait{
    aspect-ratio:4/5; border-radius:4px; overflow:hidden;
    background:linear-gradient(150deg, var(--forest-3), var(--forest-2));
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(238,241,231,0.12);
  }
  .about-portrait .mono{ color:var(--chalk-dim); font-size:12px; letter-spacing:0.15em; text-align:center; padding:20px;}
  .about-text p{ color:var(--chalk-dim); font-size:17px; margin-bottom:18px; max-width:560px; }
  .about-text p strong{ color:var(--chalk); }

  .flight-stats{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:40px;
    background:rgba(238,241,231,0.12); border:1px solid rgba(238,241,231,0.12);
  }
  .flight-stat{ background:var(--forest); padding:22px 14px; text-align:center; }
  .flight-stat .num{ font-family:'Anton',sans-serif; font-size:36px; color:var(--chain); }
  .flight-stat .label{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.15em; color:var(--chalk-dim); text-transform:uppercase; margin-top:6px; }
  @media (max-width:600px){ .flight-stats{ grid-template-columns:repeat(2,1fr); } }

  /* ---------- COURSES / KURS ---------- */
  .course-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
  @media (max-width:760px){ .course-grid{ grid-template-columns:1fr; } }
  .course-card{
    background:var(--forest); border:1px solid rgba(238,241,231,0.12); border-radius:4px;
    padding:32px; display:flex; flex-direction:column; gap:16px; transition:border-color 0.2s, transform 0.2s;
  }
  .course-card:hover{ border-color:var(--disc); transform:translateY(-4px); }
  .course-card .tag{
    align-self:flex-start; background:var(--chain); color:var(--ink); font-family:'Space Mono',monospace;
    font-size:11px; letter-spacing:0.1em; text-transform:uppercase; padding:5px 10px; border-radius:2px; font-weight:700;
  }
  .course-card.featured .tag{ background:var(--disc); color:var(--chalk); }
  .course-card h3{ font-size:28px; color:var(--chalk); }
  .course-card .desc{ color:var(--chalk-dim); font-size:15px; }
  .spec-row{ display:flex; gap:18px; flex-wrap:wrap; margin-top:auto; padding-top:14px; border-top:1px solid rgba(238,241,231,0.1); }
  .spec{ font-family:'Space Mono',monospace; font-size:11px; color:var(--chalk-dim); }
  .spec b{ color:var(--sky); display:block; font-size:15px; font-family:'Inter',sans-serif; font-weight:700; }
  .course-price{ display:flex; align-items:baseline; justify-content:space-between; margin-top:6px; }
  .course-price .amount{ font-family:'Anton',sans-serif; font-size:26px; color:var(--chalk); }
  .course-price a{ font-size:13px; font-weight:700; text-transform:uppercase; color:var(--disc); border-bottom:2px solid var(--disc); padding-bottom:2px; }

  /* ---------- BANE / COURSE INFO ---------- */
  .bane-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center; }
  @media (max-width:860px){ .bane-grid{ grid-template-columns:1fr; } }
  .chain-divider{
    display:flex; gap:6px; margin:34px 0; opacity:0.8;
  }
  .chain-divider span{ width:8px; height:8px; border-radius:50%; border:2px solid var(--chain); }
  .bane-facts{ list-style:none; }
  .bane-facts li{
    display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid rgba(238,241,231,0.12);
    font-size:15px;
  }
  .bane-facts li span:first-child{ color:var(--chalk-dim); }
  .bane-facts li span:last-child{ font-weight:700; color:var(--chalk); font-family:'Space Mono',monospace; }
  .map-box{
    aspect-ratio:1/1; background:var(--forest-2); border-radius:4px; border:1px solid rgba(238,241,231,0.12);
    display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
  }
  .map-box svg{ width:70%; opacity:0.5; }

  /* ---------- EVENTS ---------- */
  .events-list{ display:flex; flex-direction:column; }
  .event-row{
    display:grid; grid-template-columns:110px 1fr auto; gap:24px; align-items:center;
    padding:26px 0; border-bottom:1px solid rgba(238,241,231,0.12);
  }
  .event-row:first-child{ border-top:1px solid rgba(238,241,231,0.12); }
  .event-date{ text-align:center; }
  .event-date .d{ font-family:'Anton',sans-serif; font-size:34px; color:var(--chain); line-height:1; }
  .event-date .m{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.15em; color:var(--chalk-dim); text-transform:uppercase; }
  .event-info h3{ font-family:'Inter',sans-serif; font-weight:700; text-transform:none; font-size:19px; color:var(--chalk); }
  .event-info p{ color:var(--chalk-dim); font-size:14px; margin-top:4px; }
  .event-cta{ font-size:13px; font-weight:700; text-transform:uppercase; color:var(--disc); border-bottom:2px solid var(--disc); padding-bottom:2px; white-space:nowrap; }
  @media (max-width:600px){
    .event-row{ grid-template-columns:70px 1fr; }
    .event-cta{ grid-column:1/-1; justify-self:start; }
  }

  /* ---------- CONTACT ---------- */
  .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; }
  @media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
  .field{ margin-bottom:20px; }
  .field label{ display:block; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--chalk-dim); margin-bottom:8px; }
  .field input, .field textarea{
    width:100%; background:var(--forest-2); border:1px solid rgba(238,241,231,0.18); color:var(--chalk);
    padding:14px 16px; border-radius:2px; font-family:'Inter',sans-serif; font-size:15px;
  }
  .field textarea{ resize:vertical; min-height:120px; }
  .contact-info h3{ font-size:26px; color:var(--chalk); margin-bottom:18px; }
  .contact-info .row{ display:flex; gap:14px; margin-bottom:16px; font-size:15px; color:var(--chalk-dim); }
  .contact-info .row b{ color:var(--chain); font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; min-width:90px; }

  /* ---------- FOOTER ---------- */
  footer{ background:var(--ink); padding:48px 0 32px; }
  footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; }
  footer .mono{ color:var(--chalk-dim); font-size:12px; }
  footer .flogo{ font-family:'Anton',sans-serif; font-size:18px; color:var(--chalk); }


/* Editable image areas */
.about-portrait.has-image {
  background: none;
  padding: 0;
}
.about-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero.has-hero-image {
  background-size: cover;
  background-position: center;
}
.hero.has-hero-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20,38,31,0.94), rgba(20,38,31,0.72), rgba(20,38,31,0.38));
  z-index: 0;
}
.hero.has-hero-image .wrap, .hero.has-hero-image .flight-svg {
  position: relative;
}