/* ==========================================================================
   HEADER-01 — header contact block (2026-08-04)
   ==========================================================================

   PORT, NOT REDESIGN. Every declaration below was rendering already. It came
   from ONE source: the inline <style> block GreenShift emitted inside
   wp_block 1181 "Header Contact Details" (plus two duplicate rules that also
   shipped in the plugin's `greenshift-post-css-inline-css` sheet:
   `.gspb_row{position:relative}` and
   `div[id^=gspb_col-id]{box-sizing:border-box;position:relative}`).

   A full runtime audit of every stylesheet on the page was run against every
   node of the block's subtree before this file was written. Unlike the footer,
   NOTHING outside the GreenShift style block styled this component. The only
   other matching rules are Blocksy's own, and they target the wrappers Blocksy
   still generates (`.ct-header-text`, `.entry-content`), which this rebuild
   does not touch.

   SELECTOR RENAME — and why it is mechanical
   ------------------------------------------
   The original rules all shared the prefix
   `#gspb_iconsList-id-gsbp-26f3b93.gspb_iconsList` (1 id + 1 class). Every one
   of them is reproduced here with a UNIFORM substitution:

     #gspb_row-id-gsbp-b86d60e                       -> .veil-hdr-contact
     .gspb_row__content                              -> .veil-hdr-contact__row
     #gspb_col-id-gsbp-ff93372.gspb_row__col--12     -> .veil-hdr-contact__col
     #gspb_iconsList-id-gsbp-26f3b93.gspb_iconsList  -> .veil-hdr-contact__list
     .gspb_iconsList__item                           -> .veil-hdr-contact__item
     .gspb_iconsList__item__text                     -> .veil-hdr-contact__text
     .gspb_iconsList__link                           -> .veil-hdr-contact__link

   `:last-child` and the `[data-id='0']` / `[data-id='1']` attribute hooks are
   kept VERBATIM, and the markup still carries those data-id attributes. That
   is deliberate: several of these rules are `!important` and fight each other,
   and the winner is decided by specificity + source order. Because the
   substitution removes exactly the same (1 id, 1 class) from every selector
   and the source order is unchanged, the whole cascade resolves identically.
   Rewriting `:last-child` / `[data-id]` as modifier classes would have shifted
   those weights. See §ICONS for the two fights that actually matter.

   DROPPED as provably inert (each verified against the live document):
   - `@media (max-width:689.98px){ <col> { width:100% } }` — restates the
     unconditional value; no width ever differs at any breakpoint.
   - the `body.gspb-bodyfront` prefix on the row-content width pair. It is
     folded in at its EFFECTIVE values below, which is what frees the header
     from the plugin's body class. (It superseded a `width:100%` in the rule
     above it; that dead declaration is noted, not restated.)

   NOT dropped even though it looks redundant: `box-sizing:border-box` on the
   column (a global `*{box-sizing:border-box}` already does it) — kept so the
   component is self-describing.

   Enqueued from inc/veil-header.php.
   ========================================================================== */


/* --- ROW ------------------------------------------------------------------
   was: #gspb_row-id-gsbp-b86d60e  +  .gspb_row{position:relative}
   The explicit margin-top/bottom:0 are load-bearing, not tidy-up: this div is
   a direct child of Blocksy's `.entry-content.is-layout-flow`, whose
   `:is(.is-layout-flow > *)` rules would otherwise apply a block margin. The
   original beat them on specificity with its #id; these zeros keep the box at
   the same place now that the id is gone.
   -------------------------------------------------------------------------- */
.veil-hdr-contact {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 0;
	margin-bottom: 0;
}

/* --- ROW CONTENT ----------------------------------------------------------
   was: #gspb_row-id-gsbp-b86d60e > .gspb_row__content
        + body.gspb-bodyfront #gspb_row-id-gsbp-b86d60e > .gspb_row__content
   The bodyfront rule's width/max-width are folded in here at their effective
   values; they superseded a `width:100%` that therefore never applied.
   Both vars resolve to the Blocksy container width (1290px on this site); the
   box shrink-to-fits to its content inside the header's flex row either way.
   -------------------------------------------------------------------------- */
.veil-hdr-contact > .veil-hdr-contact__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 auto;
	width: var(--theme-container-width, 1200px);
	max-width: var(--theme-normal-container-max-width, 1200px);
}

/* --- COLUMN ---------------------------------------------------------------
   was: div[id^=gspb_col-id]  +  #gspb_col-id-gsbp-ff93372.gspb_row__col--12
   -------------------------------------------------------------------------- */
.veil-hdr-contact__col {
	box-sizing: border-box;
	position: relative;
	width: 100%;
}

/* --- LIST -----------------------------------------------------------------
   was: #gspb_iconsList-id-gsbp-26f3b93.gspb_iconsList
   -------------------------------------------------------------------------- */
.veil-hdr-contact__list {
	display: inline-flex;
	flex-wrap: wrap;
}

.veil-hdr-contact__list .veil-hdr-contact__item {
	display: flex;
	flex-direction: row;
	align-items: center;
	position: relative;
	padding-right: 15px;
}

/* §ICONS -------------------------------------------------------------------
   The four fill rules below are all `!important` and they overlap. Source
   order and specificity are exactly as they shipped:

     1. .list .item svg path                     -> #084026   (0,2,2)
     2. .list .item:hover svg path               -> #39A751   (0,3,2)
     3. .list [data-id='1'] svg, ... svg path    -> #fff      (0,2,2)  <- later
        than 1, equal weight, so it wins for the arrow at rest
     4. .list .item:last-child:hover svg path    -> #fff      (0,4,2)  <- beats
        2, so the arrow stays white while the button is hovered

   Rule 3's tie-break with rule 1 is decided purely by source order. Do not
   reorder this block.
   -------------------------------------------------------------------------- */
.veil-hdr-contact__list .veil-hdr-contact__item svg {
	position: relative;
}

.veil-hdr-contact__list .veil-hdr-contact__item svg path {
	fill: #084026 !important;
}

/* WCAG-05 · SC 1.4.11 (Non-text Contrast). The mail icon is a MEANINGFUL
 * graphic — it is the only thing identifying that contact channel, the item
 * has no visible label — so its glyph needs 3:1 against the surface it paints
 * on. Measured at rendered pixels on the cream header canvas #fffaf1:
 *     rest  #084026 .... 11.40:1   pass (unchanged)
 *     hover #39a751 ....  2.96:1   FAIL   <- Blocksy palette colour 1
 * Exactly the same shape WCAG-04 found three times over: the REST state was
 * already fine and the hover BRIGHTENED the control into failure. Swapped to
 * the in-system --veil-accent-deep (#0a5c36) = 7.78:1 on cream, so the hover
 * now deepens, matching the header CTA's hover directly below. Measurement
 * was validated first: the same probe reads 11.40:1 on the known-good rest
 * state and 1.25:1 on a deliberately planted #cfe8d8 glyph.
 * No new brand colour. This was the last live consumer of palette colour 1
 * for a non-text purpose besides the back-to-top control. */
.veil-hdr-contact__list .veil-hdr-contact__item:hover svg path {
	fill: var(--veil-accent-deep) !important;
}

/* was: body #gspb_iconsList-… .gspb_iconsList__item img, … svg
   `order:2` is what puts the arrow AFTER the label even though the <svg>
   precedes the <span> in the markup. */
body .veil-hdr-contact__list .veil-hdr-contact__item img,
body .veil-hdr-contact__list .veil-hdr-contact__item svg {
	margin: 0 !important;
	order: 2;
}

/* --- LABEL ----------------------------------------------------------------
   was: .gspb_iconsList__item__text
   Hidden by default — only the CTA item shows its label (see below). The mail
   item's label is GreenShift's untouched placeholder string; it has never been
   visible. Reported, not changed.
   -------------------------------------------------------------------------- */
.veil-hdr-contact__list .veil-hdr-contact__text {
	display: none;
	color: #fff;
	position: relative;
	padding: 0 15px;
	font-family: var(--veil-font-body) !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	margin: 0 auto;
}

/* --- CTA BUTTON -----------------------------------------------------------
   was: .gspb_iconsList__item:last-child …
   The asymmetric padding (12.25px block, 15px right, 0 left) is verbatim: the
   left inset comes from the label's own `padding: 0 15px`, and the 15px right
   padding is inherited from the shared `.item` rule above.
   -------------------------------------------------------------------------- */
.veil-hdr-contact__list .veil-hdr-contact__item:last-child {
	padding-top: 12.25px;
	padding-bottom: 12.25px;
	background-color: #377f3c;
	border-radius: 7px;
}

/* WCAG-04 · SC 1.4.3 (A-2). Was #2f9946 (Blocksy palette colour 2). The CTA
 * label is #fff at 14px/700 — not large text — so it needs 4.5:1, and #fff on
 * #2f9946 measures 3.64:1 at rendered pixels. The rest state #377f3c already
 * passes at 4.93:1, so the failure was caused by the hover LIGHTENING the
 * button. Swapped to the in-system --veil-accent-deep (#0a5c36): #fff on it
 * is 8.09:1, and the hover now deepens rather than brightens. No new brand
 * colour. VISUAL CHANGE — the hover green is materially darker than before
 * and is flagged for owner sight-check. */
.veil-hdr-contact__list .veil-hdr-contact__item:last-child:hover {
	background-color: var(--veil-accent-deep);
}

.veil-hdr-contact__list .veil-hdr-contact__item:last-child .veil-hdr-contact__text {
	display: block;
}

.veil-hdr-contact__list .veil-hdr-contact__item:last-child:hover svg path {
	fill: #fff !important;
}

.veil-hdr-contact__list .veil-hdr-contact__text:hover {
	cursor: pointer;
}

/* --- PER-ICON SIZING ------------------------------------------------------
   was: [data-id='0'] svg / [data-id='1'] svg. These `!important` sizes are why
   the mail icon's own inline style="width:5rem;height:5rem;margin:10px" never
   rendered; that attribute has been dropped from assets/svg/header-mail.svg
   and the computed result is unchanged.
   -------------------------------------------------------------------------- */
.veil-hdr-contact__list [data-id='0'] svg {
	height: 24px !important;
	width: 24px !important;
	min-width: 24px !important;
	margin: 0 !important;
}

.veil-hdr-contact__list [data-id='1'] svg {
	height: 15px !important;
	width: 15px !important;
	min-width: 15px !important;
	margin: 0 !important;
}

.veil-hdr-contact__list [data-id='1'] svg,
.veil-hdr-contact__list [data-id='1'] svg path {
	fill: var(--wp--preset--color--palette-color-4, var(--theme-palette-color-4, #fff)) !important;
}

/* --- OVERLAY LINK ---------------------------------------------------------
   was: .gspb_iconsList__link — a full-bleed absolutely positioned <a> that
   makes the whole item clickable. Its accessible name comes only from the
   `title` attribute (the element has no text). Reported, not changed.
   -------------------------------------------------------------------------- */
.veil-hdr-contact__list .veil-hdr-contact__link {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}

/* --- MOBILE MENU TRIGGER HIT AREA (B-24) -----------------------------------
   ROOT CAUSE: the hamburger <button> has no box of its own. Blocksy declares
   `width/height/flex: var(--toggle-button-size)` but never sets that variable
   here, so the declarations are invalid-at-computed-value-time, width falls
   back to `auto`, and the button shrink-wraps its 18x18 SVG. Finger target:
   18x18.

   This is NOT a WCAG 2.2 AA failure, contrary to B-24's write-up. SC 2.5.8's
   Spacing exception exempts it: the nearest other target (the site logo) is
   214.2px away, far outside the 24px circle. It fails only SC 2.5.5 (AAA), so
   this block is a quality fix, not a conformance fix. DEFERRED.md B-24(a)
   has been corrected.

   THE CHOICE: drive `--toggle-button-size`. Padding cannot work — Blocksy
   forces `padding: var(--toggle-button-padding, 0px) !important` on a
   border-box element, so padding shrinks the content box and leaves the border
   box at 18px. The variable is the only lever.

   THE -13px: the button is the last flex item of the header's end column and
   Blocksy pins it with `[data-column="end"] [data-items="primary"] >
   :last-child { margin: 0 0 0 10px }` (0,3,0), so its RIGHT edge is fixed.
   Growing 18 -> 44 would drag the centred icon 13px left. Solving
   `iconCentre = rowRight - Mr - 22` against the old `rowRight - 9` gives
   Mr = -13. `!important` is required to beat that 0,3,0 shorthand and is the
   guard this project already uses against the parent theme (Design System
   §10.4). margin-left is deliberately left alone: the right edge is the anchor,
   so it has no effect on where the icon lands.

   VERIFIED at 320/375/390/768 on production: box 18x18 -> 44x44, icon x/y
   unchanged to the pixel (282.8/334.5/348.6/711.6 @ y=26), all four corners and
   the centre of the 44x44 box hit-test to the button, and the header band
   diffs to ZERO changed pixels.

   DELIBERATELY NOT DONE: no padding, no ::before overlay, no touch of
   `--theme-icon-size` or the icon markup, and no change to the offcanvas close
   button (32x32, a different element, already conformant).
   -------------------------------------------------------------------------- */
.ct-header-trigger.ct-toggle {
	--toggle-button-size: 44px;
	margin-right: -13px !important;
}


/* --- CONTACT-01 · PHONE ITEM (2026-08-18) ---------------------------------
   The only NEW component in this file; everything above is the HEADER-01
   port. Scoped entirely to `[data-id='2']` so not one ported declaration
   changes weight or meaning.

   WHY THE LABEL IS UN-HIDDEN HERE rather than by relaxing the shared
   `.veil-hdr-contact__text { display: none }` above: that rule also hides the
   mail item's label, which is deliberate (approved rendering — the mail item
   is icon-only). Relaxing it would have made "info@veilgrp.com" appear in the
   header band, which is a visual change nobody approved.

   THE COLOUR IS LOAD-BEARING. The shared label rule sets `color: #fff`,
   correct for the CTA because it paints on the green button. The phone label
   paints on the CREAM header canvas, where #fff is invisible. --veil-ink
   (#084026) measures 11.40:1 on #fffaf1 — the same value the mail glyph
   already uses, and no new brand colour.
   -------------------------------------------------------------------------- */
.veil-hdr-contact__list [data-id='2'] .veil-hdr-contact__text {
	display: block;
	color: var(--veil-ink);
	white-space: nowrap;
	/* The shared rule's `padding: 0 15px` would double the gap the item's own
	   `padding-right: 15px` already provides. 8px left keeps the glyph and the
	   number reading as one unit rather than two adjacent items. */
	padding: 0 0 0 8px;
}

/* 20px: between the mail glyph (24px) and the CTA arrow (15px). The phone
   glyph sits immediately left of a text label, so it is sized to the label's
   cap height rather than to the mail item, which is icon-only and therefore
   carries the whole item's visual weight by itself. */
body .veil-hdr-contact__list [data-id='2'] svg {
	height: 20px !important;
	width: 20px !important;
	min-width: 20px !important;
	margin: 0 !important;
}

/* `order: 2` is applied to every item's svg by the shared rule above, which is
   what floats the CTA's arrow AFTER its label. For the phone the glyph must
   LEAD, so the order is reset.
   
   THE `body` PREFIX IS REQUIRED, not stylistic. The shared rule is
   `body .veil-hdr-contact__list .veil-hdr-contact__item svg` = (0,3,1).
   Without `body` this selector is (0,2,1) and LOSES — measured: the glyph
   rendered to the right of the number in the first build. Matching the
   prefix takes this to (0,3,1) and source order (later in the file) decides
   it. Same reason the sizing rule below carries it. */
body .veil-hdr-contact__list [data-id='2'] svg {
	order: 0;
}

/* The item is a link target, so it gets the same hover deepening the mail item
   has. Colour follows the glyph rather than staying static, so the whole item
   responds as one control. */
.veil-hdr-contact__list [data-id='2']:hover .veil-hdr-contact__text {
	color: var(--veil-accent-deep);
}

/* Below the header's own collapse point the desktop row is replaced by the
   off-canvas drawer, where this same markup renders a second time. The number
   is the one item in the drawer worth promoting, so it gets a real tap target
   there — 44px, per SC 2.5.5, since in the drawer it sits in a stack of other
   targets and the SC 2.5.8 spacing exception no longer applies. */
@media (max-width: 999.98px) {
	#offcanvas .veil-hdr-contact__list [data-id='2'] {
		min-height: 44px;
	}
}