/*
 * Site CSS — the one place a project writes hand-authored rules.
 *
 * This file is loaded twice, by two different mechanisms, and that is deliberate:
 *
 *  - front end: enqueued by the parent's g_theme_enqueue_styles(), after the
 *    parent's structural rule;
 *  - editor canvas: picked up by the parent's add_editor_style('assets/site.css').
 *    Core resolves that path CHILD FIRST, hands the editor a baseURL so relative
 *    url() still works, and scopes every rule to .editor-styles-wrapper.
 *
 * So a rule written here shows up identically in the editor and on the page. That
 * is the whole reason g-box exposes a canvas hook — a site whose CSS only exists
 * on the front end leaves the editor looking nothing like the published result.
 *
 * What does NOT belong here:
 *
 *  - anything a g/* block can express through cpStyleIntent. Those become atomic
 *    classes, are visible in the panel, and survive a redesign. A rule written
 *    here is invisible to whoever edits the page next.
 *  - @font-face. Declare fonts in theme.json under settings.typography.fontFamilies
 *    -> fontFace; WordPress prints them on the front end AND inside the editor
 *    iframe on its own.
 *  - resets. apps/g-box/includes/assets/cp-reset.css already ships border-box on
 *    both surfaces.
 *  - overflow-x on html or body. If you truly need it, use `clip`, never `hidden`:
 *    overflow-x:hidden on an ancestor silently kills position:sticky on every
 *    descendant.
 *
 * WHY EVERYTHING BELOW SITS IN `@layer cp-base`
 *
 * This theme declares `add_theme_support('g-box-layered-css')`, so g-box emits
 * its atomic stylesheet into `@layer cp-plugin`. A cascade layer outranks
 * specificity in the other direction from the usual rule: an UNLAYERED
 * declaration beats a layered one no matter how weak its selector. So anything
 * written here without a layer would be stronger than every class the author
 * sets in the panel — the exact inversion this file is least likely to be
 * suspected of.
 *
 * It has already cost a day. One line of `a { color: inherit }` beat
 * `.cp-c-shell` on a header button and painted the label the same colour as
 * its own background: class present in the markup, rule present in the
 * generated stylesheet, button apparently empty.
 *
 * `cp-base` is declared before `cp-plugin` (see WpStylePipeline\LayerGuard), so
 * the order is: cp-base  <  cp-plugin  <  anything unlayered. Site defaults
 * lose to panel styling, which is what an author expects.
 *
 * WHEN TO LEAVE A RULE OUT OF THE LAYER
 *
 * Deliberately, and rarely — for rules that SHOULD beat panel styling because
 * they are not about looks: `@media print`, `prefers-reduced-motion`
 * overrides, a hard fix for a third-party embed. Put those after the layer
 * block with a comment saying why. If you cannot name the reason, it belongs
 * inside the layer.
 */

@layer cp-base {
	/*
	 * Anchors inherit. The artboards carry a global `a { color:…; text-decoration:none }`
	 * in their <helmet> style block, and every link on this site takes its colour
	 * from the element around it — footer links from the column, the header phone
	 * number from the bar, nav links from the g/nav `item` sub-target. Without
	 * this the UA sheet paints them all default blue and underlines them, because
	 * a rule on <a> beats a colour merely inherited from the parent <p>.
	 *
	 * Safe here precisely because it is layered: cp-base < cp-plugin, so any
	 * `cp-c-*` the panel puts ON an anchor (g/button does exactly that) still
	 * wins. Unlayered, this same line is the one the file header warns about.
	 */
	a {
		color: inherit;
		text-decoration: none;
	}

}

@layer cp-base {
	/*
	 * The booking wizard.
	 *
	 * Everything here is what the panel genuinely cannot reach, not styling
	 * that was easier to write in CSS:
	 *
	 *  - the step rail is built by the view script, not by blocks, and g-form
	 *    ships it as "structure only — a theme decides what it looks like".
	 *
	 * The service grid, the "Yes / No" row and the step caption used to live here
	 * too. AV-8 gave choice fields a `list` target and made an empty
	 * `wizard.stepLabel` mean "no caption", so all three moved back into the form
	 * where the next person to edit it will actually find them.
	 *
	 * Per-field looks (borders, padding, type) stay in the form's own
	 * cpStyleIntent where the next person to edit the form will find them.
	 */

	.gform .gform-field--name-service .gform-choice__sub {
		display: block;
		margin-top: 6px;
		color: #a69e94;
		font-size: 11px;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	.gform .gform-field--name-service .gform-choice__price {
		color: #a2685a;
		font-size: 12px;
		white-space: nowrap;
	}

	/* The artboard has no radio dial — the card itself is the control. The input
	   stays in the DOM (and focusable) so the form still works without JS. */
	.gform .gform-field--name-service .gform-choice > input,
	.gform .gform-field--name-first_visit .gform-choice > input {
		position: absolute;
		width: 1px;
		height: 1px;
		opacity: 0;
		pointer-events: none;
	}

	/* `min-width: 0` is what lets the name give the nowrap price its room. It
	   also lets the name shrink below its own longest word, and an unbreakable
	   word does not stop at the edge of its box — it prints straight over the
	   price. "Consultation" against "Complimentary" did exactly that on a 215px
	   card. The service grid is now one column until 1024px so the width is
	   there, and `overflow-wrap` is the guarantee rather than the arithmetic:
	   a name too long for its card wraps instead of overprinting, whatever gets
	   added to the price list later. */
	.gform .gform-field--name-service .gform-choice__text {
		flex: 1;
		min-width: 0;
		overflow-wrap: anywhere;
	}


	/* The artboard's stepper: numbered dots joined by hairlines. */
	.gform .gform-steps-rail {
		flex-wrap: nowrap;
		justify-content: center;
		gap: clamp(8px, 1.4vw, 18px);
		margin: 0 0 32px;
	}

	.gform .gform-steps-rail__step {
		gap: 10px;
		min-width: 0;
		opacity: 1;
	}

	.gform .gform-steps-rail__num {
		display: flex;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		width: 31px;
		height: 31px;
		border: 1px solid #d6cfc4;
		border-radius: 50%;
		color: #a69e94;
		font-size: 11px;
	}

	/* The artboard numbers its steps 01–03, the rail counts 1–3. */
	.gform .gform-steps-rail__num::before {
		content: "0";
	}

	.gform .gform-steps-rail__label {
		color: #a69e94;
		font-size: clamp(9.5px, 1.1vw, 11px);
		letter-spacing: 0.12em;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.gform .gform-steps-rail__step.is-current .gform-steps-rail__num,
	.gform .gform-steps-rail__step.is-done .gform-steps-rail__num {
		border-color: #a2685a;
		background: #a2685a;
		color: #f7f4ef;
	}

	.gform .gform-steps-rail__step.is-current .gform-steps-rail__label {
		color: #1f1c19;
	}

	/* Under ~420px the three labels plus their hairlines need 335px and only
	   have 300. The artboard has no mobile state, so this is authored: keep the
	   numbered dots and the rules, drop the words. Progress still reads. */
	@media (max-width: 419px) {
		.gform .gform-steps-rail__label {
			position: absolute;
			overflow: hidden;
			clip-path: inset(50%);
			width: 1px;
			height: 1px;
			white-space: nowrap;
		}

		.gform .gform-steps-rail__step {
			gap: 0;
		}
	}

	/* Hairline between steps — on the step, so the last one has none. */
	.gform .gform-steps-rail__step:not(:last-child)::after {
		flex-shrink: 1;
		width: clamp(14px, 3vw, 44px);
		height: 1px;
		margin-left: clamp(6px, 1.2vw, 16px);
		background: #d6cfc4;
		content: "";
	}

}