/* ==========================================================================
   OWNA routing — "Which centre?" step on Book a Tour and Enrol.
   The step is the theme's .block-image-text-two, reversed; the rules below
   add only what that block lacks. See functions/owna-routing.php
   ========================================================================== */

/* --------------------------------------------------------------------------
   Dropdown — the theme's .form-select, with the field styling that the
   theme otherwise scopes to .block-contact-two.
   -------------------------------------------------------------------------- */

.wfel-owna .form-group {
  position: relative;
  width: 100%;
}
.wfel-owna .form-control {
  display: block;
  width: 100%;
  height: 40px;
  border-style: solid;
  border-color: #000;
  border-width: 0 0 1px;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
          appearance: none;
  background: transparent;
  color: #374328;
  font-family: "proxima-nova", sans-serif;
  font-size: 18px;
  font-weight: 400;
}
.wfel-owna .form-control::placeholder {
  opacity: 1;
  color: #374328;
}
@media (max-width: 767.98px) {
  .wfel-owna .form-control {
    font-size: 16px;
    height: 36px;
  }
}

/* The list opens in the flow so it can't run under the next block. */
.wfel-owna .form-group.form-select.wfel-owna__select ul {
  position: static;
}
/* The theme pins the arrow to the bottom of the group, which grows when the
   list opens. Pin it from the top, where it sits when closed. */
.wfel-owna .form-group.form-select.wfel-owna__select .button {
  top: 16px;
  bottom: auto;
}
@media (max-width: 767.98px) {
  .wfel-owna .form-group.form-select.wfel-owna__select .button {
    top: 14px;
  }
}

/* Options are links so a choice loads the page with ?centre= set. */
.wfel-owna__select ul li {
  padding: 0;
}
.wfel-owna-section .text-box .wfel-owna__select ul li a {
  font-weight: inherit;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 4px 16px;
  color: inherit;
  text-decoration: none;
}

.wfel-owna__fallback a {
  color: #374328;
}

/* --------------------------------------------------------------------------
   Buttons and OWNA options
   -------------------------------------------------------------------------- */

/* Same size and weight as the theme's in-page .button (10px 29px, 1px
   border, 30px radius, 700), filled in the header's Enrol Now pink. Scoped
   tightly enough to beat the theme's .text-box a:not(.button) (600, gold
   hover), which every link in this column otherwise picks up. */
.wfel-owna-section .text-box a.wfel-owna__btn {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 29px;
  border: 1px solid #e5a391;
  border-radius: 30px;
  background: #e5a391;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.2s, border-color 0.2s;
}
.wfel-owna-section .text-box a.wfel-owna__btn:hover,
.wfel-owna-section .text-box a.wfel-owna__btn:focus-visible {
  border-color: #374328;
  background: #374328;
  color: #fff;
}

/* Pale rounded panels: one holds the centre dropdown, two sit side by side
   for the OWNA waitlist and enrolment options. The top padding is 8px less
   than the bottom because the heading face carries its own space above the
   letters, so the two edges read as equal. */
.wfel-owna__panel,
.wfel-owna__option {
  padding: 24px 32px 32px;
  border-radius: 16px;
  background: #f0efe6;
}
@media (max-width: 575.98px) {
  .wfel-owna__panel,
  .wfel-owna__option {
    padding: 18px 24px 24px;
  }
}
.wfel-owna__panel {
  margin-top: 32px;
}

/* One spacing scale inside every box: 12px under the heading, 20px under
   the text. Scoped past the block's own p:not(:last-child) margin. */
.wfel-owna-section .text-box .wfel-owna__panel h3,
.wfel-owna-section .text-box .wfel-owna__option h3 {
  margin-top: 0;
  margin-bottom: 12px;
  line-height: 1.2;
}
.wfel-owna-section .text-box .wfel-owna__panel p,
.wfel-owna-section .text-box .wfel-owna__option p {
  margin: 0 0 20px;
}

/* Box headings keep the same step down from the block's h2 at every size:
   the h2 drops from 40px to 29px under 576px, so these drop from 29px to
   21px with it rather than matching it. */
@media (max-width: 575.98px) {
  .wfel-owna-section .text-box .wfel-owna__panel h3,
  .wfel-owna-section .text-box .wfel-owna__option h3 {
    font-size: 21px;
  }
}

/* Two equal boxes whose headings, text and buttons share rows (subgrid), so
   the buttons line up and every box has the same gaps whatever the length
   of its text. */
.wfel-owna__options {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  column-gap: 24px;
}
.wfel-owna__option {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-items: start;
  justify-items: start;
}
@media (max-width: 575.98px) {
  .wfel-owna__options {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: 24px;
  }
  .wfel-owna__option {
    grid-row: auto;
    grid-template-rows: none;
  }
}
.wfel-owna-section .text-box .wfel-owna__option a.wfel-owna__btn {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   Block fit
   -------------------------------------------------------------------------- */

/* The block styles every .button inside it as a pill; the dropdown arrow
   shares that class name, so put it back to a plain arrow. */
.wfel-owna-section .text-box .form-group.form-select .button {
  display: block;
  width: 19px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

/* The theme's .text-box link hover turns links gold; keep the dropdown
   links in the text colour. */
.wfel-owna-section .text-box .wfel-owna__select ul li a:hover {
  color: #374328;
}

/* Flowers placed exactly as on the tour form's block (.block-contact-two),
   which this step stands in for: the left one hangs from the top into the
   banner, the right one sits low and runs past the bottom. */
.wfel-owna-section .plant.is-left {
  top: 0;
  bottom: auto;
  transform: translate(-39.2%, -22.5%);
}
.wfel-owna-section .plant.is-right {
  top: auto;
  bottom: 0;
  transform: translate(39.4%, 62%);
}