/* ==========================================================================
   Hustob Clothier · Global Design System
   ========================================================================== */

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* ── Variables ─────────────────────────────────────────────────────── */
:root{
  --hc-dark:       #1E1E1E;
  --hc-light:      #ffffff;
  --hc-accent:     #D4AF37;
  --hc-border:     #e5e5e5;

  --hc-font:       'Inter',sans-serif;
  --hc-gap:        clamp(.75rem, 1.5vw, 1.5rem);
  --hc-max-width:  1280px;
  --hc-dur:        .3s;
}

/* ── Reset / base ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;line-height:1.55;font-family:var(--hc-font);font-size:clamp(.9rem, 1vw + .4rem, 1rem);
  color:var(--hc-dark);background:var(--hc-light);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;transition:color var(--hc-dur) ease;}
button{font-family:inherit;cursor:pointer;background:none;border:none;}
img{max-width:100%;height:auto;display:block;}
body.no-scroll{overflow:hidden;}

/* Screen-reader only */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Skip-link */
.hc-skip-link{
  position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.hc-skip-link:focus{
  position:fixed;top:1rem;left:1rem;z-index:1100;
  padding:.5rem 1rem;background:var(--hc-accent);color:var(--hc-light);border-radius:4px;
}

/* ── SVG icon utility ─────────────────────────────────────────────── */
.hc-icon{
  width:1.35rem;height:1.35rem;flex:none;
  display:inline-block;vertical-align:-.15rem;
  color:var(--hc-dark);transition:color var(--hc-dur) ease;
}
button:hover .hc-icon,
.hc-cart:hover .hc-icon{color:var(--hc-accent);}

/* ── Header ───────────────────────────────────────────────────────── */
.hc-header{
  position:sticky;top:0;z-index:1000;width:100%;
  background:var(--hc-light);border-bottom:1px solid var(--hc-border);
  padding:clamp(.75rem, 1.5vw, 1rem) 1rem;
  transition:padding var(--hc-dur) ease,box-shadow var(--hc-dur) ease;
}
.hc-header--shrink{
  padding:.4rem 1rem;box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.hc-container{
  max-width:var(--hc-max-width);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--hc-gap);
}

/* Brand */
.hc-logo img{width:auto;height:clamp(40px, 4vw, 48px);}

/* ── Primary nav (desktop) ───────────────────────────────────────── */
.hc-nav{display:flex;}
.hc-nav-list{
  display:flex;gap:calc(var(--hc-gap)*1.4);margin:0;padding:0;list-style:none;
}
.hc-nav-link{
  position:relative;font-weight:500;padding:.5rem;border-radius:4px;
}
.hc-nav-link::after{
  content:'';position:absolute;left:0;right:0;bottom:.2rem;
  height:2px;background:var(--hc-accent);opacity:0;transform:scaleX(0);
  transition:opacity var(--hc-dur) ease,transform var(--hc-dur) ease;
}
.hc-nav-link:hover::after,
.hc-nav-link:focus::after{opacity:1;transform:scaleX(1);}
.hc-nav-link:hover,
.hc-nav-link:focus{outline:none;color:var(--hc-accent);}

/* ── Control cluster ─────────────────────────────────────────────── */
.hc-controls{display:flex;align-items:center;gap:var(--hc-gap);}

/* Search */
.hc-search{position:relative;width:max(130px,26vw);}
.hc-search input[type="search"]{
  width:100%;padding:.45rem 2.4rem .45rem .6rem;font:inherit;
  border:1px solid var(--hc-border);border-radius:4px;transition:width var(--hc-dur) ease;
}
.hc-search button{
  position:absolute;top:50%;right:.55rem;transform:translateY(-50%);
}
@media (max-width:500px){
  /* collapse to icon until focused */
  .hc-search{width:2.4rem;}
  .hc-search:focus-within{width:70vw;}
  .hc-search input[type="search"]{
    padding-left:.4rem;width:100%;
  }
}

/* Account dropdown */
.dropdown-toggle{display:flex;align-items:center;gap:.3rem;font-weight:500;}
.dropdown-toggle:focus{outline:2px solid var(--hc-accent);outline-offset:2px;}

.dropdown-menu{
  position:absolute;right:0;top:calc(100% + .5rem);min-width:165px;
  padding:.5rem 0;margin:0;list-style:none;
  background:var(--hc-light);border:1px solid var(--hc-border);border-radius:4px;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
  display:none;z-index:1001;
}
.dropdown-menu.open{display:block;}
.dropdown-menu a{display:block;padding:.55rem 1rem;font-size:.9rem;}
.dropdown-menu a:hover,
.dropdown-menu a:focus{background:var(--hc-accent);color:var(--hc-light);}

/* Cart */
.hc-cart{position:relative;display:inline-flex;align-items:center;}
.hc-cart-count{
  position:absolute;top:-6px;right:-10px;padding:2px 6px;
  font-size:.7rem;font-weight:600;border-radius:999px;
  background:var(--hc-accent);color:var(--hc-light);
}

/* Hamburger */
.hc-hamburger{display:none;flex-direction:column;gap:4px;padding:.5rem;}
.hc-hamburger span{
  width:22px;height:2px;background:var(--hc-dark);
  transition:transform var(--hc-dur) ease,background var(--hc-dur) ease;
}
@media (hover:hover){
  .hc-hamburger:hover span{background:var(--hc-accent);}
}

/* ── Mobile drawer ──────────────────────────────────────────────── */
.hc-mobile-nav{
  position:fixed;left:0;top:0;width:80vw;max-width:290px;
  height:calc(100vh - env(safe-area-inset-bottom));     /* notch safe */
  background:var(--hc-light);padding:2rem 1rem 3rem;
  transform:translateX(-100%);transition:transform var(--hc-dur) ease;
  box-shadow:2px 0 6px rgba(0,0,0,.1);z-index:1002;
}
.hc-mobile-nav.open{transform:translateX(0);}
.hc-mobile-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem;}
.hc-mobile-nav a{font-size:1.1rem;padding:.5rem 0;width:100%;}
.hc-mobile-nav a:hover,
.hc-mobile-nav a:focus{color:var(--hc-accent);}

/* Overlay */
.hc-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(1px);
  opacity:0;visibility:hidden;transition:opacity var(--hc-dur) ease,visibility var(--hc-dur) ease;
  z-index:1001;
}
.hc-overlay.open{opacity:1;visibility:visible;}

/* ── Breakpoints ─────────────────────────────────────────────────-- */
@media (max-width:992px){
  .hc-nav{display:none;}        /* hide desktop links */
  .hc-hamburger{display:flex;}  /* show burger */
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;}
}

/* skip-link */
.skip-link {
  position: absolute; left: -999px; top: auto; width: 1px; height: 1px;
  overflow: hidden; z-index: -999;
}
.skip-link:focus {
  position: fixed; left: 1rem; top: 1rem;
  padding: .5rem .75rem; background: var(--hc-accent); color: #fff;
  border-radius: 4px; z-index: 2000;
}

/* search suggestions dropdown (hidden until JS fills) */
.hc-search-suggest {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--hc-border);
  box-shadow: 0 8px 16px rgba(0,0,0,.08); border-radius: 4px;
  list-style: none; margin: 0; padding: .25rem 0;
  max-height: 240px; overflow-y: auto; font-size: .9rem;
}
.hc-search-suggest li a { display: block; padding: .4rem .75rem; }
.hc-search-suggest li a:hover { background: var(--hc-accent); color:#fff; }