/* ==========================================================================
   WP Mojster — Global styles
   Reset, base typography, layout helpers, header/navigation and footer,
   ported from the approved header/footer cards (design-reference/homepage/).
   Page sections live in the page-scoped sheets (home.css, service.css).
   Breakpoints: 640 / 768 / 1024 only (tokens.css rule).
   ========================================================================== */

/* ---- Reset & base ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
	font-family: var(--font-family);
	color: var(--color-text);
	background: var(--color-paper);
	font-size: var(--text-base);
	line-height: var(--leading-body);
	-webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
	color: var(--color-ink);
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-heading);
}

ul[class], ol[class] { list-style: none; }

.container { max-width: var(--container-max); margin: 0 auto; padding-left: var(--space-6); padding-right: var(--space-6); }

/* Visually hidden (screen readers keep it) */
.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Body scroll lock while the mobile panel is open (nav.js toggles it) */
body.nav-open { overflow: hidden; }

/* ---- Skip link — visually hidden, first in tab order, appears on focus ---- */
.skip-link {
	position: absolute;
	top: 13px; left: 12px;
	z-index: 100;
	background: var(--color-paper);
	color: var(--color-primary-strong);
	font-size: var(--text-sm);
	font-weight: 600;
	padding: 9px 14px;
	border-radius: var(--radius-btn);
	border: 1.5px solid var(--color-primary);
	box-shadow: 0 2px 8px rgba(20, 37, 44, 0.15);
	text-decoration: none;
	transform: translateY(-200%);
}
.skip-link:focus {
	transform: none;
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}

/* ==========================================================================
   Header — sticky, paper, 64px mobile / 72px desktop, no shrink animation
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--color-paper);
	border-bottom: 1px solid var(--color-border);
}
.site-header .hdr {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px; /* minimum brand↔cluster gap; only binds at ~320px */
	height: 64px;
}

/* Brand — pure text wordmark, no logo image */
.brand { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.brand .mark {
	width: 30px; height: 30px;
	border-radius: 8px;
	background: var(--color-primary);
	color: #fff;
	font-size: 12px; font-weight: 700; letter-spacing: 0.01em;
	display: flex; align-items: center; justify-content: center;
}
.brand .word { font-size: 17px; font-weight: 700; letter-spacing: var(--tracking-heading); color: var(--color-ink); }
.brand:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 4px; }

/* Right cluster: phone (desktop only) + CTA + burger (mobile only) */
.site-header .right { display: flex; align-items: center; gap: 10px; }
.site-header .phone {
	display: none;
	font-size: 15px; font-weight: 600;
	color: var(--color-ink);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}
.site-header .phone:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 2px; }
.site-header .btn { min-height: 40px; padding: 8px 14px; font-size: 14px; }

/* Very narrow screens: icon-only brand (the link keeps its aria-label name)
   so the CTA stays on one line. Deliberate exception to the 640/1024
   breakpoint set, header-only. Boundary measured: the full-wordmark header
   needs ≥360 effective px, and media queries include the scrollbar, so
   374px is the safe cutoff (wordmark returns at 375). */
@media (max-width: 374px) {
	.brand .word { display: none; }
	.brand .mark { width: 36px; height: 36px; font-size: 14px; }
	.site-header .btn { white-space: nowrap; }
}

/* Burger — real button with accessible name, mobile only */
.burger {
	flex: none; /* never shrink below the 48px touch target */
	width: 48px; height: 48px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-btn);
	background: var(--color-paper);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
	cursor: pointer;
}
.burger i { display: block; width: 18px; height: 2px; background: var(--color-ink); border-radius: 1px; transition: transform var(--transition-fast), opacity var(--transition-fast); }
/* nth-of-type, not nth-child: the sr-only label span is the first child */
.burger[aria-expanded="true"] i:nth-of-type(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-of-type(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-of-type(3) { transform: translateY(-7px) rotate(-45deg); }
.burger:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* ---- Navigation: one markup, two shapes ----
   Mobile (<1024px): full-width panel below the header, plain vertical list,
   services expanded flat under a section label, contact bar at the bottom.
   Desktop (≥1024px): inline links + click-toggled Services dropdown. */

.site-nav {
	display: none;
	position: absolute;
	top: 100%; left: 0; right: 0;
	background: var(--color-paper);
	border-bottom: 1px solid var(--color-border);
	max-height: calc(100vh - 64px);
	overflow-y: auto;
}
.site-nav.is-open { display: block; }

.site-nav .menu > li > a,
.site-nav .sub-menu a {
	display: flex; align-items: center; gap: 10px;
	min-height: 48px;
	padding: 0 20px;
	font-size: var(--text-base); font-weight: 500;
	color: var(--color-text);
	text-decoration: none;
	border-bottom: 1px solid var(--color-surface);
}
.site-nav a:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }

/* Scanning hierarchy: standalone pages (Home, Contact) read heavier than
   group children, and each group (Services, Plugins, then Contact after
   the last group) gets breathing room above it. Desktop resets both. */
.site-nav .menu > li > a { font-weight: 600; }
.site-nav .menu > li.menu-item-has-children,
.site-nav .menu > li.menu-item-has-children + li { margin-top: var(--space-4); }

/* Services/Plugins parents render BOTH a <button aria-expanded> dropdown
   toggle (desktop) and a plain .group-label span (mobile); each breakpoint
   displays exactly one, so mobile never exposes a collapsed button next to
   its always-visible links. */
.dd-toggle { display: none; }
.group-label {
	display: flex; align-items: center;
	min-height: 40px;
	padding: 8px 20px 0;
	font-size: 13px; font-weight: 600;
	text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
	color: var(--color-text-muted);
}

/* Urgent chip on menu items (wp-admin CSS class "urgent") */
.menu-chip-urgent {
	font-size: 12px; font-weight: 500;
	color: var(--color-accent);
	background: var(--color-accent-tint);
	border-radius: var(--radius-chip);
	padding: 2px 9px;
}

/* Mobile contact bar at the panel bottom — phone + email only (the
   "Request help" CTA lives in the header, visible in both menu states) */
.site-nav .contactbar { padding: var(--space-4) 20px; background: var(--color-surface); }
.site-nav .contactbar p { font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; }
.site-nav .contactbar p a { color: var(--color-primary); font-weight: 500; text-decoration: none; }
.site-nav .contactbar p a:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 2px; }

@media (min-width: 1024px) {
	.site-header .hdr { height: 72px; gap: var(--space-4); }
	.brand .mark { width: 34px; height: 34px; font-size: 14px; }
	.brand .word { font-size: 19px; }
	.site-header .right { gap: 20px; }
	.site-header .phone { display: inline; }
	.site-header .btn { min-height: 44px; padding: 10px 20px; font-size: 15px; }
	.burger { display: none; }

	.site-nav {
		display: block;
		position: static;
		border-bottom: 0;
		max-height: none;
		overflow: visible;
		background: none;
	}
	.site-nav .menu { display: flex; align-items: center; gap: 28px; }
	.site-nav .menu > li { position: relative; }
	/* Outspecify the mobile group-gap selectors */
	.site-nav .menu > li.menu-item-has-children,
	.site-nav .menu > li.menu-item-has-children + li { margin-top: 0; }
	.site-nav .menu > li > a {
		min-height: 0;
		padding: 0;
		border-bottom: 0;
		font-size: 15px;
		font-weight: 500;
		display: inline-flex;
	}
	.site-nav .menu > li.current-menu-item > a,
	.site-nav .menu > li.current-menu-ancestor > a {
		color: var(--color-primary);
		box-shadow: 0 2px 0 var(--color-primary);
	}
	.site-nav a:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 2px; }

	/* Dropdown toggle is the "Services" nav link with a chevron; the mobile
	   group label stays hidden here */
	.group-label { display: none; }
	.dd-toggle {
		display: inline-flex; align-items: center; gap: 6px;
		border: 0; background: none; cursor: pointer;
		padding: 0;
		font-family: var(--font-family);
		font-size: 15px; font-weight: 500;
		color: var(--color-text);
	}
	.dd-toggle:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 2px; }
	.dd-toggle .chev {
		display: inline-block;
		width: 8px; height: 8px;
		border-right: 1.8px solid currentColor;
		border-bottom: 1.8px solid currentColor;
		transform: rotate(45deg) translateY(-2px);
	}
	.dd-toggle[aria-expanded="true"],
	li.current-menu-ancestor > .dd-toggle { color: var(--color-primary); }

	/* Dropdown panel */
	.site-nav .sub-menu {
		display: none;
		position: absolute;
		top: calc(100% + 22px); left: -14px;
		width: 340px;
		background: var(--color-paper);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-card);
		box-shadow: 0 8px 24px rgba(20, 37, 44, 0.12);
		padding: var(--space-2);
		z-index: 60;
	}
	li.dd-open > .sub-menu { display: block; }
	.site-nav .sub-menu a {
		display: flex; align-items: center; justify-content: space-between; gap: 12px;
		min-height: 0;
		padding: 11px 14px;
		border-bottom: 0;
		border-radius: var(--radius-btn);
		font-size: 15px; font-weight: 500;
		color: var(--color-text);
		transition: background-color var(--transition-fast), color var(--transition-fast);
	}
	.site-nav .sub-menu a:hover { background: var(--color-primary-tint); color: var(--color-primary-strong); }
	.site-nav .sub-menu a:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }

	.site-nav .contactbar { display: none; }
}

/* ==========================================================================
   Footer — flat ink band, wordmark watermark, 4+3 services, washed bottom bar
   ========================================================================== */
.site-footer {
	position: relative;
	overflow: hidden;
	background: var(--color-ink);
	color: var(--color-text-on-ink);
	border-top: 1px solid var(--color-border-on-ink);
}
/* Watermark lives inside .inner so it ends at the bottom bar's top rule instead
   of running behind it (the bar carries the © line and legal links). The right
   calc pushes it past the centered container so it still bleeds off the viewport
   edge; the bottom offset keeps Inter's descender overflow above the rule. */
.site-footer .wm {
	position: absolute;
	right: calc((100% - 100vw) / 2 - 8px); bottom: 10px;
	font-size: 96px; font-weight: 700;
	letter-spacing: -0.05em; line-height: 1;
	white-space: nowrap;
	color: rgba(230, 238, 241, 0.04);
	pointer-events: none;
	user-select: none;
}
/* The word lives in a pseudo-element, not a DOM text node: purely
   decorative ghost branding (deliberately ~1.1:1), so it must not exist
   as page text — this also keeps axe/Lighthouse color-contrast from
   auditing it (aria-hidden alone doesn't exempt visible text). */
.site-footer .wm::before { content: "wpmojster"; }
.site-footer .inner { position: relative; padding-top: var(--space-12); }
.site-footer .cols { display: grid; grid-template-columns: 1fr; gap: 36px; padding-bottom: 44px; }

/* Brand block (on-ink variant) + specialization chip */
.site-footer .brand { display: inline-flex; gap: var(--space-2); margin-bottom: 14px; }
.site-footer .brand .mark { width: 38px; height: 38px; border-radius: 9px; font-size: 15px; }
.site-footer .brand .word { font-size: 20px; color: #fff; }
.site-footer .brand:focus-visible { outline: var(--focus-ring-on-ink); outline-offset: var(--focus-offset); border-radius: 4px; }
.site-footer .tagline { font-size: 15px; color: var(--color-text-muted-on-ink); max-width: 30ch; }
.site-footer .chip {
	margin-top: 20px;
	font-size: 13px;
	border-color: var(--color-border-on-ink);
	background: rgba(255, 255, 255, 0.03);
	color: var(--color-text-on-ink);
}
.site-footer .chip::before { width: 7px; height: 7px; background: var(--color-link-on-ink); }

/* Column labels carry a mini level mark — small echo of the H2 signature */
.site-footer .col-h {
	font-size: var(--text-xs); font-weight: 600;
	text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
	color: var(--color-text-muted-on-ink);
	margin-bottom: 14px;
}
.site-footer .col-h::before {
	content: "";
	display: block;
	width: 20px; height: 2px;
	border-radius: 1px;
	background: var(--color-link-on-ink);
	margin-bottom: 10px;
}

.site-footer .svc2 { display: grid; grid-template-columns: 1fr; gap: 0; }
.site-footer .flist a {
	display: block;
	padding: 9px 0;
	font-size: 15px; font-weight: 500; line-height: 1.45;
	color: var(--color-text-muted-on-ink);
	text-decoration: none;
	transition: color var(--transition-fast);
}
.site-footer .flist a:hover { color: var(--color-text-on-ink); }
.site-footer .flist a:focus-visible { outline: var(--focus-ring-on-ink); outline-offset: var(--focus-offset); border-radius: 2px; }

/* Direct contact lines — the two conversion paths keep the on-ink link color */
.site-footer .flist li.direct a {
	color: var(--color-link-on-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}
.site-footer .flist li.direct a:hover { color: #fff; }
/* Phone stays un-underlined (matches the final-CTA tile): a formatted number is
   self-identifying, and the email keeps the underline as the primary click target */
.site-footer .flist li.direct a[href^="tel:"] { text-decoration: none; }

/* Bottom bar — faint wash; carries the © business identification */
.site-footer .bbar {
	position: relative;
	border-top: 1px solid var(--color-border-on-ink);
	background: rgba(255, 255, 255, 0.02);
}
.site-footer .binner {
	display: flex; flex-direction: column; align-items: flex-start;
	gap: var(--space-4);
	padding-top: 20px; padding-bottom: 20px;
}
.site-footer .copy { font-style: normal; font-size: var(--text-sm); color: var(--color-text-muted-on-ink); }
.site-footer .copy b { font-weight: 600; color: var(--color-text-on-ink); }
.site-footer .legal-ph {
	font-size: 13px; font-weight: 500;
	color: var(--color-text-muted-on-ink);
	border: 1.5px dashed var(--color-border-on-ink);
	border-radius: var(--radius-btn);
	padding: 6px 14px;
}
.site-footer .legal-ph b { font-weight: 600; color: var(--color-text-on-ink); }

@media (min-width: 640px) {
	.site-footer .svc2 { grid-template-columns: 1fr 1fr; gap: 0 24px; }
	.site-footer .flist a { display: inline-block; padding: 6px 0; }
}

@media (min-width: 1024px) {
	.site-footer .wm { right: calc((100% - 100vw) / 2 - 14px); bottom: 18px; font-size: 168px; }
	.site-footer .inner { padding-top: var(--space-16); }
	.site-footer .cols { grid-template-columns: 1.5fr 2.3fr 1fr; gap: 24px; padding-bottom: 56px; }
	.site-footer .binner { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
}

/* ============================================================
   Contact form — Fluent Forms mapped onto the approved form tokens
   (design-reference/tokens/forms.html). Sitewide because the form sits
   in every page's final CTA. The plugin's default skin is disabled
   (inc/contact-form.php); its base sheet stays for behavior only
   (honeypot, hidden states, error toggling) but prints after this one,
   so every rule here carries the .fluentform wrapper to out-rank the
   base sheet's own `.fluentform …` selectors. The submit button carries
   .btn.btn--primary via the form definition and needs no mapping.
   ============================================================ */

.contact-form .fluentform .ff-el-group { margin: 0 0 var(--space-4); }

/* Label: the .field-label token */
.contact-form .fluentform .ff-el-input--label {
	display: block;
	float: none;
	margin: 0 0 var(--space-2);
	padding: 0;
}
.contact-form .fluentform .ff-el-input--label label {
	display: block;
	font-size: var(--text-sm);
	font-weight: 500;
	line-height: 1.4;
	color: var(--color-ink);
	margin: 0;
}
/* The card shows no required asterisks — required-ness reports on submit. */
.contact-form .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after { content: none; }

/* Input: the .field-input token */
.contact-form .fluentform .ff-el-form-control {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	font-family: var(--font-family);
	font-size: var(--text-base);
	line-height: 1.5;
	color: var(--color-text);
	background: var(--color-paper);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-input);
	box-shadow: none;
}
.contact-form .fluentform .ff-el-form-control:focus {
	outline: var(--focus-ring);
	outline-offset: 1px;
	border-color: var(--color-primary);
}
.contact-form .fluentform textarea.ff-el-form-control { min-height: 110px; resize: vertical; }

/* Name/email row: the plugin's flex columns become the design's .frow grid
   (stacks below 640px like every other form row in the system). */
.contact-form .fluentform .ff-t-container { display: grid; gap: 0 var(--space-4); width: 100%; }
.contact-form .fluentform .ff-t-cell { width: auto; min-width: 0; padding: 0; }

/* Error state: red border on the field, ⚠ message under it (the icon is
   part of the pattern — the state never relies on color alone). */
.contact-form .fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--color-error); }
.contact-form .fluentform .error.text-danger {
	display: block;
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-error);
	margin-top: var(--space-2);
}
.contact-form .fluentform .error.text-danger::before { content: "⚠ "; }

/* Success confirmation: the tokens card's green-tint panel */
.contact-form .ff-message-success {
	font-size: 15px;
	color: #14532B;
	background: var(--color-success-tint);
	border: 0;
	box-shadow: none;
	border-radius: var(--radius-input);
	padding: 14px 16px;
	margin: var(--space-4) 0 0;
}
.contact-form .ff-message-success::before { content: "✓ "; font-weight: 700; }

/* Submit wrapper: neutralize plugin spacing; .btn.btn--primary does the rest */
.contact-form .fluentform .ff_submit_btn_wrapper { margin: 0; }
.contact-form .fluentform .ff-btn-submit { width: 100%; }

/* Plain email fallback (plugin or form missing) */
.contact-form--fallback .fallback-lead {
	font-size: var(--text-base);
	color: var(--color-text);
	margin-bottom: var(--space-4);
}
.contact-form--fallback .btn { width: 100%; }

@media (min-width: 640px) {
	.contact-form .fluentform .ff-t-container { grid-template-columns: 1fr 1fr; }
}