/*
Theme Name:   Divi Base Child
Theme URI:    https://techhelpmacc.co.uk
Description:  Reusable Divi 5 child theme for brochure sites. Rebrand per client by editing
              the custom properties in the BRAND block below. Everything else inherits.
Author:       Tech Help Macc
Author URI:   https://techhelpmacc.co.uk
Template:     Divi
Version:      1.9.0
Text Domain:  divi-base-child
*/

/* ==========================================================================
   1. BRAND  —  the only block you normally edit per client
   ========================================================================== */

:root {
	/* Colours. Set --accent and the two grounds; the rest usually follows.
	   Keep --ink readable on --bg, and --accent-ink readable on --accent. */
	--bg:            #ffffff;
	--surface:       #f6f5f3;   /* alternate light band, slightly off --bg */
	--surface-2:     #ece8e1;   /* a third step, for a band next to --surface */
	--accent:        #0f6b4f;
	--accent-ink:    #ffffff;   /* text that sits ON the accent */
	--accent-hover:  #0c5540;
	--accent-dim:    rgba(15, 107, 79, 0.32);  /* rules, glows, quiet fills */
	--line:          #e2ded8;   /* hairlines on light grounds */

	/* Text on light grounds. Three steps, not two: headings, body, and the
	   quiet meta text. Having a third tier is a large part of why a page
	   reads as composed rather than flat. */
	--ink:           #1b1a19;   /* headings. never pure #000 */
	--ink-soft:      #46423c;   /* body copy */
	--ink-quiet:     #6f6a61;   /* captions, meta, labels. still AA on --bg */

	/* Dark bands. Two grounds so dark sections can sit next to each other. */
	--dark-bg:       #17140f;
	--dark-bg-2:     #1f1b15;
	--line-dark:     rgba(255, 255, 255, 0.14);

	/* Text on dark is TRANSLUCENT WHITE, not a fixed hex. It then picks up
	   whatever it sits on, so the same token works on a dark band and over
	   a photograph without needing a second set of colours. */
	--dark-heading:  #ffffff;
	--dark-ink:      rgba(255, 255, 255, 0.92);
	--dark-quiet:    rgba(255, 255, 255, 0.72);

	/* Type. System stack by default: zero network requests, nothing to wait
	   for, no layout shift, and it renders natively on every device.

	   To use a webfont for a client whose brand needs one:
	     1. Add the Google Fonts <link> in functions.php (see dbc_brand_font)
	     2. Put the family FIRST in both stacks below, keeping the rest as fallback
	     3. Load two weights only. Every extra weight is another download.
	   Do not add a webfont unless the brand actually calls for it. */
	--font-heading:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-body:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--weight-heading: 700;
	--weight-body:    400;

	/* Type scale. Clamp gives fluid sizing without media queries. */
	--h1: clamp(2rem, 1.35rem + 2.6vw, 3.5rem);
	--h2: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
	--h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
	--body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--small: 0.875rem;

	/* Leading. Display sits tight, body stays comfortable. */
	--lh-display: 1.1;
	--lh-heading: 1.2;
	--lh-body:    1.65;

	/* Spacing scale */
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 1.75rem;
	--space-lg: 3rem;
	--space-xl: 5rem;

	/* Vertical band rhythm. Generous whitespace between sections does more
	   for perceived quality than any amount of decoration. */
	--band-pad:    90px;
	--band-pad-sm: 60px;
	--band-pad-xs: 40px;

	/* Shape. Near-sharp. Soft rounded corners everywhere is the fastest way
	   for a page to read as generic; 2px reads as deliberate. Circles (50%)
	   are the one exception, for avatars and icon chips. */
	--radius:      2px;
	--radius-lg:   3px;
	--measure:         68ch;  /* max line length for running text */
	--measure-display: 20ch;  /* tighter cap for h1/h2. display type wants short lines */

	/* Tracking. Small uppercase text needs it; body copy does not. */
	--track-label: 0.08em;
	--track-wide:  0.14em;

	/* Motion. Fast and quiet. Anything slower starts to feel sluggish. */
	--speed:       0.18s;
}

/* ==========================================================================
   2. TYPOGRAPHY
   Divi ships fairly loose defaults. These tighten headings and give body
   copy a sensible measure, which is most of what makes a page feel designed.

   Note on the `html` prefix: Divi's Customizer stylesheet
   (et-divi-customizer.min.css) loads AFTER the child theme and sets
   `body { font-size: 14px }`. Prefixing with `html` raises specificity just
   enough to win, without resorting to !important — which would block Divi 5
   Global Presets from overriding it in the builder.
   ========================================================================== */

html body,
html #et-boc .et-l p,
html .et_pb_text p,
html .et_pb_text li {
	font-family: var(--font-body);
	font-weight: var(--weight-body);
	font-size: var(--body);
	line-height: var(--lh-body);
	color: var(--ink-soft);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	color: var(--ink);
	text-wrap: balance; /* stops a lone word dangling on its own line */
}

h1 { font-size: var(--h1); line-height: var(--lh-display); letter-spacing: -0.015em; }
h2 { font-size: var(--h2); line-height: var(--lh-heading); letter-spacing: -0.01em; }
h3 { font-size: var(--h3); line-height: var(--lh-heading); }

/* Italic descenders (y g j p q) clip at tight leading. Give them room. */
h1 em, h1 i, h2 em, h2 i { line-height: 1.18; padding-bottom: 0.06em; }

/* Keep running text readable. Add .measure to a column or text module.
   Headings get a TIGHTER cap than body copy: display type set across a full
   1000px row reads as a banner, not a headline. Roughly 20 characters per
   line at display size is the sweet spot. */
.measure p,
.measure li { max-width: var(--measure); }

.measure h1, .measure h2 { max-width: var(--measure-display); }
.measure h3, .measure h4 { max-width: var(--measure); }

/* Small uppercase labels want tracking. Tight-set body does not. */
.label {
	font-size: var(--small);
	text-transform: uppercase;
	letter-spacing: var(--track-label);
	font-weight: 600;
	color: var(--ink-quiet);
}

/* ==========================================================================
   3. BUTTONS
   Style Divi MODULE buttons with Divi 5 Global Presets, not with CSS. Presets
   live in the database, so they clone with this site and apply automatically
   to every new module. Nothing here uses !important, so a preset always wins.

   These classes are for buttons that are NOT Divi modules: a call to action
   inside a text module, a link in a Theme Builder template, and so on. Add
   .btn plus one variant to any <a>.
   ========================================================================== */

/* These use !important, deliberately. Divi ships button colour rules at
   specificity (0,4,0) and higher, so out-specifying them means writing
   absurd selectors that break the next time Divi changes a class name.

   It is safe here because .btn is OPT-IN: nothing gets these styles unless
   you type the class into a module's CSS Class field, which is an explicit
   statement of intent. Divi MODULE buttons should normally be styled with a
   Global Preset instead and left without these classes — see the README. */

html .btn {
	display: inline-block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	line-height: 1.2;
	border-radius: var(--radius);
	padding: 0.95em 2em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--speed) ease, color var(--speed) ease, border-color var(--speed) ease;
}

/* Divi appends a chevron pseudo-element on hover. Off for these. */
html .btn::after,
html .btn::before { display: none; }

/* Primary — solid accent */
html .btn.btn-primary {
	background-color: var(--accent) !important;
	color: var(--accent-ink) !important;
	border: 0 !important;
}
html .btn.btn-primary:hover,
html .btn.btn-primary:focus {
	background-color: var(--accent-hover) !important;
	color: var(--accent-ink) !important;
}

/* Secondary — outlined. Padding is reduced by the border width so both
   variants end up the same height when sat side by side. */
html .btn.btn-secondary {
	background-color: transparent !important;
	color: var(--accent) !important;
	border: 2px solid var(--accent) !important;
	padding: calc(0.95em - 2px) calc(2em - 2px);
}
html .btn.btn-secondary:hover,
html .btn.btn-secondary:focus {
	background-color: var(--accent) !important;
	color: var(--accent-ink) !important;
}

/* On a dark band the outline flips to light so it stays visible */
html .band--dark .btn.btn-secondary,
html .band--dark-2 .btn.btn-secondary {
	color: var(--dark-heading) !important;
	border-color: var(--dark-heading) !important;
}
html .band--dark .btn.btn-secondary:hover,
html .band--dark-2 .btn.btn-secondary:hover {
	background-color: var(--dark-heading) !important;
	color: var(--dark-bg) !important;
}

/* ==========================================================================
   4. BANDS
   Brochure pages read best as alternating full-width bands. Add these as a
   CSS Class on the SECTION. Combine a ground with an optional size:
     band--dark band--sm
   ========================================================================== */

/* Sizes */
.band     { padding-top: var(--band-pad);    padding-bottom: var(--band-pad); }
.band--sm { padding-top: var(--band-pad-sm); padding-bottom: var(--band-pad-sm); }
.band--xs { padding-top: var(--band-pad-xs); padding-bottom: var(--band-pad-xs); }

/* Light grounds */
.band--surface   { background-color: var(--surface); }
.band--surface-2 { background-color: var(--surface-2); }

/* Dark grounds. Two of them, so two dark bands can sit next to each other
   without looking like one giant block. */
.band--dark   { background-color: var(--dark-bg); }
.band--dark-2 { background-color: var(--dark-bg-2); }

/* The `html` prefix here is not decoration. The base typography rules above
   are themselves prefixed with `html` in order to beat Divi's Customizer
   stylesheet, which means a bare `.band--dark p` would LOSE to them and dark
   bands would render dark text on a dark ground. These have to match. */
html .band--dark h1,   html .band--dark h2,   html .band--dark h3,   html .band--dark h4,
html .band--dark-2 h1, html .band--dark-2 h2, html .band--dark-2 h3, html .band--dark-2 h4 {
	color: var(--dark-heading);
}

html .band--dark p,          html .band--dark li,
html .band--dark .et_pb_text p,   html .band--dark .et_pb_text li,
html .band--dark-2 p,        html .band--dark-2 li,
html .band--dark-2 .et_pb_text p, html .band--dark-2 .et_pb_text li {
	color: var(--dark-ink);
}

html .band--dark .label,   html .band--dark figcaption,
html .band--dark-2 .label, html .band--dark-2 figcaption {
	color: var(--dark-quiet);
}

/* Links inside a dark band need to stay visible too */
html .band--dark a:not(.btn),
html .band--dark-2 a:not(.btn) { color: var(--dark-heading); }

/* Hairline dividers instead of boxed cards */
.rule-top { border-top: 1px solid var(--line); }
.band--dark .rule-top,
.band--dark-2 .rule-top { border-top-color: var(--line-dark); }

/* ==========================================================================
   5. MEDIA
   ========================================================================== */

.et_pb_image img,
.rounded img { border-radius: var(--radius-lg); }

/* Fixed-ratio media box, stops layout shift while images load */
.ratio-16-9 img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.ratio-1-1 img  { aspect-ratio: 1 / 1;  object-fit: cover; width: 100%; }

/* ==========================================================================
   6. FORMS  (covers Divi's own + WPForms)
   ========================================================================== */

.et_pb_contact_field input,
.et_pb_contact_field textarea,
.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select {
	font-family: var(--font-body) !important;
	font-size: 1rem !important;
	color: var(--ink) !important;
	background: var(--bg) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius) !important;
	padding: 0.8em 0.9em !important;
	width: 100%;
}

.wpforms-field-label { font-weight: 600; color: var(--ink); }

/* Placeholders must still pass contrast. Divi's default is too faint. */
::placeholder { color: var(--ink-quiet); opacity: 1; }

/* ==========================================================================
   7. ACCESSIBILITY + MOTION
   ========================================================================== */

/* Visible keyboard focus. Divi removes this in places; put it back. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.et_pb_button:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}

.skip-link {
	position: absolute; left: -9999px;
	background: var(--ink); color: #fff; padding: var(--space-sm);
	z-index: 100000;
}
.skip-link:focus { left: var(--space-sm); top: var(--space-sm); }

@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;
	}
}

/* ==========================================================================
   8. PRINT  —  contact pages get printed more often than you'd think
   ========================================================================== */

@media print {
	#main-header, #main-footer, .et_pb_button, video { display: none !important; }
	body { color: #000; font-size: 12pt; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; }
}