/* ============================================================
   GREENVALE BAKERY - CONTENT BLOCK KIT
   ------------------------------------------------------------
   Design tokens lifted verbatim from the approved brand mockup
   (greenvalebake.wpenginepowered.com/styles.css).

   Everything is namespaced gv-* and scoped under a .gv-page
   wrapper so it cannot collide with the theme or editor styles.

   Install ONCE. Author page bodies against the class contract in
   BUILDER-SPEC.md. No inline style attributes, ever.
   ============================================================ */

/* Raleway + Cormorant Garamond are enqueued separately by greenvale-kit.php
   (a CSS @import would serialise the request behind this file). If you ever
   use this stylesheet outside the mu-plugin, load them yourself. */

/* Display serif - the Greenvale wordmark and section headings */
@font-face {
  font-family: 'Argue DEMO';
  src: url('../fonts/Argue DEMO.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Flowing calligraphy - the bakery wordmark, eyebrows, accent phrases */
@font-face {
  font-family: 'Beatrica';
  src: url('../fonts/Beatrica.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}

.gv-page {
  /* -- Brand: Teal / Mint -- */
  --gv-teal:        #04D9C4;
  --gv-teal-light:  #99F2E2;
  --gv-teal-pale:   #e0f8f4;
  --gv-teal-wash:   #f0fbf9;
  --gv-teal-deep:   #03b8a8;
  --gv-teal-press:  #028f83;

  /* -- Brand: Blush / Rose -- */
  --gv-blush:       #FEDBD9;
  --gv-blush-deep:  #f9c3c0;
  --gv-blush-pale:  #fff5f4;
  --gv-blush-press: #f3aeab;
  /* Script/eyebrow rose, used for the welcome-to / our / meet accents */
  --gv-rose:        #E0759B;

  /* -- Neutral -- */
  --gv-white:    #FFFFFF;
  --gv-ink:      #0D0D0D;
  --gv-gray-50:  #fafafa;
  --gv-gray-100: #f5f5f5;
  --gv-gray-200: #e8e8e8;
  --gv-gray-300: #d0d0d0;
  --gv-gray-400: #a0a0a0;
  --gv-gray-500: #737373;
  --gv-gray-600: #525252;
  --gv-gray-800: #262626;

  /* -- Semantic -- */
  --gv-text:         var(--gv-ink);
  --gv-text-soft:    var(--gv-gray-600);
  --gv-text-muted:   var(--gv-gray-400);
  --gv-text-inverse: var(--gv-white);
  --gv-border:       var(--gv-gray-200);
  --gv-border-soft:  var(--gv-gray-100);

  /* -- Type -- */
  --gv-font-display: 'Argue DEMO', 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --gv-font-script:  'Beatrica', cursive;
  --gv-font-body:    'Raleway', system-ui, sans-serif;

  --gv-ls-wide:   0.08em;
  --gv-ls-wider:  0.14em;
  --gv-ls-widest: 0.22em;

  /* -- Space / shape -- */
  --gv-container: 1100px;
  --gv-pad:       40px;
  --gv-radius:    16px;
  --gv-radius-lg: 24px;
  --gv-shadow-card: 0 2px 8px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.06);
  --gv-shadow-lg:   0 16px 48px rgba(0,0,0,0.10), 0 8px 16px rgba(0,0,0,0.04);
  --gv-shadow-teal: 0 4px 18px rgba(4, 217, 196, 0.28);

  font-family: var(--gv-font-body);
  color: var(--gv-text);
  font-weight: 300;
  line-height: 1.75;
}

.gv-page *, .gv-page *::before, .gv-page *::after { box-sizing: border-box; }
.gv-page img { display: block; max-width: 100%; height: auto; }

/* ------------------------------------------------------------
   BLOCK-THEME ESCAPE
   Block themes (Twenty Twenty-Five and friends) clamp every direct
   child of the content area to the theme content width and add global
   side padding. The kit lays out its own full-bleed sections, so the
   root wrapper must ALSO carry WordPress's own alignfull class:

       <div class="gv-page alignfull"> ... </div>

   That is the native path - core then supplies both the max-width
   reset and the negative margins that cancel global padding.
   The rule below is only a safety net for when alignfull is omitted:
   it frees the width but cannot cancel the parent padding.
   ------------------------------------------------------------ */
.is-layout-constrained > .gv-page { max-width: none; }

/* ============================================================
   SECTIONS + CONTAINER
   ============================================================ */
.gv-section { padding: 96px 0; background: var(--gv-white); }
.gv-section--subtle { background: var(--gv-gray-50); }
.gv-section--tint   { background: var(--gv-teal-wash); }
.gv-section--pale   { background: var(--gv-teal-pale); }
.gv-section--blush  { background: var(--gv-blush-pale); }
.gv-section--teal   { background: var(--gv-teal-press); color: var(--gv-text-inverse); }
.gv-section--ink    { background: var(--gv-ink); color: var(--gv-text-inverse); }
.gv-section--tight  { padding: 56px 0; }
.gv-section--flush  { padding: 0; }

.gv-section--teal .gv-h2,
.gv-section--teal .gv-h3,
.gv-section--teal .gv-prose p,
.gv-section--teal .gv-lead,
.gv-section--ink .gv-h2,
.gv-section--ink .gv-h3,
.gv-section--ink .gv-prose p,
.gv-section--ink .gv-lead { color: var(--gv-text-inverse); }

.gv-container { max-width: var(--gv-container); margin: 0 auto; padding: 0 var(--gv-pad); }
.gv-container--narrow { max-width: 760px; }

/* ============================================================
   TYPE
   ============================================================ */
.gv-h1, .gv-h2, .gv-h3, .gv-h4 {
  font-family: var(--gv-font-display);
  font-weight: 400;
  color: var(--gv-text);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 20px;
}
.gv-h1 { font-size: clamp(3rem, 6vw, 5rem); }
.gv-h2 { font-size: clamp(2.25rem, 4.2vw, 3.5rem); }
.gv-h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.gv-h4 { font-size: 1.25rem; }

/* Script accent that sits above a heading - our, meet, welcome to */
.gv-eyebrow {
  font-family: var(--gv-font-script);
  font-size: clamp(2rem, 3.4vw, 3rem);
  color: var(--gv-rose);
  line-height: 1;
  margin: 0 0 -6px;
  font-weight: 400;
}
.gv-eyebrow--teal  { color: var(--gv-teal-deep); }
/* Standalone script line, centerd on its own row (the printed menu's
   "Thank you for supporting small!" sign-off). */
.gv-eyebrow--center-note { text-align: center; margin: 44px 0 0; }
.gv-eyebrow--light { color: var(--gv-blush); }

/* Small uppercase tracked label - the UI-chrome voice */
.gv-label {
  font-family: var(--gv-font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: var(--gv-ls-widest);
  text-transform: uppercase;
  color: var(--gv-text-muted);
  margin: 0 0 16px;
}
.gv-label--teal  { color: var(--gv-teal-deep); }
.gv-label--light { color: var(--gv-teal-light); }

.gv-lead {
  font-size: 1.1rem;
  line-height: 1.8;
  font-weight: 300;
  color: var(--gv-text-soft);
  margin: 0 0 32px;
}

.gv-prose p { font-size: 1rem; line-height: 1.8; font-weight: 300; color: var(--gv-text-soft); margin: 0 0 20px; }
.gv-prose p:last-child { margin-bottom: 0; }
.gv-prose a { color: var(--gv-teal-deep); text-decoration: underline; text-underline-offset: 3px; }
.gv-prose a:hover { color: var(--gv-teal-press); }
.gv-prose strong { font-weight: 600; color: var(--gv-text); }
.gv-prose ul, .gv-prose ol { margin: 0 0 20px; padding-left: 22px; }
.gv-prose li { margin-bottom: 10px; line-height: 1.75; color: var(--gv-text-soft); }

.gv-section-head { margin: 0 0 56px; }
.gv-section-head--center { text-align: center; margin-left: auto; margin-right: auto; max-width: 720px; }
.gv-section-head .gv-lead:last-child { margin-bottom: 0; }

/* Thin rose rule, echoing the mockup hairline dividers */
.gv-rule { width: 56px; height: 2px; background: var(--gv-rose); border: 0; margin: 0 0 28px; }
.gv-rule--center { margin-left: auto; margin-right: auto; }
.gv-rule--light { background: var(--gv-blush); }

/* ============================================================
   BUTTONS
   ============================================================ */
.gv-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--gv-font-body);
  font-size: 0.80rem; font-weight: 500;
  letter-spacing: var(--gv-ls-wider); text-transform: uppercase;
  border-radius: 9999px;
  padding: 14px 36px;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}
.gv-btn--primary { background: var(--gv-teal); border-color: var(--gv-teal); color: var(--gv-white); }
.gv-btn--primary:hover { opacity: 0.88; color: var(--gv-white); }
.gv-btn--outline { background: transparent; border-color: var(--gv-teal); color: var(--gv-teal-deep); }
.gv-btn--outline:hover { background: var(--gv-teal); color: var(--gv-white); }
.gv-btn--rose { background: var(--gv-rose); border-color: var(--gv-rose); color: var(--gv-white); }
.gv-btn--rose:hover { opacity: 0.88; color: var(--gv-white); }
.gv-btn--white { background: var(--gv-white); border-color: var(--gv-white); color: var(--gv-teal-press); }
.gv-btn--white:hover { opacity: 0.9; }
.gv-btn--outline-light { background: transparent; border-color: var(--gv-white); color: var(--gv-white); }
.gv-btn--outline-light:hover { background: var(--gv-white); color: var(--gv-teal-press); }
.gv-btn--lg { padding: 17px 44px; font-size: 0.86rem; }
.gv-btn--sm { padding: 10px 24px; font-size: 0.72rem; }

.gv-btn-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 32px; }
.gv-btn-row--center { justify-content: center; }
.gv-section-head .gv-btn-row { margin-bottom: 0; }

/* Text link with arrow - Inquire for pricing */
.gv-inquire {
  font-family: var(--gv-font-body);
  font-size: 0.78rem; font-weight: 500;
  letter-spacing: var(--gv-ls-wide); text-transform: uppercase;
  color: var(--gv-teal-deep); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: gap 0.18s ease, color 0.18s ease;
}
.gv-inquire:hover { gap: 14px; color: var(--gv-teal-press); }

/* ============================================================
   OFFERING CARDS - the signature product-category grid
   ============================================================ */
.gv-offerings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.gv-offerings--2 { grid-template-columns: repeat(2, 1fr); }

.gv-offering {
  background: var(--gv-white);
  border-radius: var(--gv-radius);
  overflow: hidden;
  box-shadow: var(--gv-shadow-card);
  display: flex; flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.gv-offering:hover { transform: translateY(-4px); box-shadow: var(--gv-shadow-lg); }
.gv-offering__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--gv-gray-100); }
.gv-offering__media img { width: 100%; height: 100%; object-fit: cover; }
.gv-offering__badge {
  position: absolute; top: 14px; left: 14px;
  font-size: 0.62rem; font-weight: 600;
  letter-spacing: var(--gv-ls-wider); text-transform: uppercase;
  background: var(--gv-white); color: var(--gv-teal-press);
  padding: 6px 14px; border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}
.gv-offering__badge--rose  { color: var(--gv-rose); }
.gv-offering__body { padding: 28px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.gv-offering__title { font-family: var(--gv-font-display); font-size: 1.5rem; font-weight: 400; color: var(--gv-text); margin: 0 0 12px; line-height: 1.2; }
.gv-offering__text  { font-size: 0.94rem; line-height: 1.75; font-weight: 300; color: var(--gv-text-soft); margin: 0 0 22px; flex: 1; }

/* ============================================================
   TEXT + IMAGE SPLIT
   ============================================================ */
.gv-twocol__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.gv-twocol--img-left .gv-twocol__media { order: -1; }
.gv-twocol__media img { width: 100%; border-radius: var(--gv-radius); box-shadow: var(--gv-shadow-card); }
.gv-twocol__body > :last-child { margin-bottom: 0; }

/* ============================================================
   PILL ROW - specialties / keyword chips
   ============================================================ */
.gv-pillrow { display: flex; flex-wrap: wrap; gap: 12px; }
.gv-pillrow--center { justify-content: center; }
.gv-pill {
  font-size: 0.74rem; font-weight: 500;
  letter-spacing: var(--gv-ls-wide); text-transform: uppercase;
  background: var(--gv-teal-pale); color: var(--gv-teal-press);
  border-radius: 9999px; padding: 9px 20px;
}
.gv-pill--blush { background: var(--gv-blush); color: #9c4a63; }
.gv-pill--light { background: rgba(255,255,255,0.16); color: var(--gv-white); }

/* ============================================================
   PRESS STRIP - As Seen On
   ============================================================ */
.gv-press__grid {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 56px;
}
/* Selector is intentionally img.gv-press__logo, not .gv-press__logo: the base
   rule .gv-page img { height: auto } is specificity 0-1-1 and would otherwise
   win over a bare 0-1-0 class, letting each mark render at its natural size. */
img.gv-press__logo {
  height: 42px; width: auto; max-width: 160px; object-fit: contain;
  opacity: 0.55; filter: grayscale(1);
  transition: opacity 0.2s ease, filter 0.2s ease;
}
img.gv-press__logo:hover { opacity: 1; filter: grayscale(0); }

/* ============================================================
   GALLERY
   ============================================================ */
.gv-gallery { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.gv-gallery--2 { grid-template-columns: repeat(2, 1fr); }
.gv-gallery--4 { grid-template-columns: repeat(4, 1fr); }
.gv-gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--gv-radius); }
.gv-gallery--tall img { aspect-ratio: 3 / 4; }

/* ============================================================
   STEPS - how a custom order works
   ============================================================ */
.gv-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.gv-steps--3 { grid-template-columns: repeat(3, 1fr); }
.gv-step__num {
  font-family: var(--gv-font-display);
  font-size: 2.5rem; color: var(--gv-teal); line-height: 1;
  margin: 0 0 14px; display: block;
}
.gv-step__title { font-family: var(--gv-font-display); font-size: 1.25rem; font-weight: 400; margin: 0 0 10px; color: var(--gv-text); }
.gv-step__text  { font-size: 0.94rem; line-height: 1.75; font-weight: 300; color: var(--gv-text-soft); margin: 0; }

/* ============================================================
   STATS BAND
   ============================================================ */
.gv-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; text-align: center; }
.gv-stats--3 { grid-template-columns: repeat(3, 1fr); }
.gv-stat__num   { font-family: var(--gv-font-display); font-size: 3rem; line-height: 1; color: var(--gv-teal); margin: 0 0 10px; }
.gv-stat__label { font-size: 0.72rem; font-weight: 500; letter-spacing: var(--gv-ls-wider); text-transform: uppercase; color: var(--gv-text-muted); margin: 0; }
.gv-section--teal .gv-stat__num,
.gv-section--ink .gv-stat__num   { color: var(--gv-blush); }
.gv-section--teal .gv-stat__label,
.gv-section--ink .gv-stat__label { color: rgba(255,255,255,0.72); }

/* ============================================================
   QUOTES / TESTIMONIALS
   ============================================================ */
.gv-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.gv-quotes--2 { grid-template-columns: repeat(2, 1fr); }
.gv-quotes--1 { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; text-align: center; }
.gv-quote {
  background: var(--gv-white);
  border-radius: var(--gv-radius);
  padding: 34px 30px;
  box-shadow: var(--gv-shadow-card);
}
.gv-quote__text {
  font-family: var(--gv-font-display);
  font-size: 1.25rem; line-height: 1.5; font-weight: 400;
  color: var(--gv-text); margin: 0 0 20px;
}
.gv-quote__cite {
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: var(--gv-ls-wider); text-transform: uppercase;
  color: var(--gv-text-muted); font-style: normal; margin: 0;
}

/* ============================================================
   EVENT / FEATURE CARDS
   ============================================================ */
.gv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.gv-cards--2 { grid-template-columns: repeat(2, 1fr); }
.gv-cards--4 { grid-template-columns: repeat(4, 1fr); }
.gv-card {
  background: var(--gv-white);
  border: 1px solid var(--gv-border);
  border-radius: var(--gv-radius);
  padding: 32px 28px;
}
.gv-card--tint { background: var(--gv-teal-wash); border-color: var(--gv-teal-pale); }
.gv-card__title { font-family: var(--gv-font-display); font-size: 1.375rem; font-weight: 400; margin: 0 0 12px; color: var(--gv-text); }
.gv-card__text  { font-size: 0.94rem; line-height: 1.75; font-weight: 300; color: var(--gv-text-soft); margin: 0; }

/* ============================================================
   FLAVOR / MENU LISTS
   ============================================================ */
.gv-list { list-style: none; margin: 0; padding: 0; }
.gv-list--2 { columns: 2; column-gap: 48px; }
.gv-list--3 { columns: 3; column-gap: 40px; }
.gv-list li {
  break-inside: avoid;
  padding: 11px 0 11px 26px;
  border-bottom: 1px solid var(--gv-border-soft);
  font-size: 0.96rem; font-weight: 300; color: var(--gv-text-soft);
  position: relative;
}
.gv-list li::before {
  content: ""; position: absolute; left: 4px; top: 20px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--gv-teal);
}
.gv-card .gv-list { margin-top: 4px; }
.gv-card .gv-list li { padding: 8px 0 8px 22px; font-size: 0.92rem; }
.gv-card .gv-list li::before { top: 17px; width: 6px; height: 6px; }
.gv-card .gv-list li:last-child { border-bottom: 0; }
.gv-list--light li { color: rgba(255,255,255,0.86); border-bottom-color: rgba(255,255,255,0.16); }
.gv-list--light li::before { background: var(--gv-blush); }

/* ============================================================
   FAQ - native details element, no JS
   ============================================================ */
.gv-faq { border-top: 1px solid var(--gv-border); }
.gv-faq__item { border-bottom: 1px solid var(--gv-border); }
.gv-faq__q {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0;
  font-family: var(--gv-font-display); font-size: 1.2rem; font-weight: 400;
  color: var(--gv-text);
}
.gv-faq__q::-webkit-details-marker { display: none; }
.gv-faq__q::after {
  content: "+";
  font-family: var(--gv-font-body); font-size: 1.5rem; font-weight: 300;
  color: var(--gv-teal); line-height: 1; flex: none;
  transition: transform 0.2s ease;
}
.gv-faq__item[open] .gv-faq__q::after { transform: rotate(45deg); }
.gv-faq__a { padding: 0 0 26px; }
.gv-faq__a p { font-size: 0.98rem; line-height: 1.8; font-weight: 300; color: var(--gv-text-soft); margin: 0 0 14px; }
.gv-faq__a p:last-child { margin-bottom: 0; }

/* ============================================================
   CTA BAND
   ============================================================ */
.gv-band { background: var(--gv-teal-press); color: var(--gv-text-inverse); border-radius: var(--gv-radius-lg); padding: 64px 56px; }
.gv-band--blush { background: var(--gv-blush); color: var(--gv-ink); }
.gv-band--flush { border-radius: 0; }
.gv-band__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.gv-band__inner .gv-h2 { color: inherit; }
.gv-band__inner .gv-lead { color: rgba(255,255,255,0.82); }
.gv-band--blush .gv-band__inner .gv-lead { color: var(--gv-gray-600); }
.gv-band__inner .gv-btn-row { justify-content: center; }

/* ============================================================
   CONTACT TRIO
   ============================================================ */
.gv-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
/* Grid cells default to min-width:auto, which lets a long email address
   blow out its track. Force them to shrink instead. */
.gv-contact__item { min-width: 0; }
.gv-contact__value { overflow-wrap: anywhere; }
.gv-contact__label { font-size: 0.68rem; font-weight: 600; letter-spacing: var(--gv-ls-widest); text-transform: uppercase; color: var(--gv-text-muted); margin: 0 0 10px; }
.gv-contact__value { font-family: var(--gv-font-display); font-size: 1.5rem; font-weight: 400; color: var(--gv-text); margin: 0; line-height: 1.3; }
.gv-contact__value a { color: inherit; text-decoration: none; }
.gv-contact__value a:hover { color: var(--gv-teal-deep); }

/* Form slot - whatever plugin renders inside inherits sane spacing */
.gv-formwrap { background: var(--gv-white); border-radius: var(--gv-radius); box-shadow: var(--gv-shadow-card); padding: 40px 36px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .gv-offerings, .gv-quotes, .gv-cards, .gv-cards--4 { grid-template-columns: repeat(2, 1fr); }
  .gv-steps, .gv-steps--3 { grid-template-columns: repeat(2, 1fr); }
  .gv-stats, .gv-stats--3 { grid-template-columns: repeat(2, 1fr); }
  .gv-twocol__grid { gap: 48px; }
  .gv-gallery--4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .gv-page { --gv-pad: 24px; }
  .gv-section { padding: 64px 0; }
  .gv-section--tight { padding: 40px 0; }
  .gv-section-head { margin-bottom: 40px; }

  .gv-twocol__grid { grid-template-columns: 1fr; gap: 36px; }
  .gv-twocol--img-left .gv-twocol__media { order: 0; }

  .gv-offerings, .gv-offerings--2,
  .gv-quotes, .gv-quotes--2,
  .gv-cards, .gv-cards--2, .gv-cards--4,
  .gv-contact { grid-template-columns: 1fr; }

  .gv-steps, .gv-steps--3 { grid-template-columns: 1fr; gap: 28px; }
  .gv-stats, .gv-stats--3 { grid-template-columns: repeat(2, 1fr); gap: 28px; }

  .gv-gallery, .gv-gallery--4 { grid-template-columns: repeat(2, 1fr); }

  .gv-list--2, .gv-list--3 { columns: 1; }

  .gv-press__grid { gap: 28px; }
  img.gv-press__logo { height: 30px; max-width: 120px; }

  .gv-band { padding: 44px 26px; border-radius: var(--gv-radius); }
  .gv-btn-row { gap: 12px; }
  .gv-btn { padding: 13px 28px; }
}

/* ============================================================
   GRAVITY FORMS
   GF ships its own typography and controls. Restyle it inside
   .gv-formwrap so the order form reads as part of the brand.
   Scoped so it never touches wp-admin or other plugins' forms.
   ============================================================ */
.gv-formwrap .gform_wrapper { margin: 0; }
.gv-formwrap .gform_wrapper form { margin: 0; }

.gv-formwrap .gform_fields {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 24px;
}
/* Long-form inputs span the full width. */
.gv-formwrap .gfield--type-textarea,
.gv-formwrap .gfield--type-checkbox,
.gv-formwrap .gfield--type-fileupload { grid-column: 1 / -1; }

.gv-formwrap .gfield_label,
.gv-formwrap legend.gfield_label {
  display: block;
  font-family: var(--gv-font-body);
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: var(--gv-ls-widest); text-transform: uppercase;
  color: var(--gv-text-muted); margin: 0 0 9px;
}
.gv-formwrap .gfield_required { color: var(--gv-rose); margin-left: 3px; }

.gv-formwrap .gfield_description {
  font-size: 0.82rem; font-weight: 300; color: var(--gv-text-muted);
  margin: 7px 0 0; padding: 0;
}

.gv-formwrap input[type="text"],
.gv-formwrap input[type="email"],
.gv-formwrap input[type="tel"],
.gv-formwrap input[type="number"],
.gv-formwrap input[type="date"],
.gv-formwrap select,
.gv-formwrap textarea {
  width: 100%;
  font-family: var(--gv-font-body); font-size: 0.96rem; font-weight: 300;
  color: var(--gv-text);
  background: var(--gv-white);
  border: 1px solid var(--gv-border);
  border-radius: 10px;
  padding: 13px 15px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.gv-formwrap textarea { min-height: 150px; resize: vertical; line-height: 1.7; }

.gv-formwrap input:focus,
.gv-formwrap select:focus,
.gv-formwrap textarea:focus {
  outline: none;
  border-color: var(--gv-teal);
  box-shadow: 0 0 0 3px var(--gv-teal-pale);
}

.gv-formwrap .gfield_checkbox { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; }
.gv-formwrap .gchoice { display: flex; align-items: center; gap: 9px; }
.gv-formwrap .gchoice input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--gv-teal); flex: none; margin: 0; }
.gv-formwrap .gchoice label { font-size: 0.94rem; font-weight: 300; color: var(--gv-text-soft); margin: 0; }

/* GF 2.8's Orbital framework paints controls from CSS custom properties and
   neutralises background/border-radius with a .gform-theme--framework :where()
   reset. Setting its own properties is more robust than trying to out-specify
   that reset, so do both: retune the tokens, then state the result plainly. */
.gv-formwrap .gform_wrapper {
  --gf-ctrl-btn-bg-color-primary:        var(--gv-teal);
  --gf-ctrl-btn-bg-color-hover-primary:  var(--gv-teal-deep);
  --gf-ctrl-btn-bg-color-focus-primary:  var(--gv-teal-deep);
  --gf-ctrl-btn-border-color-primary:       var(--gv-teal);
  --gf-ctrl-btn-border-color-hover-primary: var(--gv-teal-deep);
  --gf-ctrl-btn-color-primary:       var(--gv-white);
  --gf-ctrl-btn-color-hover-primary: var(--gv-white);
  --gf-ctrl-btn-radius:      9999px;
  --gf-ctrl-btn-font-size:   0.80rem;
  --gf-ctrl-btn-padding-x:   40px;
  --gf-ctrl-btn-padding-y:   15px;
  /* GF's own button selector is 0-6-1 (…input[type=submit].button.gform_button),
     which outranks anything sane we could write. It reads these tokens, so set
     the token rather than fighting the selector. */
  --gf-ctrl-btn-text-transform: uppercase;
  --gf-ctrl-btn-letter-spacing: 0.14em;
  --gf-ctrl-btn-font-weight: 500;
  --gf-ctrl-btn-size-height: auto;
  --gf-color-primary:        var(--gv-teal);
  --gf-color-primary-rgb:    4, 217, 196;
  --gf-ctrl-border-color-focus: var(--gv-teal);
}

.gv-formwrap .gform_footer { margin: 28px 0 0; padding: 0; }
/* GF re-declares --gf-ctrl-btn-* close to the button, so wrapper-level
   overrides are shadowed for padding and text-transform. Its button rule
   reads the --gf-local-* pair, so set those on the element itself. */
.gv-formwrap .gform_wrapper.gform-theme .gform_footer .gform_button,
.gv-formwrap .gform_wrapper .gform_footer .gform_button,
.gv-formwrap .gform_button {
  --gf-local-padding-x: 40px;
  --gf-local-padding-y: 15px;
  --gf-local-text-transform: uppercase;
  --gf-ctrl-btn-padding-x: 40px;
  --gf-ctrl-btn-font-size: 0.80rem;
  --gf-local-font-size: 0.80rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--gv-font-body); font-size: 0.80rem; font-weight: 500;
  letter-spacing: var(--gv-ls-wider); text-transform: uppercase;
  background: var(--gv-teal); color: var(--gv-white);
  border: 1.5px solid var(--gv-teal); border-radius: 9999px;
  padding: 15px 40px; cursor: pointer;
  transition: opacity 0.18s ease;
}
.gv-formwrap .gform_wrapper.gform-theme .gform_footer .gform_button:hover,
.gv-formwrap .gform_button:hover { opacity: 0.88; background: var(--gv-teal-deep); }

/* Validation + confirmation */
.gv-formwrap .gfield_error input,
.gv-formwrap .gfield_error select,
.gv-formwrap .gfield_error textarea { border-color: var(--gv-rose); }
.gv-formwrap .validation_message {
  font-size: 0.82rem; font-weight: 400; color: #b4325c;
  margin-top: 7px; background: none; border: 0; padding: 0;
}
.gv-formwrap .gform_validation_errors {
  background: var(--gv-blush-pale); border: 1px solid var(--gv-blush-deep);
  border-radius: 10px; padding: 16px 18px; margin: 0 0 24px; box-shadow: none;
}
.gv-formwrap .gform_validation_errors h2 {
  font-family: var(--gv-font-display); font-size: 1.1rem; font-weight: 400;
  color: var(--gv-text); margin: 0;
}
.gv-formwrap .gform_confirmation_message {
  font-family: var(--gv-font-display); font-size: 1.35rem; line-height: 1.5;
  color: var(--gv-text); text-align: center; padding: 20px 0;
}

@media (max-width: 768px) {
  .gv-formwrap { padding: 28px 20px; }
  .gv-formwrap .gform_fields { grid-template-columns: 1fr; gap: 18px; }
  .gv-formwrap .gfield_checkbox { grid-template-columns: 1fr; }
  .gv-formwrap .gform_button { width: 100%; }
}

/* ============================================================
   FILTERABLE GALLERY  [greenvale_gallery]
   CSS-only filtering: a radio group precedes the grid, and
   #gv-cat-<slug>:checked ~ .gv-filter__grid hides non-matching
   items. Those per-category rules are emitted by the theme
   (inc/gallery.php) since they depend on the media library.
   ============================================================ */
.gv-filter__radio {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; margin: -1px; overflow: hidden;
}

.gv-filter__tabs {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; margin: 0 0 40px;
}
.gv-filter__tab {
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: var(--gv-ls-wide); text-transform: uppercase;
  color: var(--gv-text-soft);
  background: var(--gv-white);
  border: 1.5px solid var(--gv-border);
  border-radius: 9999px; padding: 9px 20px; cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
  user-select: none;
}
.gv-filter__tab:hover { border-color: var(--gv-teal); color: var(--gv-teal-press); }

/* Keyboard focus lands on the hidden radio, so surface it on the label. */
.gv-filter__radio:focus-visible + .gv-filter__radio,
.gv-filter__radio:focus-visible ~ .gv-filter__tabs label[for] { outline: none; }
.gv-filter__radio:focus-visible ~ .gv-filter__tabs .gv-filter__tab {
  box-shadow: none;
}
.gv-filter:focus-within .gv-filter__tab:hover { border-color: var(--gv-teal); }

.gv-filter__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.gv-filter__item { margin: 0; border-radius: var(--gv-radius); overflow: hidden; background: var(--gv-gray-100); }
.gv-filter__item img,
.gv-filter__img {
  width: 100%; height: 100%; aspect-ratio: 1 / 1;
  object-fit: cover; display: block;
  transition: transform 0.3s ease;
}
.gv-filter__item:hover img { transform: scale(1.04); }

@media (max-width: 1024px) {
  .gv-filter__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .gv-filter__tabs { gap: 8px; margin-bottom: 28px; }
  .gv-filter__tab { padding: 8px 15px; font-size: 0.66rem; }
  .gv-filter__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}