/*
Theme Name: Cook Properties
Author: Sarah Martin
Author URI: https://sarahm.codes
Description: Custom WordPress theme for Cook Properties — New York's largest owner and operator of manufactured home communities. Built with ACF page templates matching the Cook Properties Figma design system.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: cook-properties
*/

/* =========================================================
   1. DESIGN TOKENS
========================================================= */
:root {
  /* Brand colors */
  --cook-blue: #1678ff;
  /* --cook-blue: #2b6dbe; */
  --cook-blue-dark: #2b6dbe;
  --cook-orange: #ff8a00;
  --cook-blue-light: #eaf2ff;
  --cook-orange: #ff8a2b;
  --cook-orange-light: #fff1e6;
  --cook-black: #1a1a1a;
  --cook-white: #ffffff;

  /* Neutrals */
  --cook-gray-50: #f9fafb;
  --cook-gray-100: #f3f4f6;
  --cook-gray-200: #e5e7eb;
  --cook-gray-300: #d1d5db;
  --cook-gray-400: #99a1af;
  --cook-gray-500: #6b7280;
  --cook-gray-700: #374151;
  --cook-gray-800: #1e2939;
  --cook-gray-900: #101828;

  /* Semantic */
  --cook-text: var(--cook-black);
  --cook-text-muted: var(--cook-gray-500);
  --cook-border: var(--cook-gray-200);
  --cook-bg: var(--cook-white);
  --cook-bg-muted: var(--cook-gray-50);
  --cook-bg-dark: var(--cook-black);

  /* Typography */
  --cook-font:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --cook-fs-xs: 0.75rem;
  --cook-fs-sm: 0.875rem;
  --cook-fs-base: 1rem;
  --cook-fs-lg: 1.125rem;
  --cook-fs-xl: 1.25rem;
  --cook-fs-2xl: 1.5rem;
  --cook-fs-3xl: 1.875rem;
  --cook-fs-4xl: 2.25rem;
  --cook-fs-5xl: 3rem;

  /* Radii */
  --cook-radius-sm: 8px;
  --cook-radius-md: 12px;
  --cook-radius-lg: 16px;
  --cook-radius-xl: 24px;
  --cook-radius-full: 9999px;

  /* Shadows */
  --cook-shadow-sm:
    0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  --cook-shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --cook-shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --cook-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Layout */
  --cook-container-max: 1280px;
  --cook-container-narrow: 800px;
  --cook-gap: 80px;
  --cook-header-height: 80px;
}

/* =========================================================
   2. RESET & BASE
========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--cook-font);
  font-size: var(--cook-fs-base);
  line-height: 1.5;
  color: var(--cook-text);
  background: var(--cook-bg);
  -webkit-font-smoothing: antialiased;
}
img,
svg {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
h1,
h2,
h3,
h4,
p,
dl,
dd {
  margin: 0;
}
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.skip-link {
  position: fixed;
  top: -100px;
  left: 0;
  z-index: 10000;
  background: var(--cook-blue);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
  position: fixed;
}

/* =========================================================
   3. LAYOUT UTILITIES
========================================================= */
.cook-container {
  max-width: var(--cook-container-max);
  margin-inline: auto;
  padding-inline: 32px;
}
.cook-container--narrow {
  max-width: var(--cook-container-narrow);
}
.cook-text-center {
  text-align: center;
}

.cook-section {
  padding-block: 80px;
}
.cook-section--tight {
  padding-block: 48px;
}
.cook-section--muted {
  background: var(--cook-bg-muted);
}
.cook-section--dark {
  background: var(--cook-blue);
  color: #fff;
}
.cook-section--cta {
  background: var(--cook-blue);
  color: #fff;
}

.cook-section__header {
  margin-bottom: 48px;
}
.cook-section__header--center {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: 48px;
}
.cook-section__header--center p {
  color: var(--cook-text-muted);
  margin-top: 12px;
  font-size: var(--cook-fs-lg);
}
.cook-section--dark .cook-section__header--center p,
.cook-section--dark .cook-section__header p {
  color: var(--cook-gray-300);
}
.cook-section__header--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cook-section__footer {
  margin-top: 48px;
  text-align: center;
}

.cook-grid {
  display: grid;
  gap: 32px;
}
.cook-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.cook-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.cook-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
.cook-grid--5 {
  grid-template-columns: repeat(5, 1fr);
}

.cook-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cook-gap);
  align-items: center;
}
.cook-split--reverse {
  direction: rtl;
}
.cook-split--reverse > * {
  direction: ltr;
}

.cook-block {
  margin-top: 48px;
}
.cook-block:first-child {
  margin-top: 0;
}

.marg-top {
  margin-top: 20px;
}
/* FIXED 2026-09-21 per the site owner ("Some pages need fixed on mobile
   ... I think the hero content is pushing it"): this was a hardcoded
   `width: 600px` (not max-width), so on any phone narrower than 600px the
   hero wrapper refused to shrink and forced the whole page into
   horizontal scroll. Used in 17 places across 11 templates (every hero
   copy block, e.g. archive-community.php's h1/lead, single.php's
   breadcrumb+title wrapper), so this one rule was a site-wide mobile
   overflow bug, not just the couple of pages it was noticed on. */
.max-600 {
  max-width: 600px;
  width: 100%;
}
.no-pad {
  padding: 0 !important;
}
/* =========================================================
   4. TYPOGRAPHY
========================================================= */
.cook-h1,
.cook-hero__heading {
  font-size: var(--cook-fs-5xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.cook-h2,
.cook-section__header h2 {
  font-size: var(--cook-fs-4xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.cook-h2 {
  margin-bottom: 24px;
}
.cook-h2--center {
  text-align: center;
  margin-bottom: 48px;
}
h3 {
  font-size: var(--cook-fs-xl);
  font-weight: 600;
}
.cook-lead {
  font-size: var(--cook-fs-xl);
  color: var(--cook-text-muted);
  margin: 16px 0;
}
.cook-eyebrow {
  color: var(--cook-blue);
}
.cook-eyebrow,
.cook-eyebrow-pill {
  display: inline-block;
  font-size: var(--cook-fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.cook-eyebrow--light {
  color: #fff;
}
.cook-eyebrow-pill {
  background: rgba(255, 122, 47, 0.1);
  color: var(--cook-orange);
  padding: 6px 16px;
  border-radius: var(--cook-radius-full);
  text-transform: none;
  letter-spacing: normal;
}
.cook-prose p {
  color: var(--cook-text-muted);
  margin-top: 16px;
  font-size: var(--cook-fs-lg);
}
.cook-prose h2 {
  margin-bottom: 0;
}
.cook-prose--light p {
  color: #fff;
}
.cook-prose--light h2 {
  color: #fff;
}
/* ADDED 2026-09-19 for Becoming a Resident (template-becoming-a-resident.php),
   which is the first place on the site putting real <h3>/<h4>/<ul> markup
   from a WYSIWYG field through .cook-prose. Needed because of the global
   reset up top ("ul, ol { list-style: none; padding: 0; margin: 0; }") --
   without this, admin-authored bullet lists inside any WYSIWYG field
   render as plain unindented lines with no bullets at all, same problem
   .cook-post-content already solves for blog posts. */
.cook-prose h3 {
  font-size: var(--cook-fs-2xl);
  margin-top: 8px;
  margin-bottom: 0;
}
.cook-prose h4 {
  font-size: var(--cook-fs-lg);
  margin-top: 28px;
  margin-bottom: 0;
}
.cook-prose ul,
.cook-prose ol {
  margin-top: 12px;
  padding-left: 22px;
}
.cook-prose ul {
  list-style: disc;
}
.cook-prose ol {
  list-style: decimal;
}
.cook-prose li {
  color: var(--cook-text-muted);
  font-size: var(--cook-fs-lg);
}
.cook-prose li + li {
  margin-top: 8px;
}
.cook-prose strong {
  color: var(--cook-text);
}
/* Numbered steps ("1. Apply to Live in the Community", etc.) -- each h4
   step heading gets an accent bar and a divider from the step above it,
   so the 3-step process reads as distinct steps instead of one unbroken
   wall of text. Scoped to this modifier (added on the process content in
   template-becoming-a-resident.php) rather than all of .cook-prose h4,
   since other WYSIWYG content elsewhere may use h4 for a plain subhead
   with no step numbering implied. */
/* REWRITTEN 2026-09-19: the process content moved from one WYSIWYG blob
   (h4 step headings inside a wysiwyg field) to a real ACF repeater --
   see template-becoming-a-resident.php. Each step is now its own
   .cook-hbp-step wrapper instead of a bare h4, so this restyles that
   structure directly rather than styling h4 by itself. */
/* ADDED 2026-09-18: .cook-hbp-step (singular, per item) had spacing, but
   the wrapping .cook-hbp-steps container itself had none, so it sat flush
   against the intro paragraph/heading above it. */
.cook-hbp-steps {
  margin-top: 20px;
}
.cook-hbp-step {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--cook-border);
}
.cook-hbp-step:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.cook-hbp-step h3 {
  font-size: var(--cook-fs-lg);
  font-weight: 700;
  color: var(--cook-blue-dark);
  border-left: 3px solid var(--cook-blue);
  padding-left: 14px;
  margin: 0;
}
.cook-hbp-step ul {
  margin-top: 12px;
  padding-left: 22px;
  list-style: disc;
}
.cook-hbp-step li {
  color: var(--cook-text-muted);
  font-size: var(--cook-fs-base);
}
.cook-hbp-step li + li {
  margin-top: 6px;
}
/* Monthly Rent Calculator -- the formula line and the New/Pre-Owned Homes
   payment ranges (calculator_ranges repeater), both new in the same
   rewrite as the steps above. */
.cook-hbp-formula {
  font-size: var(--cook-fs-xl);
  font-weight: 800;
  color: var(--cook-blue-dark);
  background: var(--cook-blue-light);
  padding: 16px 20px;
  border-radius: var(--cook-radius-md);
  margin-top: 16px;
}
.cook-hbp-ranges {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.cook-hbp-range {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-md);
}
.cook-hbp-range__label {
  font-weight: 600;
  color: var(--cook-text);
}
.cook-hbp-range__value {
  color: var(--cook-blue-dark);
  font-weight: 700;
  white-space: nowrap;
}
.cook-fine-print {
  font-size: var(--cook-fs-sm);
  color: var(--cook-text-muted);
}
.cook-link {
  color: var(--cook-blue);
  font-weight: 600;
  font-size: 15px;
}
.cook-link--white {
  color: #fff;
}
.cook-invest-conversation .cook-container--narrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.cook-invest-conversation p {
  color: var(--cook-text-muted);
  margin: 0;
}
.cook-invest-conversation .cook-btn {
  margin-top: 12px;
}
.cook-invest-conversation a:not(.cook-btn) {
  color: var(--cook-blue);
  font-weight: 600;
}
.cook-invest-conversation__phone {
  color: var(--cook-blue);
  font-weight: 600;
}
.cook-link:hover {
  text-decoration: underline;
}
/* =========================================================
   5. BUTTONS
========================================================= */
.cook-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--cook-radius-full);
  font-weight: 600;
  font-size: var(--cook-fs-sm);
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
  white-space: nowrap;
}
.cook-btn--block {
  width: 100%;
}
.cook-btn--primary {
  background: var(--cook-blue);
  color: #fff;
  box-shadow: var(--cook-shadow-sm);
}
.cook-btn--primary:hover {
  background: var(--cook-blue-dark);
}
.cook-btn--outline {
  background: transparent;
  color: var(--cook-blue);
  border: 1px solid var(--cook-blue);
}
.cook-btn--outline:hover {
  background: var(--cook-blue-light);
}
.cook-btn--white {
  background: #fff;
  color: var(--cook-blue);
}
.cook-btn--white:hover {
  background: var(--cook-gray-100);
}
.cook-btn--outline-white {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.6);
}
.cook-btn--outline-white:hover {
  background: rgba(255, 255, 255, 0.1);
}
.cook-btn-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.cook-btn-group--center {
  justify-content: center;
}
.cook-btn-group--stacked {
  flex-direction: column;
}

/* =========================================================
   6. HEADER / NAV
========================================================= */
.cook-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--cook-border);
}
.cook-header__shadow {
  position: absolute;
  inset: 0 0 -1px 0;
  box-shadow: var(--cook-shadow-sm);
  pointer-events: none;
}
.cook-header__inner {
  position: relative;
  max-width: var(--cook-container-max);
  margin-inline: auto;
  padding-inline: 32px;
  height: var(--cook-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.cook-header__logo img {
  height: 56px;
  width: auto;
}
.cook-nav {
  display: flex;
  gap: 32px;
  align-items: center;
}
.cook-nav__item {
  position: relative;
}
.cook-nav__item--dropdown:hover .cook-nav__dropdown,
.cook-nav__item--dropdown:focus-within .cook-nav__dropdown {
  display: flex;
}
.cook-nav__item--dropdown:hover .cook-nav__link,
.cook-nav__item--dropdown:focus-within .cook-nav__link {
  color: var(--cook-blue);
}
.cook-nav__link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  font-size: var(--cook-fs-sm);
  color: var(--cook-black);
}
.cook-nav__chevron {
  transition: transform 0.15s ease;
}
.cook-nav__item--dropdown:hover .cook-nav__chevron {
  transform: rotate(180deg);
}
.cook-nav__dropdown {
  display: none;
  flex-direction: column;
  position: absolute;
  /* Flush against the nav item (no gap) so the cursor never leaves the
     hoverable area on its way down to the menu. The 12px of breathing
     room comes from margin-top on the box itself further below. */
  top: 100%;
  left: 0;
  width: 224px;
  padding-top: 12px;
  z-index: 10;
}
.cook-nav__dropdown-inner {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-lg);
  box-shadow: var(--cook-shadow-xl);
  padding: 8px 4px;
}
.cook-nav__item--dropdown.is-open .cook-nav__dropdown {
  display: flex;
}
.cook-nav__dropdown a {
  padding: 10px 16px;
  border-radius: var(--cook-radius-sm);
  font-size: var(--cook-fs-sm);
}
.cook-nav__dropdown a:hover {
  background: var(--cook-bg-muted);
}
.cook-header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cook-header__phone {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--cook-gray-500);
  font-size: var(--cook-fs-sm);
}
.cook-header__menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.cook-header__menu-toggle span {
  width: 22px;
  height: 2px;
  background: var(--cook-black);
  border-radius: 2px;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

/* =========================================================
   7. FOOTER
========================================================= */
.cook-footer {
  background: var(--cook-black);
  color: var(--cook-gray-400);
  padding-block: 80px;
}
.cook-footer__inner {
  max-width: var(--cook-container-max);
  margin-inline: auto;
  padding-inline: 64px;
}
.cook-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 64px;
}
/* FIXED 2026-09-22 per the site owner ("footer messed up on mobile"):
   grid items default to min-width: auto, which means a track can never
   shrink below its content's min-content width -- and the brand column's
   "Contact@CookProperties.com" (one unbreakable string, no spaces to wrap
   at) has a min-content width of ~230px. At the 2-column mobile layout
   (see the 780px media query below) that alone forced the first column
   to ~262px against a ~258px-wide grid, blowing the whole footer out
   past the edge of the screen instead of the equal 1fr/1fr split the CSS
   asked for -- confirmed via computed grid-template-columns showing
   261.7px/114.9px instead of an even split at a 386px-wide viewport.
   min-width: 0 lets the tracks actually honor the fr sizing; the
   overflow-wrap rule on .cook-footer__contact below is the other half --
   without it, that same email address would just overflow its now-
   correctly-narrow column instead of wrapping to a second line. */
.cook-footer__brand,
.cook-footer__col {
  min-width: 0;
}
.cook-footer__logo img {
  height: 48px;
  width: auto;
  margin-bottom: 24px;
}
.cook-footer__tagline {
  font-size: var(--cook-fs-base);
  line-height: 1.6;
}
.cook-footer__contact {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-wrap: break-word;
}
.cook-footer__contact li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.cook-footer__contact svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.cook-footer__col h3 {
  color: #fff;
  font-size: var(--cook-fs-lg);
  margin-bottom: 20px;
}
.cook-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cook-footer__col a:hover {
  color: #fff;
}
.cook-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 40px;
  border-top: 1px solid var(--cook-gray-800);
  font-size: var(--cook-fs-sm);
}
.cook-footer__legal {
  display: flex;
  gap: 32px;
}
.cook-footer__legal a:hover {
  color: #fff;
}

/* =========================================================
   8. HERO
========================================================= */
.cook-hero {
  position: relative;
  color: var(--cook-black);
  padding-block: 120px 80px;
  overflow: hidden;
}
.cook-hero--sub {
  background: var(--cook-black);
  padding-block: 80px 64px;
  color: #fff;
}
.cook-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.cook-hero__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    #fff 100%
  );
  z-index: 1;
}
.cook-hero__content {
  position: relative;
  z-index: 2;
  max-width: 720px;
}
.cook-hero--sub .cook-hero__content {
  max-width: 800px;
}
.cook-hero__subheading {
  font-size: var(--cook-fs-xl);
  margin-top: 16px;
  color: var(--cook-gray-500);
}
.cook-hero--home .cook-hero__content {
  padding-block: 40px 0;
  text-align: center;
}

/* Search card */
.cook-search-card {
  margin-top: 40px;
  padding: 8px;
  max-width: 900px;
  color: var(--cook-text);
}
.cook-search-card__tabs {
  display: flex;
  gap: 4px;
  padding: 8px;
}
.cook-search-card__tab {
  padding: 10px 20px;
  border-radius: var(--cook-radius-full);
  font-weight: 600;
  font-size: var(--cook-fs-sm);
  color: var(--cook-text-muted);
}
.cook-search-card__tab.is-active {
  background: var(--cook-blue-light);
  color: var(--cook-blue);
}
.cook-search-card__form {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 16px;
}
.cook-search-card__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cook-search-card__field--grow {
  flex: 1 1 240px;
}
.cook-search-card__field label {
  font-size: var(--cook-fs-sm);
  font-weight: 500;
}
.cook-search-card__field input,
.cook-search-card__field select {
  padding: 10px 14px;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-md);
  min-width: 140px;
}
/* ADDED 2026-09-21: Radius has no meaning without a ZIP to measure from,
   so it's disabled until one is entered (see the init in
   assets/js/main.js), with a tooltip nudging the visitor to fill in ZIP
   first if they try to open/change it while locked. */
.cook-search-card__radius-wrap {
  position: relative;
}
.cook-search-card__radius-wrap select:disabled {
  background: var(--cook-gray-100);
  color: var(--cook-text-muted);
  cursor: not-allowed;
}
.cook-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--cook-text);
  color: #fff;
  font-size: var(--cook-fs-xs);
  font-weight: 500;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: var(--cook-radius-sm);
  box-shadow: var(--cook-shadow-md);
  z-index: 5;
  pointer-events: none;
}
.cook-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--cook-text);
}
.cook-tooltip[hidden] {
  display: none;
}
.cook-input-icon {
  position: relative;
}
.cook-input-icon input {
  width: 100%;
  padding-right: 40px;
}
.cook-input-icon svg {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cook-gray-400);
}
.cook-search-card__submit {
  align-self: flex-end;
  padding: 12px 32px;
}
.cook-search-card > .cook-link {
  margin: 8px 16px 16px;
  display: inline-block;
}

/* =========================================================
   9. CARDS (generic)
========================================================= */
.cook-card {
  background: #fff;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-lg);
  box-shadow: var(--cook-shadow-sm);
  text-align: left;
}
.cook-section--dark .cook-card,
.cook-section--cta .cook-card {
  color: var(--cook-text);
}

/* Home listing card */
.cook-home-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* ADDED 2026-09-22 per the site owner ("need to be same height, content
     space-between"): CSS Grid already stretches grid items to the row's
     tallest card by default, but this height:100% makes that explicit/
     robust rather than relying on the implicit default. The real visual
     fix is on .cook-home-card__body below -- without it, a shorter card's
     content just left dead space under the button instead of using it. */
  height: 100%;
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.cook-home-card:hover {
  box-shadow: var(--cook-shadow-lg);
  transform: translateY(-2px);
}
.cook-home-card__media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.cook-home-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cook-home-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* ADDED 2026-09-22: fills the remaining height of the (now equal-height)
     card and spaces its content out instead of clumping at the top with
     empty space left under the "View Home" button on shorter cards. */
  flex: 1;
  justify-content: space-between;
}
.cook-home-card__price {
  font-size: var(--cook-fs-2xl);
  font-weight: 800;
  color: var(--cook-blue);
}
/* Added 2026-09-03: the sale price shown alongside the rent amount for a
   for-rent-and-for-sale manufactured home (see card-home.php / the
   is_apartment ACF field). Smaller and unbolded so it reads as a
   secondary detail, not competing with the primary (rent) price. */
.cook-home-card__price-alt {
  font-size: var(--cook-fs-sm);
  font-weight: 600;
  color: var(--cook-gray-500);
}
.cook-home-card__title {
  font-size: var(--cook-fs-lg);
}
.cook-home-card__location {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--cook-text-muted);
  font-size: var(--cook-fs-sm);
}
.cook-home-card__meta {
  display: flex;
  gap: 16px;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid var(--cook-border);
  font-size: var(--cook-fs-sm);
  color: var(--cook-text-muted);
  flex-wrap: wrap;
}
.cook-home-card__meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.cook-home-card .cook-btn {
  margin-top: 8px;
}

/* Community card */
.cook-section__heading {
  margin-bottom: 20px;
}
.cook-community-card {
  overflow: hidden;
}
.cook-community-card__media {
  aspect-ratio: 16/10;
  overflow: hidden;
}
.cook-community-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cook-community-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cook-community-card__location,
.cook-community-card__count {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--cook-text-muted);
  font-size: var(--cook-fs-sm);
}
.cook-community-card .cook-btn {
  margin-top: 12px;
}

/* Badges */
.cook-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--cook-fs-xs);
  font-weight: 600;
  background: var(--cook-gray-100);
  color: var(--cook-gray-700);
  padding: 4px 12px;
  border-radius: var(--cook-radius-full);
  width: fit-content;
  background: var(--cook-orange-light);
  color: var(--cook-orange);
  margin-bottom: 20px;
}
.cook-badge--overlay {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #fff;
  box-shadow: var(--cook-shadow-sm);
}
/* Wrapper for multiple stacked pills (Status + Additional Tags), added
   2026-09-02. Replaces a single absolutely-positioned .cook-badge--overlay
   with a positioned flex-wrap group; the badges inside it are plain
   .cook-badge elements restyled to look like the old overlay pill. */
.cook-badge-group--overlay {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100% - 32px);
}
.cook-badge-group--overlay .cook-badge {
  background: #fff;
  box-shadow: var(--cook-shadow-sm);
  margin-bottom: 0;
}

/* Feature / step blocks */
.cook-feature {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: 32px;
}
.cook-feature__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cook-blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cook-feature__icon img {
  width: 22px;
  height: 22px;
}
.cook-why-cook .cook-feature:last-child .cook-feature__icon {
  background: var(--cook-orange-light);
}
/* Careers page ("Why Work for Cook") only — solid dark circle with the
   icon recolored to white via filter (icons are uploaded as typically
   dark single-tone SVG/PNG files, so `color` has no effect on <img>). */
.cook-why-work .cook-feature__icon {
  background: var(--cook-blue-dark);
}
.cook-why-work .cook-feature__icon img {
  filter: brightness(0) invert(1);
}
.cook-feature p,
.cook-step p {
  color: var(--cook-text-muted);
}
.cook-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  align-items: center;
}
.cook-step__number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--cook-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--cook-fs-lg);
  box-shadow: var(--cook-shadow-md);
}
.cook-feature-card {
  display: flex;
  gap: 16px;
  padding: 24px;
  align-items: flex-start;
}
.cook-feature-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--cook-blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cook-feature-card__icon img {
  width: 24px;
  height: 24px;
}
.cook-feature-card h3 {
  margin-bottom: 4px;
}
.cook-feature-card p {
  color: var(--cook-text-muted);
  font-size: var(--cook-fs-sm);
}

/* Stats */
.cook-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.cook-stat-grid--4up {
  grid-template-columns: repeat(4, 1fr);
}
.cook-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--cook-radius-lg);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  text-align: center;
}
.cook-stat strong {
  font-size: var(--cook-fs-3xl);
  font-weight: 800;
  color: #fff;
}
.cook-section--dark .cook-stat span,
.cook-hero .cook-stat span {
  color: #fff;
  font-size: var(--cook-fs-sm);
}

/* Becoming a Resident page -- ADDED 2026-09-18. Icon + mini label + big
   value card for the "Right Statistics" repeater next to the Financing
   Information text (see template-becoming-a-resident.php). Deliberately
   its own class set rather than reusing .cook-stat above -- that one is
   styled for a dark/glass hero background (white text on translucent
   white), which disappears on this page's plain light section. */
.cook-hbp-stat {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
}
.cook-hbp-stat__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
.cook-hbp-stat__mini {
  display: block;
  font-size: var(--cook-fs-sm);
  color: var(--cook-text-muted);
}
.cook-hbp-stat__value {
  display: block;
  font-size: var(--cook-fs-xl);
  font-weight: 800;
  color: var(--cook-blue-dark);
}

/* Opportunity cards */
.cook-opportunity-card {
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.cook-opportunity-card .cook-badge {
  position: absolute;
  top: 20px;
  right: 20px;
}

/* Rounded images */
.cook-rounded-img {
  width: 100%;
  border-radius: var(--cook-radius-xl);
  object-fit: cover;
}
.cook-rounded-img--wide {
  max-height: 480px;
}

/* CTA */
.cook-cta--center {
  text-align: center;
  max-width: 700px;
  margin-inline: auto;
}
.cook-cta--center p {
  margin-top: 16px;
  font-size: var(--cook-fs-lg);
  color: rgba(255, 255, 255, 0.9);
}
.cook-cta-inline {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

/* =========================================================
   10. LISTINGS / FILTERS (Find Your Home)
========================================================= */
.cook-listing-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}
.cook-listing-toolbar select {
  padding: 8px 12px;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-md);
}
.cook-listing-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items: start;
}
.cook-listing-layout--reverse {
  grid-template-columns: 1fr 320px;
}
.cook-filters {
  padding: 24px;
  position: sticky;
  top: calc(var(--cook-header-height) + 24px);
  /* FIXED 2026-09-02: without a capped height + its own scrollbar, a
     sidebar taller than the viewport just sticks in place with its
     bottom half unreachable -- the page itself has to be scrolled to
     see it, which reads as "stuck". Now it scrolls internally instead. */
  max-height: calc(100vh - var(--cook-header-height) - 48px);
  overflow-y: auto;
}
.cook-filters__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.cook-filters__field {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cook-filters__field label:first-child {
  font-weight: 600;
  font-size: var(--cook-fs-sm);
}
.cook-filters__range {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cook-filters__range input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-sm);
}
/* Status/Home Type dropdowns and the City,State/Community fields --
   ADDED 2026-09-02 so every text input and select in the filter sidebar
   matches the Price Range inputs' styling instead of falling back to
   bare browser defaults. */
.cook-filters__field input[type="text"],
.cook-filters__field select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-sm);
  font-size: var(--cook-fs-sm);
  background: #fff;
  color: var(--cook-text);
}
.cook-filters__pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cook-pill {
  padding: 6px 14px;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-full);
  font-size: var(--cook-fs-sm);
}
.cook-pill.is-active,
.cook-pill:hover {
  border-color: var(--cook-blue);
  color: var(--cook-blue);
  background: var(--cook-blue-light);
}
.cook-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--cook-fs-sm);
  margin-bottom: 8px;
}
.cook-browse-by-community {
  margin-top: 32px;
  padding: 32px;
  text-align: center;
  /* FIXED 2026-09-02: the theme's global reset zeroes <p> margins (see
     "p, ... { margin: 0; }" in section 1), so without an explicit gap the
     "View All Communities" button sat flush against the paragraph above
     it. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.cook-browse-by-community p {
  margin-bottom: 15px;
}

/* Community archive top filter bar (state / name / homes-available) */
.cook-community-filters {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px;
  margin-bottom: 32px;
}
.cook-community-filters .cook-filters__field {
  margin-bottom: 0;
  min-width: 160px;
}
.cook-community-filters .cook-filters__field--grow {
  flex: 1 1 240px;
}
.cook-community-filters .cook-filters__field--checkbox {
  flex-direction: row;
  align-items: center;
}
.cook-community-filters .cook-filters__field--checkbox .cook-checkbox {
  margin-bottom: 0;
}
.cook-community-filters input[type="text"],
.cook-community-filters select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-md);
  font-size: var(--cook-fs-sm);
}

.cook-community-grid {
  margin-bottom: 8px;
}

.cook-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
}
.cook-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-full);
  padding-inline: 12px;
  font-weight: 600;
  font-size: var(--cook-fs-sm);
  transition: all 0.15s ease;
}
.cook-pagination a.page-numbers:hover {
  border-color: var(--cook-blue);
  color: var(--cook-blue);
  background: var(--cook-blue-light);
}
.cook-pagination .page-numbers.dots {
  border: none;
  min-width: auto;
}
.cook-pagination .page-numbers.current {
  background: var(--cook-blue);
  color: #fff;
  border-color: var(--cook-blue);
}
.cook-pagination .page-numbers.prev,
.cook-pagination .page-numbers.next {
  padding-inline: 20px;
  font-weight: 500;
}

/* =========================================================
   11. BREADCRUMB
========================================================= */
.cook-breadcrumb {
  display: flex;
  /* ADDED 2026-09-21 alongside the .max-600 mobile fix: no wrap meant a
     long current-page title (e.g. a blog post breadcrumb ending in
     "Homes for Sale in Lehigh Valley Estates") refused to break onto a
     2nd line and pushed the whole breadcrumb, and the page, wider than
     the screen on mobile. */
  flex-wrap: wrap;
  row-gap: 4px;
  column-gap: 8px;
  align-items: center;
  font-size: var(--cook-fs-sm);
  color: var(--cook-text-muted);
  margin-bottom: 24px;
}
.cook-breadcrumb a:hover {
  color: var(--cook-blue);
}
.cook-breadcrumb-bar {
  padding-block: 24px 0;
}

/* =========================================================
   12. COMMUNITY DETAIL
========================================================= */
.cook-community-hero {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
  align-items: start;
}
.cook-community-hero__address {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cook-text-muted);
  margin-top: 16px;
}
.cook-community-hero__desc {
  color: var(--cook-text-muted);
  font-size: var(--cook-fs-lg);
  margin-top: 16px;
}
.cook-community-facts {
  padding: 32px;
}
.cook-community-facts h3 {
  margin-bottom: 20px;
}
.cook-community-facts__row {
  display: flex;
  justify-content: space-between;
  padding-block: 12px;
  border-top: 1px solid var(--cook-border);
  font-size: var(--cook-fs-sm);
  gap: 12px;
}
.cook-community-facts__row dt {
  color: var(--cook-text-muted);
}
.cook-community-facts__row dd {
  font-weight: bold;
  text-align: right;
}
.cook-community-facts__agent {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--cook-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cook-community-facts__agent span {
  display: block;
  font-size: var(--cook-fs-xs);
  color: var(--cook-text-muted);
}
.cook-community-facts__agent a {
  color: var(--cook-blue);
  font-size: var(--cook-fs-sm);
  display: flex;
  align-items: center;
  gap: 6px;
}

.cook-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.cook-gallery img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--cook-radius-lg);
}
.cook-gallery__hero {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
}

.cook-amenity {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
}
.cook-amenity__icon {
  width: 40px;
  height: 40px;
}

.cook-form-card {
  padding: 40px;
}
.cook-form-card h3,
.cook-form-card h2 {
  margin-bottom: 4px;
}
.cook-form-card > p {
  color: var(--cook-text-muted);
  margin-bottom: 24px;
}

/* =========================================================
   13. FORMS
========================================================= */
.cook-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
}
.cook-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.cook-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cook-form__field label {
  font-weight: 500;
  font-size: var(--cook-fs-sm);
}
.cook-form input,
.cook-form select,
.cook-form textarea {
  padding: 12px 16px;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-md);
  width: 100%;
}
.cook-form textarea {
  resize: vertical;
}
.cook-form__consent {
  display: flex;
  gap: 10px;
  font-size: var(--cook-fs-xs);
  color: var(--cook-text-muted);
  align-items: flex-start;
}
.cook-form__consent input {
  width: auto;
  margin-top: 3px;
}

/* ---------------------------------------------------------
   13b. WPFORMS OVERRIDES
   Restyles the WPForms plugin's default markup to match
   .cook-form above wherever a WPForms form is embedded inside
   a .cook-form-card (e.g. the Contact page "Send Us a Message"
   card). WPForms ships its own stylesheet with higher-specificity
   selectors on some properties, so a handful of rules use
   !important to guarantee the override wins.
--------------------------------------------------------- */
.cook-form-card .wpforms-container {
  margin-top: 24px !important;
}
.cook-form-card .wpforms-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* FIXED 2026-09-22 per the site owner ("labels need spacing"): the
   28px gap above only separates .wpforms-form's own direct children
   (.wpforms-field-container and .wpforms-submit-container) -- the
   individual fields are nested one level deeper, inside
   .wpforms-field-container, which was plain "display: block" with no
   gap of its own, so every field sat flush against the next with zero
   space (confirmed via computed layout: each field's bottom edge
   exactly equaled the next field's top edge). Giving the container the
   same flex-column + gap fixes the spacing between every field label
   and the field above it. */
.cook-form-card .wpforms-field-container {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.cook-form-card .wpforms-field {
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* FIXED 2026-09-22 per the site owner: on /contact/ (and any other
   plain-page WPForms form), a split row like Email/Confirm Email --
   WPForms marks the wrapping .wpforms-field-row with its own field-size
   class (e.g. "wpforms-field-medium", added whenever the field is set
   to Medium size in the form builder) -- was rendering as two ~68px-wide
   boxes. Two stacked causes: (1) WPForms' own CSS gives
   ".wpforms-field-medium" a "max-width: 60%" rule meant for a single
   normal-width field, but it also matches here because WPForms puts
   that same size class on the .wpforms-field-row wrapper for a split
   field, capping the whole 2-column row well past unreadable; (2) this
   used to force the row to "display: grid", but WPForms' own
   ".wpforms-one-half { width: 50% }" on each column then resolved
   against that grid cell's width instead of the row, shrinking each
   column by half again -- and forcing grid also broke auto-placement,
   stacking the two columns into separate rows instead of side by side.
   Flexbox avoids both: the row is forced to full width and each column
   is an equal flex item, verified side-by-side on live /contact/. */
/* FIXED 2026-09-22 per the site owner ("Email field still had indented
   space on the front and end"): WPForms' own CSS puts a classic
   clearfix on .wpforms-field-row -- ::before/::after with content:""
   and display:table -- left over from its old float-based two-column
   layout. In a flex container (which this row now is), an empty
   content:"" pseudo-element still generates a real, if invisible, flex
   item -- so the row actually had FOUR flex items (::before, Email,
   Confirm Email, ::after), not two, and "gap: 20px" below was being
   applied between all four, not just the two real fields. That silently
   ate 40px (two extra phantom gaps: one before Email, one after Confirm
   Email) that should never have existed, which is exactly the
   "indented space on the front and end" -- confirmed by measuring the
   real fields at 213px wide with a 20px gap on each outer edge instead
   of 233px flush to both edges. Removing the pseudo-elements here drops
   the row back to its real two flex items. */
.cook-form-card .wpforms-field-row::before,
.cook-form-card .wpforms-field-row::after {
  content: none !important;
  display: none !important;
}
.cook-form-card .wpforms-field-row {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  gap: 20px;
  width: 100% !important;
  max-width: 100% !important;
}
.cook-form-card .wpforms-field-row .wpforms-field-row-block {
  flex: 1 1 0;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}
/* FIXED 2026-09-19 -- the "Email" field's Confirm Email row (and any
   Name field with First/Last split) collapsed to ~68px-wide boxes with
   the placeholder text wrapping weirdly. Cause: WPForms wraps a
   confirm/split field's two-column .wpforms-field-row in a plain
   <fieldset> with no width rules of its own, and the ".wpforms-field {
   display: flex }" rule two rules above turns that fieldset into a flex
   item -- flex items default to shrinking to their content's width
   instead of stretching to fill the row, so the grid inside had almost
   no room to work with. Forcing the fieldset (and its <legend>, which
   browsers otherwise render with their own quirky sizing) to behave
   like a normal full-width block fixes it. */
.cook-form-card .wpforms-field > fieldset {
  all: unset;
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.cook-form-card .wpforms-field > fieldset > legend.wpforms-field-label {
  display: block;
  width: 100%;
}
.cook-form-card .wpforms-field-label {
  font-weight: 500;
  font-size: var(--cook-fs-sm);
  color: var(--cook-text);
  margin-bottom: 4px !important;
  display: block;
}
.cook-form-card .wpforms-field-required {
  color: var(--cook-orange);
}
.cook-form-card .wpforms-field input[type="text"],
.cook-form-card .wpforms-field input[type="tel"],
.cook-form-card .wpforms-field input[type="email"],
.cook-form-card .wpforms-field select,
.cook-form-card .wpforms-field textarea {
  padding: 12px 16px !important;
  border: 1px solid var(--cook-border) !important;
  border-radius: var(--cook-radius-md) !important;
  width: 100% !important;
  max-width: 100% !important;
  font-family: var(--cook-font) !important;
  font-size: var(--cook-fs-sm) !important;
  color: var(--cook-text) !important;
  background: var(--cook-white) !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease;
}
/* FIXED 2026-09-22 per the site owner ("Name, phone, topic needs to be
   100% width"): WPForms' own CSS puts "max-width: 60% !important"
   directly on any <input>/<select> carrying its "wpforms-field-medium"
   size class (the default "Medium" field size), which the rule above
   never overrode since it never touched max-width -- so Name, Phone and
   Topic (all left at the default Medium size) were stuck at 60% width
   while Message (a textarea, which WPForms' 60% rule doesn't target)
   and the Email row (fixed separately above) rendered full width. Needs
   its own !important to outrank WPForms' !important. */
.cook-form-card .wpforms-field input.wpforms-field-medium,
.cook-form-card .wpforms-field select.wpforms-field-medium,
.cook-form-card .wpforms-field textarea.wpforms-field-medium {
  max-width: 100% !important;
}
.cook-form-card .wpforms-field input[type="text"]:focus,
.cook-form-card .wpforms-field input[type="tel"]:focus,
.cook-form-card .wpforms-field input[type="email"]:focus,
.cook-form-card .wpforms-field select:focus,
.cook-form-card .wpforms-field textarea:focus {
  border-color: var(--cook-blue) !important;
  outline: none;
}
.cook-form-card .wpforms-field textarea {
  resize: vertical;
}
.cook-form-card .wpforms-field-checkbox ul,
.cook-form-card .wpforms-field-radio ul {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
}
.cook-form-card .wpforms-field-checkbox li,
.cook-form-card .wpforms-field-radio li {
  display: flex !important;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--cook-fs-xs) !important;
  color: var(--cook-text-muted) !important;
}
.cook-form-card .wpforms-field-checkbox input,
.cook-form-card .wpforms-field-radio input {
  width: auto !important;
  margin-top: 3px !important;
}
.cook-form-card .wpforms-field-description {
  font-size: var(--cook-fs-xs);
  color: var(--cook-text-muted);
  margin-top: 4px;
}
.cook-form-card .wpforms-field-sublabel {
  display: block;
  margin-top: 6px;
  font-size: var(--cook-fs-xs);
  color: var(--cook-text-muted);
}
.cook-form-card .wpforms-error,
.cook-form-card .wpforms-field-description.wpforms-error {
  color: #d64545 !important;
  font-size: var(--cook-fs-xs) !important;
}
.cook-form-card .wpforms-field.wpforms-has-error input,
.cook-form-card .wpforms-field.wpforms-has-error select,
.cook-form-card .wpforms-field.wpforms-has-error textarea {
  border-color: #d64545 !important;
}
.cook-form-card .wpforms-submit-container {
  margin-top: 4px !important;
  text-align: left !important;
}
.cook-form-card .wpforms-submit-container button.wpforms-submit,
.cook-form-card button[type="submit"].wpforms-submit {
  display: block;
  width: 100%;
  padding: 14px 24px !important;
  border: none !important;
  border-radius: var(--cook-radius-md) !important;
  background: var(--cook-blue) !important;
  color: var(--cook-white) !important;
  font-weight: 600 !important;
  font-size: var(--cook-fs-sm) !important;
  box-shadow: var(--cook-shadow-sm);
  cursor: pointer;
  transition: background 0.15s ease;
}
.cook-form-card .wpforms-submit-container button.wpforms-submit:hover,
.cook-form-card button[type="submit"].wpforms-submit:hover {
  background: var(--cook-blue-dark) !important;
}
.cook-form-card .wpforms-confirmation-container-full {
  padding: 24px !important;
  border: 1px solid var(--cook-border) !important;
  border-radius: var(--cook-radius-md) !important;
  background: var(--cook-blue-light) !important;
  color: var(--cook-text) !important;
}

/* ---------------------------------------------------------
   13c. WPFORMS ON A PLAIN PAGE (no .cook-form-card wrapper)
   ADDED 2026-09-19 for Sell Your Park (template-default, page-id-2306):
   its WPForms block sits directly in .cook-page__content with no card
   wrapper around it, so none of the 13b rules above ever applied and it
   rendered in WPForms' own bare styling. This gives .wpforms-container
   itself the card treatment .cook-form-card provides on Contact, then
   repeats the same field/input/button rules from 13b scoped to this
   context instead. Kept as a separate block rather than merging the
   selectors above so a future 13b change can't silently affect a page
   nobody's looking at (and vice versa).
--------------------------------------------------------- */
.cook-page__content .wpforms-container {
  padding: 32px !important;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-lg);
  background: var(--cook-white);
  box-shadow: var(--cook-shadow-sm);
  margin-block: 24px !important;
}
.cook-page__content .wpforms-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* FIXED 2026-09-22 -- see the matching .cook-form-card rule above for
   why: same missing field-to-field spacing, same fix. */
.cook-page__content .wpforms-field-container {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.cook-page__content .wpforms-field {
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cook-page__content .wpforms-field > fieldset {
  all: unset;
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.cook-page__content .wpforms-field > fieldset > legend.wpforms-field-label {
  display: block;
  width: 100%;
}
/* FIXED 2026-09-22 per the site owner: on /contact/ (and any other
   plain-page WPForms form), a split row like Email/Confirm Email --
   WPForms marks the wrapping .wpforms-field-row with its own field-size
   class (e.g. "wpforms-field-medium", added whenever the field is set
   to Medium size in the form builder) -- was rendering as two ~68px-wide
   boxes. Cause: WPForms' own CSS gives ".wpforms-field-medium" a
   "max-width: 60%" rule meant for a single normal-width field, but it
   also matches here because WPForms puts that same size class on the
   .wpforms-field-row wrapper for a split field. That 60% cap was being
   applied on top of the grid layout below, shrinking the whole 2-column
   row (and therefore each column) well past unreadable. Forcing the row
   back to full width overrides it regardless of which size class
   WPForms adds. */
/* FIXED 2026-09-22 -- see the matching .cook-form-card comment above;
   same WPForms clearfix pseudo-element bug on any WPForms form embedded
   directly in page content instead of a .cook-form-card. */
.cook-page__content .wpforms-field-row::before,
.cook-page__content .wpforms-field-row::after {
  content: none !important;
  display: none !important;
}
.cook-page__content .wpforms-field-row {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  gap: 20px;
  width: 100% !important;
  max-width: 100% !important;
}
.cook-page__content .wpforms-field-row .wpforms-field-row-block {
  flex: 1 1 0;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}
.cook-page__content .wpforms-field-label {
  font-weight: 500;
  font-size: var(--cook-fs-sm);
  color: var(--cook-text);
  margin-bottom: 4px !important;
  display: block;
}
.cook-page__content .wpforms-field-required {
  color: var(--cook-orange);
}
.cook-page__content .wpforms-field input[type="text"],
.cook-page__content .wpforms-field input[type="tel"],
.cook-page__content .wpforms-field input[type="email"],
.cook-page__content .wpforms-field select,
.cook-page__content .wpforms-field textarea {
  padding: 12px 16px !important;
  border: 1px solid var(--cook-border) !important;
  border-radius: var(--cook-radius-md) !important;
  width: 100% !important;
  max-width: 100% !important;
  font-family: var(--cook-font) !important;
  font-size: var(--cook-fs-sm) !important;
  color: var(--cook-text) !important;
  background: var(--cook-white) !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease;
}
/* FIXED 2026-09-22 -- see the matching .cook-form-card rule above. */
.cook-page__content .wpforms-field input.wpforms-field-medium,
.cook-page__content .wpforms-field select.wpforms-field-medium,
.cook-page__content .wpforms-field textarea.wpforms-field-medium {
  max-width: 100% !important;
}
.cook-page__content .wpforms-field input[type="text"]:focus,
.cook-page__content .wpforms-field input[type="tel"]:focus,
.cook-page__content .wpforms-field input[type="email"]:focus,
.cook-page__content .wpforms-field select:focus,
.cook-page__content .wpforms-field textarea:focus {
  border-color: var(--cook-blue) !important;
  outline: none;
}
.cook-page__content .wpforms-field textarea {
  resize: vertical;
}
.cook-page__content .wpforms-field-checkbox ul,
.cook-page__content .wpforms-field-radio ul {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
}
.cook-page__content .wpforms-field-checkbox li,
.cook-page__content .wpforms-field-radio li {
  display: flex !important;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--cook-fs-xs) !important;
  color: var(--cook-text-muted) !important;
}
.cook-page__content .wpforms-field-checkbox input,
.cook-page__content .wpforms-field-radio input {
  width: auto !important;
  margin-top: 3px !important;
}
.cook-page__content .wpforms-field-description {
  font-size: var(--cook-fs-xs);
  color: var(--cook-text-muted);
  margin-top: 4px;
}
.cook-page__content .wpforms-field-sublabel {
  display: block;
  margin-top: 6px;
  font-size: var(--cook-fs-xs);
  color: var(--cook-text-muted);
}
.cook-page__content .wpforms-error,
.cook-page__content .wpforms-field-description.wpforms-error {
  color: #d64545 !important;
  font-size: var(--cook-fs-xs) !important;
}
.cook-page__content .wpforms-field.wpforms-has-error input,
.cook-page__content .wpforms-field.wpforms-has-error select,
.cook-page__content .wpforms-field.wpforms-has-error textarea {
  border-color: #d64545 !important;
}
.cook-page__content .wpforms-submit-container {
  margin-top: 4px !important;
  text-align: left !important;
}
.cook-page__content .wpforms-submit-container button.wpforms-submit,
.cook-page__content button[type="submit"].wpforms-submit {
  display: block;
  width: 100%;
  padding: 14px 24px !important;
  border: none !important;
  border-radius: var(--cook-radius-md) !important;
  background: var(--cook-blue) !important;
  color: var(--cook-white) !important;
  font-weight: 600 !important;
  font-size: var(--cook-fs-sm) !important;
  box-shadow: var(--cook-shadow-sm);
  cursor: pointer;
  transition: background 0.15s ease;
}
.cook-page__content .wpforms-submit-container button.wpforms-submit:hover,
.cook-page__content button[type="submit"].wpforms-submit:hover {
  background: var(--cook-blue-dark) !important;
}
.cook-page__content .wpforms-confirmation-container-full {
  padding: 24px !important;
  border: 1px solid var(--cook-border) !important;
  border-radius: var(--cook-radius-md) !important;
  background: var(--cook-blue-light) !important;
  color: var(--cook-text) !important;
}
/* WPForms' smart-phone field (used on Sell Your Park) renders a country
   flag/dial-code dropdown glued to the left edge of the input via its own
   plugin CSS -- reset just enough so it lines up with the rest of the
   restyled inputs above instead of looking like a leftover default. */
.cook-page__content .iti {
  width: 100%;
}
.cook-page__content .iti input {
  padding-left: 52px !important;
}

/* =========================================================
   13c. APPLY NOW (EMBEDDED) -- added 2026-09-10, template-apply.php
========================================================= */
.cook-apply-embed {
  padding: 0;
  overflow: hidden;
}
.cook-apply-embed iframe {
  display: block;
  width: 100%;
  height: 1400px;
  max-height: 80vh;
  border: 0;
}
.cook-apply-embed__fallback {
  margin-top: 12px;
  font-size: 14px;
  color: var(--cook-text-muted, #646970);
  text-align: center;
}

/* =========================================================
   14. HOME DETAIL
========================================================= */
.cook-home-gallery {
  display: grid;
  /* FIXED 2026-09-02: with no grid-template-columns, this single implicit
     column defaulted to "auto" track sizing, which sizes the column to fit
     its content's max-content width. The <img> inside .cook-home-gallery__main
     is styled width: 100%, but percentage widths don't count during that
     max-content calculation -- the browser falls back to the image's own
     natural pixel size instead. On a home with a large-dimension photo (e.g.
     https://cookproperties.kinsta.cloud/homes/rapide-04-rapide-04/, a
     1920x1080+ original) that grew the column -- and the photo inside it --
     wider than the page, pushing it off the right edge. minmax(0, 1fr)
     forces the column to fill the container's actual width instead of
     growing to fit the image.
  */
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.cook-home-gallery__main {
  position: relative;
  border-radius: var(--cook-radius-xl);
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--cook-gray-100);
}
.cook-home-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cook-home-gallery__thumbs {
  display: flex;
  gap: 12px;
}
.cook-home-gallery__thumb {
  width: 96px;
  height: 72px;
  border-radius: var(--cook-radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  opacity: 0.7;
}
.cook-home-gallery__thumb.is-active,
.cook-home-gallery__thumb:hover {
  border-color: var(--cook-blue);
  opacity: 1;
}
.cook-home-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cook-home-detail {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
  align-items: start;
}
.cook-home-detail__price {
  font-size: var(--cook-fs-3xl);
  font-weight: 800;
  color: var(--cook-blue);
  margin-top: 8px;
}
/* Added 2026-09-03 -- see .cook-home-card__price-alt for why. */
.cook-home-detail__price-alt {
  font-size: var(--cook-fs-base);
  font-weight: 600;
  color: var(--cook-gray-500);
}
.cook-home-detail__location {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cook-text-muted);
  margin-top: 8px;
}
.cook-home-detail__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 20px 0;
  margin: 24px 0;
  border-top: 1px solid var(--cook-border);
  border-bottom: 1px solid var(--cook-border);
}
.cook-home-detail__stats div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--cook-fs-sm);
}

.cook-spec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.cook-spec-grid__item {
  background: var(--cook-bg-muted);
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-md);
  padding: 16px;
  text-align: center;
}
.cook-spec-grid__item span {
  display: block;
  font-size: var(--cook-fs-xs);
  color: var(--cook-text-muted);
  margin-bottom: 4px;
}

.cook-placeholder-card {
  padding: 40px;
  text-align: center;
  color: var(--cook-text-muted);
}
.cook-placeholder-card__title {
  font-weight: 600;
  color: var(--cook-text);
}
.cook-placeholder-card img {
  border-radius: var(--cook-radius-md);
  margin-bottom: 16px;
}

.cook-community-teaser {
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cook-community-teaser p {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--cook-text-muted);
  font-size: var(--cook-fs-sm);
  margin-top: 4px;
}

.cook-home-detail__sidebar {
  position: sticky;
  top: calc(var(--cook-header-height) + 24px);
}
.cook-sticky-cta {
  padding: 28px;
}
.cook-sticky-cta__price {
  font-size: var(--cook-fs-2xl);
  font-weight: 800;
}
/* Added 2026-09-03 -- see .cook-home-card__price-alt for why. */
.cook-sticky-cta__price-alt {
  font-size: var(--cook-fs-sm);
  font-weight: 600;
  color: var(--cook-text-muted);
}
.cook-sticky-cta__subtitle {
  color: var(--cook-text-muted);
  font-size: var(--cook-fs-sm);
  margin-bottom: 20px;
}
.cook-sticky-cta__phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--cook-border);
  color: var(--cook-blue);
  font-weight: 600;
}
.cook-sticky-cta__disclaimer {
  font-size: var(--cook-fs-xs);
  color: var(--cook-text-muted);
  margin-top: 16px;
}

/* =========================================================
   15. ABOUT / TEAM / DOGS
========================================================= */
.team-img {
  max-height: 410px;
  width: 100%;
  object-fit: cover;
  object-position: 0% 15%;
}
.cook-grid--spark {
  grid-template-columns: repeat(5, 1fr);
}
.cook-spark-card {
  padding: 28px 20px;
  text-align: left;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 16px;
  row-gap: 4px;
}
.cook-spark-card__letter {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cook-blue);
  color: #fff;
  font-weight: 800;
  font-size: var(--cook-fs-xl);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cook-spark-card p {
  color: var(--cook-text-muted);
  font-size: var(--cook-fs-sm);
}
.cook-spark-card__letter {
  grid-row: 1 / 3;
}
.cook-spark-card h3 {
  grid-column: 2;
}
.cook-spark-card p {
  grid-column: 2;
}
.cook-dog-carousel {
  position: relative;
  max-width: 420px;
  margin-inline: auto;
}
.cook-dog-carousel__viewport {
  overflow: hidden;
  border-radius: var(--cook-radius-xl);
}
.cook-dog-carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.cook-dog-carousel__track::-webkit-scrollbar {
  display: none;
}
.cook-dog-carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-xl);
  box-shadow: var(--cook-shadow-lg);
  overflow: hidden;
}
.cook-dog-carousel__slide img {
  width: 100%;
  aspect-ratio: 1 / 0.95;
  object-fit: cover;
}
.cook-dog-carousel__body {
  padding: 24px 28px 28px;
}
.cook-dog-carousel__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cook-dog-carousel__heading h3 {
  font-size: var(--cook-fs-2xl);
  font-weight: 800;
}
.cook-dog-carousel__owner {
  font-weight: 600;
  color: var(--cook-text-muted);
  margin-top: 8px;
}
.cook-dog-carousel__body p:last-child {
  color: var(--cook-text-muted);
  margin-top: 8px;
}
.cook-carousel__prev,
.cook-carousel__next {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--cook-shadow-md);
  font-size: var(--cook-fs-xl);
  z-index: 2;
}
.cook-carousel__prev {
  left: -56px;
}
.cook-carousel__next {
  right: -56px;
}
.cook-dog-carousel__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}
.cook-dog-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--cook-radius-full);
  background: var(--cook-gray-200);
  transition:
    background 0.15s ease,
    width 0.15s ease;
}
.cook-dog-carousel__dot.is-active {
  width: 24px;
  background: var(--cook-blue);
}

.cook-team-card {
  padding: 24px;
  text-align: center;
}
.cook-team-card img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 16px;
}
.cook-team-card__initials {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--cook-blue-light);
  color: var(--cook-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--cook-fs-xl);
  margin: 0 auto 16px;
}
.cook-team-card__role {
  color: var(--cook-blue);
  font-size: var(--cook-fs-sm);
  font-weight: 600;
  margin: 4px 0 12px;
}
.cook-team-card p:not(.cook-team-card__role) {
  color: var(--cook-text-muted);
  font-size: var(--cook-fs-sm);
}

/* =========================================================
   16. CAREERS
========================================================= */
.cook-positions-card {
  padding: 32px;
}
/* Careers page -- ADDED 2026-09-18: wraps the Paylocity recruiting iframe
   that replaced .cook-positions-card's job_opening list (see
   template-careers.php). Just strips the card's default padding so the
   iframe fills the card edge-to-edge and clips it to the card's rounded
   corners; .cook-card (base class, still applied alongside this one)
   supplies the border/background/shadow. */
.cook-positions-embed {
  padding: 0;
  overflow: hidden;
}
.cook-positions-embed iframe {
  border-radius: inherit;
}
.cook-positions-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.cook-positions-card__empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--cook-text-muted);
}
.cook-positions-card__empty-title {
  font-weight: 600;
  color: var(--cook-text);
  margin-bottom: 8px;
}
.cook-positions-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--cook-border);
}
.cook-positions-list li span {
  display: block;
  color: var(--cook-text-muted);
  font-size: var(--cook-fs-sm);
}

.cook-testimonial {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cook-testimonial__quote {
  font-style: italic;
}
.cook-testimonial__author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cook-testimonial__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cook-blue-light);
  color: var(--cook-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--cook-fs-xs);
}
.cook-testimonial__author div span {
  display: block;
  color: var(--cook-text-muted);
  font-size: var(--cook-fs-sm);
}

.cook-eeo-card {
  padding: 32px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.cook-eeo-card p {
  color: var(--cook-text-muted);
  margin-top: 8px;
}

/* =========================================================
   17. OPPORTUNITIES
========================================================= */
.cook-manager-card {
  background: var(--cook-blue);
  color: var(--cook-white);
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 24px 25%;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.cook-manager-card img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}
.cook-manager-card div {
  flex: 1;
}
.cook-manager-card span {
  display: block;
  color: var(--cook-blue-light);
  font-size: var(--cook-fs-sm);
  font-weight: 600;
}
.cook-manager-card p {
  color: var(--cook-blue-light);
  font-size: var(--cook-fs-sm);
  margin-top: 4px;
}

.cook-location-card {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.cook-location-card img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: var(--cook-radius-md);
  margin-bottom: 16px;
}
.cook-location-card img.cook-location-card__logo {
  width: auto;
  height: 32px;
  object-fit: contain;
  border-radius: 0;
  margin-bottom: 12px;
}
.cook-location-card p {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cook-text-muted);
  font-size: var(--cook-fs-sm);
  margin: 4px 0;
}

.cook-property-card {
  overflow: hidden;
}
.cook-property-card__media {
  position: relative;
  aspect-ratio: 16/9;
}
.cook-property-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cook-property-card__body {
  padding: 24px;
}
.cook-property-card__address {
  display: flex;
  gap: 8px;
  color: var(--cook-text-muted);
  font-size: var(--cook-fs-sm);
  margin: 8px 0 12px;
}
.cook-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}
.cook-tag {
  background: var(--cook-bg-muted);
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-full);
  padding: 4px 12px;
  font-size: var(--cook-fs-xs);
}
.cook-checklist {
  margin-top: 20px;
}
.cook-checklist li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 12px;
  color: var(--cook-text-muted);
}
.cook-checklist li span,
.cook-checklist li img {
  flex-shrink: 0;
  color: var(--cook-blue);
  font-weight: 700;
}

.cook-map-placeholder {
  padding: 64px 24px;
  text-align: center;
  color: var(--cook-text-muted);
}
.cook-map-placeholder p {
  font-weight: 600;
  color: var(--cook-text);
}

.cook-map-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.cook-map-filters .cook-pill {
  background: #fff;
}
.cook-opps-map {
  height: 500px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cook-opps-map--ready {
  display: block;
}
.cook-opps-map__loading {
  color: var(--cook-text-muted);
  font-weight: 600;
}
.cook-map-infowindow {
  font-family: var(--cook-font);
  max-width: 220px;
}
.cook-map-infowindow strong {
  display: block;
  margin-bottom: 4px;
  font-size: var(--cook-fs-base);
}
.cook-map-infowindow p {
  color: var(--cook-text-muted);
  font-size: var(--cook-fs-sm);
  margin: 0 0 8px;
}
.cook-map-infowindow a {
  color: var(--cook-blue);
  font-weight: 600;
  font-size: var(--cook-fs-sm);
}

/* =========================================================
   18. CONTACT
========================================================= */
.cook-contact-card {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.2s ease;
}
.cook-contact-card:hover {
  box-shadow: var(--cook-shadow-md);
}
.cook-contact-card p {
  color: var(--cook-text-muted);
  font-size: var(--cook-fs-sm);
}
.cook-contact-card__value {
  color: var(--cook-blue);
  font-weight: 600;
  margin-top: 4px;
}

.cook-contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.cook-contact-sidebar .cook-card {
  padding: 28px;
}
.cook-contact-sidebar h3 {
  margin-bottom: 16px;
}
.cook-address {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--cook-text-muted);
  font-size: var(--cook-fs-sm);
  margin-bottom: 16px;
}
.cook-address:last-child {
  margin-bottom: 0;
}
.cook-address svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--cook-blue);
}
.cook-address a {
  color: inherit;
}
.cook-address a:hover {
  color: var(--cook-blue);
}
.cook-contact-sidebar .cook-map-embed {
  padding: 0;
  overflow: hidden;
}
.cook-map-embed iframe {
  display: block;
}
.cook-quick-links a {
  color: var(--cook-blue);
  font-weight: 500;
}
.cook-quick-links li {
  padding: 10px 0;
  border-top: 1px solid var(--cook-border);
}
.cook-quick-links a:hover {
  text-decoration: underline;
}

/* =========================================================
   19. BLOG
========================================================= */
.cook-featured-post {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
.cook-featured-post__body {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: center;
}
.cook-featured-post__body h2 {
  font-size: var(--cook-fs-3xl);
}
.cook-featured-post__body p {
  color: var(--cook-text-muted);
}
.cook-featured-post__date {
  font-size: var(--cook-fs-sm);
  color: var(--cook-text-muted);
}
.cook-featured-post__media {
  position: relative;
}
.cook-featured-post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cook-post-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cook-post-card__media {
  aspect-ratio: 16/10;
  overflow: hidden;
}
.cook-post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cook-post-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cook-post-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--cook-fs-xs);
  color: var(--cook-text-muted);
}
.cook-post-card__body p {
  color: var(--cook-text-muted);
  font-size: var(--cook-fs-sm);
}
.cook-post-card__footnote {
  color: var(--cook-text-muted);
  margin-top: 32px;
}

.cook-blog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.cook-blog-search {
  position: relative;
  flex: 0 1 320px;
}
.cook-blog-search input {
  width: 100%;
  padding: 12px 40px 12px 16px;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-full);
  background: #fff;
}
.cook-blog-search svg {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cook-gray-400);
}
.cook-blog-filters {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.cook-blog-widgets {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--cook-border);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* =========================================================
   20. PAGES / MISC
========================================================= */
.cook-main--basic {
  padding-block: 64px;
}
.cook-page__title {
  font-size: var(--cook-fs-4xl);
  font-weight: 800;
  margin-bottom: 24px;
}
.cook-page__content {
  font-size: var(--cook-fs-lg);
  color: var(--cook-text-muted);
  line-height: 1.7;
}
.cook-post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.cook-404 {
  text-align: center;
  padding-block: 100px;
}
.cook-404 h1 {
  font-size: 6rem;
  font-weight: 800;
  color: var(--cook-blue);
}

/* =========================================================
   21. SINGLE BLOG POST
========================================================= */
.cook-post-header__title {
  margin-top: 16px;
}
.cook-post-header__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  color: var(--cook-text-muted);
  font-size: var(--cook-fs-sm);
  flex-wrap: wrap;
}
.cook-post-featured-image {
  margin-block: 40px;
}
.cook-post-featured-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--cook-radius-lg);
}

/* Prose typography for the_content() output */
.cook-post-content {
  font-size: var(--cook-fs-lg);
  line-height: 1.8;
  color: var(--cook-text-muted);
}
.cook-post-content > * + * {
  margin-top: 24px;
}
.cook-post-content h2 {
  font-size: var(--cook-fs-3xl);
  font-weight: 800;
  color: var(--cook-text);
  margin-top: 48px;
  line-height: 1.25;
}
.cook-post-content h3 {
  font-size: var(--cook-fs-2xl);
  font-weight: 700;
  color: var(--cook-text);
  margin-top: 40px;
}
.cook-post-content h4 {
  font-size: var(--cook-fs-xl);
  font-weight: 700;
  color: var(--cook-text);
  margin-top: 32px;
}
.cook-post-content a {
  color: var(--cook-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cook-post-content strong {
  color: var(--cook-text);
}
.cook-post-content ul,
.cook-post-content ol {
  padding-left: 24px;
}
.cook-post-content ul {
  list-style: disc;
}
.cook-post-content ol {
  list-style: decimal;
}
.cook-post-content li + li {
  margin-top: 8px;
}
.cook-post-content blockquote {
  border-left: 4px solid var(--cook-blue);
  padding-left: 24px;
  font-style: italic;
  font-size: var(--cook-fs-xl);
  color: var(--cook-text);
}
.cook-post-content img {
  width: 100%;
  height: auto;
  border-radius: var(--cook-radius-lg);
}
.cook-post-content figcaption {
  font-size: var(--cook-fs-sm);
  color: var(--cook-gray-400);
  text-align: center;
  margin-top: 8px;
}
.cook-post-content hr {
  border: none;
  border-top: 1px solid var(--cook-border);
}
.cook-post-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cook-fs-base);
}
.cook-post-content th,
.cook-post-content td {
  border: 1px solid var(--cook-border);
  padding: 12px;
  text-align: left;
}
.cook-post-content code {
  background: var(--cook-bg-muted);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}
.cook-post-content pre {
  background: var(--cook-black);
  color: #fff;
  padding: 20px;
  border-radius: var(--cook-radius-md);
  overflow-x: auto;
}
.cook-post-content pre code {
  background: none;
  color: inherit;
  padding: 0;
}
.cook-post-pages {
  margin-top: 24px;
  font-weight: 600;
}

.cook-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--cook-border);
}

.cook-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--cook-border);
}
.cook-post-nav__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-lg);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.cook-post-nav__link:hover {
  border-color: var(--cook-blue);
  box-shadow: var(--cook-shadow-sm);
}
.cook-post-nav__link--next {
  grid-column: 2;
  text-align: right;
  align-items: flex-end;
}
.cook-post-nav__link span {
  font-size: var(--cook-fs-xs);
  color: var(--cook-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cook-post-nav__link strong {
  font-size: var(--cook-fs-base);
  color: var(--cook-text);
}

/* =========================================================
   22. RESPONSIVE
========================================================= */
@media (max-width: 1100px) {
  .cook-grid--4,
  .cook-grid--5,
  .cook-grid--spark {
    grid-template-columns: repeat(2, 1fr);
  }
  .cook-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .cook-listing-layout,
  .cook-listing-layout--reverse {
    grid-template-columns: 1fr;
  }
  .cook-filters {
    position: static;
  }
  .cook-home-detail,
  .cook-community-hero {
    grid-template-columns: 1fr;
  }
  .cook-home-detail__sidebar {
    position: static;
  }
  .cook-footer__grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .cook-nav {
    display: none;
  }
  .cook-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    background: #fff;
    border-top: 1px solid var(--cook-border);
    box-shadow: var(--cook-shadow-lg);
    padding: 8px 32px 16px;
    max-height: calc(100vh - var(--cook-header-height));
    overflow-y: auto;
  }
  .cook-nav.is-open .cook-nav__item {
    width: 100%;
    border-bottom: 1px solid var(--cook-border);
  }
  .cook-nav.is-open .cook-nav__item:last-child {
    border-bottom: none;
  }
  .cook-nav.is-open .cook-nav__link {
    width: 100%;
    justify-content: space-between;
    padding: 14px 0;
  }
  /* Dropdowns become inline accordions instead of floating hover panels. */
  .cook-nav.is-open .cook-nav__dropdown {
    position: static;
    width: 100%;
    padding-top: 0;
    display: none;
  }
  .cook-nav.is-open .cook-nav__item--dropdown.is-open .cook-nav__dropdown {
    display: block;
  }
  .cook-nav.is-open .cook-nav__item--dropdown.is-open .cook-nav__chevron {
    transform: rotate(180deg);
  }
  .cook-nav.is-open .cook-nav__dropdown-inner {
    border: none;
    box-shadow: none;
    padding: 0 0 12px 16px;
  }
  .cook-header__menu-toggle {
    display: flex;
  }
  .cook-header__menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .cook-header__menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .cook-header__menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

@media (max-width: 780px) {
  :root {
    --cook-header-height: 124px;
  }
  .cook-container {
    padding-inline: 20px;
  }
  .cook-section {
    padding-block: 56px;
  }
  .cook-h1,
  .cook-hero__heading {
    font-size: var(--cook-fs-3xl);
  }
  .cook-h2,
  .cook-section__header h2 {
    font-size: var(--cook-fs-2xl);
  }
  .cook-grid--2,
  .cook-grid--3,
  .cook-grid--4,
  .cook-grid--5,
  .cook-grid--spark,
  .cook-stat-grid,
  .cook-stat-grid--4up {
    grid-template-columns: 1fr;
  }
  .cook-split,
  .cook-split--reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }
  .cook-header__actions .cook-header__phone {
    display: none;
  }
  .cook-header__inner {
    height: auto;
    flex-wrap: wrap;
    row-gap: 15px;
    padding-block: 12px;
  }
  .cook-header__logo {
    order: 1;
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
  }
  .cook-header__logo img {
    height: 40px;
  }
  .cook-header__actions {
    order: 2;
    gap: 8px;
  }
  .cook-header__actions .cook-btn {
    padding: 10px 14px;
    font-size: 13px;
    min-width: 140px;
  }
  .cook-header__menu-toggle {
    order: 3;
  }
  .cook-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
  .cook-featured-post {
    grid-template-columns: 1fr;
  }
  .cook-blog-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .cook-blog-search {
    flex-basis: auto;
  }
  .cook-spec-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cook-dog-carousel {
    max-width: 100%;
  }
  .cook-carousel__prev {
    left: 4px;
  }
  .cook-carousel__next {
    right: 4px;
  }
  .cook-community-facts {
    position: static;
  }
  .cook-search-card__form {
    flex-direction: column;
    align-items: stretch;
  }
  .cook-post-grid {
    grid-template-columns: 1fr;
  }
  .cook-post-nav {
    grid-template-columns: 1fr;
  }
  .cook-post-nav__link--next {
    grid-column: 1;
    text-align: left;
    align-items: flex-start;
  }
  .cook-post-content {
    font-size: var(--cook-fs-base);
  }
  .cook-post-content h2 {
    font-size: var(--cook-fs-2xl);
  }
  .cook-post-content h3 {
    font-size: var(--cook-fs-xl);
  }
  .cook-search-card__field--grow {
    flex: 1 1;
  }
}