/*
 * Small bridge over the original theme's stylesheets.
 *
 * The live site runs select2, which hides each native <select> and draws its
 * own control. We don't ship select2's JS, so the native select stays — these
 * rules give it the same box select2 produced, measured off the original:
 * 41px tall, #262524 ground, 1rem inline padding, and the theme's own caret.
 *
 * Loaded last, after foundation.css, custom.css and the Gravity Forms sheets.
 */

/* --------------------------------------------------------------------------
   Button corners
   Square, as on ardenthomes.co.uk. An earlier round of feedback asked for an
   8px radius and it was set here; the client has since asked for square back,
   which is also what the original theme does — every control there computes
   `border-radius: 0`. The token stays so there is still one place to change
   it if the ask flips again.
   -------------------------------------------------------------------------- */
:root {
  --ah-btn-radius: 0;
}

.button-primary::before,
.button-primary:hover::before,
.button-primary:focus::before {
  border-radius: var(--ah-btn-radius);
}

/* Foundation's `[type=submit],[type=button] { border-radius: 0 }` matches any
   <button type="button"> at the same specificity as our class and loads after
   globals.css, so it already flattens `.ah-button`. Restated from the token so
   the anchor variant, which Foundation's selector never reaches, matches it. */
.ah-button,
button.ah-button,
a.ah-button {
  border-radius: var(--ah-btn-radius);
}

/* Foundation also carries `button:focus { background-color: #161616 }`, an
   element-plus-pseudo selector that outranks our class and turns any focused
   `<button>` near-black the moment it is clicked — the cookie banner and the
   enquiry form both sit on it. Restate the ground so a click leaves the button
   looking like itself; the hover rule above still wins where it applies. */
button.ah-button:focus,
button.ah-button:active {
  background: var(--gold);
}

button.ah-button.button-outline:focus,
button.ah-button.button-outline:active {
  background: transparent;
}

button.ah-button:hover,
button.ah-button:focus-visible {
  background: var(--white);
  border-color: var(--white);
}

/* --------------------------------------------------------------------------
   .button-primary fill
   Nothing here on purpose. The theme paints this button's ground through a
   ::before panel that covers the right 59% of the control and grows to 100%
   on hover, dragging the label's padding with it — so the label sits half on
   the photograph behind it, and only the arrow end is boxed.

   A previous round pinned that panel full width and black, which put a solid
   box round the whole label. Side by side against ardenthomes.co.uk the
   client chose the original, so the override is gone and custom.css's own
   rules apply again untouched.

   This sheet used to carry a blanket `transition: none !important` on every
   link, button and their contents, so that panel's .3s width and padding
   slide landed instantly along with every other hover on the site. Checked
   against ardenthomes.co.uk the client wanted the original's timing back, so
   the rule is gone and the theme's own transitions run everywhere again —
   this panel, the Roman Ridge banner's overlay and arrow, the accordion
   titles' padding, and the nav.
   -------------------------------------------------------------------------- */

/* The card's corner arrow is the same control at icon size. */
.cta-card .image__wrapper::after,
.banner-wrapper .arrow-wrapper {
  border-radius: var(--ah-btn-radius);
}

.gform_wrapper .gfield_select,
.gform_wrapper select.large {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 2.92857rem; /* 41px at the site's 14.0112px root */
  /* Chrome top-aligns a native select's selected text when the control is
     taller than its line box, so the value sat high while the chevron stayed
     centred. Padding the block axis by exactly half the slack — (2.92857rem
     height − 1.5rem line) / 2 — leaves a content box the height of one line,
     which centres it. select2 centres its own text on the original. */
  padding: 0.714286rem 2.75rem 0.714286rem 1rem;
  border: 0;
  border-radius: 0;
  background-color: #262524;
  /* The caret select2 draws is `arrow-bottom.svg` — a 14px off-white chevron,
     set on `.select2-selection__arrow::after` and sat 1.0625rem in from the
     right edge. This used to point at `CaretDown.svg`, which is the theme's
     other caret: a filled gold triangle at half opacity. Same job, wrong
     glyph, and it was the one thing that made these fields read as somebody
     else's form. `arrow-bottom.svg` is byte-identical to the original's. */
  background-image: url("../images/icons/arrow-bottom.svg");
  background-repeat: no-repeat;
  background-position: right 1.0625rem center;
  background-size: 14px auto;
  color: #f7f5f2;
  font-family: "Avenir Next Cyr", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  cursor: pointer;
}

.gform_wrapper .gfield_select:focus-visible {
  outline: 1px solid #ab905c;
  outline-offset: 2px;
}

/* The native dropdown list is drawn by the OS, so give it a readable ground. */
.gform_wrapper .gfield_select option {
  background-color: #262524;
  color: #f7f5f2;
}

/* Gravity Forms' honeypot is display:none on the live form; ours carries the
   real spam trap, so keep it out of the layout without hiding it from the
   submitted payload. */
.gform_wrapper .gform_validation_container {
  position: absolute !important;
  left: -9999px !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
}

/* The field grid's column gap is custom.css's to set — it keys off
   `.gform-theme--framework`, which the wrapper now carries, and switches from
   2% to 2rem above 64.06125em. It used to be pinned to a flat 2rem here, which
   at 390px made eleven 36px gaps in a 354px grid and pushed the page 23px wider
   than the viewport: the sideways scroll on mobile. Nothing to add now. */

/* Field metrics, measured off the live form: each single-line field is 64px
   tall (16.28px label + 6.72px gap + 41px control) and the message box is
   10rem, giving its field the original's 163px. Ours came up 6px short per
   field and 106px long on the textarea without these. */
.gform_wrapper .gform_fields .gfield > .gfield_label {
  margin-bottom: 0.48rem;
}

/* The framework sheet sizes textareas from its own custom properties, at a
   higher specificity than anything we can reasonably match here, so this one
   declaration is forced. 10rem reproduces the live box's 140px. */
.gform_wrapper .ginput_container_textarea textarea,
.gform_wrapper textarea.large {
  height: 10rem !important;
  min-height: 10rem !important;
  resize: vertical;
}

/* Consent checkbox. The reset strips the native control and the live site
   redraws it: a 1.5rem square with a hairline off-white rule, the label
   0.75rem to its right.

   The tick itself is not drawn here. Gravity Forms' framework theme paints it
   as a glyph on the input's ::before — `content: var(--gf-icon-ctrl-checkbox)`
   ("\e900") set in the `gform-icons-orbital` webfont, held at `opacity: 0`
   until `:checked`. That font ships in public/fonts and the form carries
   `gform-theme--framework`, so the rule applies on its own; custom.css paints
   the glyph #f7f5f2. An earlier round overrode this ::before with a gold
   square that scaled in, which is what put a filled box in the control
   instead of a tick. */
.gform_wrapper .gfield_checkbox .gchoice {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}

.gform_wrapper .gfield-choice-input[type="checkbox"] {
  display: grid;
  place-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  border: 0.666667px solid #f7f5f2;
  border-radius: 0;
  background-color: transparent;
  cursor: pointer;
}

.gform_wrapper .gfield-choice-input[type="checkbox"]:focus-visible {
  outline: 1px solid #ab905c;
  outline-offset: 2px;
}

.gform_wrapper .gform-field-label--type-inline {
  margin-left: 0.75rem;
  color: #f7f5f2;
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
}

/* Submit sits hard left under the consent line, as on the original.
   Box measured off the live button: 38px tall, #1a1a1a on a hairline gold rule. */
.gform_wrapper .gform_footer {
  justify-content: flex-start;
  margin-top: 0.1875rem;
}

.gform_wrapper .gform_button {
  height: auto;
  min-height: 0;
  padding: 0.5rem 1.375rem;
  border: 0.666667px solid #ab905c;
  border-radius: var(--ah-btn-radius);
  background-color: #1a1a1a;
  color: #f7f5f2;
  font-family: "Avenir Next Cyr", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  text-transform: none;
  /* Keep the label on one line at every breakpoint — it must never wrap and
     push the button to two rows. */
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s;
}

.gform_wrapper .gform_button:hover {
  background-color: #ab905c;
  color: #1a1a1a;
}

.gform_wrapper .gform_button[disabled] {
  opacity: 0.6;
  cursor: default;
}

.gform_wrapper .gform_validation_errors {
  margin-top: 1rem;
  color: #ab905c;
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   `.button-primary` fill panel
   The fill is a ::before at `z-index: -1`, so it only paints if some ancestor
   opens a stacking context to contain it. On the original that ancestor is
   `.ease-order__item`, whose reveal animation leaves a `transform` behind —
   a rule that lives in a theme sheet we don't ship. Without it the panel drops
   behind the page background and the hover state reads as black text on black.
   Isolating the control itself gives the ::before the same containment
   independent of the animation.
   -------------------------------------------------------------------------- */
.button-primary {
  isolation: isolate;
}

/* --------------------------------------------------------------------------
   Plot detail page
   The theme's property-details rows are `h6` + `p` on one flex line. Our
   description and local-area copy runs to several paragraphs, so they are
   wrapped — the wrapper takes the `p`'s flex share so it doesn't collapse
   against the label.
   -------------------------------------------------------------------------- */
/* Those rows are addressed in custom.css as `.plot-details li h6`, an element
   selector in an unlayered sheet that no utility can beat. The labels are now
   `h3` — the page's heading levels skipped from the section's h2 straight to
   h6 — so the layout the h6 rule carried is restated for their new element.
   Same declarations, same breakpoint, only the element name differs. */
.plot-details__section .plot-details li h3 {
  flex-basis: 30%;
  margin: 0;
}

@media print, screen and (max-width: 40.06125em) {
  .plot-details__section .plot-details li h3 {
    flex-basis: 37%;
  }
}

.plot-details__section .plot-details li > div {
  flex: 1;
}

.plot-details__section .plot-details li > div p:not(:last-child) {
  margin-bottom: 0.75rem;
}

/* --------------------------------------------------------------------------
   Text on the light grounds
   The theme is a dark site, so `custom.css` colours body text off-white with a
   bare `p { color: #f7f5f2 }`. On the pages still built from globals.css that
   beats the ink colour `.section-light` / `.section-gold` set for their
   children to inherit, and the copy comes out white on off-white. Handing those
   elements back to inheritance restores it. `:where()` keeps the specificity at
   the section class alone, and the eyebrow keeps its own gold.
   Goes away with globals.css once every page is on the theme's own sections.
   -------------------------------------------------------------------------- */
.section-light :where(p, li, dt, dd, blockquote, figcaption, td, th, strong, em, small):where(:not(.eyebrow)),
.section-gold :where(p, li, dt, dd, blockquote, figcaption, td, th, strong, em, small):where(:not(.eyebrow)) {
  color: inherit;
}

/* --------------------------------------------------------------------------
   Media viewer drawings
   The theme fills the viewer panel with `object-fit: cover`, which suits the
   photography behind the other tabs but crops the floor and site plans — on a
   drawing the cropped part is the dimensions and the key. Those two panels fit
   the whole sheet instead, on the ground the plans are drawn against so the
   letterboxing doesn't read as a gap.
   -------------------------------------------------------------------------- */
.media-viewer__section .tabs-content .tabs-panel--drawing img {
  object-fit: contain;
  background-color: #1a1a1a;
}

/* The original gives this section its padding through a per-section id rule,
   and the component's own id is generated at render, so there is nothing
   stable for the page's style block to key off — hence the class. Values are
   the original's, transcribed from its own style block: 4rem, opening out to
   9.6875rem at the theme's 641px and holding there through 1025px. Only the
   4rem was set here before, which left the section 567px against the
   original's 726px on every screen above the breakpoint. */
.media-viewer__section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media screen and (min-width: 641px) {
  .media-viewer__section {
    padding-top: 9.6875rem;
    padding-bottom: 9.6875rem;
  }
}

.single-hero__section .title__wrapper {
  margin-top: 2.75rem;
}

.single-hero__section .title__wrapper .post-info {
  margin-top: 2rem;
}

/* Clicking either control otherwise repainted it near-black. */
.plot-gallery__nav-button:focus,
.plot-gallery__nav-button:active {
  background-color: #ab905c;
}

.plot-gallery__nav-button:hover,
.plot-gallery__nav-button:focus-visible {
  background-color: #f7f5f2;
}

.plot-gallery__thumb:focus,
.plot-gallery__thumb:active {
  background: none;
}