/* ==========================================================================
   Boston Kelly's -- SHARED STYLESHEET
   ==========================================================================
   Every page on the site links this file. It holds:
     - the design tokens (colors, nav sizing)
     - base element resets
     - every component that is IDENTICAL across pages: the fixed nav, the
       shamrock logo, the hamburger menu + slide-out panel, the footer

   Page-specific styles (hero, cards, page content) stay inline in each
   page's own <style> block. If a rule belongs on every page, it belongs
   here, not copy-pasted into each page individually -- that copy-paste is
   exactly how the nav and logo drifted out of sync between pages earlier
   in this project.

   Breakpoint standard for the whole site (see individual pages for usage):
     640px  -- the "mobile" line: below this, multi-column layouts stack
     900px  -- the "tablet" line: reserved for layouts that want a middle
                step before going fully single-column
   ========================================================================== */

:root{
  /* nav chrome -- the hamburger button (a separate fixed element, for
     stacking reasons) reads these same values to center itself against
     the logo regardless of viewport width */
  --logo-h:clamp(64px,18vw,104px);
  --nav-pad-y:16px;
  --nav-pad-x:clamp(20px,5vw,48px);

  /* --- black glass: the base is near-black --- */
  --bg:#060605;
  --bg-deep:#060605;
  --bg-deepest:#020202;
  --ink:#f2e6cf;
  --ink-soft:#e0c9a4;
  --ink-muted:#c9ac82;

  /* --- true bronze, matching the medallion's actual metal tones --- */
  --bronze-light:#f1e9d0;
  --bronze:#997e3b;
  --bronze-deep:#4d3814;

  --hairline:rgba(201,166,104,0.24);
}

*{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  background:var(--bg-deepest);
}

body{
  margin:0;
  min-height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- nav ---------- */
.topnav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  padding:var(--nav-pad-y) var(--nav-pad-x);
  background:rgba(6,6,5,0.45);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,0.08);
  box-shadow:0 1px 0 rgba(255,255,255,0.04) inset;
}
.brandmark{
  display:flex;
  align-items:center;
}
.brandmark a{
  display:block;
  position:relative;
  transform-origin:center center;
  transition:transform .3s cubic-bezier(.25,.46,.45,.94);
}
.brandmark a:focus-visible{
  outline:1px solid var(--bronze-light);
  outline-offset:4px;
  border-radius:8px;
}
.brandmark img{
  height:var(--logo-h);
  width:auto;
  display:block;
  /* the glow lives on the image so drop-shadow traces the shamrock's alpha
     silhouette rather than a rectangle -- no square edges revealed */
  transition:filter .4s ease;
  /* save-deterrents: clicks/right-clicks land on the anchor (link menu, no
     "save image as"), no drag-to-desktop, no selection-grab */
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
}
@media (hover:hover) and (pointer:fine){
  .brandmark a:hover{
    transform:translateY(-3px) scale(1.03);
  }
  /* layered drop-shadows = a soft golden halo that hugs the shamrock outline */
  .brandmark a:hover img{
    filter:
      drop-shadow(0 0 6px rgba(241,233,208,0.55))
      drop-shadow(0 0 16px rgba(153,126,59,0.5))
      drop-shadow(0 0 30px rgba(153,126,59,0.35));
  }
  /* the press-down only on real pointers -- on touch it fired mid-scroll/
     mid-navigation and read as a jump; a tap on mobile just acts cleanly */
  .brandmark a:active{
    transform:translateY(-1px) scale(0.99);
  }
}
/* click/tap: a brighter glow pulse as feedback, on all devices */
.brandmark a:active img{
  animation:shamrock-pulse .55s ease-out;
}
@keyframes shamrock-pulse{
  0%{
    filter:
      drop-shadow(0 0 6px rgba(241,233,208,0.55))
      drop-shadow(0 0 16px rgba(153,126,59,0.5))
      drop-shadow(0 0 30px rgba(153,126,59,0.35));
  }
  40%{
    filter:
      drop-shadow(0 0 10px rgba(241,233,208,0.85))
      drop-shadow(0 0 24px rgba(153,126,59,0.75))
      drop-shadow(0 0 42px rgba(153,126,59,0.55));
  }
  100%{
    filter:
      drop-shadow(0 0 6px rgba(241,233,208,0.55))
      drop-shadow(0 0 16px rgba(153,126,59,0.5))
      drop-shadow(0 0 30px rgba(153,126,59,0.35));
  }
}

/* ---------- hamburger toggle -- flat/vector by design (texture is reserved
   for the heritage mark and the wedding rings, not functional chrome) ---------- */
.nav-toggle{
  position:fixed;
  top:calc(var(--nav-pad-y) + (var(--logo-h) - 44px)/2);
  right:var(--nav-pad-x);
  z-index:80;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
}
.nav-toggle span{
  position:absolute;
  left:50%;
  width:22px; height:1.5px;
  background:var(--ink-soft);
  transform:translateX(-50%);
  transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .25s ease, background-color .3s ease;
}
.nav-toggle span:nth-child(1){ top:16px; }
.nav-toggle span:nth-child(2){ top:22px; }
.nav-toggle span:nth-child(3){ top:28px; }
.nav-toggle.is-open span:nth-child(1){ top:22px; transform:translateX(-50%) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ top:22px; transform:translateX(-50%) rotate(-45deg); }
.nav-toggle:focus-visible{ outline:1px solid var(--bronze-light); outline-offset:4px; }
@media (hover:hover) and (pointer:fine){
  .nav-toggle:hover span{ background:var(--bronze-light); }
}

/* ---------- slide-out menu ---------- */
.menu-backdrop{
  position:fixed; inset:0;
  z-index:60;
  background:rgba(2,2,2,0.6);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.menu-backdrop.is-open{
  opacity:1;
  pointer-events:auto;
}
.site-menu{
  position:fixed; top:0; right:0; bottom:0;
  z-index:70;
  width:min(320px, 84vw);
  background:rgba(8,8,7,0.97);
  backdrop-filter:blur(26px) saturate(150%);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  border-left:1px solid rgba(255,255,255,0.08);
  box-shadow:-24px 0 60px rgba(0,0,0,0.5);
  transform:translateX(100%);
  transition:transform .45s cubic-bezier(.4,0,.2,1);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:80px 48px;
}
.site-menu.is-open{
  transform:translateX(0);
}
.site-menu a{
  display:block;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.6rem,5vw,2rem);
  font-weight:600;
  color:var(--ink);
  text-decoration:none;
  padding:14px 0;
  opacity:0;
  transform:translateX(16px);
  transition:opacity .3s ease, color .25s ease;
}
.site-menu.is-open a{
  opacity:1;
  transform:translateX(0);
  transition:opacity .4s ease .1s, transform .4s ease .1s, color .25s ease;
}
.site-menu.is-open a:nth-of-type(1){ transition-delay:.12s; }
.site-menu.is-open a:nth-of-type(2){ transition-delay:.18s; }
.site-menu.is-open a:nth-of-type(3){ transition-delay:.24s; }
.site-menu.is-open a:nth-of-type(4){ transition-delay:.3s; }
@media (hover:hover) and (pointer:fine){
  .site-menu a:hover{ color:var(--bronze-light); }
}
.site-menu-divider{
  height:1px;
  background:var(--hairline);
  margin:18px 0;
}
.site-menu-link{ font-size:clamp(1.4rem,4.4vw,1.7rem) !important; }
.site-menu-login,
.site-menu-link.site-menu-login{
  font-family:'Inter',sans-serif !important;
  font-size:14px !important;
  font-weight:500 !important;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--ink-muted) !important;
}
.site-menu-login:focus-visible{ outline:1px solid var(--bronze-light); outline-offset:4px; }

/* ---------- shared underline-hover link treatment ---------- */
.hover-link{
  position:relative;
  text-decoration:none;
}
.hover-link::after{
  content:"";
  position:absolute; left:0; bottom:-2px;
  width:100%; height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .3s ease;
}
@media (hover:hover) and (pointer:fine){
  .hover-link:hover::after{ transform:scaleX(1); transform-origin:left; }
}
.hover-link:focus-visible{ outline:1px solid var(--bronze-light); outline-offset:4px; }

@keyframes rise{ to{ opacity:1; transform:translateY(0); } }

/* ---------- footer ---------- */
footer{
  text-align:center;
  padding:32px 20px 8px;
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:clamp(13px,2.6vw,14px);
  color:var(--ink-muted);
  background:var(--bg);
}
.legal{
  text-align:center;
  margin:0;
  padding:0 20px clamp(24px,6vw,40px);
  font-family:'Courier Prime',monospace;
  font-size:clamp(11.5px,3vw,13px);
  letter-spacing:0.5px;
  text-transform:none;
  color:rgba(201,172,130,0.7);
  background:var(--bg);
}