/* assets/css/style.css — minimal custom theme layer on top of Tailwind */
/* Color tokens */
:root{
  --primary-dark:#2C2C2C;
  --secondary-gold:#B8860B;
  --terracotta:#C65D07;
  --cream:#F8F6F0;

  /* Added for tinted mobile menu */
  --gold-rgb: 184, 134, 11; /* matches --secondary-gold */
}

/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  background:var(--cream);
  color:var(--primary-dark);
}

.font-display{font-family:'Playfair Display',serif;}
.font-mono{font-family:'Space Mono',monospace;}

/* Layout helpers */
.container{max-width:112rem;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.px-page{padding-inline:clamp(16px,4vw,40px)}
.section{padding:clamp(56px,8vw,96px) clamp(16px,4vw,40px)}

/* Responsive font scales using clamp() */
.fz-hero{font-size:clamp(2.25rem,6vw,5.5rem)}
.fz-subhero{font-size:clamp(1.25rem,3.2vw,2.25rem)}
.fz-lead{font-size:clamp(1.05rem,2.3vw,1.375rem)}
.fz-h2{font-size:clamp(1.75rem,3.5vw,3rem)}
.fz-h4{font-size:clamp(1.25rem,2.4vw,1.75rem)}
.fz-h5{font-size:clamp(1.125rem,2.1vw,1.35rem)}
.fz-body{font-size:clamp(0.95rem,1.8vw,1rem)}
.fz-counter{font-size:clamp(2rem,6vw,3.5rem);font-weight:900;color:var(--secondary-gold)}

/* Hero */
.hero-section{
  background:linear-gradient(135deg,rgba(44,44,44,.8),rgba(184,134,11,.35)), url('/resources/hero-image.jpg');
  background-size:cover;background-position:center;background-attachment:fixed;min-height:100svh;position:relative;
}
.particle-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}

/* Typewriter */
.typewriter-text{opacity:0;border-right:2px solid var(--secondary-gold)}
.typing-complete{animation:blink 1s infinite}
@keyframes blink{0%,50%{border-color:transparent}51%,100%{border-color:var(--secondary-gold)}}

/* Animate-on-scroll */
.animate-on-scroll{opacity:0;transform:translateY(26px);transition:all .7s ease}
.animate-in{opacity:1;transform:translateY(0)}

/* Timeline */
.timeline-line{position:absolute;left:50%;transform:translateX(-50%);width:3px;background:rgb(202 138 4);height:100%}
.timeline-item{opacity:0;transform:translateX(-40px);transition:all .6s ease}
.timeline-animate{opacity:1;transform:translateX(0)}
.timeline-dot{width:2rem;height:2rem;background:rgb(202 138 4);border-radius:9999px;border:4px solid white;box-shadow:0 10px 20px rgba(0,0,0,.12);z-index:10}

/* Cards & hovers */
.card{background:#fff;padding:1.25rem;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.hover-card{transition:transform .25s ease, box-shadow .25s ease}
.hover-card:hover{transform:translateY(-4px);box-shadow:0 16px 50px rgba(0,0,0,.12)}

/* Navbar */
.navbar{transition:all .25s ease;backdrop-filter:blur(12px)}
.navbar.scrolled{background:rgba(44,44,44,.96);box-shadow:0 6px 22px rgba(0,0,0,.18)}
.nav-link{color:#fff;text-decoration:none}
.nav-link:hover{color:#facc15}
.mobile-menu{transform:translateX(100%);transition:transform .3s ease}
.mobile-menu.active{transform:translateX(0)}
.mobile-link{display:block;color:#fff;text-decoration:none;padding:.25rem 0}
.mobile-link:hover{color:#facc15}

/* Navbar (Main) */
.navbar-main{background:rgba(44,44,44,.96)}
.navbar-main.scrolled{background:rgba(44,44,44,.96);box-shadow:0 6px 22px rgba(0,0,0,.18)}
.nav-link{color:#fff;text-decoration:none}
.nav-link:hover{color:#facc15}
.mobile-menu{transform:translateX(100%);transition:transform .3s ease}
.mobile-menu.active{transform:translateX(0)}
.mobile-link{display:block;color:#fff;text-decoration:none;padding:.25rem 0}
.mobile-link:hover{color:#facc15}

/* Gradient text */
.gradient-text{
  background:linear-gradient(135deg,var(--secondary-gold),var(--terracotta));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent
}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;
  padding:.9rem 1.4rem;border-radius:9999px;font-weight:700;transition:transform .15s ease, background .2s ease, color .2s ease}
.btn-primary{background:#ca8a04;color:#fff}
.btn-primary:hover{background:#a16207;transform:translateY(-1px)}
.btn-outline{border:2px solid #ca8a04;color:#f59e0b}
.btn-outline:hover{background:#ca8a04;color:#fff;transform:translateY(-1px)}

/* Audio player */
.audio-player{background:rgba(44,44,44,.08);border-radius:14px;padding:1rem;margin:1rem 0}
.progress-bar{height:4px;background:var(--secondary-gold);border-radius:2px;transition:width .1s ease}

/* Splide customization */
.splide__arrow{background:var(--secondary-gold)!important;opacity:.9}
.splide__arrow:hover{opacity:1}

/* Loading overlay */
.loaded .loading-overlay{opacity:0;pointer-events:none}
.loading-overlay{position:fixed;inset:0;width:100%;height:100%;background:#111;display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .45s ease}

/* Awards section background treatment */
.awards-section{background-size:cover;background-position:center}
.awards-section::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.35),rgba(0,0,0,.55));z-index:0}

/* Social buttons */
.social-btn{background:#ca8a04;color:#fff;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:9999px}
.social-btn:hover{background:#a16207}

/* Utility */
.bg-cream{background:var(--cream)}
.text-primary-dark{color:var(--primary-dark)}

/* Append a plus sign to achievement counters */
.counter.counter-plus::after {
  content: "+";
  margin-left: .05em; /* tiny spacing for tight numerals */
}

/* === Mobile menu backdrop + link plates (gold tinted) === */
@media (max-width: 900px){
  /* Panel background (adds dark yellow, slightly transparent) */
  .mobile-menu{
    background: rgba(var(--gold-rgb), 0.12);
    backdrop-filter: blur(8px) saturate(115%);
    -webkit-backdrop-filter: blur(8px) saturate(115%);
    box-shadow: -10px 0 30px rgba(0,0,0,.25);
    border-left: 1px solid rgba(0,0,0,.08);
  }
  .mn-container{
      background:rgba(44,44,44,.96);
      padding:2px;
      margin:auto;
  }
  .mobile-menu.active{
    /* slightly stronger when opened */
    background: rgba(var(--gold-rgb), 0.16);
  }

  /* Link “plates” for tap targets */
  .mobile-menu .mobile-link{
    display:block;
    color:#fff;
    padding:.6rem 1rem;
    border-radius:12px;
    background: rgba(var(--gold-rgb), 0.5);
  }
  .mobile-menu .mobile-link + .mobile-link{ margin-top:.25rem; }

  .mobile-menu .mobile-link:hover,
  .mobile-menu .mobile-link:focus{
    background: rgba(var(--gold-rgb), 0.20);
    color:#fff;
  }
}