/*
Theme Name: Data Center Strategies
Theme URI: https://datacenterstrategies.com/
Author: Data Center Strategies
Author URI: https://datacenterstrategies.com/
Description: Child theme of Twenty Twenty-Five for Data Center Strategies. Brand tokens live in theme.json; this file carries only the styles theme.json cannot express (guide callout boxes, link underlines, code and table polish).
Template: twentytwentyfive
Version: 1.0.1
License: GNU General Public License v2 or later
Text Domain: dcs-twentytwentyfive
*/

/* Visible keyboard focus (WCAG 2.4.7, brand kit 2.6): 2px copper outline,
   offset 2px. Copper-700 is the text-safe copper on light surfaces;
   copper-300 is the light copper for dark surfaces (footer, nav overlay). */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--copper-700);
	outline-offset: 2px;
}
.has-navy-700-background-color :focus-visible,
.has-navy-900-background-color :focus-visible,
.wp-block-navigation__responsive-container :focus-visible,
.wp-block-navigation__responsive-container-open :focus-visible {
	outline-color: var(--wp--preset--color--copper-300);
}

/* Guide callout boxes (guide-summary-box / guide-takeaway-box in the imported content). */
.guide-summary-box {
	background: var(--wp--preset--color--mist-50);
	border-left: 3px solid var(--wp--preset--color--steel-600);
	padding: 1.25rem 1.5rem;
	margin: 1.75rem 0;
}
.guide-takeaway-box {
	background: var(--wp--preset--color--offwhite);
	border-left: 3px solid var(--wp--preset--color--copper-500);
	padding: 1.25rem 1.5rem;
	margin: 1.75rem 0;
}

/* Article takeaway boxes (takeaway-box in the imported articles). Same
   treatment as the guide takeaway box: off-white background, 3 px copper-500
   left border, copper-700 label. The .wp-block-group.takeaway-box selector
   beats the has-base-background-color class the editor adds from the
   backgroundColor: base attribute. */
.wp-block-group.takeaway-box {
	background: var(--wp--preset--color--offwhite);
	border-left: 3px solid var(--wp--preset--color--copper-500);
	padding: 1.25rem 1.5rem;
	margin: 1.75rem 0;
}
.guide-summary-box p,
.guide-takeaway-box p,
.wp-block-group.takeaway-box p {
	margin: 0 0 0.5rem 0;
}
.guide-summary-box p:last-child,
.guide-takeaway-box p:last-child,
.wp-block-group.takeaway-box p:last-child {
	margin-bottom: 0;
}

/* Callout labels: the bold first line of each box ("Summary: the short
   version." / "Takeaway.") renders as a small-caps eyebrow label, so the
   two box types differ by label text and label colour, not by border
   colour alone. Label colours are text-safe on their own backgrounds:
   steel-600 on mist-50 is 5.98:1; copper-700 on off-white is 4.73:1.
   (The earlier comment claimed copper-700 was 5.03:1 on mist-50; 5.03:1
   is the copper-700 figure on white, not on mist-50, where it is 4.27:1
   and fails AA. The takeaway box now uses the off-white background.) */
.guide-summary-box > p:first-child strong,
.guide-takeaway-box > p:first-child strong,
.wp-block-group.takeaway-box > p:first-child strong {
	display: block;
	font-size: var(--wp--preset--font-size--caption);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}
.guide-summary-box > p:first-child strong {
	color: var(--wp--preset--color--steel-600);
}
.guide-takeaway-box > p:first-child strong,
.wp-block-group.takeaway-box > p:first-child strong {
	color: var(--wp--preset--color--copper-700);
}
/* Article takeaway boxes label with an H3 ("Takeaway"), not a bold first
   paragraph line as in the guide boxes. Same label treatment. */
.wp-block-group.takeaway-box > h3 {
	color: var(--wp--preset--color--copper-700);
	font-size: var(--wp--preset--font-size--caption);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

/* Further callout types (brand kit 7.8). Classes ready for future use;
   no content uses them yet. Caution: amber background, warning border.
   Do not: error background, error border. Operator note: paper
   background, 3 px navy left border, 1 px line border. */
.callout-caution {
	background: var(--wp--preset--color--warning-bg);
	border-left: 3px solid var(--wp--preset--color--warning-solid);
	padding: 1.25rem 1.5rem;
	margin: 1.75rem 0;
}
.callout-do-not {
	background: var(--wp--preset--color--error-bg);
	border-left: 3px solid var(--wp--preset--color--error-solid);
	padding: 1.25rem 1.5rem;
	margin: 1.75rem 0;
}
.callout-operator-note {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line-300);
	border-left: 3px solid var(--wp--preset--color--navy-700);
	padding: 1.25rem 1.5rem;
	margin: 1.75rem 0;
}
.callout-caution > p:first-child strong {
	color: var(--wp--preset--color--warning);
}
.callout-do-not > p:first-child strong {
	color: var(--wp--preset--color--error);
}
.callout-operator-note > p:first-child strong {
	color: var(--wp--preset--color--navy-700);
}

/* Eyebrow / kicker utility (theme.json eyebrow size, 13 px). Class only;
   no eyebrow content is added by the theme. */
.eyebrow {
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
}

/* Links are steel blue and underlined (runbook 3.27). */
a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Footer links: mist-100 on the navy-900 footer ground. The global steel
   link colour (2.08:1 on navy) fails WCAG AA; mist-100 passes. */
.has-navy-900-background-color a {
	color: var(--wp--preset--color--mist-100);
}

/* Active page in the primary navigation: navy text, 3 px copper underline. */
.current-menu-item > a,
.wp-block-navigation-item.current-menu-item > a {
	color: var(--wp--preset--color--navy-700);
	border-bottom: 3px solid var(--wp--preset--color--copper-500);
}
/* Active page in the mobile nav overlay (navy-700 ground): the desktop
   navy-700 text is unreadable on navy, so the current item uses mist-100
   while keeping the 3 px copper underline. */
.wp-block-navigation__responsive-container .current-menu-item > a,
.wp-block-navigation__responsive-container .wp-block-navigation-item.current-menu-item > a {
	color: var(--wp--preset--color--mist-100);
	border-bottom: 3px solid var(--wp--preset--color--copper-500);
}
.wp-block-navigation a,
.wp-block-site-title a {
	text-decoration: none;
}
.wp-block-navigation a:hover,
.wp-block-site-title a:hover {
	text-decoration: underline;
}

/* Tables: readable headers, zebra rows, horizontal scroll at 320px.
   Cell borders are the line-300 token (#CBD5E1), a deliberate hairline:
   1.48:1 against white, so the border is a divider only and never carries
   meaning. The mist-100 border it replaces was lighter still and was not
   a brand line token. */
.wp-block-table {
	overflow-x: auto;
}
.wp-block-table table {
	border-collapse: collapse;
}
.wp-block-table th {
	background: var(--wp--preset--color--mist-50);
	color: var(--wp--preset--color--navy-700);
	text-align: left;
}
.wp-block-table tbody tr:nth-child(even) {
	background: var(--wp--preset--color--offwhite);
}
.wp-block-table td,
.wp-block-table th {
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--wp--preset--color--line-300);
}

/* Pull-quote attribution: 13px uppercase copper, per brand kit 3.3. */
.wp-block-quote cite,
.wp-block-quote figcaption {
	font-size: var(--wp--preset--font-size--caption);
	font-style: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--copper-700);
}

/* Code and data labels use the mono face. */
code, kbd, pre {
	font-family: var(--wp--preset--font-family--mono);
}

/* Nav and footer link target sizes. Append to dcs-child-theme/style.css.
   Target: 44 by 44 px minimum (Apple HIG; designer skill mobile rules). WCAG 2.2 AA
   criterion 2.5.8 sets a 24 by 24 px floor; 24px is the compliance floor, not the
   design target, so this file builds to 44px and the 24px floor is noted here for
   the audit record. Padding counts toward target size: a 14px icon in a link with
   enough padding passes, a bare icon does not. A target fails when another target
   is under 8px away, so the footer list keeps its line spacing.
   Note: 44px min-height on header nav links grows the header slightly. Verify at
   320px width on staging that the header does not wrap badly. */
.wp-block-navigation a,
.wp-block-navigation__responsive-container a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}
.wp-block-navigation__responsive-container .wp-block-navigation-item a {
	padding-top: 10px;
	padding-bottom: 10px;
}
.site-footer a,
.wp-block-group.has-navy-900-background-color a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}
.wp-block-group.has-navy-900-background-color .wp-block-list li {
	margin-bottom: 2px;
}

/* prefers-reduced-motion handling. Append to dcs-child-theme/style.css.
   Rule: under reduce, non-essential motion stops. Animations are removed outright.
   Transitions are limited to opacity, colour, and background-colour state changes at
   0.01ms (effectively instant), so nothing slides, scales, or parallaxes, while
   opacity and colour state changes still work. Scroll behaviour returns to auto.
   The site currently ships no autoplay video, carousel, parallax, or scroll-linked
   animation; this block is the gate for any motion added later. Test in DevTools by
   emulating prefers-reduced-motion: reduce. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation: none !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-property: opacity, color, background-color, border-color !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}
}

/* Mobile header fix, 2026-11-08 (Task E browser verification).
   Root cause: the header template part laid the 220px logo, nav, search
   and CTA out in one flex row with flex-wrap: nowrap, so below ~700px
   the row's min-content width exceeded the viewport: the page gained a
   horizontal scrollbar, the CTA was flex-shrunk to a one-letter-per-line
   strip, and the logo was pushed out of the visible area. Fix: the row
   now wraps (parts/header.html) and, at <=700px, search and CTA each
   take their own full-width row below the logo + menu row. Works down
   to 320px: logo 180 + menu 44 + gaps fits in 320 - 32 padding. */
@media (max-width: 700px) {
	header .wp-block-group.alignwide.is-layout-flex {
		flex-wrap: wrap;
		row-gap: var(--wp--preset--spacing--20);
	}
	header .wp-block-site-logo {
		flex: 0 0 auto;
		max-width: 180px;
	}
	header .wp-block-site-logo img {
		width: 180px;
		max-width: 100%;
		height: auto;
	}
	header .wp-block-group.is-layout-flex > .wp-block-group {
		flex: 0 0 auto;
	}
	header .wp-block-search {
		flex: 1 1 100%;
		order: 3;
		min-width: 0;
	}
	header .wp-block-search__inside-wrapper {
		width: 100%;
	}
	header .wp-block-search__input {
		min-width: 0;
		flex: 1 1 auto;
	}
	header .wp-block-buttons {
		flex: 1 1 100%;
		order: 4;
	}
	header .wp-block-button {
		flex: 1 1 auto;
	}
	header .wp-block-button__link {
		width: 100%;
		text-align: center;
		white-space: normal;
		overflow-wrap: break-word;
	}
}

/* Button links may wrap their text instead of overflowing a narrow
   column (applies everywhere, not only in the header). */
.wp-block-button__link {
	overflow-wrap: break-word;
}

/* Author portrait: the 400x400 featured image stretched to the 680px
   content column (680x680), pushing the H1 and intro below the fold.
   Cap it at 280px on the Author page (page-id-1006) only. */
.page-id-1006 .wp-block-post-featured-image {
	max-width: 280px;
}
.page-id-1006 .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
}

/* Footer mailto links: break only at the <wbr> points in the footer
   template part (after @, before .com), never mid-word. */
footer a[href^="mailto:"] {
	overflow-wrap: break-word;
}