/* =====================================================================
   MARBLE / KADENCE INTEGRATION BOUNDARY
   ---------------------------------------------------------------------
   This file is NOT part of the design. Do not "clean it up", merge it
   into components.css or home.css, or delete a rule because it looks
   redundant next to a page stylesheet.

   What it is. The approved pages (Marble Listo/*.html) were authored as
   standalone documents with no parent theme, so nothing in them
   anticipates Kadence. In WordPress, Kadence's global.min.css styles the
   same elements (buttons, links, images, blockquotes, the box model) and
   wins wherever its selector is at least as specific as ours. Every rule
   below exists to make one of those parent-theme opinions stop reaching
   Marble content, so that WordPress renders what the approved file
   renders. It adds no design.

   How it is scoped. Everything hangs off .marble-content. functions.php
   puts that class on the wrapper Kadence prints around the post content
   (filter kadence_entry_content_class), and only on Marble pages. The
   standalone previews (dist/preview/*.html) carry this sheet too but
   not that class, so it is inert there: the previews stay a faithful
   picture of the approved page, and WordPress is what has to match them.

   The second hook is .pg-wrap. The theme prints the header and footer of
   the delivered pages (inc/chrome.php) as siblings of the post content, not
   inside it, so .marble-content never reaches them; Kadence's `address`
   margin pushed the footer's office columns 22.5px taller, and its link
   states would reach the navigation. inc/chrome.php wraps header, content
   and footer in .pg-wrap, and every selector below that says
   .marble-content says .pg-wrap too. Same specificity, so nothing below
   changes strength.

   How it yields. Blocks 1 and 2 add no specificity beyond the element
   they name (the wrapper sits in :where()) and load before the page
   sheets, so any rule in components.css or a page sheet still overrides
   them. `revert` means "the browser default", which is what the
   standalone page had wherever it did not set the property itself. The
   state rules in block 3 are the exception, and the reason is written
   there. Block 4 restyles a Kadence element no Marble sheet touches.

   Load order (functions.php, build/preview.mjs):
     kadence-global -> tokens.css -> THIS FILE -> components.css -> page
   Loading it earlier lets Kadence win ties; loading it later lets it
   beat the page sheets. Neither is acceptable.
   ===================================================================== */

/* ---- 1. Box model --------------------------------------------------
   Kadence sets html { box-sizing: border-box } and *, ::before, ::after
   { box-sizing: inherit }, so every element on the site is border-box.
   The home was approved without that and is content-box wherever its
   own CSS does not say otherwise (its hero lede measures 498px, not
   480px). Setting the value on the wrapper alone is not enough: the
   moment a component declares border-box on itself, Kadence's inherit
   rule pushes that value into every descendant, which content-box
   descendants never received in the standalone page (244 elements under
   the home's method section). So the rule names every element. It is
   still zero-specificity, so a component that wants border-box on
   itself, or components.css's own *, ::before, ::after rule, still wins.
   Note that box-sizing is not an inherited property: Kadence's `inherit`
   is what makes it behave like one. */
:where(.marble-content, .pg-wrap),
:where(.marble-content, .pg-wrap) *,
:where(.marble-content, .pg-wrap) *::before,
:where(.marble-content, .pg-wrap) *::after {
	box-sizing: content-box;
}

/* ---- 2. Elements Kadence restyles at type-selector strength ----------
   These tie with Kadence at specificity 0,0,1 and load after it, so
   they win the tie and hand the property back to the browser default.
   Page sheets load later still and override them as they always did. */
:where(.marble-content, .pg-wrap) a {
	text-underline-offset: revert; /* Kadence: .1em */
	transition: revert;            /* Kadence: all .1s linear */
}

:where(.marble-content, .pg-wrap) :is(h1, h2, h3, h4, h5, h6) {
	/* Kadence gives each heading a palette colour, a fixed size and a 1.5
	   line height (h1: 32px, 1.5). A colour set on the element itself
	   defeats inheriting the white of a dark band, and a fixed size beats
	   the browser's own em scale, which is what a heading the page never
	   sized was approved with. */
	color: inherit;
	font-size: revert;
	line-height: revert;
}

:where(.marble-content, .pg-wrap) img {
	display: revert;    /* Kadence: block */
	max-width: revert;  /* Kadence: 100% */
}

:where(.marble-content, .pg-wrap) blockquote {
	padding-left: revert; /* Kadence: 1em */
	border-left: revert;  /* Kadence: 4px solid palette4 */
	quotes: revert;       /* Kadence: curly pair */
}

:where(.marble-content, .pg-wrap) address {
	margin: revert; /* Kadence: 0 0 1.5em */
}

/* Form controls are border-box in every browser's own stylesheet, which
   is what the standalone page got; block 1 would otherwise make them
   content-box and push a width: 100% button 16px past its column. */
:where(.marble-content, .pg-wrap) :is(button, input, select, textarea) {
	box-sizing: revert;
}

/* Buttons. Kadence styles every <button> as a filled call to action:
   3px radius, palette background, 1.125rem type, 1.6 line height, a
   0.2s "all" transition and a resting box-shadow. Our buttons are bare
   rows (accordion questions, the figures selector) and set their own
   background, border, padding and colour; this block returns the
   properties they do NOT set to what the browser would have used.
   The first rule names [type=button] because Kadence's appearance rule
   does (0,1,0), and our buttons carry that attribute. */
:where(.marble-content, .pg-wrap) :is(button, [type="button"], [type="reset"], [type="submit"]) {
	appearance: revert; /* Kadence: button */
}

:where(.marble-content, .pg-wrap) button {
	border-radius: revert;
	box-shadow: revert;
	font-family: revert;
	font-size: revert;
	line-height: revert;
	transition: revert;
	text-decoration: revert;
}

/* Form controls, the generic half. Kadence's reset gives every control
   `font-size: 100%; margin: 0` and its font settings give them the body
   family, colour and line height (the same 0,0,1 as a type selector), which
   the browser does not: a radio's own 3px/4px margin and 13.3px system
   font are what the approved contact page measured, and the visually
   hidden .ct-tipo-input radios sat 5px left of where they belong without
   it. A legend is a block in the browser and `display: table` in
   Kadence's normalize, which is what made the form 18px short. Nothing in
   our sheets sets these on a control without a class of its own. */
:where(.marble-content, .pg-wrap) :is(input, select, textarea, optgroup) {
	appearance: revert;  /* Kadence: none, on a textarea */
	box-shadow: revert;  /* Kadence: a transparent 0 0 0 -7px, on select and textarea */
	color: revert;
	font-family: revert;
	font-size: revert;
	line-height: revert;
	margin: revert;
	max-width: revert;   /* Kadence: 100%, on a textarea */
}

:where(.marble-content, .pg-wrap) legend {
	display: revert;     /* Kadence: table */
	font-weight: revert; /* Kadence: bold */
	max-width: revert;   /* Kadence: 100% */
	padding: revert;     /* Kadence: 0 */
}

/* ---- 3. Interaction states ------------------------------------------
   Kadence colours a link and fills a button in :hover, :focus and
   :active, from a selector (a:hover, button:hover) whose specificity is
   0,1,1. Our resting rules are a single class (0,1,0) and lose to it,
   which is how a plain FAQ row became a filled wine bar the moment it
   was hovered or focused, and how a call to action went dark wine on
   wine.

   The only way to beat 0,1,1 is to match it, so these rules do. Each is
   an element plus :is(states), with everything else in :where() so the
   count stays exactly 0,1,1: they beat our resting rules (0,1,0), they
   tie with Kadence and load after it, and they still lose to every
   state rule we write ourselves, all of which are 0,2,0 or more
   (.x:hover, .x:focus-visible, .x.is-open ...). Never put a class
   outside :where() in these selectors: it lifts them above our own
   state rules and breaks the design.

   What they restore is what the standalone page shows in that state:
   the colour the element already has, and a flat button.

   Colour is the awkward one. A rule at 0,1,1 cannot say "whatever the
   resting rule said", so there are two tiers, both measured against the
   standalone pages:
     1. Default: `inherit`. Right whenever the colour comes from the
        surrounding component, which is the case for every link and
        button on the home except the two named below.
     2. Named classes: elements that set their colour on themselves and
        have no hover colour of their own, where `inherit` would hand
        them the section's colour instead. Each class is listed with the
        value its own rule uses.
   If a new link or button sets its own colour and has no :hover colour
   (a hover that looks wrong on WordPress and right in the preview is
   this), add its class to tier 2. */
/* The mobile navigation panel (page.css, marble-mobile-nav) is appended to <body> by
   pg-page.js, outside .pg-wrap, so it is named here as a third root. Without it the
   panel's focused link took Kadence's focus colour, dark wine on the dark panel: the
   first item of the menu rendered invisible on WordPress and white on the preview. */
a:where(.marble-content *, .pg-wrap *, .mn-panel *):is(:hover, :focus, :active) {
	color: inherit;
}

button:where(.marble-content *, .pg-wrap *, .mn-panel *):is(:hover, :focus, :active) {
	background: none;
	box-shadow: none;
	color: inherit;
}

/* Tier 2. White on a dark band. */
a:where(.me-card--photo, .ip-logo, .sp-logo):where(.marble-content *, .pg-wrap *):is(:hover, :focus, :active) {
	color: var(--ms-on-dark);
}

/* Tier 2. Ink. */
:is(a, button):where(.ms-cta, .ip-q, .ms-acc__btn, .mf-q__btn):where(.marble-content *, .pg-wrap *):is(:hover, :focus, :active) {
	color: var(--ms-ink);
}

/* Tier 2. The figures selector rests at half white and only its hover,
   keyboard-focus and active states (home.css) are full white, so a
   mouse-focused item that the rotator has moved on from must go back to
   half white, not to the card's colour. */
button:where(.me-figs__item):where(.marble-content *, .pg-wrap *):is(:hover, :focus, :active) {
	color: color-mix(in srgb, var(--ms-on-dark) 50%, transparent);
}

/* ---- 4. Page plate ---------------------------------------------------
   The chrome filter in functions.php gives a Marble page Kadence's
   "unboxed" content style, and Kadence answers that with
   `body.content-style-unboxed .site { background: palette9 }`: an opaque
   white plate over the whole page. The approved pages paint their own
   ground on <body> (the ivory, the two glows and the grain are
   body::before / ::after at z-index -2 and -1), so the plate hides all of
   it and the page reads flat white. Selectors of this strength are
   Kadence's; no Marble sheet ever styles .site, so nothing here has to
   stay overridable. The :has() keeps it to Marble pages. */
body.content-style-unboxed .site:has(.marble-content) {
	background: transparent;
}

/* ---- 5. Text fields -------------------------------------------
   The one place a plain revert cannot work. Kadence styles text inputs
   with `input[type=text]` (0,1,1) and their focus with
   `input[type=text]:focus` (0,2,1), and our .ct-input is a single class
   (0,1,0): it loses, so a text field rendered with Kadence's 6.8px
   padding, 3px radius, white fill and grey text, and on focus with
   Kadence's grey border and soft shadow instead of ours. Reverting would
   hand the property to the browser, which is not what .ct-input says
   either, so these rules restate the declarations of .ct-input in
   contacto.css at the strength that wins. THIS IS A COPY: change a value
   in .ct-input or its focus and invalid states and change it
   here, or WordPress keeps the old one while the preview shows the new.
   (Raising the page sheet's own selector, as .ms-section.ct-donde does,
   would remove the copy; it needs a page-sheet change.)

   Strengths are chosen so the states we write ourselves keep working:
   resting 0,1,1 loses to .ct-input:hover and [aria-invalid] (0,2,0);
   focus 0,2,1 beats hover, as focus-visible comes after hover in the page
   sheet; focus plus invalid 0,3,1 gives the invalid ring back.

   Selects are not here on purpose. Kadence's `select:focus` (0,1,1) would
   only beat .ct-select if a select could hold focus without
   :focus-visible, which could not be reproduced in a browser, and the
   measured resting and clicked select already matches the approved page.
   A mouse-focused select in a real browser is the case to check if one
   ever looks wrong. */
input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="password"], [type="search"], [type="number"]):where(.ct-input):where(.marble-content *, .pg-wrap *) {
	appearance: revert;      /* Kadence: none */
	max-width: revert;       /* Kadence: 100% */
	box-shadow: revert;      /* Kadence: a transparent 0 0 0 -7px */
	border: 1px solid rgb(51 51 51 / 0.28);
	border-radius: 0.75rem;
	padding: 0.65rem 0.95rem;
	background: rgb(255 255 255 / 0.72);
	color: var(--ms-ink);
}

input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="password"], [type="search"], [type="number"]):where(.ct-input):where(.marble-content *, .pg-wrap *):focus {
	border-color: var(--ms-brand);
	background-color: var(--ms-on-dark);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ms-brand) 16%, transparent);
	color: var(--ms-ink);
}

input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="password"], [type="search"], [type="number"]):where(.ct-input):where(.marble-content *, .pg-wrap *):focus[aria-invalid="true"] {
	border-color: var(--ms-brand);
	box-shadow: 0 0 0 1px var(--ms-brand);
}


/* ---- 6. The site search's field ----------------------------------
   Same situation as block 5, other field. The search the 2026-10-06
   delivery injects into the navigation (page.css, .mb-search) draws its
   input as a bare field on the glass bar: no border, transparent, white
   text, a translucent placeholder. Kadence's `input[type=search]`
   (0,1,1) outranks .mb-search__input (0,1,0), so on WordPress the field
   came out as Kadence's white box with grey text and a grey border, in
   the bar and in the mobile panel alike. These rules restate
   .mb-search__input and its placeholder at 0,1,1, after Kadence. THIS IS
   A COPY of .mb-search__input in page.css: change one, change the other.
   The focus rule is needed too, because Kadence styles `:focus` of the
   same selector at 0,2,1. */
input:is([type="search"]):where(.mb-search__input):where(.pg-wrap *, .mn-panel *),
input:is([type="search"]):where(.mb-search__input):where(.pg-wrap *, .mn-panel *):focus {
	appearance: revert;      /* Kadence: none */
	max-width: revert;       /* Kadence: 100% */
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--ms-on-dark);
	box-shadow: none;
	outline: none;
	font: inherit;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
}

input:is([type="search"]):where(.mb-search__input):where(.pg-wrap *, .mn-panel *)::placeholder {
	color: rgb(255 255 255 / 0.55);
}