/*
Theme Name: Walk In Cooler VA
Theme URI: https://walkincoolerva.com/
Author: WalkInCoolerVA.com
Description: A Richmond-centered lead-generation block theme for commercial walk-in coolers and freezers.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
Text Domain: walkincoolerva
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: block-patterns, full-site-editing, wide-blocks, custom-colors, blog
*/

:root {
  --va-ink: #102a33;
  --va-navy: #163b47;
  --va-river: #1d7782;
  --va-mint: #9cd7cf;
  --va-brick: #a94935;
  --va-clay: #d98061;
  --va-cream: #f4f0e7;
  --va-paper: #fffdf8;
  --va-line: #d5ddd8;
  --va-muted: #62747a;
  --va-shadow: 0 28px 80px rgba(16,42,51,.14);
  --va-radius: 8px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
img { height: auto; max-width: 100%; }
a { text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--va-clay); outline-offset: 4px; }
.wp-site-blocks { overflow: hidden; }
.va-wrap { margin-inline: auto; max-width: none !important; width: calc(100% - clamp(40px,5vw,96px)); }
.va-section { padding: clamp(68px,8vw,128px) 0; }
.va-section--small { padding: clamp(46px,5vw,78px) 0; }
.va-kicker { color: var(--va-brick); font-size: .72rem; font-weight: 900; letter-spacing: .2em; margin: 0 0 15px; text-transform: uppercase; }
.va-lede { color: var(--va-muted); font-size: clamp(1.06rem,1.45vw,1.28rem); line-height: 1.65; max-width: 760px; }

/* Header */
.va-site-header { background: rgba(255,253,248,.96); border-bottom: 1px solid var(--va-line); position: relative; z-index: 30; }
.va-notice { background: var(--va-brick); color: #fff; font-size: .76rem; font-weight: 750; letter-spacing: .035em; margin-left: calc(50% - 50vw) !important; max-width: none !important; padding: 9px 20px; text-align: center; width: 100vw !important; }
.va-header-inner { align-items: center; display: grid; gap: 32px; grid-template-columns: auto 1fr auto; min-height: 86px; }
.va-brand { color: var(--va-ink); display: inline-flex; flex-direction: column; line-height: 1; text-decoration: none; }
.va-brand__name { font-size: 1.13rem; font-weight: 950; letter-spacing: -.04em; text-transform: uppercase; }
.va-brand__name em { color: var(--va-brick); font-style: normal; }
.va-brand__place { color: var(--va-river); font-size: .57rem; font-weight: 900; letter-spacing: .2em; margin-top: 8px; text-transform: uppercase; }
.va-site-header .wp-block-navigation { justify-self: end; }
.va-site-header .wp-block-navigation-item__content { color: var(--va-ink); font-size: .89rem; font-weight: 800; text-decoration: none; }
.va-site-header .wp-block-navigation-item__content:hover { color: var(--va-brick); }
.va-header-cta .wp-block-button__link { padding: .88rem 1.18rem; }

/* Controls */
.wp-block-button__link { border: 1px solid transparent; border-radius: 3px; font-weight: 900; letter-spacing: .015em; padding: 1rem 1.4rem; transition: background .18s ease,color .18s ease,transform .18s ease; }
.wp-block-button__link:hover { transform: translateY(-2px); }
.is-style-outline .wp-block-button__link { background: transparent; border-color: currentColor; }
.va-button-brick .wp-block-button__link { background: var(--va-brick); color: #fff; }

/* Hero */
.va-hero { background: var(--va-paper); min-height: 730px; position: relative; }
.va-hero::before { background: linear-gradient(90deg,transparent 49px,rgba(16,42,51,.055) 50px),linear-gradient(transparent 49px,rgba(16,42,51,.055) 50px); background-size: 50px 50px; content: ""; inset: 0; opacity: .6; position: absolute; }
.va-hero::after { background: var(--va-navy); content: ""; inset: 0 0 0 61%; position: absolute; }
.va-hero-grid { align-items: center; display: grid; gap: clamp(46px,7vw,110px); grid-template-columns: minmax(0,1.18fr) minmax(400px,.82fr); min-height: 730px; padding-block: 74px; position: relative; z-index: 2; }
.va-hero-copy { padding-right: clamp(0px,3vw,55px); }
.va-hero h1 { font-size: clamp(3.7rem,7.2vw,7.8rem); letter-spacing: -.075em; line-height: .88; margin: 0; max-width: 950px; }
.va-hero h1 span { color: var(--va-brick); display: block; }
.va-hero-copy > p:not(.va-kicker) { color: var(--va-muted); font-size: clamp(1.08rem,1.45vw,1.28rem); max-width: 680px; }
.va-hero-actions { margin-top: 34px; }
.va-local-proof { align-items: center; border-top: 1px solid var(--va-line); display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 34px; padding-top: 22px; }
.va-local-proof span { color: var(--va-ink); font-size: .79rem; font-weight: 850; }
.va-local-proof span::before { background: var(--va-mint); content: ""; display: inline-block; height: 9px; margin-right: 8px; transform: rotate(45deg); width: 9px; }
.va-hero-visual { color: #fff; position: relative; }
.va-hero-visual img { display: block; filter: drop-shadow(0 30px 30px rgba(0,0,0,.2)); margin-inline: auto; width: min(100%,650px); }
.va-location-card { background: var(--va-cream); border-left: 7px solid var(--va-clay); bottom: 4%; color: var(--va-ink); left: -35px; padding: 22px 25px; position: absolute; width: min(300px,80%); }
.va-location-card small { color: var(--va-brick); display: block; font-size: .65rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.va-location-card strong { display: block; font-size: 1.45rem; margin: 7px 0 2px; }
.va-location-card span { color: var(--va-muted); font-size: .79rem; }

/* Section heading */
.va-section-head { align-items: end; display: grid; gap: 35px; grid-template-columns: 1.4fr .6fr; margin-bottom: 46px; }
.va-section-head h2 { font-size: clamp(2.7rem,5.3vw,5.8rem); margin: 0; max-width: 1000px; }

/* Product systems */
.va-systems { background: var(--va-cream); }
.va-system-grid { display: grid; gap: 2px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.va-system-card { background: var(--va-paper); display: grid; grid-template-columns: 1fr .85fr; min-height: 430px; overflow: hidden; }
.va-system-card__body { display: flex; flex-direction: column; padding: clamp(32px,4vw,58px); }
.va-system-card__no { color: var(--va-clay); font-family: Georgia,serif; font-size: 1.1rem; font-style: italic; }
.va-system-card h3 { font-size: clamp(2.2rem,3.8vw,4.2rem); margin: 25px 0 18px; }
.va-system-card p { color: var(--va-muted); }
.va-system-link { color: var(--va-ink); font-weight: 900; margin-top: auto; text-decoration: none; }
.va-system-link::after { color: var(--va-brick); content: "  ↗"; }
.va-system-card__art { align-items: center; background: var(--va-mint); display: flex; justify-content: center; padding: 24px; }
.va-system-card--freezer .va-system-card__art { background: var(--va-navy); }
.va-system-card__art svg { max-height: 320px; width: 100%; }

/* Process */
.va-process { background: var(--va-paper); }
.va-process-grid { border-bottom: 1px solid var(--va-line); border-top: 1px solid var(--va-line); display: grid; grid-template-columns: repeat(4,1fr); }
.va-step { border-right: 1px solid var(--va-line); min-height: 280px; padding: 32px clamp(22px,3vw,44px); }
.va-step:last-child { border-right: 0; }
.va-step__number { color: var(--va-brick); font-family: Georgia,serif; font-size: 2.2rem; font-style: italic; }
.va-step h3 { font-size: 1.35rem; margin: 72px 0 10px; }
.va-step p { color: var(--va-muted); font-size: .92rem; margin: 0; }

/* Richmond band */
.va-richmond { background: var(--va-brick); color: #fff; position: relative; }
.va-richmond::after { border: 1px solid rgba(255,255,255,.16); content: ""; inset: 25px; pointer-events: none; position: absolute; }
.va-richmond-grid { align-items: center; display: grid; gap: clamp(50px,8vw,130px); grid-template-columns: .9fr 1.1fr; position: relative; z-index: 2; }
.va-richmond h2 { color: #fff; font-size: clamp(2.8rem,5.5vw,5.8rem); margin: 0 0 24px; }
.va-richmond p { color: #ffddd1; font-size: 1.08rem; }
.va-richmond-points { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-top: 32px; }
.va-richmond-points span { border-top: 1px solid rgba(255,255,255,.35); font-size: .84rem; font-weight: 850; padding-top: 13px; }
.va-skyline svg { display: block; height: auto; width: 100%; }

/* Applications */
.va-applications { background: var(--va-navy); color: #fff; }
.va-applications .va-kicker { color: var(--va-mint); }
.va-applications h2 { color: #fff; }
.va-applications .va-lede { color: #b9d0d5; }
.va-application-grid { display: grid; gap: 18px; grid-template-columns: repeat(4,1fr); }
.va-application { border: 1px solid rgba(255,255,255,.18); min-height: 280px; padding: 30px; }
.va-application small { color: var(--va-mint); font-family: Georgia,serif; font-size: 1rem; font-style: italic; }
.va-application h3 { color: #fff; font-size: 1.35rem; margin: 70px 0 10px; }
.va-application p { color: #aac3c8; font-size: .92rem; }

/* Resources */
.va-resources { background: var(--va-cream); }
.va-resources .wp-block-post-template { display: grid; gap: 20px; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; }
.va-resources .wp-block-post { background: var(--va-paper); border-bottom: 5px solid var(--va-brick); }
.va-resources .wp-block-post-featured-image { aspect-ratio: 16/9; background: #dce8e6; margin: 0; overflow: hidden; }
.va-resources .wp-block-post-featured-image img { height: 100%; object-fit: cover; width: 100%; }
.va-resource-body { padding: 27px; }
.va-resource-body .wp-block-post-terms { color: var(--va-brick); font-size: .67rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.va-resource-body .wp-block-post-title { font-size: 1.45rem; margin: 13px 0 10px; }
.va-resource-body .wp-block-post-title a { color: var(--va-ink); text-decoration: none; }
.va-resource-body .wp-block-post-excerpt { color: var(--va-muted); font-size: .92rem; }

/* CTA */
.va-cta { background: var(--va-mint); padding: clamp(65px,8vw,115px) 0; }
.va-cta-grid { align-items: center; display: grid; gap: 50px; grid-template-columns: 1fr auto; }
.va-cta h2 { font-size: clamp(2.8rem,5.4vw,5.8rem); margin: 0; max-width: 1000px; }
.va-cta p { color: #274b53; max-width: 740px; }
.va-cta .wp-block-button__link { background: var(--va-brick); color: #fff; }

/* Page and post */
.va-page-hero { background: var(--va-cream); border-bottom: 10px solid var(--va-brick); padding: clamp(80px,10vw,150px) 0; }
.va-page-hero h1 { font-size: clamp(3.6rem,7.4vw,7.8rem); letter-spacing: -.07em; line-height: .9; margin: 0; max-width: 1150px; }
.va-page-hero .va-lede { margin-top: 28px; }
.va-breadcrumb { color: var(--va-muted); font-size: .77rem; font-weight: 800; margin-bottom: 40px; }
.va-breadcrumb a { color: var(--va-brick); }
.va-page-grid { display: grid; gap: clamp(50px,8vw,120px); grid-template-columns: minmax(0,1fr) 330px; }
.va-entry { font-size: 1.08rem; max-width: 900px; }
.va-entry > * + * { margin-top: 1.45em; }
.va-entry h2 { font-size: clamp(2.1rem,4vw,3.9rem); margin-top: 1.7em; }
.va-entry h3 { font-size: 1.55rem; margin-top: 1.8em; }
.va-entry ul,.va-entry ol { padding-left: 1.25em; }
.va-entry li + li { margin-top: .56em; }
.va-side-card { background: var(--va-navy); border-top: 7px solid var(--va-clay); color: #fff; padding: 30px; position: sticky; top: 24px; }
.va-side-card h3 { color: #fff; font-size: 1.5rem; }
.va-side-card p { color: #b9d0d5; font-size: .92rem; }
.va-side-card .wp-block-button__link { background: var(--va-brick); width: 100%; }
.va-feature-grid { display: grid; gap: 16px; grid-template-columns: repeat(3,1fr); }
.va-feature { background: var(--va-cream); border-left: 5px solid var(--va-mint); padding: 26px; }
.va-feature small { color: var(--va-brick); font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.va-feature h3 { font-size: 1.2rem; margin: 18px 0 8px; }
.va-feature p { color: var(--va-muted); font-size: .9rem; margin: 0; }
.va-faq details { border-top: 1px solid var(--va-line); padding: 20px 0; }
.va-faq details:last-child { border-bottom: 1px solid var(--va-line); }
.va-faq summary { cursor: pointer; font-size: 1.08rem; font-weight: 900; }
.va-faq details p { color: var(--va-muted); margin-bottom: 0; }

/* Archive */
.va-archive-hero { background: var(--va-navy); color: #fff; padding: 86px 0 72px; }
.va-archive-hero h1 { color: #fff; font-size: clamp(3.1rem,6vw,6.4rem); margin: 0; }
.va-post-grid { display: grid; gap: 22px; grid-template-columns: repeat(3,minmax(0,1fr)); list-style: none; padding: 0; }
.va-post-card { background: var(--va-paper); border: 1px solid var(--va-line); border-bottom: 5px solid var(--va-brick); }
.va-post-card .wp-block-post-featured-image { aspect-ratio: 16/9; background: #dce8e6; margin: 0; overflow: hidden; }
.va-post-card .wp-block-post-featured-image img { height: 100%; object-fit: cover; width: 100%; }
.va-post-card__body { padding: 27px; }
.va-post-card .wp-block-post-title { font-size: 1.5rem; }
.va-post-card .wp-block-post-title a { color: var(--va-ink); text-decoration: none; }
.va-post-card .wp-block-post-date,.va-post-card .wp-block-post-excerpt { color: var(--va-muted); font-size: .88rem; }
.va-single-head { background: var(--va-cream); border-bottom: 8px solid var(--va-brick); padding: 86px 0 68px; text-align: center; }
.va-single-head h1 { font-size: clamp(3rem,6.3vw,6.5rem); margin-inline: auto; max-width: 1180px; }
.va-single-meta { color: var(--va-muted); display: flex; font-size: .8rem; gap: 15px; justify-content: center; }
.va-single-feature { margin: 0 auto 64px; max-height: 680px; overflow: hidden; width: min(calc(100% - 40px),1180px); }
.va-single-feature img { height: min(54vw,680px); object-fit: cover; width: 100%; }
.va-single-content { font-size: 1.1rem; margin-inline: auto; max-width: 820px; }
.va-single-content h2 { font-size: clamp(2.1rem,4vw,3.5rem); margin-top: 1.8em; }
.va-pagination { margin-top: 50px; }
.va-pagination .page-numbers { border: 1px solid var(--va-line); display: inline-grid; height: 42px; margin-right: 6px; place-items: center; text-decoration: none; width: 42px; }

/* Quote */
.va-quote-grid { display: grid; gap: 70px; grid-template-columns: .82fr 1.18fr; }
.va-quote-brief { background: var(--va-navy); color: #fff; padding: clamp(30px,4vw,55px); }
.va-quote-brief h2 { color: #fff; font-size: clamp(2.1rem,3.8vw,3.6rem); }
.va-quote-list { list-style: none; padding: 0; }
.va-quote-list li { border-top: 1px solid rgba(255,255,255,.18); padding: 14px 0; }
.va-form-slot { border: 2px dashed var(--va-line); min-height: 400px; padding: clamp(30px,5vw,60px); }

/* Footer */
.va-footer { background: #0b222a; color: #b3c9ce; }
.va-footer-main { display: grid; gap: 55px; grid-template-columns: 1.35fr repeat(3,1fr); padding-block: 76px; }
.va-footer .va-brand { color: #fff; }
.va-footer h3 { color: #fff; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }
.va-footer p { font-size: .9rem; max-width: 430px; }
.va-footer ul { list-style: none; margin: 0; padding: 0; }
.va-footer li + li { margin-top: 10px; }
.va-footer a { color: #c6d8dc; font-size: .89rem; text-decoration: none; }
.va-footer a:hover { color: var(--va-mint); }
.va-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); display: flex; font-size: .75rem; justify-content: space-between; padding-block: 22px; }

@media (max-width:1100px) {
  .va-header-inner { grid-template-columns: auto 1fr; }
  .va-header-cta { display: none; }
  .va-hero::after { inset: 55% 0 0; }
  .va-hero-grid { grid-template-columns: 1fr; }
  .va-hero-visual { padding-top: 55px; }
  .va-system-card { grid-template-columns: 1fr; }
  .va-application-grid { grid-template-columns: repeat(2,1fr); }
  .va-footer-main { grid-template-columns: 1.4fr repeat(2,1fr); }
  .va-footer-main > div:last-child { grid-column: 2; }
}

@media (max-width:782px) {
  .va-wrap { width: calc(100% - 28px); }
  .va-site-header .wp-block-navigation { justify-self: end; }
  .va-site-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--va-navy); color: #fff; padding: 30px; }
  .va-site-header .is-menu-open .wp-block-navigation-item__content { color: #fff; font-size: 1.45rem; }
  .va-hero h1 { font-size: clamp(3.3rem,17vw,5.8rem); }
  .va-section-head,.va-system-grid,.va-process-grid,.va-richmond-grid,.va-page-grid,.va-quote-grid,.va-cta-grid { grid-template-columns: 1fr; }
  .va-step { border-bottom: 1px solid var(--va-line); border-right: 0; min-height: 0; }
  .va-step h3 { margin-top: 34px; }
  .va-feature-grid,.va-resources .wp-block-post-template,.va-post-grid { grid-template-columns: 1fr; }
  .va-skyline { margin-inline: auto; max-width: 520px; }
  .va-side-card { position: static; }
  .va-footer-main { grid-template-columns: 1fr 1fr; }
  .va-footer-main > div:first-child { grid-column: 1/-1; }
  .va-footer-main > div:last-child { grid-column: auto; }
}

@media (max-width:520px) {
  .va-brand__place { display: none; }
  .va-application-grid,.va-richmond-points,.va-footer-main { grid-template-columns: 1fr; }
  .va-footer-main > div:last-child { grid-column: auto; }
  .va-footer-bottom { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

@media print { .va-site-header,.va-footer,.va-cta,.va-side-card { display:none!important; } }