/*
Theme Name: Twenty Twenty-Five Child — Digital Upwelling
Theme URI: https://www.digitalupwelling.com
Template: twentytwentyfive
Author: Digital Upwelling
Author URI: https://www.digitalupwelling.com
Description: Child theme of Twenty Twenty-Five for Digital Upwelling. Inherits everything from the parent theme — only overrides brand surface (palette + IBM Plex Sans + button/link styles + a few utility classes used by patterns).
Version: 0.4.1
Requires at least: 6.7
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive-child
Tags: full-site-editing, custom-colors, custom-logo, block-patterns, blog, portfolio, news, business
*/

/* ----------------------------------------------------------------------
   Minimal child theme CSS. Brand tokens live in theme.json. This file
   only carries:
     1. Accessibility polish (focus rings, reduced motion)
     2. Brand selection colour
     3. A handful of utility classes used by inline pattern markup
        (.du-eyebrow, .du-lede, .du-meta) and one drop-cap rule for
        long-form Notes posts.
     4. Safety: ensure inline SVGs scale responsively.
   ---------------------------------------------------------------------- */

/* Smooth + accessible focus ring (parent uses 2px solid, no offset) */
:where(.wp-site-blocks *):focus-visible {
	outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Brand-tinted text selection */
::selection {
	background: var(--wp--preset--color--accent-light);
	color: var(--wp--preset--color--contrast);
}

/* Eyebrow label utility used in patterns + page bodies */
.du-eyebrow {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-primary);
	display: block;
	margin-bottom: 0.75rem;
}

/* Lede paragraph utility (large intro text) */
.du-lede {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
}

/* Small caption / metadata */
.du-meta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent-secondary);
	letter-spacing: 0.01em;
}

/* Image + inline SVG defaults — prevent CLS + horizontal overflow */
img,
.du-figure svg {
	max-width: 100%;
	height: auto;
	display: block;
}

/* The system-diagram <figure> breaks out of its container's horizontal
   inset to fill the full alignfull-section content area (1440px outer).
   The negative margins cancel the parent's `clamp(40px, 6vw, 88px)` inset
   so the SVG renders at the same outer width as a `.du-visual` component
   box, edge-to-edge with the visual rhythm of the heroes. */
.du-figure {
	margin-block: 0;
	margin-inline: calc(-1 * clamp(40px, 6vw, 88px));
	width: auto;
	max-width: none;
}

.du-figure svg {
	width: 100%;
	height: auto;
}

/* Drop cap on first paragraph after the H1 in single notes */
.single-note .wp-block-post-content > p:first-of-type::first-letter {
	font-size: 3.4em;
	font-weight: 600;
	line-height: 0.9;
	float: left;
	padding: 0.4rem 0.5rem 0 0;
	color: var(--wp--preset--color--contrast);
}

/* ----------------------------------------------------------------------
   Section content alignment.

   Seth's `.du-visual` components have an internal padding of
   `clamp(40px, 6vw, 88px)`, so their text starts ~88px inside the 1440px
   wide outer box at large viewports. Without matching inset on the
   ordinary alignwide sections built in Round 12, scrolling between a
   component and a non-component section produces an 88px horizontal jump.

   Apply the same content-box constraint to:
     1. alignwide groups that sit inside an alignfull wrapper (Round 12)
     2. nested alignfull blocks inside alignfull sections — these would
        otherwise break out to the viewport and visually misalign with
        the rest of the section's content (e.g. a `wp-block-columns
        alignfull` row of cards under a heading)

   Skip any alignwide/alignfull descendant that lives inside `.du-visual`
   — components handle their own padding.
   ---------------------------------------------------------------------- */
.wp-block-group.alignfull > .alignwide {
	padding-left: clamp(40px, 6vw, 88px);
	padding-right: clamp(40px, 6vw, 88px);
	box-sizing: border-box;
}

/* Nested alignfull descendants — bring back to the alignwide content box.
   Catches paragraphs, columns, buttons, images, galleries, nested groups,
   and anything else that uses `align: full` inside an alignfull section. */
.wp-block-group.alignfull .alignfull {
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(40px, 6vw, 88px);
	padding-right: clamp(40px, 6vw, 88px);
	box-sizing: border-box;
}

.du-visual .wp-block-group.alignfull > .wp-block-group.alignwide,
.du-visual .alignwide,
.du-visual .alignfull {
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}

/* ----------------------------------------------------------------------
   Services submenu in the header navigation.

   Default WP block-navigation submenus look generic (white card, harsh
   borders, no rhythm). Brand-tune them to match the rest of the site:
     - warm off-white surface bleeding from the header bar
     - hairline `border-strong` separator (not a heavy box-shadow)
     - generous reading padding so each service is scannable
     - mono-style description under each label (small, muted) for SEO
       depth without visual noise
     - petrol-teal accent on hover / focus / current page
   All 6 service links render in the initial HTML (no JS required) so
   crawlers index every service URL via the global header.
   ---------------------------------------------------------------------- */
.du-header .wp-block-navigation .wp-block-navigation-submenu {
	background: var(--wp--preset--color--base);
}

/* `!important` is needed: WP's Interactivity API for the navigation block
   rewrites inline width/min-width on the submenu container when it opens
   (we'd otherwise see 24rem in the closed state and the WP default 200px
   the moment the submenu becomes visible).

   No `margin-top` — a top gap creates a hover dead-zone the cursor must
   cross to reach the submenu, which triggers mouseleave and closes it.
   Visual breathing room comes from `padding-top` instead, which keeps
   the whole area hoverable. */
.du-header nav.wp-block-navigation ul.wp-block-navigation__submenu-container.du-services-submenu {
	min-width: 24rem !important;
	width: 24rem !important;
	margin-top: 0;
	padding: var(--wp--preset--spacing--s) 0 var(--wp--preset--spacing--xs);
	border: 1px solid var(--wp--preset--color--border-strong);
	border-top: 0;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 6px 16px rgba(17, 19, 24, 0.06);
}

.du-header .wp-block-navigation__submenu-container.du-services-submenu > li {
	padding: 0;
	width: 100%;
}

.du-header .wp-block-navigation__submenu-container.du-services-submenu > li > a {
	display: block;
	width: 100%;
	padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	border-left: 2px solid transparent;
	transition: background-color 0.12s ease, color 0.12s ease, border-left-color 0.12s ease, padding-left 0.12s ease;
}

.du-header .wp-block-navigation__submenu-container.du-services-submenu > li > a:hover,
.du-header .wp-block-navigation__submenu-container.du-services-submenu > li > a:focus-visible {
	border-left-color: var(--wp--preset--color--accent-primary);
	padding-left: calc(var(--wp--preset--spacing--m) + 4px);
}

/* Stack label + description vertically (WP default uses inline flex which
   puts them side-by-side and forces awkward wrapping). */
.du-header .du-services-submenu .wp-block-navigation-item__content {
	display: block !important;
}

.du-header .wp-block-navigation__submenu-container.du-services-submenu > li > a:hover,
.du-header .wp-block-navigation__submenu-container.du-services-submenu > li > a:focus,
.du-header .wp-block-navigation__submenu-container.du-services-submenu > li.current-menu-item > a {
	background: var(--wp--preset--color--accent-faint);
	color: var(--wp--preset--color--accent-primary);
}

.du-header .wp-block-navigation-item__label {
	font-weight: 500;
	letter-spacing: -0.005em;
}

.du-header .du-services-submenu .wp-block-navigation-item__description {
	display: block;
	margin-top: 4px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-tertiary);
	font-weight: 400;
	line-height: 1.4;
}

.du-header .du-services-submenu > li > a:hover .wp-block-navigation-item__description,
.du-header .du-services-submenu > li > a:focus .wp-block-navigation-item__description {
	color: var(--wp--preset--color--accent-secondary);
}

/* Submenu open-indicator chevron — match accent on hover so it animates
   naturally with the parent item. */
.du-header .wp-block-navigation__submenu-icon {
	margin-inline-start: 4px;
}

.du-header .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-icon svg,
.du-header .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-icon svg {
	stroke: var(--wp--preset--color--accent-primary);
}

/* Mobile / overlay menu: the desktop dropdown card styling (fixed 24rem
   width, border, shadow, accent indicator) doesn't belong in the
   full-screen overlay. Reset to a clean inline accordion so each service
   reads as a sub-item beneath "Services" with no visual chrome.

   The breakpoint here MUST match WP's hamburger trigger (<600px) — any
   higher and we strip the desktop dropdown's width while the desktop
   nav is still showing, leaving a misaligned 77px stub. */
@media (max-width: 599px) {
	.du-header
		nav.wp-block-navigation
		ul.wp-block-navigation__submenu-container.du-services-submenu {
		min-width: 0 !important;
		width: 100% !important;
		padding: 0 0 var(--wp--preset--spacing--s);
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: transparent !important;
	}

	.du-header
		.wp-block-navigation__submenu-container.du-services-submenu
		> li
		> a {
		padding: var(--wp--preset--spacing--xs) 0
			var(--wp--preset--spacing--xs) var(--wp--preset--spacing--m);
		border-left: 0;
		border-inline-start: 1px solid var(--wp--preset--color--border-primary);
	}

	.du-header
		.wp-block-navigation__submenu-container.du-services-submenu
		> li
		> a:hover,
	.du-header
		.wp-block-navigation__submenu-container.du-services-submenu
		> li
		> a:focus-visible {
		background: transparent;
		padding-left: var(--wp--preset--spacing--m);
		border-inline-start-color: var(--wp--preset--color--accent-primary);
		border-inline-start-width: 2px;
	}

	/* Smaller description in mobile overlay */
	.du-header .du-services-submenu .wp-block-navigation-item__description {
		font-size: 0.65rem;
	}
}

/* Header + footer: same content-box constraint as content sections so
   the logo, nav, footer columns line up at x=328 with the rest of the
   site. The .du-header / .du-footer outer elements remain alignfull (so
   the background bleeds full-width) but their direct content children
   are pulled back to the 1440px / 88px-padded box. */
.du-header > :where(*:not(style)),
.du-footer > :where(*:not(style)) {
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(40px, 6vw, 88px);
	padding-right: clamp(40px, 6vw, 88px);
	box-sizing: border-box;
}

/* ============================================================
   FAQ accordion — native core/details block, styled to match
   the site. Powers the "Frequently asked questions" sections
   across the service pages. No JavaScript: <details>/<summary>.
   ============================================================ */
.wp-block-details {
	border-top: 1px solid var(--wp--preset--color--border-primary);
}

.wp-block-details:last-of-type {
	border-bottom: 1px solid var(--wp--preset--color--border-primary);
}

.wp-block-details > summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding: var(--wp--preset--spacing--m) 3rem var(--wp--preset--spacing--m) 0;
	font-size: clamp(1.05rem, 0.97rem + 0.4vw, 1.3rem);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
	transition: color 0.15s ease;
}

.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details > summary:hover {
	color: var(--wp--preset--color--accent-primary);
}

.wp-block-details > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-primary);
	outline-offset: 3px;
}

/* + / − indicator, drawn from two bars; the vertical bar
   collapses when the item is open, turning the + into a −. */
.wp-block-details > summary::before,
.wp-block-details > summary::after {
	content: "";
	position: absolute;
	top: calc(var(--wp--preset--spacing--m) + 0.7em);
	background: var(--wp--preset--color--accent-primary);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.wp-block-details > summary::before {
	right: 0;
	width: 15px;
	height: 2px;
	margin-top: -1px;
}

.wp-block-details > summary::after {
	right: 6.5px;
	width: 2px;
	height: 15px;
	margin-top: -7.5px;
}

.wp-block-details[open] > summary::after {
	transform: scaleY(0);
	opacity: 0;
}

.wp-block-details > :not(summary) {
	margin-top: 0;
	color: var(--wp--preset--color--text-secondary);
}

.wp-block-details > :not(summary):last-child {
	margin-bottom: var(--wp--preset--spacing--m);
}

.wp-block-details[open] > :not(summary) {
	animation: du-faq-reveal 0.22s ease both;
}

@keyframes du-faq-reveal {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Expression of Interest form — Fluent Forms output restyled to
   the site's minimal aesthetic (mono uppercase labels, thin
   underline inputs, accent submit). Scoped to the Contact page
   form section so no other Fluent Forms form is affected.
   ============================================================ */
.du-eoi-form-wrap .ff-el-group {
	margin-bottom: var(--wp--preset--spacing--l);
}

.du-eoi-form-wrap .ff-el-input--label label {
	display: block;
	margin-bottom: 12px;
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--accent-primary);
}

.du-eoi-form-wrap .ff-el-is-required label:after {
	color: var(--wp--preset--color--accent-primary);
}

.du-eoi-form-wrap input.ff-el-form-control,
.du-eoi-form-wrap select.ff-el-form-control {
	width: 100%;
	height: 48px;
	padding: 8px 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--accent-secondary);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: var(--wp--preset--font-family--primary);
	font-size: 1rem;
	color: var(--wp--preset--color--text-primary);
}

.du-eoi-form-wrap textarea.ff-el-form-control {
	width: 100%;
	min-height: 160px;
	padding: 14px;
	border: 1px solid var(--wp--preset--color--accent-secondary);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: var(--wp--preset--font-family--primary);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--preset--color--text-primary);
}

.du-eoi-form-wrap .ff-el-form-control::placeholder {
	color: var(--wp--preset--color--text-disabled);
}

.du-eoi-form-wrap .ff-el-form-control:focus {
	outline: 2px solid var(--wp--preset--color--accent-primary);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--accent-primary);
}

.du-eoi-form-wrap .ff-el-help-message {
	margin-top: 8px;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--wp--preset--color--text-tertiary);
}

.du-eoi-form-wrap .ff-el-group .error,
.du-eoi-form-wrap .text-danger {
	margin-top: 6px;
	font-size: 0.82rem;
	color: #b3261e;
}

.du-eoi-form-wrap .ff-el-is-error input.ff-el-form-control,
.du-eoi-form-wrap .ff-el-is-error select.ff-el-form-control,
.du-eoi-form-wrap .ff-el-is-error textarea.ff-el-form-control {
	border-color: #b3261e;
}

.du-eoi-form-wrap .ff-btn-submit {
	margin-top: var(--wp--preset--spacing--s);
	padding: 16px 34px;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--accent-primary);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.du-eoi-form-wrap .ff-btn-submit:hover {
	background: var(--wp--preset--color--accent-hover);
}

.du-eoi-form-wrap .ff-btn-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-primary);
	outline-offset: 3px;
}

.du-eoi-form-wrap .ff-message-success {
	border: 1px solid var(--wp--preset--color--accent-primary);
	background: var(--wp--preset--color--accent-faint);
	padding: clamp(24px, 3vw, 40px);
}

.du-eoi-form-wrap .ff-message-success > :first-child {
	margin-top: 0;
}

.du-eoi-form-wrap .du-form-privacy a {
	color: var(--wp--preset--color--accent-primary);
}