/*
Theme Name: Edward L. Scott PLLC
Theme URI: https://visualharmonydesign.com/
Description: Child theme of VH Base for Edward L. Scott, PLLC (Ocala, FL attorney). Brand styling, copy, and behavior layered on the VH Base parent.
Author: Visual Harmony
Author URI: https://visualharmonydesign.com/
Template: vh-base
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: edward-scott-attorney-pllc
License: All Rights Reserved
*/

/* ==========================================================================
   Brand tokens — Edward L. Scott PLLC (navy + gold)
   Overrides the VH Base palette. Display font (Cormorant Garamond) is set
   via Appearance → VH Base Settings (display_font option), not here.
   ========================================================================== */
:root {
	/* Primary brand: deep navy, eyedropped from the logo wordmark. */
	--accent: #001139;
	/* Light accent used on DARK bands (CTA, footer, process eyebrows/em).
	   Must stay light for contrast on navy — a light gold, on-brand. */
	--accent-soft: #d9b878;

	/* Gold accent (was parent's --warm) */
	--warm: #c0a14e;

	/* Parent hardcodes these derivatives — keep them in sync with navy */
	--color-accent: var(--accent);
	--color-accent-dark: #000b26;   /* darker navy for hover/active */
	--color-accent-soft: #e8ecf4;   /* pale navy tint surface */
	--color-brand: var(--accent);
	--color-brand-soft: #e8ecf4;
}

/* ==========================================================================
   Header wordmark — placeholder until a logo image is supplied.
   Presents the site title as an intentional navy serif wordmark.
   ========================================================================== */
.site-logo-text {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--accent);
	letter-spacing: 0.01em;
	line-height: 1.05;
}

/* ==========================================================================
   Headlines in the brand navy (--accent, the logo navy #001139). Headings on
   dark bands set their own light color (e.g. .cta-band h2) and keep it via
   higher specificity, so they're unaffected.
   ========================================================================== */
h1, h2, h3, h4 {
	color: var(--accent);
}

/* ==========================================================================
   Primary buttons (Request a Consultation CTAs) in the brand navy.
   Parent fills solid .btn with near-black --ink; recolor to --accent so the
   CTAs match the navy headings. Hover keeps the parent's invert, in navy.
   ========================================================================== */
.btn {
	background: var(--accent);
	border-color: var(--accent);
}
.btn:hover {
	background: transparent;
	color: var(--accent);
}

/* Ghost buttons (e.g. the phone on service-page CTAs) must stay outlined, not
   filled. The .btn navy recolor above loads after the parent's .btn--ghost
   rule and would otherwise fill them navy (dark text on navy). Re-assert the
   outline variant in brand navy: transparent fill, navy text/border, navy
   fill on hover. */
.btn-ghost,
.btn--ghost {
	background: transparent;
	color: var(--accent);
	border-color: var(--accent);
}
.btn-ghost:hover,
.btn--ghost:hover {
	background: var(--accent);
	color: var(--bg);
}

/* ==========================================================================
   Accessibility — visible keyboard focus (WCAG 2.4.7 / 2.4.11).
   Parent only styles .skip-link:focus and sets outline:none on inputs.
   Navy ring on light areas; gold ring on dark bands (CTA, footer) so the
   indicator keeps ≥3:1 contrast against either background.
   ========================================================================== */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.cta-band a:focus-visible,
.cta-band button:focus-visible,
.cta-band .btn:focus-visible,
.cta-band input:focus-visible,
.cta-band select:focus-visible,
.cta-band textarea:focus-visible,
.site-footer a:focus-visible,
.site-footer button:focus-visible {
	outline-color: var(--warm);
}

/* ==========================================================================
   Phone numbers in the sans-serif face. The parent sets phone links in the
   display serif (Cormorant), whose figures read poorly at small sizes. The
   .cta-direct rule also shifts the CTA-band email to sans for consistency.
   ========================================================================== */
.phone-link,
.cta-direct a {
	font-family: var(--sans);
}

/* ==========================================================================
   Hero — breathing room below the sticky header. The parent hero has no top
   padding (its only spacing came from the now-removed eyebrow margin), so the
   headline would otherwise sit tight against the header border.
   ========================================================================== */
.section-hero {
	position: relative;
	overflow: hidden;
	padding-top: 64px;
	padding-bottom: 72px;
	/* Deeper-than-page surface tone so the hero reads as its own band. */
	background-color: var(--bg-deep);
	border-bottom: 1px solid var(--line);
}

/* Interior page heros (.page-hero) share the home hero's band tone and bottom
   border from the parent; mirror the home hero's positioning context here so
   they carry the same colonnade. */
.page-hero {
	position: relative;
	overflow: hidden;
}

/* Courthouse colonnade, anchored to the far right and spanning the full hero
   height. Sized auto/100% so it scales to the band height without cropping or
   distorting. The PNG background is transparent, so the columns sit directly on
   the band color; a short left-side mask just feathers the clipped edge.
   Shared by the home hero and interior page heros. */
.section-hero::after,
.page-hero::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 62%;
	background: url("images/legal-columns.png") right center / auto 100% no-repeat;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 25%);
	mask-image: linear-gradient(to right, transparent 0%, #000 25%);
	/* Kept subtle so the illustration sets the tone without pulling focus
	   from the headline. */
	opacity: 0.35;
	pointer-events: none;
}

/* Keep the hero copy above the illustration. Interior page heros (single
   service, service archive, review archive) wrap their copy in .container, not
   .wrap, so include both selectors; otherwise the colonnade ::after, being a
   positioned pseudo painted after static content, sits on top of the heading
   and lead and the text appears to fade under the columns. */
.section-hero > .wrap,
.page-hero > .wrap,
.page-hero > .container {
	position: relative;
	z-index: 1;
}

/* Darken the hero lead a touch for easier reading over the colonnade. The
   global .lead is --ink-soft (#4a4a4a); scope the darker tone to the hero
   bands so other leads keep the lighter weight. */
.section-hero .lead,
.page-hero .lead {
	color: #3a3a3a;
}

/* Space between the lead and the action row. The parent's
   `.hero-section .lead` margin doesn't apply here (the section renders as
   .section-hero), so the lead would otherwise fall back to the default 16px. */
.section-hero .lead {
	margin-bottom: 36px;
}

/* The parent's `.hero-actions { margin-bottom: 56px }` is meant to separate
   the hero stats band, which this site doesn't render. Left in, it dumps 56px
   of dead space below the button and pushes the copy toward the top of the
   band; zeroing it lets the content sit balanced (centered) in the hero. */
.section-hero .hero-actions {
	margin-bottom: 0;
}

@media (max-width: 768px) {
	/* Wider so the columns still read once the band narrows; opacity is
	   already softened on the base rule. */
	.section-hero::after,
	.page-hero::after {
		width: 85%;
	}
}
@media (max-width: 640px) {
	.section-hero {
		padding-top: 40px;
		padding-bottom: 48px;
	}
}

/* ==========================================================================
   Space between the hero band and the Areas of Practice heading. The parent
   services section has no top padding, so the heading otherwise sits tight
   against the hero's bottom border.
   ========================================================================== */
.section-services {
	padding-top: 56px;
	padding-bottom: 56px;
}
@media (max-width: 640px) {
	.section-services {
		padding-top: 36px;
		padding-bottom: 36px;
	}
}

/* ==========================================================================
   Areas of Practice grid — 4 per row (one row for the four practice areas).
   Collapses to 2 on tablet, 1 on phone.
   ========================================================================== */
.services-grid {
	grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
	.services-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 640px) {
	.services-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Single service pages: float the featured image to the right so the body
   copy wraps around it, rather than stacking above the text. .entry-content
   isn't a block formatting context, so the floated .entry-hero sibling
   intrudes into it and the text wraps. .page-cta clears the float.
   ========================================================================== */
.single-vh_service .entry-hero {
	float: right;
	width: min(45%, 460px);
	/* Gap on the text side; overrides the template's inline margin (left: 0). */
	margin-left: 40px !important;
}
.single-vh_service .page-cta {
	clear: both;
}
@media (max-width: 640px) {
	/* Too narrow to wrap cleanly; stack the image above the copy. */
	.single-vh_service .entry-hero {
		float: none;
		width: 100%;
		margin-left: 0 !important;
		/* Tighten the gap above the stacked image. Desktop stacks the entry's
		   60px top padding on top of the image's 40px top margin (~100px),
		   which is too tall on a phone; drop the image margin here. */
		margin-top: 16px !important;
	}
	.single-vh_service .entry {
		padding-top: 24px;
	}
}

/* ==========================================================================
   Services grid: hide the parent's "add more services to fill the grid"
   editor note. It assumes a 6-card grid; this site shows a full 4-card row,
   so the note is misleading. (Admin-only note; the only direct <p> in the
   section container.)
   ========================================================================== */
.section-services > .container > p {
	display: none;
}

/* ==========================================================================
   Separate the "Why" and "Serving Ocala" sections. Both used --bg-deep with
   no vertical padding, so they ran together as one block. Give each real
   padding and set the area section a lighter background so they read as two
   distinct bands.
   ========================================================================== */
.why-section,
.area-section {
	padding: 96px 0;
}
.area-section {
	background: var(--bg);
}
@media (max-width: 640px) {
	.why-section,
	.area-section {
		padding: 60px 0;
	}
}

/* ==========================================================================
   "Why" section photo: show the headshot as-is at its natural aspect ratio,
   centered in its column. Cancels the parent's 3:4 cover-crop and the earlier
   circular treatment (the supplied photo doesn't crop well to a circle).
   The .why-grid already centers cells vertically (align-items: center).
   ========================================================================== */
.why-image {
	aspect-ratio: auto;
	width: min(100%, 360px);
	margin: 0 auto;
	background: none;
}
.why-image img {
	height: auto;
	object-fit: initial;
}

/* Vertically center each point's text against its large number, and tighten
   the gap between the number and the text (parent uses 60px + 24px). */
.why-points li {
	align-items: center;
	grid-template-columns: auto 1fr;
	column-gap: 18px;
}
/* The oldstyle italic numerals sit slightly low in their line box; nudge them
   up to optically center against the text. */
.why-points strong {
	position: relative;
	top: -5px;
}

/* ==========================================================================
   Header logo: cap the width so a wide custom logo doesn't dominate the bar.
   ========================================================================== */
.site-logo {
	max-width: 320px;
}

/* ==========================================================================
   Footer. Enlarge the logo (parent caps it at 48px tall ~ 217px wide) so it
   sits roughly as wide as the tagline beneath it, and drop the unused
   "Service Area" column (3rd grid cell). The desktop column change is scoped
   to >=1025px so it doesn't override the parent's tablet/mobile layouts.
   ========================================================================== */
.footer-logo {
	max-height: 60px;
}
.footer-grid > div:nth-child(3) {
	display: none;
}
@media (min-width: 1025px) {
	/* Logo far left, Services + Contact grouped far right, with a flexible
	   empty middle (track 2). Service Area, nth-child(3), is hidden above. */
	.footer-grid {
		grid-template-columns: auto 1fr auto auto;
	}
	.footer-brand {
		grid-column: 1;
	}
	.footer-grid > div:nth-child(2) {
		grid-column: 3;
	}
	.footer-grid > div:nth-child(4) {
		grid-column: 4;
		/* Extra space between Services and Contact (on top of the 60px gap). */
		margin-left: 50px;
	}
}

/* Ancestor items get the active navy too (parent only colors current-menu-item),
   e.g. "Areas of Practice" while viewing a practice-area page. */
.site-nav .current-menu-ancestor > a {
	color: var(--accent);
}

/* ==========================================================================
   Current-page indicator: a small gold triangle (apex up) beneath the active
   nav item. Desktop nav only; the mobile menu stacks links, where a centered
   caret would read as off-center.
   ========================================================================== */
@media (min-width: 1025px) {
	.site-nav .current-menu-item > a,
	.site-nav .current-menu-ancestor > a,
	.site-nav .current_page_item > a {
		position: relative;
	}
	.site-nav .current-menu-item > a::after,
	.site-nav .current-menu-ancestor > a::after,
	.site-nav .current_page_item > a::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: -7px;
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-bottom: 6px solid var(--warm);
	}
}

/* ==========================================================================
   Current submenu (2nd-level) item. The gold caret above reads awkwardly inside
   a dropdown, so suppress it there and mark the active item as a solid navy row
   with white text instead. Top-level items keep the caret. The navy fill spans
   the full dropdown width (parent sets .sub-menu a to a padded block) and holds
   on hover so the active item stays visually fixed.
   ========================================================================== */
.site-nav .sub-menu .current-menu-item > a::after,
.site-nav .sub-menu .current-menu-ancestor > a::after,
.site-nav .sub-menu .current_page_item > a::after {
	content: none;
}
.site-nav .sub-menu .current-menu-item > a,
.site-nav .sub-menu .current_page_item > a,
.site-nav .sub-menu .current-menu-item > a:hover,
.site-nav .sub-menu .current_page_item > a:hover {
	background: var(--accent);
	color: #fff;
}

/* ==========================================================================
   CTA band ("Discuss Your Case Today") in the brand navy. Parent fills the
   band with near-black --ink; recolor to --accent so it matches the brand.
   The gold submit, light labels, and accent-soft glow keep contrast on navy.
   ========================================================================== */
.cta-band {
	background: var(--accent);
}

/* ==========================================================================
   CTA-band form fields span the full width of the form. The parent styles
   the contact-form controls (border, color, padding) but sets no width, so
   the select and inputs sit at their intrinsic content width. Stretch every
   control to 100%; make the CF7 control wrapper a block so inline-wrapped
   fields (e.g. the select) expand to fill too.
   ========================================================================== */
.cta-form .wpcf7-form-control-wrap {
	display: block;
}
.cta-form input[type="text"],
.cta-form input[type="email"],
.cta-form input[type="tel"],
.cta-form select,
.cta-form textarea {
	width: 100% !important;
	box-sizing: border-box;
}

/* The select itself is white text on navy (readable), but its <option>s drop
   into the browser's white native popup and inherit that white text, so they
   read white-on-white. Give the options body-text ink on white. */
.cta-form select option {
	color: var(--ink);
	background: #fff;
}

/* ==========================================================================
   CTA-band form — WCAG AA contrast fixes (controls sit on the navy .cta-band).
   Two parent/plugin defaults fall short against navy (#001139):
    - the field underline (parent's rgba(255,255,255,0.2)) is 1.81:1, below the
      3:1 minimum for a UI component boundary (WCAG 1.4.11);
    - CF7's inline validation tip (#dc3232) is 3.99:1, below the 4.5:1 text
      minimum (WCAG 1.4.3).
   Raise both. Parent sets the border-bottom with !important, so the override
   matches it; the tip override wins on specificity alone.
   ========================================================================== */
.cta-form input[type="text"],
.cta-form input[type="email"],
.cta-form input[type="tel"],
.cta-form select,
.cta-form textarea {
	border-bottom-color: rgba(255, 255, 255, 0.4) !important; /* 3.73:1 on navy */
}
.cta-form .wpcf7-not-valid-tip {
	color: #ff6b6b; /* 6.64:1 on navy */
}

/* ==========================================================================
   Phone numbers a touch larger so the call number stands out. .phone-link
   covers the header and hero; the footer renders the number as a plain tel:
   link in the contact list (parent markup, no class), targeted here by its
   href. The CTA-band number (.cta-direct a) is already 1.5rem, left as-is.
   ========================================================================== */
.phone-link {
	font-size: 1.3rem;
}
.site-footer a[href^="tel:"] {
	font-size: 1.25rem;
}

/* ==========================================================================
   Footer centered on phones. The parent collapses .footer-grid to one column
   at <=640px; center its contents to match.
   ========================================================================== */
@media (max-width: 640px) {
	.site-footer .footer-grid {
		text-align: center;
	}
	.footer-brand p {
		max-width: 100%;
	}
	.site-footer ul {
		align-items: center;
	}
	.footer-bottom {
		justify-content: center;
		text-align: center;
	}
	.footer-social {
		justify-content: center;
	}
}