/*
Theme Name:        Digiholic
Theme URI:         https://digiholic.io
Author:            Digiholic
Author URI:        https://digiholic.io
Description:       Custom hand-built theme for Digiholic, a B2B branding and marketing agency.
Version:           0.1.0
Requires at least: 6.0
Requires PHP:      7.4
Text Domain:       digiholic
*/

/* ==========================================================================
   1. Tokens
   The only place hex values are allowed. Everything else references these.
   ========================================================================== */

:root {
	/* Colour */
	--brand-blue: #2F56CD;
	--brand-blue-700: #24409E;
	--brand-blue-900: #182B6B;
	--accent-yellow: #FFC000;
	--ink: #000000;
	--ink-muted: #4A4A4A;
	--surface: #FFFFFF;
	--surface-100: #F9F9F9;
	--on-blue: #FFFFFF;
	--border-subtle: #E5E5E5;
	/* Form errors only. Not in the design system yet; 6.6:1 on white. */
	--error: #B42318;
	/* Chat bubble text in the support band. Not in the design system yet; 14:1 on white. */
	--ink-navy: #14225C;
	/* Empty chat history bubbles in the support band. A slightly darker brand blue. */
	--brand-blue-600: #2549B8;

	/* Type family. Montserrat is a fallback only and is not loaded. */
	--font-sans: "Poppins", "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Type weights. Only these five are loaded. Medium is for the support band's chat bubble. */
	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;
	--weight-extrabold: 800;

	/* Type scale. Fluid between roughly 360px and 1440px viewports. */
	--text-xs: 0.8125rem;                                    /* 13px */
	--text-sm: 0.875rem;                                     /* 14px */
	--text-base: clamp(1rem, 0.96rem + 0.19vw, 1.125rem);    /* 16 → 18px */
	--text-lg: clamp(1.125rem, 1.04rem + 0.37vw, 1.375rem);  /* 18 → 22px */
	--text-xl: clamp(1.25rem, 1.07rem + 0.75vw, 1.75rem);    /* 20 → 28px */
	--text-2xl: clamp(1.5rem, 1.24rem + 1.13vw, 2.25rem);    /* 24 → 36px */
	--text-3xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);     /* 28 → 44px */
	--text-4xl: clamp(2rem, 1.47rem + 2.25vw, 3.5rem);       /* 32 → 56px. Long caps headlines must fit 375px. */

	/* Line height */
	--leading-tight: 1.05;
	--leading-snug: 1.2;
	--leading-body: 1.6;

	/* Spacing. 4px base. Use these steps only; do not invent in-between values. */
	--space-1: 0.25rem;  /* 4px */
	--space-2: 0.5rem;   /* 8px */
	--space-3: 0.75rem;  /* 12px */
	--space-4: 1rem;     /* 16px */
	--space-5: 1.5rem;   /* 24px */
	--space-6: 2rem;     /* 32px */
	--space-7: 3rem;     /* 48px */
	--space-8: 4rem;     /* 64px */
	--space-9: 6rem;     /* 96px */
	--space-10: 8rem;    /* 128px */

	/* Fluid layout spacing, 375px → 1440px viewports. */
	--space-section: clamp(4rem, 2.59rem + 6.01vw, 8rem);   /* 64 → 128px, vertical padding per section */
	--gutter: clamp(1.5rem, 0.97rem + 2.25vw, 3rem);        /* 24 → 48px, page side padding */

	/* Layout widths */
	--container-max: 80rem;  /* 1280px */
	--measure: 40rem;        /* comfortable paragraph width */

	/* Radius */
	--radius-sm: 0.25rem;
	--radius-md: 0.5rem;

	/* Logo. Clear space around the lockup equals the D bubble height, which is
	   close to the full lockup height, so padding uses the same value. */
	--logo-height: 1.5rem;
	--header-height: calc(var(--logo-height) * 3);

	/* Focus ring. Dark sections override --focus-color. */
	--focus-width: 3px;
	--focus-color: var(--brand-blue);
	--focus-offset: 3px;
}

@media (min-width: 64em) {
	:root {
		--logo-height: 2.25rem;
	}
}

/* ==========================================================================
   2. Reset
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

html {
	color-scheme: light;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* The brand has no italics and no faux weights. Stop the browser faking them. */
	font-synthesis: none;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	min-height: 100vh;
	min-height: 100dvh;
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: var(--weight-regular);
	line-height: var(--leading-body);
	color: var(--ink);
	background-color: var(--surface);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

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

button {
	cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

ul[role="list"],
ol[role="list"] {
	list-style: none;
	padding: 0;
}

/* No italics in this brand. Emphasis is carried by weight instead. */
em,
i,
cite,
dfn,
var,
address {
	font-style: normal;
}

em,
i {
	font-weight: var(--weight-semibold);
}

strong,
b {
	font-weight: var(--weight-bold);
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: var(--weight-extrabold);
	line-height: var(--leading-snug);
	text-align: left;
	text-wrap: balance;
}

/* Display headlines: extrabold, all caps. */
h1,
h2,
h3 {
	text-transform: uppercase;
}

h1 {
	font-size: var(--text-4xl);
	line-height: var(--leading-tight);
	letter-spacing: -0.01em;
}

h2 {
	font-size: var(--text-3xl);
	line-height: var(--leading-tight);
}

h3 {
	font-size: var(--text-2xl);
}

/* Smaller headings stay in sentence case so they read as labels, not shouts. */
h4 {
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
}

h5,
h6 {
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
}

p {
	text-wrap: pretty;
}

small {
	font-size: var(--text-sm);
	color: var(--ink-muted);
}

a {
	color: var(--brand-blue);
	text-underline-offset: 0.2em;
}

a:hover {
	color: var(--brand-blue-700);
}

hr {
	border: 0;
	border-top: 1px solid var(--border-subtle);
}

::selection {
	background-color: var(--brand-blue);
	color: var(--on-blue);
}

/* Keeps a phrase together on one line. */
.nowrap {
	white-space: nowrap;
}

/* ==========================================================================
   4. Accessibility
   ========================================================================== */

:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

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

.skip-link {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 1000;
	padding: 0.75rem 1rem;
	font-weight: var(--weight-semibold);
	color: var(--on-blue);
	background-color: var(--brand-blue);
	transform: translateY(-200%);
}

.skip-link:hover {
	color: var(--on-blue);
}

.skip-link:focus {
	transform: none;
}