/*
Theme Name: Randolph
Theme URI: https://randolphcommunications.ca
Author: Birch Marketing Engineering
Author URI: https://birchagency.ca
Description: WordPress FSE block theme for Randolph Communications. Built on the Birch engine playbook.
Version: 0.1.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.1
License: Proprietary
Text Domain: randolph
*/

/*
 * randolph — style.css
 *
 * Theme header (above) registers the theme with WordPress.
 * Base structural styles below. Section-specific and band CSS lives in
 * assets/css/patterns.css (rc- prefix). Rich-text prose styles in
 * assets/css/prose.css (.rc-prose).
 *
 * Design token rule: NEVER use a raw hex or px where a CSS custom property exists.
 * Color  — var(--wp--preset--color--{slug})
 * Font   — var(--wp--preset--font-family--{slug})
 * Size   — var(--wp--preset--font-size--{slug})
 * Custom — var(--wp--custom--radius--{slug})
 *          var(--wp--custom--elevation--{slug})
 *          var(--wp--custom--focus-ring)
 *
 * Config version: 0.1.0
 */

/* ==========================================================================
   BASE RESET
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--ibm-plex-sans, 'IBM Plex Sans', system-ui, sans-serif);
	font-size: var(--wp--preset--font-size--base, clamp(16px, 1.1vw, 18px));
	line-height: 1.6;
	color: var(--wp--preset--color--ink, #10263A);
	background-color: var(--wp--preset--color--paper, #FFFFFF);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   SKIP LINK (a11y)
   ========================================================================== */

.skip-link {
	position: absolute;
	top: -100px;
	left: 24px;
	z-index: 9999;
	padding: 10px 16px;
	background-color: var(--wp--preset--color--primary, #0C7299);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--archivo, 'Archivo', system-ui, sans-serif);
	font-size: var(--wp--preset--font-size--sm, 13.5px);
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--wp--custom--radius--md, 10px);
	transition: top 0.15s ease;
}

.skip-link:focus {
	top: 10px;
	outline: 3px solid var(--wp--preset--color--accent, #0C7299);
	outline-offset: 2px;
}

/* ==========================================================================
   IMAGES
   ========================================================================== */

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ==========================================================================
   FOCUS RING (global)
   ========================================================================== */

:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent, #0C7299);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ==========================================================================
   BUTTONS (base)
   Pattern-level button variants live in patterns.css.
   ========================================================================== */

.rc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 26px;
	font-family: var(--wp--preset--font-family--archivo, 'Archivo', system-ui, sans-serif);
	font-size: var(--wp--preset--font-size--base, clamp(16px, 1.1vw, 18px));
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid transparent;
	border-radius: var(--wp--custom--radius--md, 10px);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	min-height: 44px; /* touch target */
}

.rc-btn--primary {
	background-color: var(--wp--preset--color--primary, #0C7299);
	/* Force white label — WP may inject has-{color}-color classes from block
	   attributes that would otherwise win via equal specificity. !important
	   guards against that cascade without touching markup. */
	color: #ffffff !important;
	border-color: var(--wp--preset--color--primary, #0C7299);
}

.rc-btn--primary:hover {
	background-color: var(--wp--preset--color--primary-light, #1189B5);
	border-color: var(--wp--preset--color--primary-light, #1189B5);
	color: #ffffff !important;
}

.rc-btn--primary:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent, #0C7299);
	outline-offset: 3px;
}

.rc-btn--secondary {
	background-color: transparent;
	color: var(--wp--preset--color--primary, #0C7299);
	border-color: var(--wp--preset--color--primary, #0C7299);
}

.rc-btn--secondary:hover {
	background-color: var(--wp--preset--color--primary-soft, #DCEAF2);
	color: var(--wp--preset--color--primary, #0C7299);
}

.rc-btn--white {
	background-color: #ffffff;
	color: var(--wp--preset--color--primary, #0C7299);
	border-color: #ffffff;
}

.rc-btn--white:hover {
	background-color: var(--wp--preset--color--cloud, #EEF3F6);
	color: var(--wp--preset--color--primary, #0C7299);
}

@media (prefers-reduced-motion: reduce) {
	.rc-btn {
		transition: none;
	}
}

/* ==========================================================================
   FIELD (form inputs — shared base)
   Full styles in patterns.css .rc-field-* block.
   ========================================================================== */

.rc-field__input,
.rc-field__textarea {
	width: 100%;
	padding: 10px 14px;
	font-family: var(--wp--preset--font-family--ibm-plex-sans, 'IBM Plex Sans', system-ui, sans-serif);
	font-size: var(--wp--preset--font-size--base, clamp(16px, 1.1vw, 18px));
	color: var(--wp--preset--color--ink, #10263A);
	background-color: var(--wp--preset--color--paper, #FFFFFF);
	border: 1.5px solid var(--wp--preset--color--hairline, #E8DFD9);
	border-radius: var(--wp--custom--radius--sm, 6px);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	box-sizing: border-box;
}

.rc-field__input:focus,
.rc-field__textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent, #0C7299);
	box-shadow: var(--wp--custom--focus-ring, 0 0 0 3px rgba(166, 94, 79, 0.25));
}

.rc-field__input:focus-visible,
.rc-field__textarea:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--accent, #0C7299);
	box-shadow: var(--wp--custom--focus-ring, 0 0 0 3px rgba(166, 94, 79, 0.25));
}

.rc-field__textarea {
	resize: vertical;
	min-height: 120px;
}

@media (prefers-reduced-motion: reduce) {
	.rc-field__input,
	.rc-field__textarea {
		transition: none;
	}
}

/* ==========================================================================
   WORDPRESS CORE OVERRIDES
   ========================================================================== */

/* Prevent WP admin bar from overlapping sticky header */
.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

/* Core template-part header wrapper: display:contents so sticky header
   sticks against .wp-site-blocks, not the template-part box. */
header.wp-block-template-part {
	display: contents;
}

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {
	.site-header,
	.site-footer,
	.skip-link,
	.rc-btn {
		display: none;
	}

	body {
		font-size: 12pt;
		color: #000;
	}
}