/* ===================================================================
   CARMELICIOUS CREATIVE STUDIO — Site Chrome
   Global header, navigation, and footer. Loaded on every page.
   =================================================================== */

/* SKIP LINK */
.cc-skiplink {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--cc-peach); color: var(--cc-charcoal-deep);
  padding: 0.75rem 1.25rem; font-family: var(--cc-font-body);
  font-size: 0.875rem; border-radius: 0 0 var(--cc-radius-md) 0;
}
.cc-skiplink:focus { left: 0; }

/* HEADER — transparent over hero, solidifies on scroll */
.cc-header {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  height: var(--cc-header-h);
  display: flex; align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--cc-transition),
              border-color var(--cc-transition),
              backdrop-filter var(--cc-transition);
}
.cc-header.is-scrolled {
  background: rgba(247,241,231,0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--cc-line);
}
.cc-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--cc-space-lg); width: 100%;
}

/* WordPress admin bar — when logged in it is fixed at the top and would
   otherwise clip the fixed header. Push the header (and the mobile menu
   panel) down by the admin bar height so nothing is cut off. */
.admin-bar .cc-header { inset-block-start: 32px; }
.admin-bar .cc-nav-mobile { inset-block-start: calc(var(--cc-header-h) + 32px); }
@media screen and (max-width: 782px) {
  .admin-bar .cc-header { inset-block-start: 46px; }
  .admin-bar .cc-nav-mobile { inset-block-start: calc(var(--cc-header-h) + 46px); }
}

/* BRAND WORDMARK */
.cc-brand {
  font-family: var(--cc-font-heading);
  font-style: italic; font-weight: 500;
  font-size: 1.4rem; line-height: 1;
  color: var(--cc-cream); letter-spacing: -0.01em;
  display: flex; flex-direction: column; gap: 2px;
}
.cc-brand span {
  font-family: var(--cc-font-body); font-style: normal; font-weight: 400;
  font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--cc-peach-dark);
}
.cc-brand:hover { color: var(--cc-peach-dark); }

/* PRIMARY NAV */
.cc-nav-list {
  display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.5rem);
  list-style: none; margin: 0; padding: 0;
}
.cc-nav-list a {
  font-family: var(--cc-font-body); font-weight: 300;
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cc-cream-soft); position: relative; padding-block: 0.4rem;
}
.cc-nav-list a::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0;
  height: 1px; background: var(--cc-peach-dark);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--cc-transition);
}
.cc-nav-list a:hover, .cc-nav-list .current-menu-item a { color: var(--cc-peach-dark); }
.cc-nav-list a:hover::after,
.cc-nav-list .current-menu-item a::after { transform: scaleX(1); }

/* BURGER */
.cc-nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  width: 40px; height: 40px; padding: 8px;
  flex-direction: column; justify-content: center; gap: 6px;
}
.cc-nav-toggle span {
  display: block; height: 1px; width: 100%;
  background: var(--cc-cream);
  transition: transform var(--cc-transition), opacity var(--cc-transition);
}
.cc-nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.cc-nav-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

/* MOBILE PANEL */
.cc-nav-mobile {
  position: fixed; inset: var(--cc-header-h) 0 0 0; z-index: 99;
  background: rgba(247,241,231,0.97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--cc-space-lg); padding: var(--cc-gutter);
}
.cc-nav-mobile[hidden] { display: none; }
.cc-nav-mobile-list {
  list-style: none; margin: 0; padding: 0; text-align: center;
  display: flex; flex-direction: column; gap: var(--cc-space-lg);
}
.cc-nav-mobile-list a {
  font-family: var(--cc-font-heading); font-style: italic;
  font-size: 1.75rem; color: var(--cc-cream);
}
.cc-nav-mobile-list a:hover { color: var(--cc-peach-dark); }
/* Give the CTA extra breathing room so it sits apart from the menu links
   (on top of the panel's existing gap) rather than bundled with them. */
.cc-nav-mobile .cc-btn { margin-block-start: var(--cc-space-md); }

/* FOOTER — single centered line */
.cc-site-footer {
  background: var(--cc-charcoal-deep);
  border-top: 1px solid var(--cc-line);
  padding-block: var(--cc-space-md);
}
.cc-footer-line {
  text-align: center;
  font-family: var(--cc-font-body); font-weight: 400;
  font-size: 0.85rem; letter-spacing: 0.04em;
  color: var(--cc-cream-soft); margin: 0;
}
.cc-footer-line a { color: inherit; }
.cc-footer-line a:hover { color: var(--cc-peach-dark); opacity: 1; }

/* BODY OFFSET — header is fixed, so push content down on non-hero pages */
body.cc-has-header-offset { padding-top: var(--cc-header-h); }

/* RESPONSIVE */
@media (max-width: 900px) {
  /* Scoped under .cc-header so this beats components.css `.cc-btn { display: inline-flex }`,
     which loads later and otherwise keeps the CTA visible on mobile. */
  .cc-nav,
  .cc-header .cc-header-cta { display: none; }
  .cc-nav-toggle { display: flex; }
}