/* ==========================================================================
   Oakridge — Site Frame
   The sticky site header. Values match the static site's components.css;
   the DOM differs because core/navigation replaces the hand-rolled nav,
   so the mobile panel is re-created with CSS only (no markup changes).
   ========================================================================== */

.oak-site-header {
  position: sticky;
  border-bottom: 1px solid transparent;
  transition: border-color var(--oak-duration-fast) var(--oak-ease-out),
              box-shadow var(--oak-duration-fast) var(--oak-ease-out);
}

/* Core's sticky-position support rule is a single class and prints later, so
   the offset and stack order are re-stated at higher specificity. The admin-bar
   variable is kept so a logged-in owner's header still clears the toolbar. */
.oak-site-header.oak-site-header {
  top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px));
  z-index: var(--oak-z-header);
}

/* The translucent blur lives on a pseudo-element. `backdrop-filter` on the
   header itself would make it the containing block for core's fixed-position
   mobile overlay, trapping the menu inside the 76px bar. */
.oak-site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--oak-surface-glass);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
}

.oak-site-header[data-stuck="true"] {
  border-bottom-color: var(--oak-border-subtle);
  box-shadow: var(--oak-shadow-xs);
}

.oak-site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oak-space-md);
  min-height: var(--oak-header-height);
}


/* --------------------------------------------------------------------------
   Brand lockup
   -------------------------------------------------------------------------- */

.oak-brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--oak-space-2xs);
  flex: none;
}

/* The tooth mark is decorative, so it is drawn rather than placed in the
   markup: ::before is the forest tile, ::after the glyph masked on top of it.
   Both take their colour from tokens. */
.oak-brand::before {
  content: "";
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--oak-radius-sm);
  background-color: var(--oak-color-forest-700);
}

.oak-brand::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  background-color: var(--oak-color-white);
  -webkit-mask: var(--oak-icon-tooth) center / contain no-repeat;
  mask: var(--oak-icon-tooth) center / contain no-repeat;
}

.oak-brand__name {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.1;
}

.oak-brand__name .wp-block-site-title {
  margin: 0;
  font-size: var(--oak-text-md);
  font-weight: var(--oak-weight-black);
  line-height: 1.1;
  letter-spacing: var(--oak-tracking-tight);
  color: var(--oak-text-primary);
}

.oak-brand__name .wp-block-site-title a {
  color: inherit;
  text-decoration: none;
}

.oak-brand__name .wp-block-site-tagline {
  margin: 0;
  font-size: var(--oak-text-3xs);
  font-weight: var(--oak-weight-semibold);
  line-height: 1.1;
  letter-spacing: var(--oak-tracking-wide);
  text-transform: uppercase;
  color: var(--oak-text-muted);
}


/* --------------------------------------------------------------------------
   Navigation — desktop
   -------------------------------------------------------------------------- */

.oak-site-header .oak-site-nav {
  font-size: var(--oak-text-sm);
  font-weight: var(--oak-weight-medium);
}

.oak-site-header .oak-site-nav .wp-block-navigation-item__content {
  color: var(--oak-text-secondary);
  text-decoration: none;
  padding-block: var(--oak-space-2xs);
  border-bottom: 2px solid transparent;
  transition: color var(--oak-duration-fast) var(--oak-ease-out),
              border-color var(--oak-duration-fast) var(--oak-ease-out);
}

.oak-site-header .oak-site-nav .wp-block-navigation-item__content:hover,
.oak-site-header .oak-site-nav .current-menu-item .wp-block-navigation-item__content,
.oak-site-header .oak-site-nav .wp-block-navigation-item__content[aria-current="true"] {
  color: var(--oak-text-primary);
  border-bottom-color: var(--oak-color-clay-600);
}

/* The call-to-action menu item only exists inside the mobile panel. */
.oak-site-header .oak-nav__cta { display: none; }


/* --------------------------------------------------------------------------
   Header actions — phone link + primary CTA
   Both are core/button blocks so their text and link stay editable and can be
   bound to Practice Details; CSS undoes the button look on the phone one.
   -------------------------------------------------------------------------- */

.oak-site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--oak-space-sm);
  flex: none;
  margin: 0;
}

.oak-site-header .oak-site-header__phone .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: var(--oak-space-2xs);
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: transparent;
  font-size: var(--oak-text-sm);
  font-weight: var(--oak-weight-bold);
  letter-spacing: var(--oak-tracking-tight);
  color: var(--oak-text-primary);
  text-decoration: none;
  box-shadow: none;
  transition: color var(--oak-duration-fast) var(--oak-ease-out);
}

.oak-site-header .oak-site-header__phone .wp-block-button__link:hover {
  background-color: transparent;
  color: var(--oak-text-accent);
}

.oak-site-header .oak-site-header__phone .wp-block-button__link::before {
  content: "";
  width: 1em;
  height: 1em;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--oak-icon-phone) center / contain no-repeat;
  mask: var(--oak-icon-phone) center / contain no-repeat;
}

.oak-site-header .oak-header-cta .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--oak-space-2xs);
  padding: 0.9375rem var(--oak-space-md);
  border: 1px solid transparent;
  border-radius: var(--oak-radius-sm);
  background-color: var(--oak-action-primary-bg);
  color: var(--oak-action-primary-text);
  font-size: var(--oak-text-sm);
  font-weight: var(--oak-weight-bold);
  line-height: 1.2;
  letter-spacing: var(--oak-tracking-normal);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--oak-shadow-sm);
  transition: background-color var(--oak-duration-fast) var(--oak-ease-out),
              transform var(--oak-duration-fast) var(--oak-ease-out),
              box-shadow var(--oak-duration-fast) var(--oak-ease-out);
}

.oak-site-header .oak-header-cta .wp-block-button__link:hover {
  background-color: var(--oak-action-primary-bg-hover);
  box-shadow: var(--oak-shadow-md);
  transform: translateY(-1px);
}


/* --------------------------------------------------------------------------
   Mobile panel
   Core collapses the menu at 600px; this design collapses at 1080px, so the
   two core rules that own that breakpoint are re-stated for 600–1080px.
   Every override carries an extra class because core's stylesheet prints
   after this one and would win any tie.
   -------------------------------------------------------------------------- */

@media (min-width: 600px) and (max-width: 1080px) {
  .oak-site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
  .oak-site-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .oak-site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close { display: none; }
}

/* Hamburger + close button share the static site's 44px .nav-toggle box.
   `display` is deliberately NOT set here: core owns it through the breakpoint
   rules above, and overriding it unconditionally leaves a hamburger showing on
   desktop and a stray close button floating above the header. */
.oak-site-header .wp-block-navigation__responsive-container-open,
.oak-site-header .wp-block-navigation__responsive-container-close {
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--oak-border-subtle);
  border-radius: var(--oak-radius-sm);
  background-color: var(--oak-surface-page);
  color: var(--oak-text-primary);
}

/* The X takes the hamburger's place, centred in the bar above the panel. */
.oak-site-header .oak-site-nav .is-menu-open .wp-block-navigation__responsive-container-close {
  display: flex;
  position: absolute;
  top: calc((var(--oak-header-height) + 44px) / -2);
  right: var(--oak-space-gutter);
  z-index: 2;
}

.oak-site-header .oak-site-nav:has(.is-menu-open) .wp-block-navigation__responsive-container-open { visibility: hidden; }

/* Three core wrappers are positioned and would anchor the panel; make them
   static so the sticky header is the containing block. */
.oak-site-header .oak-site-nav.wp-block-navigation,
.oak-site-header .oak-site-nav .wp-block-navigation__responsive-dialog,
.oak-site-header .oak-site-nav .wp-block-navigation__responsive-close { position: static; }

/* Core pushes the dialog down by the admin-bar height so its FIXED full-screen
   overlay clears the toolbar. This panel is absolute under the sticky header,
   which already sits below the bar, so that offset only strands the links 46px
   low — and only for logged-in editors, which is exactly the view the owner
   sees. Core's rule is `.has-modal-open .admin-bar .is-menu-open:where(...) .…-dialog`
   at (0,4,0), so the override needs five classes, not three. */
.oak-site-header .oak-site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { margin-top: 0; }

.oak-site-header .oak-site-nav .wp-block-navigation__responsive-container.is-menu-open {
  position: absolute;
  inset: 100% 0 auto 0;
  flex-direction: column;
  padding: 0;
  background-color: var(--oak-surface-page);
  color: var(--oak-text-primary);
  border-top: 1px solid var(--oak-border-subtle);
  border-bottom: 1px solid var(--oak-border-subtle);
  box-shadow: var(--oak-shadow-md);
  /* `auto` would clip the close button into a visible-but-dead state. */
  overflow: visible;
}

.oak-site-header .oak-site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  width: 100%;
  max-width: calc(var(--oak-container-max) + var(--oak-space-gutter) * 2);
  margin-inline: auto;
  padding: var(--oak-space-2xs) var(--oak-space-gutter) var(--oak-space-md);
  gap: 0;
}

.oak-site-header .oak-site-nav .is-menu-open .wp-block-navigation__container {
  width: 100%;
  gap: 0;
}

.oak-site-header .oak-site-nav .is-menu-open .wp-block-navigation-item {
  width: 100%;
  border-bottom: 1px solid var(--oak-border-subtle);
}

.oak-site-header .oak-site-nav .is-menu-open .wp-block-navigation-item:last-child { border-bottom: none; }

.oak-site-header .oak-site-nav .is-menu-open .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  padding: var(--oak-space-xs) 0;
  border-bottom: none;
  font-size: var(--oak-text-md);
  font-weight: var(--oak-weight-semibold);
  color: var(--oak-text-primary);
}

/* The CTA menu item becomes a full-width pill at the foot of the panel. */
.oak-site-header .oak-site-nav .is-menu-open .oak-nav__cta {
  display: block;
  margin-top: var(--oak-space-sm);
  border-bottom: none;
}

.oak-site-header .oak-site-nav .is-menu-open .oak-nav__cta .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--oak-space-2xs);
  padding: 0.9375rem var(--oak-space-md);
  border-radius: var(--oak-radius-sm);
  background-color: var(--oak-action-primary-bg);
  color: var(--oak-action-primary-text);
  font-size: var(--oak-text-sm);
  font-weight: var(--oak-weight-bold);
  box-shadow: var(--oak-shadow-sm);
}

.oak-site-header .oak-site-nav .is-menu-open .oak-nav__cta .wp-block-navigation-item__content::before {
  content: "";
  width: 1em;
  height: 1em;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--oak-icon-phone) center / contain no-repeat;
  mask: var(--oak-icon-phone) center / contain no-repeat;
}


/* --------------------------------------------------------------------------
   Responsive — the static site's own breakpoints
   -------------------------------------------------------------------------- */

/* The design keeps `.nav-toggle` inside `.site-header__actions`, so once the
   inline nav collapses the button sits hard against the right edge. Core puts
   the hamburger inside the navigation block instead, which `space-between`
   then strands in the middle of the bar — `order` moves it back past the
   actions and the auto margin collapses the gap the design never had. */
@media (max-width: 1080px) {
  .oak-site-header .oak-site-nav { order: 3; flex: none; }
  .oak-site-header .oak-site-header__actions { margin-left: auto; }
}

@media (max-width: 700px) {
  .oak-site-header .oak-site-header__phone { display: none; }
  /* Matches the design: below 700px the bar CTA gives way to the sticky
     call bar rendered at the foot of the page. */
  .oak-site-header .oak-header-cta { display: none; }
  .oak-site-header__inner { min-height: var(--oak-header-height-sm); }
  .oak-site-header .oak-site-nav .is-menu-open .wp-block-navigation__responsive-container-close {
    top: calc((var(--oak-header-height-sm) + 44px) / -2);
  }
}

@media (max-width: 420px) {
  .oak-site-header__inner { gap: var(--oak-space-sm); }
  .oak-site-header .oak-brand__name .wp-block-site-tagline { display: none; }
  .oak-site-header__actions { gap: var(--oak-space-2xs); }
}


/* --------------------------------------------------------------------------
   Icon data URLs used as CSS masks (the only icons not rendered by PHP).
   -------------------------------------------------------------------------- */

:root {
  --oak-icon-tooth: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7.4 3.6c1.3-1 3.2-1 4.6 0 1.4-1 3.3-1 4.6 0 1.7 1.3 1.8 3.9 1.3 6.4-.4 2-.7 2.9-1 4.7-.3 2-.6 4.9-2.1 4.9-1.3 0-1.6-1.7-1.9-3.5-.2-1.4-.5-2.8-.9-2.8s-.7 1.4-.9 2.8c-.3 1.8-.6 3.5-1.9 3.5-1.5 0-1.8-2.9-2.1-4.9-.3-1.8-.6-2.7-1-4.7-.5-2.5-.4-5.1 1.3-6.4Z"/></svg>');
  --oak-icon-phone: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.1 3.3H4.9c-1 0-1.8.8-1.7 1.8.3 3.6 1.7 7 4 9.8a20.2 20.2 0 0 0 5.9 5c2.7 1.5 5.7 2.4 8.8 2.6 1 .1 1.8-.7 1.8-1.7v-3.2c0-.9-.6-1.6-1.5-1.7a12 12 0 0 1-2.6-.6c-.6-.2-1.3 0-1.8.5l-1.3 1.4a16.6 16.6 0 0 1-6-6l1.4-1.4c.5-.4.6-1.1.4-1.7a12 12 0 0 1-.6-2.6c-.1-.9-.8-1.5-1.6-1.5Z"/></svg>');
}


/* --------------------------------------------------------------------------
   Sticky mobile call bar
   -------------------------------------------------------------------------- */

.oak-call-bar {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--oak-z-sticky);
  padding: var(--oak-space-2xs) var(--oak-space-gutter) calc(var(--oak-space-2xs) + env(safe-area-inset-bottom));
  background-color: var(--oak-surface-glass-solid);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--oak-border-subtle);
}

@media (max-width: 700px) {
  .oak-call-bar { display: block; }
  /* The design reserves room so the bar never covers the last line of content. */
  body { padding-bottom: 72px; }
}