/* ============================================================
   Custom Crafts by NA — shared site foundation
   ONE source of truth for header, footer, and shared UI.
   Header measurements use !important so no page-level CSS can
   change the height, type, spacing, logo, CTA, or breakpoint.
   ============================================================ */
:root{
  --cc-sage-dk:#4A5651; --cc-sage:#7E928A; --cc-sage-lt:#B5BDAC; --cc-cream:#F6F3EB;
  --cc-linen:#DDD5C3; --cc-warm-linen:#BCB4A3; --cc-ink:#1a1a1a; --cc-white:#FFFFFF;
  --cc-ease:cubic-bezier(0.22,0.61,0.36,1);
}

/* =========================== HEADER (LOCKED) =========================== */
.nav-wrap{position:sticky!important;top:0!important;z-index:60!important;background:#4A5651!important;border-bottom:1px solid rgba(255,255,255,.12)!important;}
.nav-wrap .nav{
  padding:14px clamp(20px,4vw,32px)!important;display:flex!important;justify-content:space-between!important;
  align-items:center!important;gap:24px!important;max-width:1400px!important;margin:0 auto!important;
  position:static!important;width:auto!important;min-height:0!important;
}
/* TOUCH TARGETS. The logo link renders 26px tall and the CTA pill 33px - both
   under the 44px minimum. The header height is load-bearing (heroes across the
   site subtract exactly 62px / 55px), so the visible boxes are left alone and
   the HIT AREA is extended vertically with a pseudo-element instead: 26+18=44
   and 33+12=45, with no change to layout, spacing or header height. */
.nav-wrap .nav-brand{display:flex!important;align-items:center!important;gap:14px!important;text-decoration:none!important;flex:0 0 auto;position:relative;}
.nav-wrap .nav-brand::after{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px;}
.nav-wrap .nav-logo{height:26px!important;width:auto!important;display:block!important;transition:opacity .3s var(--cc-ease);}
.nav-wrap .nav-brand:hover .nav-logo{opacity:.85;}
.nav-wrap .nav-menu{
  display:none;gap:26px!important;font-family:'DM Sans',system-ui,sans-serif!important;font-size:12px!important;
  font-weight:400!important;letter-spacing:.18em!important;text-transform:uppercase!important;color:#fff!important;
  align-items:center!important;margin:0!important;
}
.nav-wrap .nav-menu a{color:#fff!important;text-decoration:none!important;opacity:.72;transition:opacity .2s;padding:0!important;border:0!important;background:none!important;font-family:'DM Sans',system-ui,sans-serif!important;font-size:12px!important;font-weight:400!important;letter-spacing:.18em!important;text-transform:uppercase!important;line-height:1!important;}
.nav-wrap .nav-menu a:hover{opacity:1;}
.nav-wrap .nav-menu a.active{opacity:1;border-bottom:1px solid rgba(255,255,255,.6)!important;padding-bottom:2px!important;}
.nav-wrap .nav-cta{
  font-family:'DM Sans',system-ui,sans-serif!important;font-size:11px!important;font-weight:500!important;letter-spacing:.18em!important;
  text-transform:uppercase!important;color:#fff!important;padding:10px 20px!important;border:1px solid rgba(255,255,255,.7)!important;
  border-radius:100px!important;background:transparent!important;cursor:pointer;transition:background-color .3s,color .3s,border-color .3s;text-decoration:none!important;white-space:nowrap!important;flex:0 0 auto;line-height:1!important;
}
.nav-wrap .nav-cta{position:relative;}
.nav-wrap .nav-cta::after{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px;border-radius:100px;}
.nav-wrap .nav-cta:hover{background:#fff!important;color:#4A5651!important;border-color:#fff!important;}
.nav-wrap .nav-toggle{display:inline-flex!important;flex-direction:column;justify-content:center;gap:5px;width:44px!important;height:44px!important;padding:10px;margin:-10px -10px -10px 0;background:none!important;border:0!important;cursor:pointer;}
.nav-wrap .nav-toggle span{display:block;height:2px;width:100%;background:#fff;border-radius:2px;transition:transform .3s var(--cc-ease),opacity .2s;}
.nav-wrap .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-wrap .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-wrap .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-wrap .nav-mobile{display:none;background:#4A5651!important;border-top:1px solid rgba(255,255,255,.12);padding:8px clamp(20px,4vw,32px) 24px;}
.nav-wrap .nav-mobile.open{display:block;}
.nav-wrap .nav-mobile a{display:block!important;padding:15px 0!important;color:#fff!important;text-decoration:none!important;font-family:'DM Sans',system-ui,sans-serif!important;font-size:14px!important;font-weight:400!important;letter-spacing:.18em!important;text-transform:uppercase!important;border-bottom:1px solid rgba(255,255,255,.10);background:none!important;}
.nav-wrap .nav-mobile a:last-child{border-bottom:0;}
.nav-wrap .nav-mobile a.active{opacity:1;color:#fff!important;}
/* Full desktop nav appears only when all 7 links + logo + CTA fit
   comfortably (measured need ~1115px). Below this, use the hamburger. */
@media(min-width:1160px){
  .nav-wrap .nav-menu{display:flex!important;}
  .nav-wrap .nav-toggle{display:none!important;}
  .nav-wrap .nav-mobile,.nav-wrap .nav-mobile.open{display:none!important;}
}
/* On narrow phones the header CTA crowds the logo + hamburger;
   hide it there since "Start a Project" is inside the mobile menu. */
@media(max-width:520px){ .nav-wrap .nav-cta{display:none!important;} }
body.cc-menu-open{overflow:hidden!important;}

/* =========================== FOOTER =========================== */
.footer{background:#1a1a1a;color:#F6F3EB;padding:64px clamp(24px,5vw,80px) 48px;text-align:center;}
.footer-brand{font-family:'Austen',serif;font-size:32px;margin-bottom:16px;letter-spacing:.01em;}
/* Footer signature: the approved horizontal WORDMARK (CC_words_only_white,
   4534x656, 6.91:1). The full floral CC lockup is a hero asset and rendered
   wrong at footer scale - it does not belong here. Sized so the words and both
   horizontal rules stay legible (190px wide = 27px tall on a phone, 240px =
   35px at desktop) without ever approaching hero scale. Never crop or stretch
   it: width only, height auto. */
.footer-logo{display:block;margin:0 auto;width:clamp(190px,22vw,240px);height:auto;}
.footer-tag{font-size:13px;letter-spacing:.16em;text-transform:uppercase;opacity:.6;margin-bottom:28px;}
.footer-nav{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-bottom:32px;}
.footer-nav a{color:#F6F3EB;opacity:.7;text-decoration:none;font-size:12px;letter-spacing:.16em;text-transform:uppercase;transition:opacity .2s;}
.footer-nav a:hover{opacity:1;color:#fff;}
.footer-copy{font-size:12px;opacity:.5;line-height:1.6;}

/* ================= SHARED CONTACT COMPONENT ================= */
/* One presentation used across pages; questions/handlers differ. */
.cc-contact{background:#4A5651;color:#F6F3EB;text-align:center;padding:clamp(3rem,6vw,4.8rem) 1.5rem;}
/* Eyebrow, .cv and .cc-fine were sage-lt / cream-at-60%, which measure 3.95:1
   and 3.66:1 on the #4A5651 ground - under the 4.5:1 small text needs. Raised
   to the lightest values that clear AA while keeping them quieter than the
   headline: 5.29:1, 5.12:1 and 4.96:1. */
.cc-contact .cc-eyebrow,.cc-contact .eyebrow{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:rgba(246,243,235,.82);display:block;}
.cc-contact .btn{display:inline-block;margin-top:1.6rem;border:1px solid rgba(246,243,235,.6);color:#fff;padding:12px 26px;border-radius:999px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;transition:.25s;text-decoration:none;}
.cc-contact .btn:hover{background:#fff;color:#4A5651;}
.cc-contact h2{font-family:'Austen',serif;font-weight:400;font-size:clamp(30px,4.6vw,50px);line-height:1.05;max-width:18ch;margin:.55rem auto 0;}
.cc-contact p{max-width:52ch;margin:14px auto 0;color:rgba(246,243,235,.76);font-size:15px;line-height:1.6;}
.cc-contact .cc-fine{font-size:13px;color:rgba(246,243,235,.78);margin-top:10px;}
.cc-channels{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:760px;margin:clamp(2rem,4vw,2.6rem) auto 0;}
@media(min-width:760px){.cc-channels{grid-template-columns:repeat(4,1fr);}}
.cc-channel{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 16px;border:1px solid rgba(246,243,235,.22);border-radius:8px;transition:.25s;color:#fff;text-decoration:none;}
.cc-channel:hover,.cc-channel:focus-visible{background:rgba(246,243,235,.06);border-color:rgba(246,243,235,.5);outline:none;}
.cc-channel svg{width:25px;height:25px;stroke:#B5BDAC;fill:none;stroke-width:1.5;}
.cc-channel .cl{font-size:13.5px;color:#fff;}
.cc-channel .cv{font-size:11.5px;color:rgba(246,243,235,.80);}

/* focus-visible for accessibility across shared components */
a:focus-visible,button:focus-visible{outline:2px solid #B5BDAC;outline-offset:2px;}


/* ---------------------------------------------------------------------------
   SHARED HERO MOTION (Home, Events, Judaica, Kippot).
   Opt-in only: these rules do nothing on a page without the data attributes,
   and nothing at all until hero-motion.js adds `js-hero`, so a no-JS visitor
   always sees the foreground. Gifts & Business does not opt in.
--------------------------------------------------------------------------- */
/* A transition, not a keyframe animation. If the animation is ever throttled or
   never starts, the resting state of .hero-in is still opacity:1 — the foreground
   cannot be left permanently invisible. A keyframe would stay stuck at 0. */
.js-hero [data-hero-reveal]{opacity:0;transform:translateY(14px);
  transition:opacity 1.1s cubic-bezier(.2,.7,.2,1) .15s,transform 1.1s cubic-bezier(.2,.7,.2,1) .15s}
.js-hero.hero-in [data-hero-reveal]{opacity:1;transform:none}
[data-hero-bg]{will-change:transform}
@media (prefers-reduced-motion:reduce){
  .js-hero [data-hero-reveal],.js-hero.hero-in [data-hero-reveal]{opacity:1;transform:none;transition:none}
  [data-hero-bg]{transform:none!important;will-change:auto}
}