/*
 * Supplement — WordPress-only styling.
 *
 * assets/css/main.css is a byte-for-byte copy of the original static site
 * stylesheet and is never edited, so that "same HTML + same CSS = same pixels"
 * stays provable. Everything in this file styles things the original site did
 * not have: generic block-widget output inside the footer, and the archive /
 * search / 404 / single templates WordPress requires but the design never
 * specified.
 *
 * Two blocks below do override the original stylesheet, both deliberately and
 * both documented where they sit:
 *
 *   1. Three .page-hero--* background images, re-declared as a custom property
 *      whose fallback is the original file, so an editor can replace them.
 *      Nothing changes until someone picks a new photo.
 *   2. The footer baseline row, centred below 720px at the client's request.
 *   3. The focus ring on the booking-form fields, replaced at the client's
 *      request with an indicator that suits an underline-style field.
 */

/* ---------------------------------------------------------------------------
   Editable hero background photos.
   These are the only three images the original design paints from CSS rather
   than an <img> tag, so they are re-declared here as a custom property whose
   fallback is the original file. The Page hero block sets --hero-photo inline
   only when an editor picks a different image; with nothing picked these rules
   resolve to exactly the same URLs main.css already used.
   --------------------------------------------------------------------------- */
.page-hero--about { background-image: var(--hero-photo, url("../images/rooftop-garden.jpg")); }
.page-hero--stays { background-image: var(--hero-photo, url("../images/studio-main.jpg")); }
.page-hero--gallery { background-image: var(--hero-photo, url("../images/hero-rooftop.jpg")); }

/* ---------------------------------------------------------------------------
   Footer widget areas — make generic block output inherit the on-brand look.
   --------------------------------------------------------------------------- */
.site-footer .footer-widget { margin: 0; }
.site-footer .footer-widget + .footer-widget { margin-top: 26px; }

.site-footer .footer-widget h1,
.site-footer .footer-widget h2,
.site-footer .footer-widget h3,
.site-footer .footer-widget h4,
.site-footer .footer-widget h5,
.site-footer .footer-widget h6,
.site-footer .footer-widget .wp-block-heading {
  margin: 0 0 16px;
  color: var(--white);
  font: 400 26px/1.15 var(--serif);
  letter-spacing: -.02em;
}

.site-footer__lead .footer-widget h1,
.site-footer__lead .footer-widget h2,
.site-footer__lead .footer-widget .wp-block-heading {
  font-size: clamp(62px, 7.3vw, 118px);
  line-height: .92;
  letter-spacing: -.055em;
}

.site-footer .footer-widget p {
  margin: 0 0 14px;
  color: rgba(255,255,255,.6);
  font: 400 16px/1.6 var(--serif);
}
.site-footer .footer-widget p:last-child { margin-bottom: 0; }

.site-footer .footer-widget ul,
.site-footer .footer-widget ol {
  display: grid;
  align-content: start;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer .footer-widget li { margin: 0; }

.site-footer .footer-widget a,
.site-footer .footer-widget li a {
  width: fit-content;
  color: rgba(255,255,255,.7);
  text-decoration: none;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .13em;
  text-transform: uppercase;
  transition: color .25s ease;
}
.site-footer .footer-widget a:hover { color: var(--saffron); }

.site-footer .footer-widget p a {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: none;
  text-decoration: underline;
  text-decoration-color: var(--saffron);
  text-underline-offset: 4px;
}

.site-footer .footer-widget .wp-block-navigation__container,
.site-footer .footer-widget nav ul {
  display: grid;
  gap: 14px;
}
.site-footer .footer-widget figure,
.site-footer .footer-widget img { margin: 0; max-width: 100%; height: auto; }
.site-footer .footer-widget .wp-block-button__link,
.site-footer .footer-widget .wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0 32px;
  color: var(--white);
  background: var(--saffron);
  border: 0;
  border-radius: 999px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .13em;
  text-transform: uppercase;
  transition: background .25s ease, transform .25s ease;
}
.site-footer .footer-widget .wp-block-button__link:hover {
  color: var(--white);
  background: var(--teal);
  transform: translateY(-2px);
}
.site-footer .footer-widget .wp-block-search__input,
.site-footer .footer-widget input[type="search"],
.site-footer .footer-widget input[type="text"],
.site-footer .footer-widget input[type="email"] {
  width: 100%;
  min-height: 48px;
  padding: 10px 0;
  color: var(--white);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.3);
  border-radius: 0;
}
.site-footer__base .footer-widget,
.site-footer__base .footer-widget p {
  color: inherit;
  font: inherit;
}

/* ---------------------------------------------------------------------------
   Booking button inside the mobile menu panel.

   The design's own `.mobile-book` sat in the header's third grid cell, which
   only has room for a one-word label — anything longer wraps into the
   wordmark. It was moved into the menu panel instead, below the navigation and
   above the panel foot, where a full-size button fits at any label length.
   `.button.button--saffron` does the styling; these two declarations only
   place it. The `.mobile-book` rules in main.css are now dormant, because that
   element is no longer rendered anywhere.
   --------------------------------------------------------------------------- */
.menu-panel__book {
  justify-self: start;
  margin: 30px 0 34px;
}

/* ---------------------------------------------------------------------------
   Footer baseline row, centred on phones.

   main.css stacks the two cells into a column below 720px but leaves them
   flush left, so the longer right-hand cell wraps into a ragged block. Both
   axes are needed: align-items centres each cell in the column, text-align
   centres the wrapped lines inside a cell. Requested by the client; the same
   720px breakpoint main.css uses, so the two never disagree.
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .site-footer__base {
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

/* ---------------------------------------------------------------------------
   Archive / search / 404 / single — templates the original design never had.
   Built from the existing components; these rules only fill the gaps.
   --------------------------------------------------------------------------- */
.entry-grid h3 a { text-decoration: none; transition: color .25s ease; }
.entry-grid h3 a:hover { color: var(--teal); }
.entry-grid .text-link { margin-top: 20px; }
.entry-empty { margin: 0 0 30px; color: #526774; font: 400 18px/1.7 var(--serif); }

.wp-pagenavi,
.navigation.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 55px;
  padding-top: 30px;
  border-top: 1px solid var(--rule);
}
.navigation.pagination .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; }
.navigation.pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 46px;
  min-height: 46px;
  padding: 0 12px;
  color: var(--navy);
  border: 1px solid var(--rule);
  border-radius: 999px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .1em;
  transition: color .25s ease, background .25s ease;
}
.navigation.pagination .page-numbers:hover,
.navigation.pagination .page-numbers.current { color: var(--white); background: var(--navy); }

.search-form,
.wp-block-search__inside-wrapper {
  display: flex;
  align-items: center;
  gap: 14px;
}
.search-form label { flex: 1; }
.search-form .search-field,
.wp-block-search__input {
  width: 100%;
  min-height: 48px;
  padding: 10px 0;
  color: var(--navy);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(8,42,74,.3);
  border-radius: 0;
  font: 400 17px/1.4 var(--sans);
}
.search-form .search-submit,
.wp-block-search__button {
  min-height: 48px;
  padding: 0 24px;
  color: var(--white);
  background: var(--navy);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.entry-body { max-width: 820px; }
.entry-body > * { max-width: 100%; }
.entry-body p,
.entry-body li { color: #526774; font: 400 18px/1.8 var(--serif); }
.entry-body h2,
.entry-body h3,
.entry-body h4 {
  margin: 48px 0 14px;
  color: var(--navy);
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.03em;
}
.entry-body h2 { font-size: 40px; line-height: 1.05; }
.entry-body h3 { font-size: 31px; line-height: 1.1; }
.entry-body h4 { font-size: 24px; line-height: 1.2; }
.entry-body a { text-decoration-color: var(--saffron); text-underline-offset: 5px; }
.entry-body img { height: auto; }
.entry-body figure { margin: 40px 0; }
.entry-body figcaption {
  margin-top: 12px;
  color: var(--muted);
  font: 400 14px/1.5 var(--serif);
}
.entry-body blockquote {
  margin: 40px 0;
  padding-left: 28px;
  border-left: 1px solid var(--saffron);
}
.entry-body blockquote p { font-style: italic; }

/* Keep long-form archive text off the fixed header. */
.page-hero .search-form { width: 100%; }

/* ---------------------------------------------------------------------------
   Focus styling for the booking-form controls.

   main.css line 23 gives the whole site `:focus-visible { outline: 3px solid
   var(--saffron); outline-offset: 4px; }`. On a rounded button or a link that
   reads fine, but on these underline-style fields the offset box floats over
   the label above and looks like an error state. Requested removed.

   It is replaced rather than deleted: a focus indicator is what tells a
   keyboard user where they are, and dropping it outright fails WCAG 2.4.7. The
   field's own bottom rule turns saffron and doubles in weight instead, which
   is the same visual language the design already uses. padding-bottom drops by
   the 1px the border gains, so nothing moves when a field is focused.

   Buttons and links keep the original ring — this is scoped to .field only.
   --------------------------------------------------------------------------- */
/* The box itself goes on any focus, so a mouse click never draws one. */
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; }

/* The replacement indicator is keyboard-only, matching the original rule,
   so pointer users see exactly what they saw before. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--saffron);
}

/* ---------------------------------------------------------------------------
   Contact Form 7 compatibility.

   CF7 renders its own <form class="wpcf7-form">, so main.css's `.booking-form`
   grid never reaches it. Everything below re-applies the designed layout to
   whatever CF7 renders inside .booking-form-wrap, which is the only place the
   theme ever prints a form shortcode. The whole block is scoped to that
   wrapper, so it also outranks the plugin's own stylesheet regardless of which
   of the two is enqueued first, and it cannot leak into any other form on the
   site. Nothing here applies unless CF7 is actually installed.
   --------------------------------------------------------------------------- */

/* The same declarations main.css gives .booking-form, and the same 720px
   breakpoint, so the CF7 form and the built-in one lay out identically. */
.booking-form-wrap .wpcf7-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 0;
}
@media (max-width: 720px) {
  .booking-form-wrap .wpcf7-form { grid-template-columns: 1fr; }
}

/* CF7 wraps every control in an extra <span>, which sits between .field and
   the input. Making it a block keeps the .field grid a two-row stack. */
.booking-form-wrap .wpcf7-form-control-wrap { display: block; }
.booking-form-wrap .wpcf7-form-control-wrap > input,
.booking-form-wrap .wpcf7-form-control-wrap > select,
.booking-form-wrap .wpcf7-form-control-wrap > textarea { width: 100%; }

/* Belt and braces for sites that have not switched WPCF7_AUTOP off: the stray
   <br> and empty <p> wpautop leaves behind would become extra grid rows. */
.booking-form-wrap .wpcf7-form .field br { display: none; }
.booking-form-wrap .wpcf7-form > p:empty { display: none; }

/* CF7 hides its own hidden-field container, but be explicit — an element that
   is not display:none here would claim a grid cell. */
.booking-form-wrap .wpcf7-form > input[type="hidden"] { display: none; }

/* The response message is a direct child of the form, i.e. a grid item.
   The selectors carry .wpcf7 so they outrank CF7's `.wpcf7 form.sent …`. */
.booking-form-wrap .wpcf7 .wpcf7-response-output {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  padding: 14px 18px;
  border: 1px solid rgba(8,42,74,.25);
  border-radius: 0;
  color: var(--navy);
  font: 400 14px/1.5 var(--serif);
}
.booking-form-wrap .wpcf7 form.sent .wpcf7-response-output { border-color: var(--saffron); }
.booking-form-wrap .wpcf7 form.invalid .wpcf7-response-output,
.booking-form-wrap .wpcf7 form.unaccepted .wpcf7-response-output,
.booking-form-wrap .wpcf7 form.spam .wpcf7-response-output,
.booking-form-wrap .wpcf7 form.failed .wpcf7-response-output,
.booking-form-wrap .wpcf7 form.aborted .wpcf7-response-output { border-color: #b3401f; }

.booking-form-wrap .wpcf7-not-valid-tip {
  margin-top: 6px;
  color: #b3401f;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}
.booking-form-wrap .wpcf7-not-valid { border-bottom-color: #b3401f; }

/* A field that failed validation stays red while it is being corrected,
   instead of the focus rule painting it saffron. */
.field .wpcf7-not-valid:focus-visible { border-bottom-color: #b3401f; }

/* CF7's spinner carries margin: 0 24px, which would double the flex gap. */
.booking-form-wrap .wpcf7 .wpcf7-spinner { margin: 0; }

/* CF7 renders <input type="submit">, not <button>; .button in main.css is a
   class selector so it already styles it. These fill the two gaps. */
.booking-form-wrap .booking-form__action .wpcf7-submit {
  width: auto;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* CF7 wraps the form in <div class="wpcf7">; it must not add its own box. */
.booking-form-wrap .wpcf7 { margin: 0; }