/* ==========================================================================
   Tour Ceylon +94 — Site Frame
   The sticky site header: brand lockup, primary navigation (core/navigation,
   including its mobile overlay restyled to the brand), header contact
   actions, and the core skip link.

   Every value is a theme token, so Global Styles re-skins the header too.
   Ported from the static site: css/sections.css (Header, Mobile drawer) and
   css/components.css (Brand lockup).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The bar
   --------------------------------------------------------------------------
   Full bleed is done here rather than with an alignfull attribute: the header
   renders inside .wp-block-template-part, which sits inside the root padding,
   so the negative margins core emits for alignfull children of
   .wp-site-blocks never reach it. No negative margin is needed: the header's
   own .wp-block-template-part parent already spans the full client width
   (measured — .wp-site-blocks carries no horizontal padding of its own, core
   puts the root padding on .has-global-padding descendants instead). The
   calc(50% - 50vw) that used to sit here was both unnecessary and half a
   scrollbar too wide, because 50vw counts the scrollbar gutter.

   Sticky is set here too, not via the block position support, because that
   support hardcodes z-index: 10 and the nav overlay needs to sit above the
   bar at z-index 300.
   -------------------------------------------------------------------------- */
.tc94-header {
  position: sticky;
  top: var(--wp-admin--admin-bar--position-offset, 0px);
  z-index: var(--wp--custom--zindex--header);
  background-color: var(--wp--preset--color--surface-dark);
  border-bottom: 1px solid var(--wp--custom--color--border-on-dark);
  transition: background-color var(--wp--custom--duration--normal) var(--wp--custom--ease--out),
              box-shadow var(--wp--custom--duration--normal) var(--wp--custom--ease--out);
}

/* Deepens once the page has scrolled past the top. Driven by the Site Frame
   JS snippet, which mirrors the data-stuck attribute of the static site. */
.tc94-header[data-stuck] {
  background-color: var(--wp--preset--color--surface-darker);
  box-shadow: var(--wp--custom--shadow--lg);
}

.tc94-header > .tc94-header__inner {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--50);
  min-height: var(--wp--custom--layout--header-height-sm);
  max-width: var(--wp--custom--layout--container-max);
  margin-inline: auto;
  padding-inline: var(--wp--custom--gutter);
}

@media (min-width: 64rem) {
  .tc94-header > .tc94-header__inner { min-height: var(--wp--custom--layout--header-height); }
}

/* The brand takes the slack so nav and actions sit to the right. */
.tc94-header .tc94-brand { margin-right: auto; }

/* --------------------------------------------------------------------------
   2. Brand lockup
   --------------------------------------------------------------------------
   LOGO SPACE. .tc94-brand__mark is core/site-logo. The supplied logo is a
   JPEG with its own dark background baked in, so the mark is a round well
   filled with --logo-canvas and the image is cropped to its artwork box with
   the four --logo--img-* tokens. When a transparent SVG or PNG replaces it,
   reset those four tokens to 100% / 100% / 0 / 0 in theme.json and nothing
   else changes.

   The three-class selectors below are deliberate: core ships
   .wp-block-site-logo.is-default-size img { width: 120px } at the same
   specificity as a two-class rule and prints after snippet CSS, so a shorter
   selector silently loses.
   -------------------------------------------------------------------------- */
.tc94-header .tc94-brand {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  min-width: 0;
}

.tc94-header .tc94-brand .tc94-brand__mark {
  width: var(--wp--custom--logo--size);
  height: var(--wp--custom--logo--size);
  flex: none;
  line-height: 0;
}

.tc94-header .tc94-brand .tc94-brand__mark .custom-logo-link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--wp--custom--radius--circle);
  background-color: var(--wp--custom--color--logo-canvas);
}

.tc94-header .tc94-brand .tc94-brand__mark img {
  position: absolute;
  width: var(--wp--custom--logo--img-width);
  height: var(--wp--custom--logo--img-height);
  left: var(--wp--custom--logo--img-left);
  top: var(--wp--custom--logo--img-top);
  max-width: none;
}

/* The column and its 2px gap come from the block's own vertical flex layout
   and blockGap attribute, so core emits them and there is nothing to
   out-specify here. */
.tc94-brand__text { min-width: 0; }

/* The wordmark is a core/paragraph, so the owner edits it in the Site Editor
   like any other text. The gold "+94" is core's OWN inline-colour format
   (<mark class="has-inline-color has-highlight-color">) rather than a
   hand-written <span class>: an unrecognised inline class is dropped the first
   time rich text re-parses the paragraph, a real format is not. */
.tc94-header .tc94-brand__name {
  margin: 0;
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--weight--extrabold);
  letter-spacing: var(--wp--custom--tracking--snug);
  line-height: 1.15;
  white-space: nowrap;
}

.tc94-header .tc94-brand__name,
.tc94-header .tc94-brand__name a {
  color: var(--wp--custom--color--on-dark);
  text-decoration: none;
}

.tc94-header .tc94-brand__name a:hover,
.tc94-header .tc94-brand__name a:focus { color: var(--wp--custom--color--on-dark); }

/* core prints .has-highlight-color with the palette value; this only has to
   clear the <mark> element's default yellow background. */
.tc94-header .tc94-brand__name mark {
  background: none;
  color: var(--wp--preset--color--highlight);
}

.tc94-header .tc94-brand__tagline {
  margin: 0;
  font-size: var(--wp--preset--font-size--xxs);
  font-weight: var(--wp--custom--weight--medium);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--custom--color--on-dark-muted);
  line-height: 1.2;
}

@media (max-width: 26rem) {
  .tc94-header .tc94-brand__tagline { display: none; }
}

/* --------------------------------------------------------------------------
   3. Primary navigation — desktop row
   -------------------------------------------------------------------------- */
.tc94-header .tc94-nav { flex: 0 1 auto; }

.tc94-header .tc94-nav .wp-block-navigation__container {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--10);
}

.tc94-header .tc94-nav .wp-block-navigation-item__content {
  display: block;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  border-radius: var(--wp--custom--radius--sm);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--medium);
  color: var(--wp--custom--color--on-dark-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--wp--custom--duration--normal) var(--wp--custom--ease--out),
              background-color var(--wp--custom--duration--normal) var(--wp--custom--ease--out);
}

.tc94-header .tc94-nav .wp-block-navigation-item__content:hover {
  color: var(--wp--custom--color--on-dark);
  background-color: var(--wp--custom--alpha--white-08);
}

.tc94-header .tc94-nav .current-menu-item > .wp-block-navigation-item__content,
.tc94-header .tc94-nav .wp-block-navigation-item__content[aria-current="page"] {
  color: var(--wp--preset--color--highlight);
  font-weight: var(--wp--custom--weight--semibold);
}

/* --------------------------------------------------------------------------
   4. Header contact actions
   -------------------------------------------------------------------------- */
.tc94-header .tc94-header__actions {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
}

/* Both actions are plain core blocks — a paragraph holding a tel: link and a
   core/buttons pair — because the Gutenberg queue cannot carry core/html
   content: core/html keeps its markup in the block's inner HTML (attribute
   source "raw"), the finalizer rebuilds blocks from attributes alone, so
   save() emits an empty <!-- wp:html /--> and validation fails. Everything
   the two inline SVG icons used to do is therefore done here, as a mask on a
   ::before, so the icons still take their colour from tokens and the owner
   never meets raw markup in the editor. */
.tc94-header .tc94-header__phone {
  display: none;
  align-items: center;
  margin: 0;
  gap: var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--semibold);
  white-space: nowrap;
}

.tc94-header .tc94-header__phone::before {
  content: "";
  flex: none;
  width: var(--wp--custom--icon--size);
  height: var(--wp--custom--icon--size);
  background-color: var(--wp--preset--color--highlight);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205.5A2%202%200%200%201%206%203.5h2.2l2%204.9-2.4%201.5a12%2012%200%200%200%206.3%206.3l1.5-2.4%204.9%202v2.2a2%202%200%200%201-2%202A15%2015%200%200%201%204%205.5Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205.5A2%202%200%200%201%206%203.5h2.2l2%204.9-2.4%201.5a12%2012%200%200%200%206.3%206.3l1.5-2.4%204.9%202v2.2a2%202%200%200%201-2%202A15%2015%200%200%201%204%205.5Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.tc94-header .tc94-header__phone a {
  color: var(--wp--custom--color--on-dark);
  text-decoration: none;
}

.tc94-header .tc94-header__phone a:hover,
.tc94-header .tc94-header__phone a:focus { color: var(--wp--preset--color--highlight); }

/* The WhatsApp pill. className on a core/button lands on the wrapper div, not
   on the <a>, so .tc94-btn cannot be reused here; these restate the
   --accent --sm pill against core's own .wp-block-button__link. Three classes
   beats core's one-class .wp-element-button, which prints later. */
.tc94-header .tc94-header__cta { margin: 0; }

.tc94-header .tc94-header__cta .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--20);
  min-height: var(--wp--custom--control--height-sm);
  padding: 0 var(--wp--preset--spacing--40);
  border: 1px solid transparent;
  border-radius: var(--wp--custom--radius--sm);
  background-color: var(--wp--preset--color--accent);
  color: var(--wp--custom--color--on-accent);
  box-shadow: var(--wp--custom--shadow--sm);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--wp--custom--duration--normal) var(--wp--custom--ease--out),
              box-shadow var(--wp--custom--duration--normal) var(--wp--custom--ease--out),
              transform var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
}

.tc94-header .tc94-header__cta .wp-block-button__link::before {
  content: "";
  flex: none;
  width: var(--wp--custom--icon--size);
  height: var(--wp--custom--icon--size);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M12.04%202.02c-5.46%200-9.9%204.44-9.9%209.9%200%201.74.45%203.44%201.31%204.94L2%2022.02l5.3-1.38a9.88%209.88%200%200%200%204.74%201.2c5.46%200%209.9-4.44%209.9-9.9%200-2.64-1.03-5.13-2.9-7A9.83%209.83%200%200%200%2012.04%202.02Zm0%2018.13a8.2%208.2%200%200%201-4.18-1.14l-.3-.18-3.1.81.83-3.03-.2-.31a8.17%208.17%200%200%201-1.25-4.38c0-4.53%203.69-8.22%208.22-8.22%202.2%200%204.26.86%205.81%202.41a8.16%208.16%200%200%201%202.41%205.82c0%204.53-3.69%208.22-8.24%208.22Zm4.51-6.15c-.25-.13-1.47-.73-1.7-.81-.22-.09-.39-.13-.55.12-.17.25-.65.8-.8.96-.15.17-.3.19-.55.06-.25-.12-1.04-.38-1.98-1.22-.73-.65-1.23-1.46-1.37-1.71-.15-.25-.02-.38.11-.5.11-.11.25-.29.37-.44.12-.15.16-.25.24-.42.08-.17.04-.31-.02-.44-.06-.12-.55-1.34-.76-1.83-.2-.48-.4-.41-.55-.42h-.48c-.17%200-.44.06-.67.31-.23.25-.88.86-.88%202.1%200%201.23.9%202.43%201.02%202.59.13.17%201.74%202.65%204.21%203.72.59.25%201.05.4%201.4.52.59.18%201.13.16%201.55.1.47-.07%201.47-.6%201.68-1.18.2-.58.2-1.07.14-1.18-.06-.1-.23-.17-.48-.29Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M12.04%202.02c-5.46%200-9.9%204.44-9.9%209.9%200%201.74.45%203.44%201.31%204.94L2%2022.02l5.3-1.38a9.88%209.88%200%200%200%204.74%201.2c5.46%200%209.9-4.44%209.9-9.9%200-2.64-1.03-5.13-2.9-7A9.83%209.83%200%200%200%2012.04%202.02Zm0%2018.13a8.2%208.2%200%200%201-4.18-1.14l-.3-.18-3.1.81.83-3.03-.2-.31a8.17%208.17%200%200%201-1.25-4.38c0-4.53%203.69-8.22%208.22-8.22%202.2%200%204.26.86%205.81%202.41a8.16%208.16%200%200%201%202.41%205.82c0%204.53-3.69%208.22-8.24%208.22Zm4.51-6.15c-.25-.13-1.47-.73-1.7-.81-.22-.09-.39-.13-.55.12-.17.25-.65.8-.8.96-.15.17-.3.19-.55.06-.25-.12-1.04-.38-1.98-1.22-.73-.65-1.23-1.46-1.37-1.71-.15-.25-.02-.38.11-.5.11-.11.25-.29.37-.44.12-.15.16-.25.24-.42.08-.17.04-.31-.02-.44-.06-.12-.55-1.34-.76-1.83-.2-.48-.4-.41-.55-.42h-.48c-.17%200-.44.06-.67.31-.23.25-.88.86-.88%202.1%200%201.23.9%202.43%201.02%202.59.13.17%201.74%202.65%204.21%203.72.59.25%201.05.4%201.4.52.59.18%201.13.16%201.55.1.47-.07%201.47-.6%201.68-1.18.2-.58.2-1.07.14-1.18-.06-.1-.23-.17-.48-.29Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.tc94-header .tc94-header__cta .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--accent-deep);
  color: var(--wp--custom--color--on-accent);
  box-shadow: var(--wp--custom--shadow--md);
}

.tc94-header .tc94-header__cta .wp-block-button__link:active { transform: translateY(1px); }

/* --------------------------------------------------------------------------
   5. The hamburger and the mobile overlay
   --------------------------------------------------------------------------
   core/navigation is configured with overlayMenu: mobile, so core collapses
   it below its own 600px breakpoint. This design needs the row to collapse at
   75rem instead, because the six labels plus the brand and the WhatsApp
   button want about 1200px. Rather than fight core inside its min-width:600px
   block, the two rules below simply re-hide the inline list and re-show the
   hamburger for everything under 75rem; above it core behaves untouched.

   Both carry the .tc94-header nav.wp-block-navigation prefix on purpose: the
   core rules they override are two-class selectors that print after snippet
   CSS, so an equal-specificity rule would lose on order.
   -------------------------------------------------------------------------- */
@media (max-width: 74.999rem) {
  .tc94-header nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }

  .tc94-header nav.wp-block-navigation .wp-block-navigation__responsive-container-open {
    display: grid;
    place-items: center;
  }
}

/* The hamburger and the overlay close button share the bordered square of the
   static site, so the control does not move or change when the menu opens.
   Appearance only — NOT display. Core hides the hamburger above its own 600px
   breakpoint with a (0,2,0) selector, and this rule is (0,2,0) too, so a
   display declaration here tied on specificity, won on source order and left
   the hamburger showing at every width. display: grid is therefore claimed
   only inside the max-width: 74.999rem block above (for the hamburger) and by
   the close-button rule below, which is safe unconditionally because the close
   button only exists inside an already-open overlay. */
.tc94-header .wp-block-navigation__responsive-container-open,
.tc94-header .wp-block-navigation__responsive-container-close {
  width: var(--wp--custom--control--height-sm);
  height: var(--wp--custom--control--height-sm);
  padding: 0;
  border: 1px solid var(--wp--custom--color--border-on-dark);
  border-radius: var(--wp--custom--radius--sm);
  background-color: transparent;
  color: var(--wp--custom--color--on-dark);
  cursor: pointer;
}

.tc94-header .wp-block-navigation__responsive-container-close {
  display: grid;
  place-items: center;
}

.tc94-header .wp-block-navigation__responsive-container-open:hover,
.tc94-header .wp-block-navigation__responsive-container-close:hover {
  background-color: var(--wp--custom--alpha--white-08);
}

.tc94-header .wp-block-navigation__responsive-container-open svg,
.tc94-header .wp-block-navigation__responsive-container-close svg {
  width: var(--wp--custom--icon--size-lg);
  height: var(--wp--custom--icon--size-lg);
  fill: currentColor;
}

/* The open panel. Geometry only — the colours are two rules down, because
   core defends its own defaults at a specificity this cannot reach. */
.tc94-header .wp-block-navigation__responsive-container.is-menu-open {
  z-index: var(--wp--custom--zindex--overlay);
  padding: var(--wp--preset--spacing--50) var(--wp--custom--gutter) var(--wp--preset--spacing--90);
  overflow-y: auto;
}

/* Core paints the open overlay white-on-black by default, and guards it with
   .wp-block-navigation:not(.has-background) …__responsive-container.is-menu-open
   — five classes, against the three above, so the drawer came up white with
   black text and an invisible close button. These two restate the dark panel
   at (0,5,1).

   The guard is on the container's OWN has-background / has-text-color rather
   than core's (which tests the nav element): if the owner ever picks overlay
   colours in the Site Editor, core prints those classes onto this element,
   these rules stop matching, and the owner's choice wins instead of being
   silently overridden. */
.tc94-header nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.has-background) {
  background-color: var(--wp--preset--color--surface-darker);
}

.tc94-header nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.has-text-color) {
  color: var(--wp--custom--color--on-dark);
}

/* Core puts the close button at the top right of the dialog. The rule line
   below it stands in for the head row of the static site drawer, which also
   carried the wordmark; the wordmark is left out because core owns this
   markup and CSS generated text would not be editable or translatable. */
.tc94-header .is-menu-open .wp-block-navigation__responsive-dialog {
  position: relative;
  padding-top: calc(var(--wp--custom--control--height-sm) + var(--wp--preset--spacing--50));
}

.tc94-header .is-menu-open .wp-block-navigation__responsive-dialog::before {
  content: "";
  position: absolute;
  top: calc(var(--wp--custom--control--height-sm) + var(--wp--preset--spacing--40));
  left: 0;
  right: 0;
  border-top: 1px solid var(--wp--custom--color--border-on-dark);
}

.tc94-header .is-menu-open .wp-block-navigation__responsive-container-close {
  top: 0;
  right: 0;
}

/* Stacked links, rule between each, as in the static drawer. */
.tc94-header .is-menu-open .wp-block-navigation__container {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.tc94-header .is-menu-open .wp-block-navigation-item {
  border-bottom: 1px solid var(--wp--custom--color--border-on-dark);
}

/* Core zeroes the padding of every link inside an open overlay with a
   four-class selector (…container.is-menu-open :where(…) …container-content
   .wp-block-navigation-item__content), which flattened these rows to a
   borderline-untappable 29px. Matching its container-content step and adding
   nav.wp-block-navigation puts this at (0,5,1), comfortably past it. */
.tc94-header nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--10);
  border-radius: 0;
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--wp--custom--weight--semibold);
  /* No colour here, matching the static drawer: the links keep the muted
     on-dark colour of the desktop row and the current page keeps its gold
     highlight, which a colour declaration at this specificity would bury. */
}

.tc94-header .is-menu-open .wp-block-navigation-item__content:hover {
  background-color: transparent;
  color: var(--wp--preset--color--highlight);
}

/* The two call-to-action items at the foot of the drawer are ordinary menu
   items carrying a className, so the owner edits their label and link as
   menu items. They are hidden on the desktop row, where the header actions
   already carry the same two links. */
.tc94-header .tc94-nav__cta,
.tc94-header .tc94-nav__tel { display: none; }

.tc94-header .is-menu-open .tc94-nav__cta,
.tc94-header .is-menu-open .tc94-nav__tel {
  display: block;
  border-bottom: 0;
}

.tc94-header .is-menu-open .tc94-nav__cta { margin-top: var(--wp--preset--spacing--70); }
.tc94-header .is-menu-open .tc94-nav__tel { margin-top: var(--wp--preset--spacing--30); }

.tc94-header .is-menu-open .tc94-nav__cta > .wp-block-navigation-item__content,
.tc94-header .is-menu-open .tc94-nav__tel > .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--20);
  min-height: var(--wp--custom--control--height);
  padding: var(--wp--preset--spacing--30) var(--wp--custom--control--padding-x);
  border-radius: var(--wp--custom--radius--sm);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--semibold);
  text-align: center;
}

.tc94-header .is-menu-open .tc94-nav__cta > .wp-block-navigation-item__content {
  background-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--contrast);
  box-shadow: var(--wp--custom--shadow--sm);
}

.tc94-header .is-menu-open .tc94-nav__cta > .wp-block-navigation-item__content:hover {
  background-color: var(--wp--preset--color--accent-deep);
  color: var(--wp--preset--color--contrast);
  box-shadow: var(--wp--custom--shadow--md);
}

.tc94-header .is-menu-open .tc94-nav__tel > .wp-block-navigation-item__content {
  border: 1px solid var(--wp--custom--alpha--white-20);
  color: var(--wp--custom--color--on-dark);
}

.tc94-header .is-menu-open .tc94-nav__tel > .wp-block-navigation-item__content:hover {
  background-color: var(--wp--custom--alpha--white-08);
  border-color: var(--wp--custom--alpha--white-70);
  color: var(--wp--custom--color--on-dark);
}

/* --------------------------------------------------------------------------
   6. Compacting the bar on narrow screens
   --------------------------------------------------------------------------
   Below 30rem the brand, the WhatsApp button and the menu button do not fit on
   one row: at 375px the row wants about 423px. The button label is what gives
   way, so the primary call to action stays one tap away as an icon and the
   link aria-label carries its accessible name.
   -------------------------------------------------------------------------- */
@media (max-width: 29.999rem) {
  /* The label is the link's own text now, so it is hidden by zeroing the font
     size. The icon is immune because its box is sized in tokens, not em, and
     the link keeps its accessible name from that same text. */
  .tc94-header .tc94-header__cta .wp-block-button__link {
    width: var(--wp--custom--control--height-sm);
    padding: 0;
    font-size: 0;
    gap: 0;
  }
}

/* Below 22rem the row still wants about 349px, and it has to work at the
   320px that the WCAG reflow rule assumes, which is also what a desktop
   browser at 400% zoom reports. The site-wide gutter cannot move, because
   every section aligns to it, so the header itself compacts: a smaller mark,
   tighter gaps, and the wordmark one step down. */
@media (max-width: 21.999rem) {
  .tc94-header { --wp--custom--logo--size: var(--wp--custom--logo--size-compact); }
  .tc94-header > .tc94-header__inner { gap: var(--wp--preset--spacing--30); }
  .tc94-header .tc94-brand { gap: var(--wp--preset--spacing--20); }
  .tc94-header .tc94-header__actions { gap: var(--wp--preset--spacing--20); }
  .tc94-header .tc94-brand__name { font-size: var(--wp--preset--font-size--sm); }
}

/* The container content width stops at 1200px, so the header row never grows
   past that however wide the screen is. Brand, nav and the WhatsApp button
   come to about 969px on their own; showing the phone number wants another
   286px, which is 55px more than the row has. So the room is found properly
   here: the nav links give back inline padding, and the number drops one step
   in size. The actions block is then told never to shrink, so the number stays
   on one line whatever happens. */
@media (min-width: 75rem) {
  .tc94-header .tc94-nav .wp-block-navigation-item__content {
    padding-inline: var(--wp--preset--spacing--30);
  }
}

@media (min-width: 80rem) {
  .tc94-header .tc94-nav .wp-block-navigation-item__content {
    padding-inline: var(--wp--preset--spacing--20);
  }

  .tc94-header .tc94-header__phone {
    display: inline-flex;
    font-size: var(--wp--preset--font-size--xs);
  }

  .tc94-header .tc94-header__actions { flex: 0 0 auto; }
  .tc94-header > .tc94-header__inner { gap: var(--wp--preset--spacing--30); }
}

/* --------------------------------------------------------------------------
   7. The skip link
   --------------------------------------------------------------------------
   Block themes get a skip link from core, injected at the start of the body
   with the classes .skip-link.screen-reader-text. It only needs the brand
   styling the static site gave its own; the shared .tc94-skip-link rules stay
   available for any markup that is ours.
   -------------------------------------------------------------------------- */
.wp-site-blocks a.skip-link,
a.skip-link.screen-reader-text {
  position: fixed;
  top: 0;
  left: var(--wp--preset--spacing--40);
  z-index: var(--wp--custom--zindex--skip);
  clip: auto !important;
  clip-path: none;
  width: auto;
  height: auto;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
  border-radius: 0 0 var(--wp--custom--radius--sm) var(--wp--custom--radius--sm);
  background-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--semibold);
  text-decoration: none;
  transform: translateY(-110%);
  transition: transform var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
}

a.skip-link.screen-reader-text:focus,
a.skip-link.screen-reader-text:focus-visible {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   8. Hamburger order on the collapsed row
   --------------------------------------------------------------------------
   DOM order is brand, nav, actions, which is the desktop order. Collapsed,
   the nav block contains only the hamburger, and the design puts that last,
   to the right of the WhatsApp button. Flex order moves it without a second
   copy of the markup; the overlay is position: fixed, so order does not
   affect it.
   -------------------------------------------------------------------------- */
@media (max-width: 74.999rem) {
  .tc94-header .tc94-nav { order: 1; }
  .tc94-header .tc94-header__actions { flex: 0 0 auto; }
}