/* =========================================================================
   Chris Dixie Photography — main stylesheet
   -------------------------------------------------------------------------
   1.  Design tokens
   2.  Base (deliberately minimal — safe for Elementor)
   3.  Layout primitives
   4.  Header (desktop, compact desktop, tablet/mobile)
   5.  Mobile menu overlay
   6.  Header modes (solid / overlay / overlay-mobile)
   7.  Footer
   8.  Page shells, prose (scoped content typography), listings
   9.  Elementor & full-width content
   10. Hero slider
   11. Utilities, forms (.cdx-form only), accessibility, motion

   Value labels used in comments:
     VERIFIED    read directly from the Figma file
     DERIVED     calculated from verified Figma geometry
     PROVISIONAL not yet verified in Figma — replace after inspection
     ASSUMPTION  no Figma reference exists (e.g. tablet) — documented choice

   Breakpoints (keep in sync with cdx_breakpoints() in inc/options.php;
   search for "BP:" to find every media query):
     tablet  768px  · desktop 1024px · wide 1280px
   ========================================================================= */

/* 1. DESIGN TOKENS ------------------------------------------------------ */
:root {
	/* Colour — VERIFIED */
	--cdx-color-black: #000000;                       /* header + nav tab background */
	--cdx-color-bg: #1A1A1A;                          /* page body (desktop Contact) */
	--cdx-color-surface: #131316;                     /* nav tab hover / current */
	--cdx-color-border: #1C1C21;                      /* header + nav borders */
	--cdx-color-text: #E8E4DF;                        /* headings, values */
	--cdx-color-text-muted: rgba(232, 228, 223, 0.7); /* labels */
	--cdx-color-text-soft: rgba(232, 228, 223, 0.6);  /* footer copyright + icons */
	--cdx-color-divider: rgba(232, 228, 223, 0.1);    /* row dividers */
	--cdx-color-nav: #AFB0B6;                         /* nav tab text */
	--cdx-color-white: #FFFFFF;
	--cdx-color-white-80: rgba(255, 255, 255, 0.8);   /* mobile hero title */
	--cdx-hero-overlay-mobile: rgba(4, 4, 4, 0.6);    /* mobile home hero (#040404 @ 60%) */

	/* Typeface — VERIFIED families (self-hosted, see fonts.css) */
	--cdx-font-display: "DM Sans Variable", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--cdx-font-ui: "Manrope Variable", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--cdx-opsz: "opsz" 14;                            /* VERIFIED: Figma renders DM Sans at opsz 14 */

	/* Type styles — VERIFIED (Figma px values, rounded to 0.01px) */
	--cdx-display-size: 57.6px;   --cdx-display-lh: 66.24px;  --cdx-display-ls: 1.15px;  --cdx-display-wt: 300; /* page heading (Contact) */
	--cdx-title-m-size: 32px;     --cdx-title-m-lh: 46px;     --cdx-title-m-ls: -0.64px; --cdx-title-m-wt: 300; /* mobile hero title */
	--cdx-label-size: 15.48px;    --cdx-label-lh: 23.23px;    --cdx-label-ls: 2.48px;    --cdx-label-wt: 400;   /* uppercase labels */
	--cdx-value-size: 19.71px;    --cdx-value-lh: 29.56px;    --cdx-value-wt: 300;                              /* values / body copy */
	--cdx-caption-size: 14.08px;  --cdx-caption-lh: 21.11px;  --cdx-caption-ls: 2.82px;  --cdx-caption-wt: 400; /* footer copyright */
	--cdx-cta-ls: 3.94px;                                                                                       /* "Explore More" */
	--cdx-nav-size: 14px;         --cdx-nav-lh: 1.5;          --cdx-nav-wt: 500;                                /* Manrope Medium */

	/* Layout */
	--cdx-header-h: 80px;                              /* VERIFIED desktop + mobile */
	--cdx-header-offset: var(--cdx-header-h);          /* 0 when the header overlays the page */
	--cdx-gutter: clamp(25px, 5.0834vw, 73.2px);       /* DERIVED: 73.2px @1440 desktop, 25px @390 mobile; fluid between (ASSUMPTION for tablet) */
	--cdx-content-max: 1294px;                         /* DERIVED: 1440 − 2 × 73.2 */
	--cdx-footer-max: 1097px;                          /* VERIFIED footer row width */
	--cdx-divider-w: 1.41px;                           /* VERIFIED row divider weight */

	/* Header geometry */
	--cdx-logo-h: 76.35px;                             /* VERIFIED: 99.12 × 76.35 (client Figma screenshot) */
	--cdx-logo-top: 0px;                               /* MEASURED: logo artwork starts 6px below the bar top in Figma (client screenshots) */
	--cdx-logo-inset: clamp(15px, 7.85vw, 113px);      /* DERIVED: 113px @1440, 15px @390 */
	--cdx-nav-item-h: 65px;                            /* VERIFIED */
	--cdx-nav-item-px: 40px;                           /* VERIFIED */
	--cdx-nav-item-px-first: 50px;                     /* VERIFIED (Home) */
	--cdx-nav-radius: 12px;                            /* VERIFIED (top corners) */
	--cdx-nav-shift: 124px;                            /* VERIFIED: group centred at 50% + 124px */

	/* Mobile menu overlay — MEASURED in the Figma mobile prototype */
	--cdx-mobile-menu-bg: rgba(0, 0, 0, 0.855);        /* page shows through, dimmed */
	--cdx-mobile-menu-size: 29px;                      /* DM Sans Light 29px, −1.45px */
	--cdx-mobile-menu-ls: -1.45px;
	--cdx-mobile-menu-color: rgba(232, 228, 223, 0.6);
	--cdx-mobile-menu-pitch: 55px;                     /* VERIFIED item spacing (y 98, 153, 208 …) */
	--cdx-mobile-menu-pad-top: 32px;                   /* MEASURED: "Portfolio" ascender top at y 128 */
	--cdx-mobile-menu-pad-x: 24px;                     /* VERIFIED item x = 24px */

	/* Footer spacing — DERIVED (≈43px above / ≈36px below on the desktop About frame); verify */
	--cdx-footer-pad-top: 40px;
	--cdx-footer-pad-bottom: 36px;
	--cdx-social-size: 22px;                           /* VERIFIED: icon row 61 × 22 (Instagram 21 × 22, Facebook 24 × 22) */
	--cdx-social-gap: 16px;                            /* VERIFIED */
	--cdx-footer-row-h: 22px;                          /* VERIFIED: footer row 1097 × 22 */

	/* Page shell */
	--cdx-page-pad-top: 70px;                          /* VERIFIED: eyebrow/heading block starts 70px under the header */

	/* Motion — VERIFIED (Figma Smart Animate "Ease out", hover 0.3s) */
	--cdx-ease-out: cubic-bezier(0, 0, 0.58, 1);
	--cdx-hover-t: 0.3s;

	/* Optional header texture (Customizer). Figma: photo at 20% over black. */
	--cdx-header-texture: none;
	--cdx-header-texture-opacity: 0.2;                 /* VERIFIED */
}

/* 2. BASE ---------------------------------------------------------------
   Kept minimal so Elementor widgets render exactly as configured:
   no global heading sizes, margins, link decoration or button styles.  */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	/* Sticky header: in-page anchors land below it. */
	scroll-padding-top: calc(var(--cdx-header-h) + var(--wp-admin--admin-bar--height, 0px));
}

/* Custom scrollbar — thin, rounded, subtle; theme-wide (page, viewer, menu).
   Chrome / Edge / Safari use the ::-webkit-scrollbar rules; Firefox, which
   has no pseudo-elements, gets its thin native bar in the same colours. */
:root {
	--cdx-scrollbar-size: 6px;
	--cdx-scrollbar-thumb: rgba(232, 228, 223, 0.22);
	--cdx-scrollbar-thumb-hover: rgba(232, 228, 223, 0.45);
}

::-webkit-scrollbar { width: var(--cdx-scrollbar-size); height: var(--cdx-scrollbar-size); }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
	background-color: var(--cdx-scrollbar-thumb);
	border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active { background-color: var(--cdx-scrollbar-thumb-hover); }

@supports not selector(::-webkit-scrollbar) {
	* {
		scrollbar-width: thin;
		scrollbar-color: var(--cdx-scrollbar-thumb) transparent;
	}
}

body {
	margin: 0;
	background: var(--cdx-color-bg);
	color: var(--cdx-color-text);
	font-family: var(--cdx-font-display);
	font-variation-settings: var(--cdx-opsz);
	font-weight: var(--cdx-value-wt);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img,
svg,
video { max-width: 100%; height: auto; }

a { color: inherit; }

button,
input,
select,
textarea { font: inherit; }

:focus-visible { outline: 2px solid var(--cdx-color-text); outline-offset: 3px; }

/* Image protection (with assets/js/image-protect.js): images can't be
   dragged or selected, and the iPhone long-press "Save to Photos" menu is
   switched off. Photographs also ignore pointer events, so right-click /
   long-press lands on their container, never on the image itself; clicks,
   hovers, zooms, the popup and swipes are handled by the containers and
   keep working. Header and footer images (logo, Instagram) are untouched.
   Not applied inside the Elementor editor. */
body:not(.elementor-editor-active) img {
	-webkit-user-drag: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}
body:not(.elementor-editor-active) :is(.cdx-gallery__item, .cdx-pf-card__link, .cdx-lb__frame, .cdx-single__media, .cdx-hero-slider) {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}
body:not(.elementor-editor-active) :is(.cdx-gallery__img, .cdx-pf-card__img, .cdx-lb__img, .cdx-single__image, .cdx-hero-slider img) {
	pointer-events: none;
}
.cdx-header img,
.cdx-footer img { -webkit-user-drag: auto; -webkit-touch-callout: default; }

/* 3. LAYOUT --------------------------------------------------------------- */
.cdx-site {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

.cdx-main { flex: 1 0 auto; display: block; }

.cdx-container {
	width: 100%;
	max-width: calc(var(--cdx-content-max) + 2 * var(--cdx-gutter));
	margin-inline: auto;
	padding-inline: var(--cdx-gutter);
}

.cdx-full { width: 100%; }

/* 4. HEADER ---------------------------------------------------------------- */
.cdx-header {
	position: sticky;                                  /* stays at the top while scrolling */
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	height: var(--cdx-header-h);
	background: var(--cdx-color-black);
	border-bottom: 1px solid var(--cdx-color-border);
	color: var(--cdx-color-text);
}

.cdx-header__texture {
	position: absolute;
	inset: 0;
	background-image: var(--cdx-header-texture);
	background-size: cover;
	background-position: center;
	opacity: var(--cdx-header-texture-opacity);
	pointer-events: none;
}

.cdx-header__inner {
	position: relative;
	height: 100%;
	overflow: hidden; /* the logo overflows the bar top in Figma and is clipped by it */
}

.cdx-header__brand { position: absolute; top: var(--cdx-logo-top); left: var(--cdx-logo-inset); }

.cdx-logo { display: block; line-height: 0; }
.cdx-logo__img { display: block; width: auto; height: var(--cdx-logo-h); }

/* Desktop navigation: joined "tabs" sitting on the bar's bottom edge. */
.cdx-nav { display: none; }

.cdx-nav__list {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
	border-radius: var(--cdx-nav-radius) var(--cdx-nav-radius) 0 0;
	overflow: hidden;
}

/* Figma strokes sit inside the 779 × 65 group and the tabs (they add no
   width), so the outline is drawn on top instead of as a CSS border. */
.cdx-nav__list::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border: 1px solid var(--cdx-color-border);
	border-bottom: 0;
	border-radius: inherit;
	pointer-events: none;
}

.cdx-nav__list > li { margin: 0; }

.cdx-nav__link {
	position: relative;
	display: flex;
	align-items: center;
	height: var(--cdx-nav-item-h);
	/* Figma rounds each tab's text box up to a whole pixel (Home 38.48 → 39,
	   tab 139; all six tabs = 779px). main.js sets --cdx-nav-round to that
	   fraction; it is added on the right, where Figma's text box grows. */
	--cdx-nav-px: var(--cdx-nav-item-px);
	padding-inline: var(--cdx-nav-px) calc(var(--cdx-nav-px) + var(--cdx-nav-round, 0px));
	background-color: var(--cdx-color-black);
	box-shadow: inset -1px 0 0 var(--cdx-color-border), inset 0 -1px 0 var(--cdx-color-border); /* inside strokes, as in Figma */
	color: var(--cdx-color-nav);
	font-family: var(--cdx-font-ui);
	font-variation-settings: normal;
	font-size: var(--cdx-nav-size);
	font-weight: var(--cdx-nav-wt);
	line-height: var(--cdx-nav-lh);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--cdx-hover-t) var(--cdx-ease-out), color var(--cdx-hover-t) var(--cdx-ease-out), box-shadow var(--cdx-hover-t) var(--cdx-ease-out);
}

.cdx-nav__list > li:last-child > .cdx-nav__link { box-shadow: inset 0 -1px 0 var(--cdx-color-border); }

/* First tab (Home): wider padding and the header texture behind it — VERIFIED. */
.cdx-nav__list > li:first-child > .cdx-nav__link { --cdx-nav-px: var(--cdx-nav-item-px-first); isolation: isolate; }
.cdx-nav__list > li:first-child > .cdx-nav__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--cdx-header-texture);
	background-size: cover;
	background-position: center;
	opacity: var(--cdx-header-texture-opacity);
}

/* Hover and current page — VERIFIED variant "Property 1=2". */
.cdx-nav__link:hover,
.cdx-nav__link:focus-visible,
.cdx-nav__link[aria-current="page"],
.cdx-nav__list > .current-menu-item > .cdx-nav__link {
	background-color: var(--cdx-color-surface);
	box-shadow: inset -1px 0 0 var(--cdx-color-border), inset 0 -1px 0 var(--cdx-color-surface);
	color: var(--cdx-color-white);
}

.cdx-nav__list > li:last-child > .cdx-nav__link:hover,
.cdx-nav__list > li:last-child > .cdx-nav__link:focus-visible,
.cdx-nav__list > li:last-child > .cdx-nav__link[aria-current="page"],
.cdx-nav__list > li.current-menu-item:last-child > .cdx-nav__link { box-shadow: inset 0 -1px 0 var(--cdx-color-surface); }

.cdx-nav__link:focus-visible { outline-offset: -4px; }

/* Mobile menu toggle (tablet + mobile). VERIFIED position on mobile: 35×36 at x 317, y 22. */
.cdx-menu-toggle {
	position: absolute;
	top: 22px;
	right: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 36px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--cdx-color-text);
	cursor: pointer;
}

.cdx-menu-toggle__icon { display: inline-flex; }
.cdx-menu-toggle__icon--close { display: none; }
.cdx-menu-open .cdx-menu-toggle__icon--open { display: none; }
.cdx-menu-open .cdx-menu-toggle__icon--close { display: inline-flex; }

.cdx-nav-empty { margin: 0; font-family: var(--cdx-font-ui); font-size: 13px; }
.cdx-nav-empty a { color: var(--cdx-color-nav); }

/* BP: mobile/tablet header — VERIFIED mobile logo position (x ≈ 15, y ≈ 2). */
@media (max-width: 1023px) {
	.cdx-header__brand { top: 2px; left: 15px; }
}

/* BP: desktop (≥1024) — show desktop nav, hide toggle.
   ASSUMPTION 1024–1279: the Figma geometry (centre + 124px, 779px wide) would
   collide with the logo, so the group is right-aligned with tighter padding. */
@media (min-width: 1024px) {
	.cdx-menu-toggle,
	.cdx-mobile-menu { display: none !important; }

	.cdx-nav {
		display: block;
		position: absolute;
		bottom: 0;
		right: var(--cdx-gutter);
	}

	.cdx-nav__link { --cdx-nav-px: 28px; }
	.cdx-nav__list > li:first-child > .cdx-nav__link { --cdx-nav-px: 34px; }
}

/* BP: wide (≥1280) — VERIFIED Figma desktop geometry. */
@media (min-width: 1280px) {
	.cdx-nav {
		right: auto;
		left: calc(50% + var(--cdx-nav-shift));
		transform: translateX(-50%);
	}

	.cdx-nav__link { --cdx-nav-px: var(--cdx-nav-item-px); }
	.cdx-nav__list > li:first-child > .cdx-nav__link { --cdx-nav-px: var(--cdx-nav-item-px-first); }
}

/* 5. MOBILE MENU OVERLAY ----------------------------------------------------
   MEASURED in the Figma mobile prototype: panel starts below the 80px bar
   (header stays visible with the close icon), the page shows through a
   black 85.5% layer, items 55px apart at x 24, award badges below.       */
.cdx-mobile-menu {
	position: fixed;
	top: calc(var(--cdx-header-h) + var(--wp-admin--admin-bar--height, 0px));
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--cdx-mobile-menu-pad-top) var(--cdx-mobile-menu-pad-x) 40px;
	background: var(--cdx-mobile-menu-bg);
}

.cdx-mobile-menu[hidden] { display: none; }

/* iPhone: no focus ring on the panel (it only receives focus so the menu is
   announced) and no grey tap flash on the menu links and toggle. */
.cdx-mobile-menu:focus { outline: none; }
.cdx-mobile-menu a,
.cdx-menu-toggle { -webkit-tap-highlight-color: transparent; }

.cdx-mobile-menu__list { margin: 0; padding: 0; list-style: none; }
.cdx-mobile-menu__list > li { margin: 0; }

.cdx-mobile-menu__link {
	display: block;
	color: var(--cdx-color-text);
	font-family: var(--cdx-font-display);
	color: var(--cdx-mobile-menu-color);
	font-size: var(--cdx-mobile-menu-size);
	font-weight: 300;
	line-height: var(--cdx-mobile-menu-pitch);
	letter-spacing: var(--cdx-mobile-menu-ls);
	text-decoration: none;
}

/* MEASURED: Figma shows the current page in the same colour as the others. */

/* Award badges — MEASURED: 2021 badge 64.58px wide at x 20.62 / y 409.2,
   2019 badge 62.99px wide at x 102.99 / y 410.5 (frame px), 78% opacity.
   The two PNGs have different padding, so each has its own width. */
.cdx-mobile-menu__awards {
	display: flex;
	align-items: flex-start;
	margin: var(--cdx-mobile-menu-awards-top, 22.2px) 0 0 -3.38px;
	padding: 0;
	list-style: none;
}

/* Client request: award badges near the bottom of the menu panel (above
   its 40px bottom padding), away from the last menu item; the menu items
   don't move. On short screens they keep at least the measured 22.2px gap
   and the panel scrolls as before. */
.cdx-mobile-menu:not([hidden]) { display: flex; flex-direction: column; }
.cdx-mobile-menu__nav { flex: 1 0 auto; }
.cdx-mobile-menu__awards { flex: none; }

.cdx-mobile-menu__award { margin: 0; opacity: 0.78; }
.cdx-mobile-menu__award img { display: block; width: 100%; height: auto; }
.cdx-mobile-menu__award--1 { width: 64.58px; }
.cdx-mobile-menu__award--2 { width: 62.99px; margin: 1.3px 0 0 17.79px; }

.cdx-menu-open { overflow: hidden; }

/* 6. HEADER MODES ------------------------------------------------------------ */
.cdx-header-overlay .cdx-header {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	background: transparent;
	border-bottom-color: transparent;
}

.cdx-header-overlay .cdx-header__texture { display: none; }
.cdx-header-overlay { --cdx-header-offset: 0px; }

/* BP: overlay only below desktop. */
@media (max-width: 1023px) {
	.cdx-header-overlay-mobile .cdx-header {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		background: transparent;
		border-bottom-color: transparent;
	}

	.cdx-header-overlay-mobile .cdx-header__texture { display: none; }
	.cdx-header-overlay-mobile { --cdx-header-offset: 0px; }
}

/* While the mobile menu is open the bar becomes solid so it stays legible. */
.cdx-menu-open .cdx-header { background: var(--cdx-color-black); }

/* Sticky overlay header: transparent over the hero at the top of the page
   (unchanged); once the page scrolls it is fixed to the top and takes the
   normal solid header look so it stays legible over content. */
.cdx-header-overlay .cdx-header { position: fixed; top: var(--wp-admin--admin-bar--height, 0px); }
.cdx-header-overlay.cdx-scrolled .cdx-header {
	background: var(--cdx-color-black);
	border-bottom-color: var(--cdx-color-border);
	transition: background-color var(--cdx-hover-t) var(--cdx-ease-out), border-color var(--cdx-hover-t) var(--cdx-ease-out);
}
.cdx-header-overlay.cdx-scrolled .cdx-header__texture { display: block; }

@media (max-width: 1023px) {
	.cdx-header-overlay-mobile .cdx-header { position: fixed; top: var(--wp-admin--admin-bar--height, 0px); }
	.cdx-header-overlay-mobile.cdx-scrolled .cdx-header {
		background: var(--cdx-color-black);
		border-bottom-color: var(--cdx-color-border);
		transition: background-color var(--cdx-hover-t) var(--cdx-ease-out), border-color var(--cdx-hover-t) var(--cdx-ease-out);
	}
	.cdx-header-overlay-mobile.cdx-scrolled .cdx-header__texture { display: block; }
}

/* 7. FOOTER ------------------------------------------------------------------- */
.cdx-footer {
	padding: var(--cdx-footer-pad-top) var(--cdx-gutter) var(--cdx-footer-pad-bottom);
	color: var(--cdx-color-text-soft);
}

.cdx-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--cdx-footer-row-h);
	max-width: var(--cdx-footer-max);
	margin-inline: auto;
}

.cdx-footer__copyright {
	margin: 0;
	font-size: var(--cdx-caption-size);
	font-weight: 300;                     /* MEASURED: Light gives Figma's 395 × 22 text box */
	line-height: var(--cdx-footer-row-h); /* VERIFIED: 22px text box */
	letter-spacing: var(--cdx-caption-ls);
	text-transform: uppercase;
}

.cdx-social { display: flex; align-items: center; gap: var(--cdx-social-gap); margin: 0; padding: 0; list-style: none; }
.cdx-social__item { display: flex; margin: 0; }
.cdx-social__link { display: inline-flex; color: inherit; }
.cdx-social__icon { display: block; width: auto; height: var(--cdx-social-size); }

/* BP: mobile — MEASURED in the Figma mobile prototype: stacked and centred;
   DM Sans Light 12.67px, +0.2em; 24px icon, its top 22.4px below the
   copyright's cap top; 19.2px below the icon to the end of the page. */
@media (max-width: 767px) {
	.cdx-footer { padding: 41.4px 15px 20.2px; }      /* MEASURED; the 352px copyright is wider than the 25px page margins allow */
	.cdx-footer__inner { flex-direction: column; gap: var(--cdx-footer-m-gap, 7.6px); text-align: center; }
	.cdx-footer__copyright { font-size: 12.67px; line-height: 19px; letter-spacing: 2.534px; white-space: nowrap; }
	.cdx-social__icon { height: 24px; }
}

/* 8. PAGE SHELLS & PROSE -------------------------------------------------------
   .cdx-prose holds ALL content typography, so it never leaks into Elementor
   layouts. Sizes below other than h1/body are PROVISIONAL.               */
.cdx-page__header { padding-top: var(--cdx-page-pad-top); }

.cdx-page__title,
.cdx-archive__title,
.cdx-404__title {
	margin: 0 0 32px;
	color: var(--cdx-color-text);
	font-family: var(--cdx-font-display);
	font-size: var(--cdx-display-size);
	font-weight: var(--cdx-display-wt);
	line-height: var(--cdx-display-lh);
	letter-spacing: var(--cdx-display-ls);
}

.cdx-page__content { padding-bottom: 72px; }
.cdx-title-hidden .cdx-page__content { padding-top: 0; }

.cdx-prose {
	font-size: var(--cdx-value-size);
	font-weight: var(--cdx-value-wt);
	line-height: var(--cdx-value-lh);
}

.cdx-prose > * { margin-top: 0; margin-bottom: 1.2em; }
.cdx-prose h1, .cdx-prose h2, .cdx-prose h3, .cdx-prose h4 { color: var(--cdx-color-text); font-weight: 300; margin-top: 1.6em; margin-bottom: 0.6em; }
.cdx-prose h1 { font-size: var(--cdx-display-size); line-height: var(--cdx-display-lh); letter-spacing: var(--cdx-display-ls); }
.cdx-prose h2 { font-size: 40px; line-height: 1.2; }  /* PROVISIONAL */
.cdx-prose h3 { font-size: 28px; line-height: 1.25; } /* PROVISIONAL */
.cdx-prose h4 { font-size: 22px; line-height: 1.3; }  /* PROVISIONAL */
.cdx-prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cdx-prose img { height: auto; }
.cdx-prose ul, .cdx-prose ol { padding-left: 1.2em; }
.cdx-prose blockquote { margin-inline: 0; padding-left: 24px; border-left: var(--cdx-divider-w) solid var(--cdx-color-divider); }
.cdx-prose hr { border: 0; border-top: var(--cdx-divider-w) solid var(--cdx-color-divider); }
.cdx-prose .alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
.cdx-prose .alignwide { width: min(var(--cdx-content-max), 100vw - 2 * var(--cdx-gutter)); max-width: none; margin-left: 50%; transform: translateX(-50%); }

.cdx-label {
	color: var(--cdx-color-text-muted);
	font-size: var(--cdx-label-size);
	font-weight: var(--cdx-label-wt);
	line-height: var(--cdx-label-lh);
	letter-spacing: var(--cdx-label-ls);
	text-transform: uppercase;
}

.cdx-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 14px 24px;
	background: transparent;
	border: 1px solid var(--cdx-color-text-soft);
	border-radius: 0;
	color: var(--cdx-color-white);
	font-family: var(--cdx-font-display);
	font-size: var(--cdx-caption-size);
	line-height: var(--cdx-caption-lh);
	letter-spacing: var(--cdx-cta-ls);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--cdx-hover-t) var(--cdx-ease-out), color var(--cdx-hover-t) var(--cdx-ease-out);
}
.cdx-button:hover { background: var(--cdx-color-surface); }

.cdx-archive { padding-top: var(--cdx-page-pad-top); padding-bottom: 72px; }
.cdx-archive__description { color: var(--cdx-color-text-muted); margin-bottom: 40px; }
.cdx-entry-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 40px; }
.cdx-entry__media { display: block; margin-bottom: 16px; }
.cdx-entry__image { display: block; width: 100%; height: auto; }
.cdx-entry__title { margin: 0 0 8px; font-size: var(--cdx-value-size); font-weight: 300; line-height: var(--cdx-value-lh); }
.cdx-entry__title a { text-decoration: none; }
.cdx-entry__excerpt { margin: 0; color: var(--cdx-color-text-muted); }
.cdx-pagination { margin-top: 48px; font-family: var(--cdx-font-ui); }
.cdx-pagination .nav-links { display: flex; gap: 16px; flex-wrap: wrap; }
.cdx-empty { padding-block: 40px; }
.cdx-404 { padding-block: var(--cdx-page-pad-top) 96px; }
.cdx-single__media {
	/* Same width as the Figma photograph popup: 1234px at 1440 (85.694vw),
	   screen − 50px on mobile; height follows the photo's own proportions. */
	width: min(1234px, 85.694vw);
	max-width: none;
	margin: 0 auto 40px;
	padding: 0;
}
@media (max-width: 767px) { .cdx-single__media { width: calc(100vw - 50px); } }
.cdx-single__image { display: block; width: 100%; height: auto; }
.cdx-comments-wrap { padding-bottom: 72px; }

/* BP: mobile type scale — mobile page headings are not yet inspected (PROVISIONAL). */
@media (max-width: 767px) {
	.cdx-page__title,
	.cdx-archive__title,
	.cdx-404__title,
	.cdx-prose h1 { font-size: 36px; line-height: 44px; letter-spacing: 0.72px; }
	.cdx-page__header,
	.cdx-archive,
	.cdx-404 { padding-top: 38px; }
	.cdx-prose { font-size: 17px; line-height: 26px; }
}

/* 9. ELEMENTOR & FULL-WIDTH CONTENT -------------------------------------------
   Elementor pages are printed without theme wrappers (see page.php). These
   rules only make sure nothing from the theme adds space around them.     */
.cdx-elementor-content,
.cdx-full-width-content { width: 100%; }

.cdx-is-elementor .cdx-main > .cdx-elementor-content > .elementor { margin: 0; }

/* Elementor sets its own section colours; the dark body background stays the canvas. */

/* 10. HERO SLIDER ---------------------------------------------------------------
   VERIFIED: full-bleed, centred cover crop, centred zoom, no arrows/dots,
   no desktop overlay, #040404 @ 60% overlay on the mobile home screen.
   Desktop hero height: 821px under the 80px header in a 900px frame
   → 100vh minus the header. Mobile: full 844px under an overlay header.  */
.cdx-hero-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--cdx-color-black);
	isolation: isolate;
}

.cdx-hero-slider--viewport {
	height: calc(100vh - var(--cdx-header-offset) - var(--wp-admin--admin-bar--height, 0px));
	height: calc(100svh - var(--cdx-header-offset) - var(--wp-admin--admin-bar--height, 0px));
}

.cdx-hero-slider--auto { height: 100%; min-height: 320px; }

.cdx-hero-slider__track { position: absolute; inset: 0; }

.cdx-hero-slider__slide {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	opacity: 0;
}

.cdx-hero-slider__slide.is-active { z-index: 1; opacity: 1; }
.cdx-hero-slider__slide.is-entering { z-index: 2; }

.cdx-hero-slider__slide picture { display: block; width: 100%; height: 100%; }

.cdx-hero-slider__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--cdx-slide-pos, 50% 50%);
	transform-origin: 50% 50%;
	transform: scale(var(--cdx-hero-scale-start, 1)); /* first frame before JS runs */
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.cdx-hero-slider__img { transform: none; }
}

/* BP: mobile crop focus + verified mobile overlay. */
@media (max-width: 767px) {
	.cdx-hero-slider__img { object-position: var(--cdx-slide-pos-m, var(--cdx-slide-pos, 50% 50%)); }

	.cdx-hero-slider--overlay-mobile::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 3;
		background: var(--cdx-hero-overlay-mobile);
		pointer-events: none;
	}
}

/* Pause control: required for auto-playing content (WCAG 2.2.2). Invisible
   until focused with the keyboard, so the Figma design is unchanged. */
.cdx-hero-slider__pause {
	position: absolute;
	bottom: 24px;
	left: var(--cdx-gutter);
	z-index: 4;
	padding: 10px 16px;
	background: var(--cdx-color-black);
	border: 1px solid var(--cdx-color-border);
	color: var(--cdx-color-white);
	font-family: var(--cdx-font-display);
	font-size: var(--cdx-caption-size);
	letter-spacing: var(--cdx-caption-ls);
	text-transform: uppercase;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
}

.cdx-hero-slider__pause:focus-visible { opacity: 1; pointer-events: auto; }

.cdx-hero-slider-empty {
	padding: 40px var(--cdx-gutter);
	border: 1px dashed var(--cdx-color-border);
	font-family: var(--cdx-font-ui);
	font-size: 14px;
}

/* 11. UTILITIES, FORMS, ACCESSIBILITY, MOTION ------------------------------- */

/* Black & white treatment (non-destructive). */
.cdx-bw { filter: grayscale(1); }

/* General theme forms — scoped to .cdx-form; Contact Form 7 has its own cf7.css. */
.cdx-form input[type="text"],
.cdx-form input[type="email"],
.cdx-form input[type="url"],
.cdx-form input[type="search"],
.cdx-form textarea {
	width: 100%;
	padding: 12px 0;
	background: transparent;
	border: 0;
	border-bottom: var(--cdx-divider-w) solid var(--cdx-color-divider);
	border-radius: 0;
	color: var(--cdx-color-text);
}

.cdx-form input:focus,
.cdx-form textarea:focus { outline: none; border-bottom-color: var(--cdx-color-text); }

.cdx-search-form { display: flex; align-items: flex-end; gap: 16px; max-width: 520px; }

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

.cdx-skip-link:focus {
	clip: auto !important;
	clip-path: none;
	width: auto;
	height: auto;
	top: 12px;
	left: 12px;
	z-index: 1000;
	padding: 12px 20px;
	margin: 0;
	background: var(--cdx-color-white);
	color: var(--cdx-color-black);
	font-family: var(--cdx-font-ui);
	white-space: normal;
}

/* Page titles — client request: every page's title in the softer tone of
   the mobile Portfolio heading (#E8E4DF at 74%), desktop and mobile. Covers
   the theme's own titles and the main headings (h1, h2 and Elementor
   heading widgets) of Elementor-built pages, whose own colour settings it
   overrides. Not the home-page slider caption. Colour only — sizes,
   weights and spacing are untouched. */
:root { --cdx-color-title-soft: rgba(232, 228, 223, 0.74); }
.cdx-main :is(.cdx-page__title, .cdx-archive__title, .cdx-404__title, .cdx-pf-head__title),
.cdx-main :is(h1, h2, .elementor-widget-heading .elementor-heading-title):not(.cdx-hero-slider *) {
	color: var(--cdx-color-title-soft) !important;
}

/* Awards page — client request: its white body text a little softer
   (off-white #E8E4DF at 85%, still well readable); headings follow the
   title rule above. Body class from cdx_body_classes() (inc/setup.php). */
.cdx-page-awards .cdx-main :is(p, li, dt, dd, td, th, blockquote, figcaption, span, strong, em, b, i, a, h3, h4, h5, h6, .elementor-widget-text-editor) {
	color: rgba(232, 228, 223, 0.85) !important;
}

/* Page fade-in — every front-end page (client request; first built for the
   Portfolio pages, same values): everything under the header — headings,
   content, images, footer — fades in together, 0.6s ease-in-out. The header
   stays put. The hidden start state is in this render-blocking stylesheet,
   so content is at opacity 0 from the very first paint and is never shown,
   hidden and shown again. No fill after the fade, so nothing lingers (no
   lasting stacking context). Not in the Elementor editor. */
:root {
	--cdx-page-fade-t: 0.6s;
	--cdx-page-fade-ease: cubic-bezier(0.42, 0, 0.58, 1); /* ease-in-out */
}
@keyframes cdx-page-fade-in { from { opacity: 0; } }
body:not(.elementor-editor-active):not(.elementor-editor-preview) .cdx-main,
body:not(.elementor-editor-active):not(.elementor-editor-preview) .cdx-site > .cdx-footer {
	animation: cdx-page-fade-in var(--cdx-page-fade-t) var(--cdx-page-fade-ease) backwards;
}

/* Reduced motion: honour the visitor's OS setting site-wide, including
   Elementor entrance animations. The hero slider also stops its zoom and
   auto-advance in JavaScript. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.cdx-main,
	.cdx-site > .cdx-footer { animation: none !important; }
}