/*
Theme Name: Nashville Area Homes Child
Theme URI: https://nashvilleareahomes.com
Description: Child theme of Twenty Twenty-Five, styled to match nashvilleareahomes.com exactly
Author: Nashville Area Homes
Template: twentytwentyfive
Version: 1.0.0
Tags: real-estate, child-theme
Text Domain: nah-child
*/
/* ============================================================
CSS VARIABLES — Exact match to live site (nashvilleareahomes.com)
============================================================ */
:root {
--color-primary: #082668;
--color-primary-dark: #05173e;
--color-primary-light: #0f49c7;
--color-accent: #c40;
--color-footer: #05173e;
--color-font: #5a5a5a;
--color-font-light: #869791;
--color-white: #fff;
--color-black: #000;
--color-border: #dde4ea;
--color-bg-light: #f6f8fb;
--color-bg-gray: #f2f2f2;
--wrapper-width: 1250px;
--font-primary: 'Josefin Sans', sans-serif;
--font-heading: 'Playfair Display', serif;
--font-accent: 'Prata', serif;
--font-large: 20px;
--font-medium: 16px;
--font-small: 14px;
--font-very-small: 12px;
--font-tiny: 10px; /* footer-bottom at 480px */
--font-nav-compact: 11px; /* primary nav at 1024px breakpoint */
--font-nav-mobile: 20px; /* mobile nav overlay items */
--font-nav-mobile-sm: 18px; /* mobile nav list at 480px */
--desktop-header-height: 45px;
--desktop-control-height: 70px;
--mobile-header-height: 45px;
--mobile-control-height: 112px;
--transition-fast: all 0.2s ease;
--transition-medium: all 0.35s ease;
--transition-slow: transform 0.6s ease-in-out;
}
/* ============================================================
GOOGLE FONTS — loaded via wp_enqueue_style() in functions.php
@import removed: it's render-blocking (browser must download
style.css → parse @import → fetch fonts, all sequential).
in lets the browser fetch fonts in parallel.
============================================================ */
/* ============================================================
BASE RESET & TYPOGRAPHY
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
body {
font-family: var(--font-primary);
font-size: var(--font-medium);
color: var(--color-font);
background: var(--color-white);
margin: 0;
padding: 0;
line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
color: var(--color-primary);
font-weight: 600;
line-height: 1.2;
margin: 0 0 0.75em;
}
h1 { font-size: clamp(28px, 4vw, 48px); }
h2 { font-size: clamp(22px, 3vw, 36px); }
h3 { font-size: clamp(18px, 2.5vw, 28px); }
h4 { font-size: clamp(16px, 2vw, 22px); }
p { margin: 0 0 1em; }
a {
color: var(--color-primary);
text-decoration: none;
transition: var(--transition-fast);
}
a:hover { color: var(--color-primary-light); }
img { max-width: 100%; height: auto; display: block; }
.wrapper {
max-width: var(--wrapper-width);
margin: 0 auto;
padding: 0 20px;
}
/* ============================================================
HEADER ENTRANCE ANIMATIONS (Rule 3)
Logo sweeps in from left, nav links from right.
cubic-bezier(0.25, 1, 0.5, 1) = smooth deceleration, no bounce.
Both resolve in 0.8s. Reduced-motion: instant show.
============================================================ */
@keyframes nahSlideFromLeft {
from { opacity: 0; transform: translateX(-100px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes nahSlideFromRight {
from { opacity: 0; transform: translateX(100px); }
to { opacity: 1; transform: translateX(0); }
}
.site-logo {
animation: nahSlideFromLeft 0.8s cubic-bezier(0.25, 1, 0.5, 1) both;
}
.primary-nav {
animation: nahSlideFromRight 0.8s cubic-bezier(0.25, 1, 0.5, 1) both;
}
/* Small delay so they don't fire before the hero bg loads */
.site-logo { animation-delay: 0.05s; }
.primary-nav { animation-delay: 0.15s; }
@media (prefers-reduced-motion: reduce) {
.site-logo, .primary-nav { animation: none; opacity: 1; transform: none; }
}
/* ============================================================
HEADER & NAVIGATION
============================================================ */
/* ── HEADER: position:fixed, transparent on front page, solid on scroll ──
Rule 1: body.logged-in shifts header down 32px for WP admin bar.
Rule 2: JS scroll listener (scrollY > 50) adds .is-scrolled.
─────────────────────────────────────────────────────────────────────── */
.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background: #082668; /* solid default for all non-front pages — matches live site exactly */
box-shadow: 0 2px 8px rgba(0,0,0,0.18);
transition: background 0.4s ease, box-shadow 0.4s ease, top 0.2s ease;
}
/* Rule 1 — WP admin bar pushes header down exactly 32px */
body.logged-in .site-header {
top: 32px;
}
body.logged-in.admin-bar .site-header {
top: 32px;
}
/* Front page: start transparent over hero */
.home .site-header {
background: transparent;
box-shadow: none;
}
/* Scrolled state — solid blue, fixed, shadow restored */
.site-header.is-scrolled {
background: #082668;
box-shadow: 0 2px 12px rgba(0,0,0,0.22);
}
/* Non-front pages: push content below fixed header */
body:not(.home) #main-content {
padding-top: var(--desktop-control-height);
}
body.logged-in:not(.home) #main-content {
padding-top: calc(var(--desktop-control-height) + 32px);
}
@media (max-width: 768px) {
body:not(.home) #main-content { padding-top: var(--mobile-control-height); }
body.logged-in:not(.home) #main-content {
padding-top: calc(var(--mobile-control-height) + 46px); /* mobile admin bar = 46px */
}
}
.header-inner {
max-width: var(--wrapper-width);
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: 1fr auto 1fr; /* logo | nav | hamburger — nav is always centered */
align-items: center;
height: var(--desktop-control-height);
}
.site-logo {
justify-self: start;
display: flex;
align-items: center;
}
nav.primary-nav {
justify-self: center; /* true center column — no transform conflict with animation */
}
.nav-toggle {
justify-self: end;
}
/* White banner box around logo */
.site-logo a {
display: block;
background: #fff;
padding: 6px 14px;
border-radius: 2px;
}
.site-logo img { height: 70px; width: auto; } /* no filter — natural dark logo on white bg */
nav.primary-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row; /* FIX: explicit row prevents column bleed on some browsers */
flex-wrap: nowrap; /* FIX: nav items must not wrap — handled by hamburger below 768px */
gap: 4px;
}
nav.primary-nav ul li a {
font-family: var(--font-primary);
font-size: var(--font-small);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-white);
padding: 8px 14px;
border-radius: 3px;
display: block;
transition: var(--transition-fast);
}
nav.primary-nav ul li a:hover,
nav.primary-nav ul li.current-menu-item > a {
background: rgba(255,255,255,0.15);
color: var(--color-white);
}
/* Dropdown */
nav.primary-nav ul li { position: relative; }
nav.primary-nav ul li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: var(--color-primary-dark);
min-width: 220px;
border-radius: 0 0 4px 4px;
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
flex-direction: column;
gap: 0;
z-index: 999;
}
nav.primary-nav ul li:hover > ul { display: flex; flex-direction: column; } /* FIX: explicit column on show */
nav.primary-nav ul li ul li a {
font-size: var(--font-very-small);
padding: 10px 16px;
border-bottom: 1px solid rgba(255,255,255,0.08);
border-radius: 0;
}
nav.primary-nav ul li ul li:last-child a { border-bottom: none; }
/* ============================================================
HERO / BANNER
============================================================ */
.hero {
position: relative;
min-height: 540px;
display: flex;
flex-direction: column; /* FIX: column so content stacks cleanly on any viewport */
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
background: var(--color-primary-dark);
}
.hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transform: scale(1.05);
transition: transform 8s ease-out;
animation: heroZoom 10s ease-out forwards;
}
@keyframes heroZoom {
from { transform: scale(1.08); }
to { transform: scale(1); }
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(8,38,104,0.72) 0%, rgba(5,23,62,0.55) 100%);
}
.hero-content {
position: relative;
z-index: 2;
color: var(--color-white);
padding: 40px 20px;
animation: slideInFromBottom 0.8s ease-out both;
}
.hero-content h1 {
color: var(--color-white);
font-family: var(--font-accent);
font-size: clamp(30px, 5vw, 58px);
margin-bottom: 16px;
text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.hero-content p {
font-size: clamp(16px, 2vw, 20px);
opacity: 0.92;
max-width: 640px;
margin: 0 auto 28px;
}
/* Search bar in hero */
.hero-search {
display: flex;
flex-direction: row; /* FIX: explicit row */
flex-wrap: wrap; /* FIX: input + button stack on narrow viewports */
max-width: 580px;
width: 100%; /* FIX: prevents overflow on viewports narrower than 580px */
margin: 0 auto;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.hero-search input {
flex: 1;
padding: 16px 20px;
font-size: var(--font-medium);
font-family: var(--font-primary);
border: none;
outline: none;
color: var(--color-font);
}
.hero-search button {
background: var(--color-accent);
color: var(--color-white);
border: none;
padding: 0 28px;
font-family: var(--font-primary);
font-size: var(--font-small);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
transition: var(--transition-fast);
}
.hero-search button:hover { background: #a83800; }
/* ============================================================
BUTTONS
============================================================ */
.btn {
display: inline-block;
font-family: var(--font-primary);
font-size: var(--font-small);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 13px 28px;
border-radius: 3px;
cursor: pointer;
border: 2px solid transparent;
transition: var(--transition-fast);
text-decoration: none;
}
.btn-primary {
background: var(--color-primary);
color: var(--color-white);
border-color: var(--color-primary);
}
.btn-primary:hover {
background: var(--color-primary-light);
border-color: var(--color-primary-light);
color: var(--color-white);
}
.btn-outline {
background: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn-outline:hover {
background: var(--color-primary);
color: var(--color-white);
}
.btn-white {
background: var(--color-white);
color: var(--color-primary);
border-color: var(--color-white);
}
.btn-white:hover {
background: transparent;
color: var(--color-white);
border-color: var(--color-white);
}
/* ============================================================
SECTIONS
============================================================ */
section { padding: 72px 0; }
section.section-sm { padding: 48px 0; }
section.section-lg { padding: 100px 0; }
section.bg-light { background: var(--color-bg-light); }
section.bg-dark { background: var(--color-primary-dark); color: var(--color-white); }
section.bg-dark h2, section.bg-dark h3 { color: var(--color-white); }
.section-title {
text-align: center;
margin-bottom: 48px;
}
.section-title h2 { margin-bottom: 12px; }
.section-title p { color: var(--color-font-light); max-width: 600px; margin: 0 auto; }
.section-title .divider {
width: 60px;
height: 3px;
background: var(--color-accent);
margin: 16px auto 0;
border-radius: 2px;
}
/* ============================================================
LISTING CARDS
============================================================ */
.listings-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 28px;
}
.listing-card {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: 6px;
overflow: hidden;
transition: var(--transition-medium);
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.listing-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 28px rgba(8,38,104,0.14);
border-color: var(--color-primary);
}
.listing-card .card-img {
position: relative;
height: 210px;
overflow: hidden;
}
.listing-card .card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease-in-out;
}
.listing-card:hover .card-img img { transform: scale(1.06); }
.listing-card .card-price {
position: absolute;
bottom: 12px;
left: 12px;
background: var(--color-primary);
color: var(--color-white);
font-family: var(--font-primary);
font-weight: 600;
font-size: var(--font-small);
padding: 4px 12px;
border-radius: 2px;
}
.listing-card .card-body { padding: 18px; }
.listing-card .card-address {
font-family: var(--font-heading);
font-size: clamp(15px, 1.5vw, 17px); /* FIX: was hardcoded 17px — now fluid */
color: var(--color-primary);
margin-bottom: 6px;
}
.listing-card .card-meta {
font-size: var(--font-very-small);
color: var(--color-font-light);
display: flex;
flex-direction: row; /* FIX: explicit row */
flex-wrap: wrap; /* FIX: beds/baths/sqft wrap gracefully on narrow cards */
gap: 8px 14px;
}
.listing-card .card-meta span::before {
content: '';
margin-right: 4px;
}
/* ============================================================
FOOTER
============================================================ */
.site-footer {
background: var(--color-footer);
color: rgba(255,255,255,0.8);
padding: 64px 0 0;
font-size: var(--font-small);
}
.footer-grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: 48px;
max-width: var(--wrapper-width);
margin: 0 auto;
padding: 0 20px 48px;
}
.footer-brand img { height: 44px; margin-bottom: 18px; }
.footer-brand p { opacity: 0.75; line-height: 1.7; }
.footer-col h4 {
font-family: var(--font-primary);
font-size: var(--font-very-small);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-white);
margin-bottom: 16px;
}
.footer-col ul {
list-style: none;
margin: 0;
padding: 0;
}
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul li a {
color: rgba(255,255,255,0.7);
font-size: var(--font-very-small);
transition: var(--transition-fast);
}
.footer-col ul li a:hover { color: var(--color-white); }
/* ---- CORRECT BUSINESS ADDRESS - 3102 West End Ave, Suite 400, Nashville TN 37208 ---- */
.footer-address {
font-style: normal;
line-height: 1.9;
opacity: 0.78;
font-size: var(--font-very-small);
}
.footer-address a { color: rgba(255,255,255,0.78); }
.footer-address a:hover { color: var(--color-white); }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.1);
padding: 20px;
text-align: center;
font-size: var(--font-very-small);
opacity: 0.55;
max-width: var(--wrapper-width);
margin: 0 auto;
}
/* ============================================================
ANIMATIONS — Exact match to live site keyframes
============================================================ */
@keyframes slideInFromLeft {
from { opacity: 0; transform: translateX(-40px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInFromRight {
from { opacity: 0; transform: translateX(40px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInFromTop {
from { opacity: 0; transform: translateY(-30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInFromBottom {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes faded {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes rotateOnHover {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes progress {
from { width: 0; }
to { width: 100%; }
}
@keyframes ring {
0% { transform: rotate(0deg); }
10% { transform: rotate(14deg); }
20% { transform: rotate(-8deg); }
30% { transform: rotate(14deg); }
40% { transform: rotate(-4deg); }
50% { transform: rotate(10deg); }
60% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
/* Animation utility classes */
.anim-slide-left { animation: slideInFromLeft 0.6s ease-out both; }
.anim-slide-right { animation: slideInFromRight 0.6s ease-out both; }
.anim-slide-top { animation: slideInFromTop 0.6s ease-out both; }
.anim-slide-bottom { animation: slideInFromBottom 0.6s ease-out both; }
.anim-fade { animation: faded 0.5s ease-out both; }
.anim-delay-1 { animation-delay: 0.1s; }
.anim-delay-2 { animation-delay: 0.2s; }
.anim-delay-3 { animation-delay: 0.3s; }
.anim-delay-4 { animation-delay: 0.4s; }
/* ============================================================
RESPONSIVE — full five-breakpoint coverage
Breakpoints: 1280 | 1024 | 768 | 600 | 480
============================================================ */
/* ── 1280px — large laptop / wide viewport ───────────────────────────── */
@media (max-width: 1280px) {
:root { --wrapper-width: 1100px; }
.footer-grid { gap: 32px; }
nav.primary-nav ul li a { padding: 8px 10px; }
}
/* ── 1024px — standard laptop ────────────────────────────────────────── */
@media (max-width: 1024px) {
:root { --wrapper-width: 960px; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
.hero { min-height: 440px; }
nav.primary-nav ul li a {
padding: 7px 8px;
font-size: var(--font-nav-compact);
}
}
/* ── 768px — tablet / large phone landscape ──────────────────────────── */
@media (max-width: 768px) {
:root {
--wrapper-width: 100%;
--desktop-control-height: var(--mobile-control-height);
}
/* Layout */
section { padding: 48px 0; }
section.section-lg { padding: 64px 0; }
/* Header — collapse to hamburger */
.header-inner { flex-wrap: wrap; height: auto; padding: 14px 20px; }
nav.primary-nav { display: none; } /* hidden until .nav-open */
.nav-toggle { display: flex; flex-direction: column; } /* FIX: direction explicit in override, not just base rule */
/* Hero */
.hero { min-height: 360px; }
.hero-search { flex-direction: column; border-radius: 4px; }
.hero-search input { border-radius: 4px 4px 0 0; padding: 14px 16px; }
.hero-search button { border-radius: 0 0 4px 4px; padding: 14px 20px; width: 100%; }
/* Footer */
.footer-grid { grid-template-columns: 1fr; gap: 28px; }
.footer-bottom { text-align: left; }
/* Listings */
.listings-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
/* MLS search bar */
.mls-search-form { flex-direction: column; gap: 8px; }
.mls-search-form select,
.mls-search-form button { width: 100%; }
}
/* ── 600px — small tablet / large phone ─────────────────────────────── */
@media (max-width: 600px) {
/* Hero */
.hero { min-height: 300px; }
.hero-content { padding: 32px 16px; }
/* Sections */
section { padding: 36px 0; }
.section-title { margin-bottom: 32px; }
/* Listing cards — single column */
.listings-grid { grid-template-columns: 1fr; gap: 16px; }
.listing-card .card-img { height: 180px; }
/* Footer */
.footer-grid { padding: 0 16px 36px; }
.site-footer { padding-top: 48px; }
}
/* ── 480px — phone portrait / small phone ────────────────────────────── */
@media (max-width: 480px) {
/* Typography scale down */
h1 { font-size: clamp(24px, 7vw, 32px); }
h2 { font-size: clamp(20px, 6vw, 28px); }
h3 { font-size: clamp(17px, 5vw, 22px); }
/* Wrapper padding */
.wrapper { padding: 0 16px; }
/* Header */
.site-logo img { height: 38px; }
.header-inner { padding: 12px 16px; }
/* Hero */
.hero { min-height: 260px; }
.hero-content { padding: 24px 16px; }
/* Buttons — full width on smallest screens */
.btn { display: block; text-align: center; }
/* Card meta wrap tighter */
.listing-card .card-meta { gap: 6px 10px; }
.listing-card .card-body { padding: 14px; }
/* Footer */
.footer-brand img { height: 36px; }
.footer-bottom { font-size: var(--font-tiny); padding: 16px; }
/* Mobile nav overlay full screen */
.mobile-nav-overlay { padding: 24px 16px; }
.mobile-nav-list li a { font-size: var(--font-nav-mobile-sm); padding: 12px 0; }
}
/* ── Mobile nav overlay — triggered by JS adding .nav-open to body ───── */
body.nav-open .mobile-nav-overlay { display: flex; flex-direction: column; } /* FIX: explicit column on show */
body.nav-open nav.primary-nav { display: none; } /* keep desktop nav hidden */
.mobile-nav-overlay {
display: none;
position: fixed;
inset: 0;
background: var(--color-primary-dark);
z-index: 999;
flex-direction: column;
align-items: flex-start;
padding: 80px 32px 40px;
overflow-y: auto;
}
.mobile-nav-list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.mobile-nav-list li { border-bottom: 1px solid rgba(255,255,255,0.08); }
.mobile-nav-list li a {
display: block;
color: var(--color-white);
font-family: var(--font-primary);
font-size: var(--font-nav-mobile);
font-weight: 500;
letter-spacing: 0.06em;
padding: 14px 0;
transition: var(--transition-fast);
}
.mobile-nav-list li a:hover { color: rgba(255,255,255,0.7); padding-left: 8px; }
.mobile-nav-address {
margin-top: 32px;
font-style: normal;
color: rgba(255,255,255,0.6);
font-size: var(--font-small);
line-height: 1.8;
}
.mobile-nav-address a { color: rgba(255,255,255,0.6); }
/* Hamburger button */
.nav-toggle {
display: none; /* shown only in mobile breakpoints above */
flex-direction: column;
justify-content: space-between;
width: 28px;
height: 20px;
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.nav-toggle span {
display: block;
height: 2px;
background: var(--color-white);
border-radius: 2px;
transition: var(--transition-fast);
}
body.nav-open .nav-toggle span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }
/* ── Header search bar — hidden (search is in hero on home, plugin on inner pages) ── */
.header-search-bar { display: none !important; }
/* ── Print media — strip nav, header bg, animations ─────────────────── */
@media print {
.site-header, .mobile-nav-overlay, .nav-toggle,
.hero-bg, .hero-overlay, .header-search-bar { display: none !important; }
body { color: #000; font-size: 12pt; }
a { color: #000; text-decoration: underline; }
.wrapper { max-width: 100%; padding: 0; }
}
/* ══════════════════════════════════════════════════════════════════════
UTILITY NAV (top-right: Sign Up/Log In · Hamburger · Phone)
══════════════════════════════════════════════════════════════════════ */
.utility-nav {
display: flex;
align-items: center;
gap: 18px;
justify-self: end;
}
/* Sign Up or Log In text */
.utility-nav__login {
color: #fff;
text-decoration: none;
font-family: var(--font-primary, sans-serif);
font-size: 11px;
letter-spacing: .12em;
white-space: nowrap;
}
.utility-nav__login strong { font-weight: 700; }
.utility-nav__or { opacity: .5; font-weight: 400; }
/* Phone icon */
.utility-nav__phone {
color: #fff;
display: flex;
align-items: center;
text-decoration: none;
}
.utility-nav__phone .phone-icon {
display: block;
transition: transform .1s ease;
}
@keyframes phone-shake {
0%,100% { transform: rotate(0deg); }
15% { transform: rotate(-18deg); }
30% { transform: rotate(16deg); }
45% { transform: rotate(-14deg); }
60% { transform: rotate(10deg); }
75% { transform: rotate(-6deg); }
}
.utility-nav__phone:hover .phone-icon {
animation: phone-shake .55s ease;
}
/* Hamburger button */
.utility-nav__hamburger {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 36px;
height: 36px;
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.utility-nav__hamburger span {
display: block;
width: 22px;
height: 2px;
background: #fff;
border-radius: 2px;
transition: transform .25s ease, opacity .25s ease;
}
/* Hover: lines 1 & 3 slide left */
.utility-nav__hamburger:hover span:nth-child(1),
.utility-nav__hamburger:hover span:nth-child(3) {
transform: translateX(-5px);
}
/* Active/open state: X */
.utility-nav__hamburger[aria-expanded="true"] span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.utility-nav__hamburger[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.utility-nav__hamburger[aria-expanded="true"] span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
/* ══════════════════════════════════════════════════════════════════════
FULL-SCREEN NAV DRAWER
══════════════════════════════════════════════════════════════════════ */
.nav-drawer {
position: fixed;
inset: 0;
z-index: 2000;
background: #001E62;
transform: translateX(100%);
transition: transform .35s cubic-bezier(.4,0,.2,1);
overflow-y: auto;
overflow-x: hidden;
max-width: 100vw;
box-sizing: border-box;
}
.nav-drawer.is-open {
transform: translateX(0);
}
.nav-drawer__overlay {
display: none;
position: fixed;
inset: 0;
z-index: 1999;
background: rgba(0,0,0,.45);
}
.nav-drawer__overlay.is-visible {
display: block;
}
.nav-drawer__inner {
display: flex;
flex-direction: column;
min-height: 100vh;
padding: 32px 40px 48px;
box-sizing: border-box;
max-width: 100%;
}
/* Close button */
.nav-drawer__close {
align-self: flex-end;
background: none;
border: none;
color: #fff;
cursor: pointer;
padding: 4px;
margin-bottom: 40px;
opacity: .75;
transition: opacity .2s;
}
.nav-drawer__close:hover { opacity: 1; }
/* Accordion nav */
.drawer-nav {
flex: 1;
width: 100%;
}
.drawer-nav__item {
border-bottom: 1px solid rgba(255,255,255,.1);
}
.drawer-nav__trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background: none;
border: none;
color: #fff;
font-family: var(--font-primary, sans-serif);
font-size: 13px;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
text-decoration: none;
padding: 20px 0;
cursor: pointer;
text-align: left;
}
.drawer-nav__trigger--plain {
display: block;
}
/* Arrow chevron */
.drawer-nav__arrow {
flex-shrink: 0;
transition: transform .3s ease;
}
.drawer-nav__trigger[aria-expanded="true"] .drawer-nav__arrow {
transform: rotate(90deg);
}
/* Sub-menu */
.drawer-nav__sub {
max-height: 0;
overflow: hidden;
transition: max-height .35s ease;
}
.drawer-nav__sub a {
display: block;
color: rgba(255,255,255,.8);
text-decoration: none;
font-family: var(--font-primary, sans-serif);
font-size: 12px;
letter-spacing: .12em;
padding: 10px 0 10px 16px;
transition: color .2s;
}
.drawer-nav__sub a:hover { color: #fff; }
/* Portal buttons */
.drawer-portal {
display: flex;
gap: 16px;
margin-top: 48px;
flex-shrink: 0;
}
.drawer-portal__signup,
.drawer-portal__login {
flex: 1;
display: block;
text-align: center;
padding: 14px 24px;
font-family: var(--font-primary, sans-serif);
font-size: 11px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
text-decoration: none;
transition: background .2s, color .2s;
border-radius: 2px;
}
.drawer-portal__signup {
background: #fff;
color: #001E62;
border: 2px solid #fff;
}
.drawer-portal__signup:hover {
background: transparent;
color: #fff;
}
.drawer-portal__login {
background: transparent;
color: #fff;
border: 2px solid rgba(255,255,255,.6);
}
.drawer-portal__login:hover {
border-color: #fff;
}
/* ── Task #28: Suppress FSE / parent-theme site-title block ──────────────────
TwentyTwentyFive's FSE template can inject a wp-block-site-title H1 even
when the child theme's PHP front-page.php overrides the block template.
Our hero already carries the only intended H1; hide any accidental duplicate.
─────────────────────────────────────────────────────────────────────────── */
.wp-block-site-title,
.wp-block-site-title a {
display: none !important;
}
/* ── Task #30: Replace inline style on legacy hamburger button ───────────────
header.php had style="display:none" on the old .nav-toggle button;
that attribute is removed and this rule covers it via class.
─────────────────────────────────────────────────────────────────────────── */
.nav-toggle {
display: none;
}
/* ── Task #29: Address element reset ─────────────────────────────────────────
Browsers italicise by default; footer address should match the
surrounding contact-val link style.
─────────────────────────────────────────────────────────────────────────── */
.nah-footer__contact-address {
font-style: normal;
}
/* ============================================================
LEGAL PAGES — Privacy Policy & Terms of Service
Shared styles for page-privacy-policy.php and
page-terms-of-service.php
============================================================ */
/* Hero banner */
.nah-legal__hero {
background: var(--color-primary);
padding: 80px 24px 60px;
text-align: center;
}
.nah-legal__hero-inner {
max-width: 800px;
margin: 0 auto;
}
.nah-legal__eyebrow {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(255,255,255,.65);
margin: 0 0 12px;
}
.nah-legal__title {
font-family: var(--font-heading);
font-size: clamp(32px, 5vw, 52px);
font-weight: 400;
color: #fff;
margin: 0 0 16px;
line-height: 1.15;
}
.nah-legal__meta {
font-family: var(--font-primary);
font-size: 13px;
color: rgba(255,255,255,.55);
margin: 0;
}
/* Body / content area */
.nah-legal__body {
padding: 64px 24px 96px;
background: #fff;
}
.nah-legal__container {
max-width: 780px;
margin: 0 auto;
font-family: var(--font-primary);
font-size: 15px;
line-height: 1.8;
color: #333;
}
/* Intro paragraph */
.nah-legal__intro {
font-size: 16px;
line-height: 1.85;
color: #444;
margin: 0 0 48px;
padding-bottom: 32px;
border-bottom: 1px solid var(--color-border);
}
/* Headings */
.nah-legal__container h2 {
font-family: var(--font-heading);
font-size: 22px;
font-weight: 600;
color: var(--color-primary);
margin: 48px 0 12px;
padding-bottom: 8px;
border-bottom: 2px solid var(--color-border);
}
.nah-legal__container h3 {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: #444;
margin: 28px 0 8px;
}
/* Paragraphs & lists */
.nah-legal__container p {
margin: 0 0 16px;
}
.nah-legal__container ul {
margin: 0 0 20px 0;
padding-left: 24px;
}
.nah-legal__container ul li {
margin-bottom: 6px;
}
/* Address block */
.nah-legal__address {
font-style: normal;
background: var(--color-bg-light);
border-left: 3px solid var(--color-primary);
padding: 20px 24px;
border-radius: 0 6px 6px 0;
line-height: 2;
margin: 16px 0 32px;
}
.nah-legal__address a {
color: var(--color-primary);
text-decoration: none;
}
.nah-legal__address a:hover {
text-decoration: underline;
}
/* Links within body */
.nah-legal__container a {
color: var(--color-primary);
text-decoration: underline;
}
.nah-legal__container a:hover {
color: var(--color-primary-light);
}
/* Mobile */
@media (max-width: 600px) {
.nah-legal__hero { padding: 60px 20px 40px; }
.nah-legal__body { padding: 48px 20px 72px; }
.nah-legal__container h2 { font-size: 19px; }
}