/* ============================================================
   PIKE HOT DOG CLUB — MASTER STYLE
   Brand system, typography, base layout, components
   ============================================================ */

:root{
  /* Brand palette */
  --navy:        #1C2B5E;
  --navy-deep:   #131F45;
  --navy-soft:   #2A3B6F;
  --cream:       #F2ECD8;
  --cream-warm:  #EBE3CB;
  --cream-deep:  #E0D6B8;
  --red:         #C04A28;
  --red-deep:    #9E3A1E;
  --gold:        #B8974A;
  --gold-soft:   #D1B370;
  --ink:         #0E1733;
  --paper:       #FBF8EF;
  --shadow-1:    rgba(20,30,70,.08);
  --shadow-2:    rgba(20,30,70,.16);
  --shadow-3:    rgba(20,30,70,.32);

  /* Typography */
  --font-display: 'Bebas Neue', 'Oswald', sans-serif;
  --font-serif:   'Crimson Text', 'Cormorant Garamond', Georgia, serif;
  --font-ui:      'Barlow Condensed', 'Roboto Condensed', sans-serif;

  /* Layout */
  --nav-h: 76px;
  --container: 1280px;
  --gutter: clamp(20px, 4vw, 64px);

  /* Easings */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-elastic: cubic-bezier(.68, -.55, .27, 1.55);
}

/* === RESET === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-serif);
  font-size:17px;line-height:1.65;
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,picture,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;transition:color .3s var(--ease-out)}
button{font:inherit;cursor:pointer;border:0;background:transparent;color:inherit}
ul,ol{list-style:none}

/* === TYPOGRAPHY === */
.eyebrow{
  font-family:var(--font-ui);
  font-size:13px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);font-weight:600;
  display:inline-flex;align-items:center;gap:14px;
}
.eyebrow::before,.eyebrow::after{
  content:"";display:inline-block;
  width:30px;height:1px;background:var(--gold);
  opacity:.6;
}
.eyebrow.no-after::after{display:none}
.eyebrow.no-before::before{display:none}

h1,h2,h3,.h1,.h2,.h3{
  font-family:var(--font-display);
  letter-spacing:.01em;
  line-height:.92;
  font-weight:400;
  color:var(--navy);
}
h1,.h1{font-size:clamp(48px,8vw,120px)}
h2,.h2{font-size:clamp(40px,6vw,88px)}
h3,.h3{font-size:clamp(28px,3.6vw,48px)}
h4{font-family:var(--font-display);font-size:clamp(22px,2.4vw,32px);line-height:1;letter-spacing:.02em;color:var(--navy)}

.serif-display{font-family:var(--font-serif);font-style:italic;font-weight:400}
.gold{color:var(--gold)}
.red{color:var(--red)}
.cream{color:var(--cream)}
.navy{color:var(--navy)}

/* === LAYOUT === */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.container-wide{max-width:1480px;margin:0 auto;padding:0 var(--gutter)}
section{position:relative;padding:clamp(80px,10vw,140px) 0}
.dark{background:var(--navy);color:var(--cream)}
.dark h1,.dark h2,.dark h3,.dark h4{color:var(--cream)}
.dark .eyebrow{color:var(--gold-soft)}

/* === NAV === */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);
  background:rgba(28,43,94,.94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(184,151,74,.18);
  transition:background .3s var(--ease-out), transform .4s var(--ease-out);
}
.nav.hidden{transform:translateY(-100%)}
.nav-inner{
  max-width:var(--container);
  height:100%;margin:0 auto;
  padding:0 var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:14px;font-family:var(--font-display);font-size:26px;letter-spacing:.06em;color:var(--cream)}
.brand-shield{width:42px;height:46px;display:grid;place-items:center;position:relative}
.brand-shield svg{width:100%;height:100%;display:block}

.nav-links{display:flex;align-items:center;gap:36px}
.nav-link{
  font-family:var(--font-ui);
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream);font-weight:500;
  position:relative;padding:6px 0;
}
.nav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;
  height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease-out);
}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1);transform-origin:left}
.nav-link.active{color:var(--gold-soft)}

.nav-cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 20px;
  font-family:var(--font-ui);
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  background:var(--red);color:var(--cream);
  border:1px solid var(--red);
  transition:all .3s var(--ease-out);
}
.nav-cta:hover{background:transparent;color:var(--red)}

.nav-toggle{display:none;width:36px;height:36px;position:relative}
.nav-toggle span{position:absolute;left:6px;right:6px;height:2px;background:var(--cream);transition:transform .3s var(--ease-out), opacity .2s, top .3s}
.nav-toggle span:nth-child(1){top:11px}
.nav-toggle span:nth-child(2){top:17px}
.nav-toggle span:nth-child(3){top:23px}
.nav-toggle.open span:nth-child(1){top:17px;transform:rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){top:17px;transform:rotate(-45deg)}

.lang-switch{display:inline-flex;align-items:center;font-family:var(--font-ui);font-size:11px;letter-spacing:.18em;font-weight:600;border:1px solid rgba(242,236,216,.2);padding:6px 4px}
.lang-switch button{padding:4px 8px;color:rgba(242,236,216,.5);transition:color .3s var(--ease-out)}
.lang-switch button.on{color:var(--gold-soft)}
.lang-switch button:hover{color:var(--cream)}
.lang-switch span{color:rgba(242,236,216,.2)}

/* === BUTTONS === */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:18px 32px;
  font-family:var(--font-ui);
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  background:var(--navy);color:var(--cream);
  border:1px solid var(--navy);
  cursor:pointer;
  transition:all .35s var(--ease-out);
  position:relative;overflow:hidden;
  z-index:1;
}
.btn::before{
  content:"";position:absolute;inset:0;
  background:var(--gold);
  transform:translateX(-100%);
  transition:transform .4s var(--ease-out);
  z-index:-1;
}
.btn:hover::before{transform:translateX(0)}
.btn:hover{color:var(--navy);border-color:var(--gold)}
.btn .arrow{display:inline-block;transition:transform .35s var(--ease-out)}
.btn:hover .arrow{transform:translateX(6px)}

.btn-red{background:var(--red);border-color:var(--red);color:var(--cream)}
.btn-red::before{background:var(--cream)}
.btn-red:hover{color:var(--red);border-color:var(--cream)}

.btn-ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-ghost::before{background:var(--navy)}
.btn-ghost:hover{color:var(--cream)}

.btn-cream{background:var(--cream);border-color:var(--cream);color:var(--navy)}
.btn-cream::before{background:var(--gold)}
.btn-cream:hover{color:var(--cream);border-color:var(--gold)}

.btn-large{padding:22px 38px;font-size:14px}

/* === FOOTER === */
.footer{background:var(--navy-deep);color:var(--cream);padding:80px 0 30px;position:relative}
.footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 50%,transparent)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:48px;margin-bottom:60px}
.footer h4{font-family:var(--font-ui);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:20px;font-weight:600}
.footer-brand{display:flex;flex-direction:column;gap:18px}
.footer-brand-row{display:flex;align-items:center;gap:16px}
.footer-brand-row .brand-shield{width:54px;height:60px}
.footer-brand-name{font-family:var(--font-display);font-size:34px;letter-spacing:.05em}
.footer-tagline{font-family:var(--font-serif);font-style:italic;color:var(--cream);opacity:.78;font-size:16px;line-height:1.5}
.footer ul li{margin-bottom:10px}
.footer ul a{font-family:var(--font-ui);font-size:14px;color:rgba(242,236,216,.7);font-weight:400}
.footer ul a:hover{color:var(--gold-soft)}
.footer-contact-line{font-family:var(--font-ui);font-size:14px;color:rgba(242,236,216,.78);margin-bottom:8px;display:flex;align-items:center;gap:10px}
.footer-contact-line strong{color:var(--cream);font-weight:600;letter-spacing:.04em}
.footer-bottom{border-top:1px solid rgba(184,151,74,.2);padding-top:28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;font-family:var(--font-ui);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(242,236,216,.5)}
.footer-shield-row{display:flex;align-items:center;gap:8px;margin-top:10px}
.footer-shield-row span{font-family:var(--font-display);font-size:13px;color:var(--gold);letter-spacing:.18em;padding:2px 8px;border:1px solid var(--gold);opacity:.6}

/* === DECORATIVE === */
.diamond{display:inline-block;width:6px;height:6px;background:var(--gold);transform:rotate(45deg);vertical-align:middle}
.gold-line{width:60px;height:1px;background:var(--gold);display:inline-block;vertical-align:middle}
.divider-ornate{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0}
.divider-ornate .gold-line{width:80px}

.section-title{margin-bottom:48px}
.section-title .eyebrow{margin-bottom:18px}
.section-title h2{margin-bottom:18px}
.section-title p{font-family:var(--font-serif);font-size:19px;line-height:1.6;color:var(--ink);opacity:.78;max-width:680px}

/* === RESPONSIVE === */
@media(max-width:980px){
  .nav-links{
    position:fixed;top:var(--nav-h);left:0;right:0;
    background:var(--navy-deep);
    flex-direction:column;align-items:flex-start;
    padding:30px var(--gutter);gap:18px;
    transform:translateY(-150%);
    transition:transform .4s var(--ease-out);
    border-bottom:1px solid rgba(184,151,74,.2);
  }
  .nav-links.open{transform:translateY(0)}
  .nav-toggle{display:block}
  .nav-cta{display:none}
  .nav-links .nav-cta{display:inline-flex;margin-top:8px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media(max-width:640px){
  body{font-size:16px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
}

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