/*
Theme Name: Braxtone Digital — Landing
Theme URI: https://braxtonedigital.com
Author: Braxtone Group
Description: Temporary single-page holding site for braxtonedigital.com — logo-only header, centred hero, Contact Form 7 enquiry form, and a minimal footer. Built to Braxtone Digital Brand Guidelines v1.1: palette, type scale and logo construction come from that document, and the wordmark, B monogram and favicons are extracted from it. Self-contained — no braxtone-network mu-plugin dependency, so it runs on a plain single-site WordPress install. Retire it when the full Braxtone Digital theme goes live.
Version: 2.2.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: braxtone-digital-landing
*/

/* ==========================================================================
   TOKENS — Brand Guidelines v1.1, §06 colour palette / §07 colour rules.
   One answer per decision; any surface not listed takes Paper, White or Ink.

     Paper   #F6F8FC  page ground        Ink      #101623  body + headings
     White   #FFFFFF  card ground        Slate    #46536A  secondary text
     Glass   #EDF2FA  inset panel        Line     #CFD8E8  rules and borders
     Braxtone Blue #0067A1  the mark, print, brand surfaces (never semantic)
     Indigo deep   #2F4BD9  links and primary buttons
     Indigo 400    #5E79E8  hover
     Coral deep    #C2410C  error and escalation

   TYPE — §10 type usage hierarchy, reproduced exactly.

     TOKEN    FACE / WEIGHT     SIZE / LINE   LINE-HEIGHT  TRACKING  USE
     display  Outfit 600        64 / 62       0.969        -5%       Hero, cover, campaign headline
     h1       Outfit 600        40 / 48       1.2          -4%       Page title
     h2       Outfit 500        32 / 40       1.25         -3%       Section
     h3       Outfit 500        24 / 32       1.333        -2%       Card, product name
     body     Outfit 400        16 / 28       1.75          0        Running text
     ui       Outfit 500        14 / 20       1.429         0        Button, input, nav
     caption  Outfit 400        12 / 20       1.667         0        Caption, helper text
     label    Plex Mono 500     11 / 16       1.455        +14%      Eyebrow, table head, data
                                                            UPPERCASE

   Applied as classes (.bd-display / .bd-h1 / .bd-h2 / .bd-h3 / .bd-caption /
   .bd-eyebrow) driven by the --bd-fs-* properties below. Patterns deliberately
   do NOT set a `fontSize` block attribute: that emits `.has-{slug}-font-size`
   with `!important`, which outranks everything here.
   ========================================================================== */

:root {
	--bd-ink:     #101623;
	--bd-slate:   #46536A;
	--bd-line:    #CFD8E8;
	--bd-glass:   #EDF2FA;
	--bd-paper:   #F6F8FC;
	--bd-white:   #FFFFFF;
	--bd-blue:    #0067A1;  /* the mark only */
	--bd-indigo:  #2F4BD9;
	--bd-indigo4: #5E79E8;
	--bd-coral:   #C2410C;

	/* Type scale — the §10 table, owned here rather than read back out of
	   WordPress's preset variables.
	   WP emits `.has-{slug}-font-size` with `!important`, so when a preset
	   resolves wrong nothing in this file can correct it — h2 was landing at
	   13px and the card title at 16px for exactly that reason. Driving the
	   scale from plain custom properties makes it deterministic. theme.json
	   still declares the presets so the sizes exist in the editor UI.
	   Each clamp lands on the §10 figure at 1440 and steps down on small
	   screens, which §10's minimum sizes require. */
	--bd-fs-display: clamp(2.5rem,  1.20rem + 4.00vw, 4rem);      /* 40 -> 64 */
	--bd-fs-h1:      clamp(2rem,    1.40rem + 1.90vw, 2.5rem);    /* 32 -> 40 */
	--bd-fs-h2:      clamp(1.625rem, 1.30rem + 1.00vw, 2rem);     /* 26 -> 32 */
	--bd-fs-h3:      clamp(1.25rem, 1.10rem + 0.50vw, 1.5rem);    /* 20 -> 24 */
	--bd-fs-body:    1rem;      /* 16 */
	--bd-fs-ui:      0.875rem;  /* 14 */
	--bd-fs-caption: 0.75rem;   /* 12 */
	--bd-fs-label:   0.6875rem; /* 11 */
}

/* --------------------------------------------------------------------------
   LOGO LOCKUP — Brand Guidelines §04.
   The BRAXTONE wordmark is the supplied artwork (extracted from the guidelines
   PDF), never re-typed. Only the DIGITAL suffix is set, using the published
   construction: RATIO 0.4 x cap, TRACKING +1.18 em, optical centre.

   Everything derives from --cap (the cap height of BRAXTONE). The source
   artwork is 1249x228 with a 146px cap, so the image box is cap / 0.6404.
   These sizes are logo geometry, not running text — they are deliberately the
   one place that does NOT use the global type scale.
   -------------------------------------------------------------------------- */
.bd-lockup {
	--cap: 18px;
	display: inline-flex;
	align-items: center;
	gap: calc(var(--cap) * 0.29);   /* GAP 0.29 x cap */
	text-decoration: none;
	line-height: 1;
	/* Clearspace: equal to the cap height of BRAXTONE on all four sides. */
	padding: var(--cap);
	margin: calc(var(--cap) * -1);
}
.bd-lockup:hover { text-decoration: none; }

.bd-lockup__wordmark {
	display: block;
	height: calc(var(--cap) / 0.6404);
	width: auto;
}

.bd-lockup__division {
	font-family: var(--wp--preset--font-family--outfit);
	/* Outfit cap height is ~0.70em, so 0.4 x cap of BRAXTONE => this size. */
	font-size: calc(var(--cap) * 0.4 / 0.7);
	font-weight: 500;
	letter-spacing: 1.18em;         /* TRACKING +1.18 em */
	text-transform: uppercase;
	color: var(--bd-blue);
	white-space: nowrap;
	/* Tracking adds a trailing advance after the last glyph; pull it back so
	   the lockup ends optically flush. */
	margin-right: -1.18em;
}

/* Knockout for the indigo footer — §04 knockout/dark variant. */
.bd-lockup--knockout .bd-lockup__division { color: var(--bd-white); }

/* --------------------------------------------------------------------------
   HEADER — 80px, logo only.
   -------------------------------------------------------------------------- */
/* No flex here. Making the header a flex container turns its constrained inner
   container into a flex item with auto margins, which centred the logo — the
   lockup belongs at the content-column's left edge, matching the footer. */
.bd-header {
	background: var(--bd-white);
	border-bottom: 1px solid var(--bd-line);
}
.bd-header .wp-block-site-logo img { height: auto; max-height: 40px; width: auto; }

/* --------------------------------------------------------------------------
   SECTION FLOW
   WordPress applies the root block-gap as a top margin to every sibling in
   .wp-site-blocks, which opens a white strip between the header and the hero.
   These bands are meant to butt directly against each other, so the gap is
   removed here as well as on the template group (belt and braces — the CSS
   also covers templates edited later in the Site Editor).
   -------------------------------------------------------------------------- */
.wp-site-blocks > main,
.wp-site-blocks > .wp-block-template-part,
.bd-main { margin-block-start: 0; margin-block-end: 0; }

.bd-main > :first-child { margin-block-start: 0; }
.bd-header { margin-block-end: 0; }

/* --------------------------------------------------------------------------
   TYPE TOKENS that have no element selector of their own.
   -------------------------------------------------------------------------- */

/* Element selectors are paired with each class deliberately: theme.json emits
   its heading rules as `:root :where(h1)`, which ties with a bare class on
   specificity, so `h1.bd-display` is what actually wins. */

/* `display` — Outfit 600, 64/62, -5%. Hero, cover, campaign headline. */
.bd-display,
h1.bd-display, h2.bd-display {
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--bd-fs-display);
	font-weight: 600;
	line-height: 0.969;
	letter-spacing: -0.05em;
	color: var(--bd-ink);
	margin: 0;
}

/* `h1` — Outfit 600, 40/48, -4%. Page title. */
.bd-h1, h1.bd-h1 {
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--bd-fs-h1);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.04em;
	color: var(--bd-ink);
}

/* `h2` — Outfit 500, 32/40, -3%. Section. */
.bd-h2, h2.bd-h2 {
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--bd-fs-h2);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.03em;
	color: var(--bd-ink);
}

/* `h3` — Outfit 500, 24/32, -2%. Card, product name. */
.bd-h3, h2.bd-h3, h3.bd-h3 {
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--bd-fs-h3);
	font-weight: 500;
	line-height: 1.333;
	letter-spacing: -0.02em;
	color: var(--bd-ink);
}

/* `caption` — Outfit 400, 12/20. Caption, helper text. */
.bd-caption {
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--bd-fs-caption);
	font-weight: 400;
	line-height: 1.667;
	color: var(--bd-slate);
}

/* `label` — Plex Mono 500, 11/16, +14%, uppercase. Eyebrow, table head, data. */
.bd-eyebrow {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--bd-fs-label);
	font-weight: 500;
	line-height: 1.4545;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bd-indigo);
	margin: 0 0 1.25rem;
}

/* --------------------------------------------------------------------------
   HERO — centred copy on Paper, chevron bleeding off the right as a watermark.
   -------------------------------------------------------------------------- */
.bd-hero {
	position: relative;
	overflow: hidden;
	background: var(--bd-paper);
}

/* The block is centred in the page — equal margins left and right — while the
   text inside it sets ragged-right from the left edge. */
.bd-hero__copy {
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin-inline: auto;
	text-align: left;
}

.bd-hero__sub {
	color: var(--bd-slate);
	font-size: var(--bd-fs-body);
	line-height: 1.75;
	max-width: 36em;
	margin: 1.5rem 0 0;
}

/* Decorative. Height is pinned to the hero so the chevron always spans the band
   exactly — anchoring it by width instead left a gap above and below whenever
   the hero grew taller than the artwork, which is most of the time on mobile.
   The extra width simply bleeds off the right and is clipped by .bd-hero. */
.bd-hero__chevron {
	position: absolute;
	inset-block: 0;
	right: 0;
	width: auto;
	opacity: 0.12;
	pointer-events: none;
	line-height: 0;
	z-index: 0;
}
.bd-hero__chevron svg {
	height: 100%;
	width: auto;
	display: block;
}

/* --------------------------------------------------------------------------
   BUTTONS — ui token: Outfit 500, 14/20. Indigo deep; hover Indigo 400.
   -------------------------------------------------------------------------- */
.bd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 52px;
	padding: 0 1.75rem;
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--bd-fs-ui);
	font-weight: 500;
	color: var(--bd-white);
	background: var(--bd-indigo);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.05s ease;
}
.bd-btn:hover { background: var(--bd-indigo4); color: var(--bd-white); text-decoration: none; }
.bd-btn:active { transform: translateY(1px); }

/* --------------------------------------------------------------------------
   FORM — White card, 16px radius, 1px Line (the §14 card spec).
   -------------------------------------------------------------------------- */
.bd-form-card {
	width: 100%;
	max-width: 608px;
	margin-inline: auto;
	background: var(--bd-white);
	border: 1px solid var(--bd-line);
	border-radius: 16px;
	padding: 32px;
	box-sizing: border-box;
	text-align: left;
}

/* The card title is an <h2> element carrying the h3 token, so it needs the
   element-qualified selector to outrank theme.json's `:root :where(h2)`. */
.bd-form-card__title,
h2.bd-form-card__title {
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--bd-fs-h3);
	font-weight: 500;
	line-height: 1.33;
	letter-spacing: -0.02em;
	color: var(--bd-ink);
	margin: 0 0 1.5rem;
}

/* CF7 autop is disabled in functions.php; neutralise any stray wrappers. */
.bd-form-card form p { margin: 0; }

.bd-field { margin-bottom: 20px; }
.bd-field:last-child { margin-bottom: 0; }

.bd-field label,
.bd-label {
	display: block;
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--bd-fs-ui);
	font-weight: 500;
	line-height: 1.43;
	color: var(--bd-ink);
	margin-bottom: 8px;
}
.bd-label .req { color: var(--bd-indigo); }
.bd-label .bd-optional { color: var(--bd-slate); font-weight: 400; }

/* Two-up: 264 + 16 + 264 inside the 608 card. */
.bd-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

.bd-form-card input[type="text"],
.bd-form-card input[type="email"],
.bd-form-card input[type="tel"],
.bd-form-card select,
.bd-form-card textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--bd-fs-ui);
	font-weight: 400;
	color: var(--bd-ink);
	background: var(--bd-white);
	border: 1px solid var(--bd-line);
	border-radius: 8px;
	height: 44px;
	padding: 0 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.bd-form-card textarea {
	height: 120px;
	min-height: 120px;
	padding: 12px 14px;
	line-height: 1.6;
	resize: vertical;
}

/* Mobile numbers are figures — §10 sets figures in Plex Mono. Weight 500 is
   the one mono cut shipped, so ask for it rather than synthesising 400. */
.bd-form-card input[type="tel"] {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.bd-form-card select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2346536A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 38px;
	cursor: pointer;
}

.bd-form-card input::placeholder,
.bd-form-card textarea::placeholder { color: var(--bd-slate); opacity: 1; }

/* Focus ring — §07: Indigo deep at 30% over a solid deep border. */
.bd-form-card input:focus,
.bd-form-card select:focus,
.bd-form-card textarea:focus {
	outline: none;
	border-color: var(--bd-indigo);
	box-shadow: 0 0 0 3px rgba(47, 75, 217, 0.3);
}

.bd-form-card .wpcf7-submit,
.bd-form-card button[type="submit"] {
	display: block;
	width: 100%;
	height: 52px;
	margin-top: 4px;
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--bd-fs-ui);
	font-weight: 500;
	color: var(--bd-white);
	background: var(--bd-indigo);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.05s ease;
}
.bd-form-card .wpcf7-submit:hover { background: var(--bd-indigo4); }
.bd-form-card .wpcf7-submit:active { transform: translateY(1px); }
.bd-form-card .wpcf7-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* CF7 feedback */
.bd-form-card .wpcf7-response-output {
	margin: 20px 0 0 !important;
	padding: 12px 16px !important;
	border-radius: 8px;
	border-width: 1px !important;
	font-size: var(--bd-fs-ui);
	line-height: 1.6;
}
.bd-form-card .wpcf7-not-valid-tip {
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--bd-fs-caption);
	line-height: 1.67;
	color: var(--bd-coral);
	margin-top: 6px;
}
.bd-form-card .wpcf7-not-valid { border-color: var(--bd-coral); }
.bd-form-card .wpcf7-spinner { display: block; margin: 12px auto 0; }

/* Honeypot — reachable to bots, invisible and unfocusable to people.
   Never display:none; that is the first thing a scraper skips. */
.bd-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bd-form-notice {
	border: 1px dashed var(--bd-indigo);
	background: var(--bd-glass);
	color: var(--bd-ink);
	border-radius: 10px;
	padding: 16px;
	font-size: var(--bd-fs-ui);
	line-height: 1.6;
	margin-top: 16px;
}
.bd-form-notice code {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-weight: 500;
	font-size: var(--bd-fs-caption);
	background: rgba(16, 22, 35, 0.08);
	padding: 2px 6px;
	border-radius: 4px;
}

@media (max-width: 600px) {
	.bd-form-card { padding: 24px; }
	.bd-row { grid-template-columns: 1fr; gap: 0; }
}

/* --------------------------------------------------------------------------
   FOOTER — Indigo deep band. Logo one side, rights the other.
   -------------------------------------------------------------------------- */
.bd-footer { background: var(--bd-indigo); color: var(--bd-white); }

.bd-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.bd-footer__rights {
	margin: 0;
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--bd-fs-caption);
	line-height: 1.67;
	color: rgba(255, 255, 255, 0.85);
}
.bd-footer a { color: var(--bd-white); text-decoration: underline; }
.bd-footer .bd-lockup,
.bd-footer .bd-lockup:hover { text-decoration: none; }
.bd-footer .wp-block-site-logo img { height: auto; max-height: 34px; width: auto; }

@media (max-width: 600px) {
	.bd-footer__inner {
		flex-direction: column;
		justify-content: center;
		text-align: center;
		gap: 1rem;
	}
}

/* --------------------------------------------------------------------------
   BASE / A11Y
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--bd-indigo);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

@media (max-width: 600px) {
	.bd-lockup { --cap: 15px; }
}