/*
Theme Name: Coach Christiansen
Theme URI: https://coachchristiansen.no
Author: Studio — bespoke build
Description: Bespoke block theme for Stefan Christiansen — physiotherapy, personal training and coaching in Moss, Norway. Brand: Fraunces + Outfit; warm cream, sand, gold and ink. Light, airy, organic aesthetic with gentle motion.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: coach-christiansen
*/

/* ------------------------------------------------------------------
   Custom front-end styles. Block themes do NOT auto-load style.css on
   the front end, so it is enqueued in functions.php (and mirrored into
   the editor via add_editor_style). Design tokens live in theme.json;
   this file carries the signature shapes, motion and polish that
   theme.json can't express.
------------------------------------------------------------------ */

:root {
  --cc-ease: cubic-bezier(0.19, 1, 0.22, 1);
  --cc-ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --cc-radius-lg: 1.25rem;
  --cc-radius-xl: 2rem;
  /* Width + horizontal inset of the navbar's inner content band. The hero
     copy reuses BOTH so the headline lines up vertically with the navbar logo
     at any screen width. */
  --cc-header-max: 1280px;
  --cc-edge-inset: clamp(1.5rem, 4vw, 3.5rem);
  /* Instagram glyph as a masked SVG (inherits currentColor at use sites). */
  --cc-instagram-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16zm0 1.44c-3.14 0-3.51.01-4.75.07-.9.04-1.39.19-1.71.32-.43.17-.74.37-1.06.69-.32.32-.52.63-.69 1.06-.13.32-.28.81-.32 1.71-.06 1.24-.07 1.61-.07 4.75s.01 3.51.07 4.75c.04.9.19 1.39.32 1.71.17.43.37.74.69 1.06.32.32.63.52 1.06.69.32.13.81.28 1.71.32 1.24.06 1.61.07 4.75.07s3.51-.01 4.75-.07c.9-.04 1.39-.19 1.71-.32.43-.17.74-.37 1.06-.69.32-.32.52-.63.69-1.06.13-.32.28-.81.32-1.71.06-1.24.07-1.61.07-4.75s-.01-3.51-.07-4.75c-.04-.9-.19-1.39-.32-1.71a2.85 2.85 0 0 0-.69-1.06 2.85 2.85 0 0 0-1.06-.69c-.32-.13-.81-.28-1.71-.32-1.24-.06-1.61-.07-4.75-.07zm0 2.45a5.95 5.95 0 1 1 0 11.9 5.95 5.95 0 0 1 0-11.9zm0 9.81a3.86 3.86 0 1 0 0-7.72 3.86 3.86 0 0 0 0 7.72zm7.58-10.05a1.39 1.39 0 1 1-2.78 0 1.39 1.39 0 0 1 2.78 0z'/%3E%3C/svg%3E");
  /* Envelope glyph as a masked SVG (inherits currentColor at use sites). */
  --cc-email-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm9 7.13L4.35 6.5h15.3L12 12.13zM4 8.04V17h16V8.04l-7.4 5.45a1 1 0 0 1-1.2 0L4 8.04z'/%3E%3C/svg%3E");
  /* Map-pin glyph as a masked SVG (inherits currentColor at use sites). */
  --cc-pin-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}

/* The full-bleed sections sit directly on top of each other. WordPress adds a
   ~24px block-gap margin between every top-level block (header, main, each
   section, footer); against the white body that gap flashed as white strips
   over the navbar, under the footer, and between sections. Collapse those
   gaps and paint the document the brand ink so nothing white can show. */
html { background-color: var(--wp--preset--color--ink); }
.wp-site-blocks > * { margin-block: 0 !important; }
.cc-track > .entry-content > *,
.cc-track > * { margin-block: 0 !important; }

/* Accessibility: always-visible keyboard focus */
:where(a, button, .wp-block-button__link, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Display headings: lean on Fraunces' optical sizing */
.wp-block-heading {
  font-optical-sizing: auto;
}

/* Eyebrow / utility label */
.cc-eyebrow {
  font-family: var(--wp--preset--font-family--body);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--wp--preset--color--accent);
  margin-bottom: 0.75rem;
}

/* Buttons: gentle lift on hover */
.wp-block-button__link {
  transition: transform 0.3s var(--cc-ease),
              background-color 0.3s var(--cc-ease),
              color 0.3s var(--cc-ease),
              box-shadow 0.3s var(--cc-ease);
  box-shadow: 0 1px 3px rgba(17, 16, 14, 0.06);
  /* Transparent border so solid and outline buttons share identical box
     dimensions — keeps the two hero buttons exactly the same height/width. */
  border: 1.5px solid transparent;
}
.wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(17, 16, 14, 0.12);
}
/* Gold accent hover for every solid (non-outline) button — hero CTA, nav,
   section CTAs, footer. The outline style keeps its subtle fill (handled in
   its own rule below) and is explicitly excluded here. */
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) .wp-element-button:hover {
  background-color: var(--wp--preset--color--accent) !important;
  color: var(--wp--preset--color--base) !important;
}
/* Buttons a touch larger overall: bump the font size and padding so the CTAs
   read more confidently. Applies to the button block's inner element. */
.wp-element-button {
  font-size: 1rem;
  padding: 1.05rem 2.1rem;
}

/* Outline button reads correctly on both cream and ink backgrounds.
   Match the solid button's box exactly: same border width and the same
   padding (theme.json gives buttons 0.95rem/1.9rem), with border-box sizing
   so the 1.5px border never makes the outline button taller or wider. */
.wp-block-button .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
  box-sizing: border-box;
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: currentColor;
  border: 1.5px solid currentColor;
  box-shadow: none;
  padding: 1.05rem 2.1rem;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
}

/* ----- Header ----- */
/* The header overlays the hero: it's fixed to the top of the viewport and
   floats *on top of* the full-bleed hero rather than pushing it down. The
   front page hero carries enough top padding to clear it. JS toggles
   `.cc-at-top` to fade between transparent-over-hero and solid-on-scroll. */
.cc-site-header {
  /* !important guards against WordPress block-layout CSS that otherwise
     resets group wrappers to position:relative, which would drop the header
     back into flow and stop it overlaying the hero. */
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  /* Zero the header's own global side padding so its inner 1280 band centres
     within the FULL viewport — exactly like the hero cover. This keeps the
     navbar logo and the hero headline on the same vertical line at every
     screen width (the band's edge-inset is the single source of side spacing). */
  padding-left: 0 !important;
  padding-right: 0 !important;
  /* Default = solid (scrolled) state. JS adds .cc-at-top for transparency. */
  backdrop-filter: saturate(1.1) blur(8px);
  background-color: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--sand) 60%, transparent);
  box-shadow: 0 1px 12px color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
  transition: background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
}
/* Transparent state while sitting over the hero (before scroll).
   On the front page the header is transparent BY DEFAULT (no JS needed) and
   only turns solid once `.cc-scrolled` is added on scroll — so there is never
   a flash of a solid bar over the hero. `.cc-at-top` is kept as an explicit
   hook for the same transparent state on any page. */
.cc-site-header.cc-at-top,
body.home .cc-site-header:not(.cc-scrolled) {
  background-color: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
.cc-site-header.cc-at-top .wp-block-navigation a:not(.wp-block-button__link),
.cc-site-header.cc-at-top .has-display-font-family,
.cc-site-header.cc-at-top .has-display-font-family a,
.cc-site-header.cc-at-top .wp-block-navigation__responsive-container-open,
body.home .cc-site-header:not(.cc-scrolled) .wp-block-navigation a:not(.wp-block-button__link),
body.home .cc-site-header:not(.cc-scrolled) .has-display-font-family,
body.home .cc-site-header:not(.cc-scrolled) .has-display-font-family a,
body.home .cc-site-header:not(.cc-scrolled) .wp-block-navigation__responsive-container-open {
  /* Brand name + plain nav links turn white over the hero. The hamburger
     button's SVG inherits this via currentColor, so it turns white too. The
     solid white CTA button is EXCLUDED so it keeps its dark (ink) label on its
     white pill. !important beats the inline `color:inherit` on the logo link. */
  color: var(--wp--preset--color--base) !important;
}
.cc-site-header.cc-at-top .wp-block-navigation a:not(.wp-block-button__link):hover,
body.home .cc-site-header:not(.cc-scrolled) .wp-block-navigation a:not(.wp-block-button__link):hover {
  /* Gold hover applies to plain nav links only — NOT the button, which keeps
     the hero outline button's neutral fill. !important beats the white-at-top
     rule above. */
  color: var(--wp--preset--color--accent-light) !important;
}
/* The nav CTA is a solid white pill that behaves exactly like the white
   "Ta kontakt" hero button: white background + dark (ink) label, and on hover
   the shared global solid-button rule fills it gold. Sized a touch smaller
   than the hero buttons (slightly smaller font + tighter padding) so it reads
   as a compact navbar pill. */
.cc-site-header .wp-block-button .wp-element-button {
  font-size: 0.92rem !important;
  padding: 0.78rem 1.7rem !important;
}
/* Scrolled / solid navbar: a white pill on the cream bar has poor contrast, so
   the CTA flips to a DARK pill (ink background + light label). This is the
   default solid state — it covers the home page once `.cc-scrolled` is added
   AND every subpage (where the header is solid and never `.cc-at-top`). The
   transparent-over-hero white pill is restored by the rule below. */
.cc-site-header .wp-block-button__link {
  background-color: var(--wp--preset--color--contrast) !important;
  color: var(--wp--preset--color--base) !important;
  transition: background-color 0.3s var(--cc-ease), color 0.3s var(--cc-ease),
              transform 0.3s var(--cc-ease), box-shadow 0.3s var(--cc-ease);
}
/* Transparent over the hero (at top / not scrolled): keep the white pill with
   the dark label, reading cleanly against the dark hero image. */
.cc-site-header.cc-at-top .wp-block-button__link,
body.home .cc-site-header:not(.cc-scrolled) .wp-block-button__link {
  background-color: var(--wp--preset--color--base) !important;
  color: var(--wp--preset--color--ink) !important;
}
/* Gold fill on hover in BOTH states (matches the hero primary CTA). */
.cc-site-header .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--accent) !important;
  color: var(--wp--preset--color--base) !important;
}
/* At-top (transparent) state: the white-pill rule above has higher specificity
   than the generic hover, so it would win on hover too. Re-assert the gold
   hover at matching specificity so the CTA still turns gold over the hero. */
.cc-site-header.cc-at-top .wp-block-button__link:hover,
body.home .cc-site-header:not(.cc-scrolled) .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--accent) !important;
  color: var(--wp--preset--color--base) !important;
}
/* Stretch the navbar wider toward the screen edges. The header is a
   constrained group; widen its inner content band and give it roomy side
   padding so the logo sits near the left edge and the nav near the right. */
.cc-site-header > .wp-block-group {
  max-width: var(--cc-header-max);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--cc-edge-inset);
}
.cc-logo img {
  height: 42px;
  width: auto;
  display: block;
  transition: transform 0.3s var(--cc-ease);
}
/* Logo hover: gentle lift on the mark, gold tint on the brand name. The logo
   is an image link, so kill the default underline that browsers add on hover. */
.cc-logo a,
.cc-logo a:hover { text-decoration: none; }
.cc-logo a:hover img {
  transform: scale(1.06) rotate(-2deg);
}
.cc-site-header .has-display-font-family a {
  transition: color 0.25s var(--cc-ease);
}
.cc-site-header .has-display-font-family a:hover {
  color: var(--wp--preset--color--accent) !important;
}
/* At-top (transparent) state: the white-text rule for the brand name has higher
   specificity than the generic title hover, so re-assert the gold hover at
   matching specificity so the title still turns gold over the hero. */
.cc-site-header.cc-at-top .has-display-font-family a:hover,
body.home .cc-site-header:not(.cc-scrolled) .has-display-font-family a:hover {
  color: var(--wp--preset--color--accent) !important;
}

/* Site nav: no underline, gold hover with an animated underline. Exclude the
   button link (.wp-block-button__link) so it keeps the full global button
   styling + transition (transform/background/box-shadow) and behaves EXACTLY
   like the hero outline button, not like a plain nav link. */
.cc-site-header .wp-block-navigation a:not(.wp-block-button__link) {
  text-decoration: none;
  color: var(--wp--preset--color--contrast);
  font-weight: 500;
  position: relative;
  transition: color 0.25s var(--cc-ease);
}
/* Animated underline that grows from the left on hover and on the current page. */
.cc-site-header .wp-block-navigation .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.35em;
  width: 100%;
  height: 2px;
  background-color: var(--wp--preset--color--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--cc-ease);
}
.cc-site-header .wp-block-navigation a:not(.wp-block-button__link):hover {
  color: var(--wp--preset--color--accent);
}
.cc-site-header .wp-block-navigation a:hover .wp-block-navigation-item__content::after,
.cc-site-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content::after,
.cc-site-header .wp-block-navigation .wp-block-navigation-item.current-menu-item::after {
  transform: scaleX(1);
}
/* Current page: gold link colour to mark where the visitor is. */
.cc-site-header .wp-block-navigation .current-menu-item a,
.cc-site-header .wp-block-navigation .wp-block-navigation-item.current-menu-item a {
  color: var(--wp--preset--color--accent);
}

/* ----- Mobile menu overlay ----- */
/* When the hamburger opens the menu it renders as a fixed overlay INSIDE the
   header, so the transparent/at-top white-link rules above would otherwise make
   the menu links white-on-white. Force a light (cream) panel with dark text and
   reset the link colours regardless of header state. */
.cc-site-header .wp-block-navigation__responsive-container.is-menu-open {
  /* The header is position:fixed, so the overlay would otherwise clip to the bar
     height. Pin a TOP dropdown panel: full width, auto height (only as tall as
     its content ~ top third of the screen), pinned just below the top edge. */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100vw !important;
  height: auto !important;
  max-height: 85vh !important;
  overflow-y: auto !important;
  z-index: 1000 !important;
  box-sizing: border-box !important;
  background-color: var(--wp--preset--color--base) !important;
  padding: 5rem clamp(1.5rem, 6vw, 2.5rem) 2.25rem !important;
  box-shadow: 0 18px 50px color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent) !important;
  border-bottom-left-radius: 1.5rem;
  border-bottom-right-radius: 1.5rem;
  display: block !important;
}
.cc-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}
.cc-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
}
.cc-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
}
.cc-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  text-align: center;
}
.cc-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  text-align: center;
}
/* Center each list item + its link so the labels sit dead-centre in the panel. */
.cc-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
}
.cc-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: block !important;
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
}
.cc-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-buttons {
  justify-content: center !important;
  width: 100%;
}
/* The "Ta kontakt" CTA inside the open menu must read as the DARK pill (ink bg,
   cream text), not the light at-top variant that cascades in over the hero. */
.cc-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-button__link,
body.home .cc-site-header:not(.cc-scrolled) .wp-block-navigation__responsive-container.is-menu-open .wp-block-button__link {
  background-color: var(--wp--preset--color--ink) !important;
  color: var(--wp--preset--color--base) !important;
  border-color: var(--wp--preset--color--ink) !important;
}
.cc-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-button__link:hover,
body.home .cc-site-header:not(.cc-scrolled) .wp-block-navigation__responsive-container.is-menu-open .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--accent) !important;
  border-color: var(--wp--preset--color--accent) !important;
  color: var(--wp--preset--color--ink) !important;
}
/* Keep the header's logo + title visible ABOVE the open panel. The panel pins to
   top:0 and would otherwise cover the brand row. When the menu is open the nav's
   responsive container carries .has-modal-open; from there, lift the sibling
   brand group (logo + "Stefan Christiansen") above the panel. */
.cc-site-header:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-group.is-nowrap {
  position: relative;
  z-index: 1002;
}
.cc-site-header:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-group.is-nowrap .cc-logo a,
.cc-site-header:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-group.is-nowrap .has-display-font-family,
.cc-site-header:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-group.is-nowrap .has-display-font-family a {
  /* Force the brand dark so it reads on the light open panel, even on the
     front-page at-top state where it would otherwise be white. */
  color: var(--wp--preset--color--contrast) !important;
  transition: color 0.25s var(--cc-ease);
}
/* Gold hover on the brand (logo + title) while the menu is open. */
.cc-site-header:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-group.is-nowrap .has-display-font-family:hover,
.cc-site-header:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-group.is-nowrap .has-display-font-family a:hover {
  color: var(--wp--preset--color--accent) !important;
}
/* Place the close (X) button exactly where the hamburger icon was: pinned to
   the top-right corner of the viewport, aligned with the header bar. */
.cc-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  position: fixed !important;
  top: 1.4rem !important;
  right: 1.5rem !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--wp--preset--color--contrast) 7%, transparent);
  color: var(--wp--preset--color--contrast) !important;
  z-index: 1001 !important;
}
.cc-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  transition: background-color 0.25s var(--cc-ease), color 0.25s var(--cc-ease);
}
.cc-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
}
/* Gold hover on the X close button. */
.cc-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover {
  background: color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent) !important;
  color: var(--wp--preset--color--accent) !important;
}
/* Links inside the open overlay: dark ink, larger, centred. The high-specificity
   selector + !important overrides the .cc-at-top white-link rule that cascades
   into the header on the front page. */
.cc-site-header .wp-block-navigation__responsive-container.is-menu-open a:not(.wp-block-button__link),
body.home .cc-site-header:not(.cc-scrolled) .wp-block-navigation__responsive-container.is-menu-open a:not(.wp-block-button__link) {
  color: var(--wp--preset--color--contrast) !important;
  font-size: 1.35rem;
  font-weight: 600;
  padding: 0.4rem 0;
  transition: color 0.25s var(--cc-ease);
}
.cc-site-header .wp-block-navigation__responsive-container.is-menu-open a:not(.wp-block-button__link):hover,
body.home .cc-site-header:not(.cc-scrolled) .wp-block-navigation__responsive-container.is-menu-open a:not(.wp-block-button__link):hover {
  color: var(--wp--preset--color--accent) !important;
}
/* The CTA button inside the overlay keeps its dark pill but gets a little room. */
.cc-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-buttons {
  margin-top: 0.8rem;
}

/* ----- Hero ----- */
/* Full-screen hero: cover the whole viewport on load (use the small viewport
   unit so mobile browser chrome doesn't clip it). */
.cc-hero {
  min-height: 100vh;
  min-height: 100svh;
  /* The cover block applies its own ~1em horizontal padding which is narrower
     than the page's global side padding, pushing the hero text in by a few px
     versus the sections below. Zero it out here so the hero copy's own global
     padding is the single source of the left inset — making the headline line
     up exactly with every section. */
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Responsive focal point: Stefan is on the RIGHT of the frame. As the viewport
   narrows the cover crops to a taller window, so we push object-position toward
   the right edge to keep him in shot (overrides the block's inline value). */
@media (max-width: 1024px) {
  .cc-hero .wp-block-cover__image-background {
    object-position: 78% 38% !important;
  }
}
@media (max-width: 600px) {
  .cc-hero .wp-block-cover__image-background {
    object-position: 85% 34% !important;
  }
}
/* Hero copy follows the same content constraint as the rest of the page (the
   inner container is already a constrained layout, so its content band lines
   up with every other section). We don't push the copy to the full-bleed
   edge — we just left-align the text within that normal content band so the
   headline starts at the same left margin as the sections below. */
.cc-hero .wp-block-cover__inner-container {
  /* Match the navbar's inner band EXACTLY: the same centred 1280px max-width
     band the header uses. This is the key to alignment at ANY screen width —
     on wide screens the band is centred with equal gutters, so the hero copy
     tracks the navbar instead of staying pinned to a small fixed inset. */
  width: 100%;
  max-width: var(--cc-header-max, 1280px);
  margin-inline: auto;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.cc-hero .wp-block-cover__inner-container > .cc-hero-copy {
  /* Within that shared 1280 band, pad the copy by the page's global side
     padding PLUS the navbar's edge inset — the navbar logo sits at exactly
     that combined offset (header global-padding + band inset), so the headline
     lines up under the logo at every viewport width. !important overrides
     core's auto margin. */
  max-width: calc(640px + var(--cc-edge-inset));
  margin-left: 0 !important;
  margin-right: auto !important;
  padding-left: var(--cc-edge-inset) !important;
  padding-right: var(--cc-edge-inset);
  text-align: left;
}
.cc-hero h1 { color: var(--wp--preset--color--base); }
.cc-hero .cc-eyebrow { color: var(--wp--preset--color--accent-light); }

/* ----- Service card grid: 4 across, equal height, responsive ----- */
.cc-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--preset--spacing--40);
  align-items: stretch;
}
/* The grid items are full-bleed group wrappers; reset their auto margins so
   they sit flush in the grid track. */
.cc-card-grid > .cc-card {
  margin: 0;
  max-width: none;
}
@media (max-width: 1024px) {
  .cc-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .cc-card-grid { grid-template-columns: 1fr; }
}

/* ----- Generic responsive grids (Om meg page) ----- */
.cc-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--40);
  align-items: stretch;
}
.cc-grid-3 > * { margin: 0; max-width: none; }
@media (max-width: 1024px) {
  .cc-grid-3 { grid-template-columns: 1fr; }
}

/* Two-up grid (testimonial gallery + quote strip). */
.cc-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wp--preset--spacing--40);
  align-items: stretch;
}
.cc-grid-2 > * { margin: 0; max-width: none; }
@media (max-width: 782px) {
  .cc-grid-2 { grid-template-columns: 1fr; }
}

/* Numbered principle card: tighten the big number's spacing. */
.cc-num { margin: 0 0 0.2rem; line-height: 1; }

/* ----- Checkmark grid (Tjenester service rows + featured block) ----- */
.cc-check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 1.5rem;
}
.cc-check-item {
  margin: 0;
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  line-height: 1.5;
  color: color-mix(in srgb, var(--wp--preset--color--contrast) 88%, transparent);
}
.cc-check-mark {
  color: var(--wp--preset--color--accent);
  font-weight: 700;
  flex: none;
}
@media (max-width: 600px) {
  .cc-check-grid { grid-template-columns: 1fr; }
}

/* "Mest populær" pill badge on the featured dark block. */
.cc-badge {
  display: inline-block;
  margin: 0;
  font-family: var(--wp--preset--font-family--body);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--accent);
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
}

/* Reverse a wide 2-column row (every other Tjenester service row). */
@media (min-width: 782px) {
  .wp-block-columns.is-reversed-on-wide { flex-direction: row-reverse; }
}

/* ----- Testimonials: before/after gallery ----- */
.cc-results > .cc-result-card { margin: 0; }
.cc-result-card {
  background: var(--wp--preset--color--surface);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--sand) 70%, transparent);
  border-radius: var(--cc-radius-xl);
  overflow: hidden;
  height: 100%;
}
/* The two-up image strip (placeholder treatment until real photos land). */
.cc-ba { display: flex; gap: 2px; }
.cc-ba-half {
  position: relative;
  flex: 1;
  aspect-ratio: 1 / 1;
}
.cc-ba-before {
  background: repeating-linear-gradient(45deg, #f0e8da, #f0e8da 11px, #e7dcc9 11px, #e7dcc9 22px);
}
.cc-ba-after {
  background: repeating-linear-gradient(45deg, #e9dcc6, #e9dcc6 11px, #ddcaab 11px, #ddcaab 22px);
}
.cc-ba-tag {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  font-family: var(--wp--preset--font-family--body);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--wp--preset--color--contrast) 80%, transparent);
  color: var(--wp--preset--color--sand);
}
.cc-ba-tag--after {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--ink);
}
.cc-stars { color: var(--wp--preset--color--accent); letter-spacing: 0.12em; margin: 0; }
.cc-quote-text {
  margin: 0;
  color: color-mix(in srgb, var(--wp--preset--color--contrast) 85%, transparent);
  line-height: 1.6;
}
.cc-attrib { margin: 0.3rem 0 0; color: var(--wp--preset--color--contrast); }
.cc-attrib-tag { font-weight: 400; color: var(--wp--preset--color--muted); font-size: 0.9rem; }
.cc-quote-card { height: 100%; }

/* ----- Stats row: keep 4 across, don't wrap on tablet ----- */
.cc-stats-row { gap: var(--wp--preset--spacing--40); }
.cc-stats-row.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
  flex-basis: 0;
  flex-grow: 1;
}
.cc-stat .wp-block-heading {
  color: var(--wp--preset--color--accent);
  margin: 0;
  line-height: 1;
}

/* ----- Credential pills ----- */
.cc-pill {
  margin: 0;
  font-weight: 600;
  color: var(--wp--preset--color--contrast);
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--sand);
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  line-height: 1.2;
}
/* On the cream body the surface pill needs a touch more contrast. */
body:not(.home) .cc-pill { background: var(--wp--preset--color--base); }

/* ----- Timeline (background / veien hit) ----- */
.cc-timeline {
  border-left: 2px solid var(--wp--preset--color--sand);
  padding-left: 2rem;
}
.cc-timeline-item { position: relative; }
.cc-timeline-item::before {
  content: "";
  position: absolute;
  left: -2.65rem;
  top: 0.3rem;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent);
  border: 3px solid var(--wp--preset--color--base);
  box-shadow: 0 0 0 1px var(--wp--preset--color--sand);
}
.cc-timeline-item .wp-block-heading { margin: 0.15rem 0 0; }
.cc-timeline-year { margin: 0; letter-spacing: 0.04em; }

/* ----- Cards (services, callouts) ----- */
.cc-card {
  border-radius: var(--cc-radius-lg);
  height: 100%;
  /* Trim the generous spacing|50 padding so cards aren't overly tall. */
  padding: 1.75rem !important;
  transition: transform 0.4s var(--cc-ease), box-shadow 0.4s var(--cc-ease);
}
/* Tighten the vertical rhythm inside cards. */
.cc-card .wp-block-heading { margin-top: 0.65rem !important; }
.cc-card .is-style-cc-check { margin-top: 0.65rem !important; }
.cc-card .is-style-cc-check li { margin-bottom: 0.4rem; }
.cc-card:hover {
  transform: translateY(-4px);
}
.cc-card.has-surface-background-color {
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--sand) 55%, transparent);
}

/* Icon chip inside cards */
.cc-icon {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cc-radius-lg);
  background: color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent);
  color: var(--wp--preset--color--accent);
  font-size: 1.4rem;
  line-height: 1;
}
.cc-card.has-ink-background-color .cc-icon,
.cc-card.has-contrast-background-color .cc-icon {
  background: color-mix(in srgb, var(--wp--preset--color--base) 12%, transparent);
  color: var(--wp--preset--color--accent-light);
}

/* Checkmark list (service highlights) */
.is-style-cc-check {
  list-style: none;
  padding-left: 0;
}
.is-style-cc-check li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.6rem;
}
.is-style-cc-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--wp--preset--color--accent);
}

/* Plain list (footer nav) */
.is-style-cc-plain {
  list-style: none;
  padding-left: 0;
}
.is-style-cc-plain a { text-decoration: none; }
.is-style-cc-plain a:hover { text-decoration: underline; }

/* ----- Numbered step (process / approach pillars) ----- */
.cc-step-num {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: 1.25rem;
  flex: 0 0 auto;
}

/* Portrait image treatment: organic rounded, soft frame */
.cc-portrait img,
.cc-portrait figure {
  border-radius: var(--cc-radius-xl);
}
.cc-portrait img {
  filter: saturate(1.02) contrast(1.02);
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 18px 50px rgba(17, 16, 14, 0.12);
}

/* Stat numbers */
.cc-stat .wp-block-heading {
  color: var(--wp--preset--color--accent);
  margin: 0;
}

/* Testimonial card */
.cc-quote {
  border-radius: var(--cc-radius-lg);
  /* Size to content — NOT height:100%, which stretched every card to match the
     tallest in its column and left huge empty space below the short quotes. */
  height: auto;
  /* Trim the generous spacing|50 (40px) padding so the cards aren't so tall. */
  padding: 1.75rem !important;
}
.cc-quote .cc-stars { color: var(--wp--preset--color--accent); letter-spacing: 2px; margin-bottom: 0.5rem; }
.cc-quote p[style*="italic"] { line-height: 1.55 !important; }
/* Give the testimonials section a little more vertical room so the grid of
   cards has comfortable space above and below. */
#tilbakemeldinger { padding-top: 7rem !important; padding-bottom: 7rem !important; }

/* ----- Kontakt page: info cards overlapping the dark hero ----- */
/* The eyebrow used inside the info cards (slightly tighter than .cc-eyebrow). */
.cc-info-eyebrow {
  font-family: var(--wp--preset--font-family--body);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--wp--preset--color--accent);
  margin: 0;
}
/* Pull the three info cards up so they overlap the bottom of the dark hero. */
.cc-info-cards {
  margin-top: -4rem;
  position: relative;
  z-index: 2;
}
/* The block uses a flex "nowrap" layout, which forces the three cards into one
   row that overflows on narrow screens (the E-post card bled off the left edge
   on mobile). Allow wrapping, and stack to a single column on tablet/mobile. */
.cc-info-cards.cc-info-cards {
  flex-wrap: wrap;
}
@media (max-width: 782px) {
  .cc-info-cards.cc-info-cards {
    flex-direction: column;
    align-items: stretch;
  }
  .cc-info-cards.cc-info-cards > * {
    flex-basis: auto;
    width: 100%;
    text-align: center;
  }
}
.cc-info-card {
  margin: 0;
  max-width: none;
  background: var(--wp--preset--color--base);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--sand) 70%, transparent);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--wp--preset--color--contrast) 9%, transparent);
}
.cc-info-card .cc-info-value { margin: 0.4rem 0 0; }
.cc-info-card .cc-info-value a {
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
  font-weight: 500;
  word-break: break-word;
}
.cc-info-card .cc-info-value a:hover { color: var(--wp--preset--color--accent); }

/* Location card: always-rendering replacement for a live map embed. Soft
   frame matching the portrait treatment, with a gold map-pin glyph. */
.cc-map-card {
  background: var(--wp--preset--color--surface);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
  border-radius: 1.5rem;
  padding: clamp(2rem, 5vw, 3.25rem) clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
  box-shadow: 0 18px 50px color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
}
.cc-map-card .cc-map-pin {
  margin: 0 auto;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent);
  color: var(--wp--preset--color--accent);
}
.cc-map-pin::before {
  content: "";
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  background-color: currentColor;
  -webkit-mask: var(--cc-pin-icon) center / contain no-repeat;
  mask: var(--cc-pin-icon) center / contain no-repeat;
}

/* ----- Footer ----- */
/* Every footer link is white (overrides the global gold link colour, incl.
   the Kontakt column which previously read gold). */
.cc-site-footer a {
  color: var(--wp--preset--color--base);
  text-decoration: none;
  transition: color 0.25s var(--cc-ease);
}
.cc-site-footer a:hover {
  color: var(--wp--preset--color--accent-light);
}
/* Footer brand lockup: logo mark + name sit together, vertically centred. */
.cc-footer-brand img { height: 36px; width: auto; }
/* Legal links (privacy + cookies) in the footer baseline bar. */
.cc-legal-links { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cc-legal-links a { color: var(--wp--preset--color--muted); }
.cc-legal-links a:hover { color: var(--wp--preset--color--accent-light); }

/* ----- 404 page ----- */
.cc-404 { min-height: 70vh; display: flex; align-items: center; }
.cc-404-code {
  font-size: clamp(5rem, 3rem + 14vw, 11rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin: 0.4rem 0 0;
  color: var(--wp--preset--color--accent);
}
.cc-404-title {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  margin: 0.6rem 0 0;
}
.cc-404-text { margin: 1.1rem auto 0; max-width: 38ch; line-height: 1.7; }
.cc-404-actions { margin-top: var(--wp--preset--spacing--50); gap: 0.85rem; }

/* ----- Bekreftelse / confirmation page ----- */
.cc-confirm { min-height: 70vh; display: flex; align-items: center; }
.cc-confirm-badge {
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 2rem;
  line-height: 1;
  color: var(--wp--preset--color--base);
  background: var(--wp--preset--color--accent);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
}
.cc-confirm-title {
  font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem);
  line-height: 1.1;
  margin: 0.4rem 0 0;
}
.cc-confirm-text { margin: 1.1rem auto 0; max-width: 44ch; line-height: 1.7; }
.cc-confirm-actions { margin-top: var(--wp--preset--spacing--50); gap: 0.85rem; }

/* ----- Legal pages (Personvern / Informasjonskapsler) ----- */
.cc-legal-inner { line-height: 1.7; }
.cc-legal-head { margin-bottom: var(--wp--preset--spacing--50); }
.cc-legal-title {
  font-size: clamp(2rem, 1.4rem + 2vw, 2.85rem);
  line-height: 1.1;
  margin: 0.35rem 0 0;
}
.cc-legal-meta {
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  margin: 0.6rem 0 0;
}
/* Section headings: smaller than display H2s, with clear space above. */
.cc-legal-inner h2.wp-block-heading {
  font-size: 1.3rem;
  line-height: 1.25;
  margin: 2.75rem 0 0.85rem;
  padding-top: 1.6rem;
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 9%, transparent);
}
.cc-legal-inner > p,
.cc-legal-inner .wp-block-list { margin: 0 0 1.15rem; }
.cc-legal-inner .wp-block-list { padding-left: 1.25rem; }
.cc-legal-inner .wp-block-list li { margin: 0 0 0.6rem; }
.cc-legal-inner .wp-block-list li:last-child { margin-bottom: 0; }
.cc-legal-inner a { color: var(--wp--preset--color--accent); }
.cc-legal-inner a:hover { color: var(--wp--preset--color--accent-light); }

/* Email + Instagram links get a glyph in front via a masked SVG, so the icon
   inherits the link colour (currentColor) and the text stays editable. */
.cc-email a::before,
.cc-instagram a::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.45em;
  vertical-align: -0.15em;
  background-color: currentColor;
  -webkit-mask: var(--cc-icon) center / contain no-repeat;
  mask: var(--cc-icon) center / contain no-repeat;
}
.cc-email a::before { --cc-icon: var(--cc-email-icon); }
.cc-instagram a::before { --cc-icon: var(--cc-instagram-icon); }

/* In the page's Kontakt section the email + Instagram links read dark (ink)
   against the light section, instead of the global gold link colour. */
#kontakt .cc-email a,
#kontakt .cc-instagram a {
  color: var(--wp--preset--color--contrast);
}
#kontakt .cc-email a:hover,
#kontakt .cc-instagram a:hover {
  color: var(--wp--preset--color--accent);
}
/* Final-CTA contact details row: three centered blocks with eyebrow labels. */
.cc-contact-meta { align-items: flex-start; row-gap: 1.75rem; }
.cc-contact-meta .cc-email,
.cc-contact-meta .cc-instagram { margin: 0; }

/* ------------------------------------------------------------------
   Scroll reveal — progressive enhancement.
   Sections fade/rise in; if JS is off or reduced-motion, fully visible.
------------------------------------------------------------------ */
/* Final visible state lives in CSS so the block editor (which loads this
   stylesheet but not the frontend JS) always shows content. The frontend
   JS adds `.cc-prep` to set the initial hidden state, then `.cc-in` to
   reveal — pure progressive enhancement. */
@media (prefers-reduced-motion: no-preference) {
  .cc-reveal {
    transition: opacity 0.8s var(--cc-ease), transform 0.8s var(--cc-ease);
    will-change: opacity, transform;
  }
  .cc-reveal.cc-prep {
    opacity: 0;
    transform: translateY(24px);
  }
  .cc-reveal.cc-prep.cc-in {
    opacity: 1;
    transform: none;
  }
}

/* Reduced motion: disable transitions/animations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Offset anchor scroll so sticky header doesn't cover section tops */
:where([id]) { scroll-margin-top: 6rem; }

/* The movement track (signature accent) */
.cc-track { position: relative; }
/* The fixed header overlays content. On the front page the hero carries its
   own top padding to clear it; on every other page (no hero) push the main
   content down so it isn't hidden behind the navbar. */
body:not(.home) .cc-track {
  padding-top: 6rem;
}

::selection {
  background-color: var(--wp--preset--color--sand);
  color: var(--wp--preset--color--ink);
}

/* ---------------------------------------------------------------------------
   Cookie consent banner (custom, GDPR-friendly). Brand dark card, gold accept.
   --------------------------------------------------------------------------- */
.cc-cookie {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translate(-50%, 1.5rem);
  z-index: 9999;
  width: min(640px, calc(100vw - 2rem));
  background-color: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--base);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
  border-radius: var(--cc-radius-lg, 18px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--cc-ease), transform 0.35s var(--cc-ease);
}
.cc-cookie.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.cc-cookie__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.1rem 1.4rem;
  flex-wrap: wrap;
}
.cc-cookie__text {
  flex: 1 1 18rem;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--wp--preset--color--sand);
}
.cc-cookie__text a {
  color: var(--wp--preset--color--accent-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cc-cookie__actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}
.cc-cookie__btn {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.6rem 1.3rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.25s var(--cc-ease), color 0.25s var(--cc-ease), border-color 0.25s var(--cc-ease);
}
.cc-cookie__btn--accept {
  background-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--ink);
}
.cc-cookie__btn--accept:hover {
  background-color: var(--wp--preset--color--accent-light);
}
.cc-cookie__btn--ghost {
  background-color: transparent;
  color: var(--wp--preset--color--sand);
  border-color: color-mix(in srgb, var(--wp--preset--color--sand) 45%, transparent);
}
.cc-cookie__btn--ghost:hover {
  color: var(--wp--preset--color--base);
  border-color: var(--wp--preset--color--base);
}
/* Small persistent "manage" pill, bottom-left, for changing consent later. */
.cc-cookie-manage {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 9998;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 18%, transparent);
  background-color: color-mix(in srgb, var(--wp--preset--color--base) 90%, transparent);
  color: var(--wp--preset--color--ink);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: background-color 0.25s var(--cc-ease), color 0.25s var(--cc-ease);
}
.cc-cookie-manage:hover {
  background-color: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--base);
}
@media (max-width: 600px) {
  .cc-cookie__inner { padding: 1rem 1.1rem; }
  .cc-cookie__actions { width: 100%; }
  .cc-cookie__btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-cookie { transition: opacity 0.01ms; transform: translate(-50%, 0); }
}