/* ==========================================================================
   TERRAVANA — WORDPRESS & ELEMENTOR OVERRIDES
   Loaded last. Its only job is to stop platform defaults fighting the design
   system. Nothing here is a design decision; every rule neutralises something
   WordPress, Hello Elementor, Elementor, or Contact Form 7 injects.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HELLO ELEMENTOR
   The parent theme ships its own header and footer markup. This child theme
   supplies both, so the parent's are suppressed rather than styled.
   -------------------------------------------------------------------------- */

.site-header:not(.tv-header),
.site-footer:not(.tv-footer) { display: none; }

/* Hello's page wrapper adds a max-width our full-bleed sections must escape. */
.site-main,
.page-content { max-width: none; padding: 0; }

/* --------------------------------------------------------------------------
   1b. HELLO ELEMENTOR'S PINK BUTTONS
   reset.css ships an opinionated button style built around #C36 — a pink:

       button { border: 1px solid #c36; color: #c36 }
       button:hover, button:focus { background-color: #c36; color: #fff }

   The base rule is only (0,0,1), so base.css already beats it. The hover rule
   is (0,1,1) and therefore wins against any of our component selectors that
   set a hover colour but no hover BACKGROUND — which is why the FAQ accordion
   triggers, slider dots, nav toggles, drawer close and compare handle all
   flashed pink. Nothing on this site is ever pink.

   Matched to Hello's exact specificity so it neutralises the default and then
   yields to every real component rule, which sits at (0,2,0) or higher. A
   blunter, higher-specificity reset here would strip the borders, padding and
   transitions off .tv-slider__btn and .tv-filter-btn instead.
   -------------------------------------------------------------------------- */

/*
 * The button neutraliser now lives in base.css, not here.
 *
 * It has to load BEFORE components.css: at the specificity required to beat
 * Hello's attribute selectors, a rule in this file would also override
 * .tv-filter-btn and .tv-slider__btn and strip their borders.
 */

/* Hello also colours bare links #C36, and #336 navy on hover. base.css wins on
   order, but stating it here keeps the intent visible next to the button fix. */
a { color: var(--tv-link); }
a:hover,
a:active { color: var(--tv-link-hover); }

/* Hello sets every figcaption italic and #333. Captions on this site are a
   typographic decision made per component, not a global default. */
figcaption {
  font-style: normal;
  color: var(--tv-muted);
}

/* Links inside running prose need an underline: colour alone must not be the
   only thing distinguishing a link from body text (WCAG 1.4.1). */
.tv-prose p a,
.tv-prose li a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   2. ELEMENTOR CONTAINERS
   Every section is a full-bleed container holding one HTML widget. Elementor's
   default boxed padding would double up on the padding the section already
   sets, so it is zeroed here once instead of being overridden 70 times.
   -------------------------------------------------------------------------- */

.elementor-section-wrap > .elementor-section,
.elementor-element.e-con,
.e-con.e-flex,
.e-con-inner {
  --padding-top: 0;
  --padding-bottom: 0;
  --padding-left: 0;
  --padding-right: 0;
}

.e-con,
.e-con-inner { max-width: none; }

/* The HTML widget is a transparent carrier — it must add nothing of its own. */
.elementor-widget-html,
.elementor-widget-html .elementor-widget-container {
  margin: 0;
  padding: 0;
}

.elementor-widget:not(:last-child) { margin-block-end: 0; }

/* Elementor's default column gap would show as a seam between sections. */
.elementor-section.elementor-section-boxed > .elementor-container { max-width: none; }

/* Sections are siblings in one vertical stack; nothing should collapse or
   overlap at the joins. */
.tv-section + .tv-section { margin-top: 0; }

/* --------------------------------------------------------------------------
   2b. ELEMENTOR'S IMAGE RESET vs OUR MEDIA BOXES
   Elementor's frontend stylesheet ships:

       .elementor img { border:none; border-radius:0; box-shadow:none;
                        height:auto; max-width:100% }

   That is (0,1,1) — exactly the same specificity as our own `.tv-media img`
   — and Elementor's stylesheet is enqueued AFTER components.css, so it won
   on source order alone.

   The consequence was site-wide and easy to misread as a layout bug: every
   image inside a .tv-media box reverted to height:auto, which meant
   object-fit:cover never engaged and the picture sat at its natural ratio
   inside a taller aspect-ratio box, leaving dead space beneath it.

   Restated here at (0,2,1) so it wins on specificity rather than on load
   order, which keeps it correct even if the enqueue sequence changes.
   -------------------------------------------------------------------------- */

.elementor .tv-media img,
.tv-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Elementor also zeroes border-radius on every image. Our rounding lives on
   the .tv-media wrapper with overflow:hidden, so the crop still happens — but
   an image used on its own (post thumbnails, prose figures) needs it back. */
.elementor .tv-prose img,
.tv-prose img { border-radius: var(--tv-radius-md); }

/*
 * And it flattens the margin on every <figure> inside a widget:
 *
 *   .elementor .elementor-widget:not(.elementor-widget-text-editor)
 *   :not(.elementor-widget-theme-post-content) figure { margin: 0 }
 *
 * Four classes plus an element — (0,4,1). A section file setting
 * `.tv-compare-figure { margin-inline: auto }` is (0,1,0) and loses outright,
 * so a figure that centres itself on auto margins is pulled hard against the
 * left edge of its container. Only <figure> is affected, which is why a
 * neighbouring <div> in the same section stays centred and the break looks
 * like a one-off rather than a rule.
 *
 * Restated below with Elementor's own selector plus our class, so it clears
 * theirs by exactly one class and does not depend on which sheet loads last.
 * Any future theme figure that centres this way needs adding here too.
 */
.elementor .elementor-widget:not(.elementor-widget-text-editor):not(.elementor-widget-theme-post-content) figure.tv-compare-figure {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   3. ADMIN BAR
   The fixed header must sit below the admin bar, not underneath it.
   -------------------------------------------------------------------------- */

body.admin-bar .tv-header { top: 32px; }
body.admin-bar .tv-drawer { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .tv-header { top: 46px; }
  body.admin-bar .tv-drawer { top: 46px; }
}

/* --------------------------------------------------------------------------
   4. CORE BLOCK ALIGNMENT  (blog post content only)
   wp-block-library is dequeued on the front end, so the handful of alignment
   classes that actually matter in prose are restored here.
   -------------------------------------------------------------------------- */

.tv-prose .alignleft {
  float: left;
  margin: 0 var(--tv-space-5) var(--tv-space-4) 0;
  max-width: 50%;
}
.tv-prose .alignright {
  float: right;
  margin: 0 0 var(--tv-space-4) var(--tv-space-5);
  max-width: 50%;
}
.tv-prose .aligncenter {
  display: block;
  margin-inline: auto;
}
.tv-prose .alignwide {
  width: min(100vw - (var(--tv-gutter) * 2), 1040px);
  max-width: none;
  margin-inline: auto;
}
.tv-prose .alignfull {
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
}

.tv-prose .wp-caption { max-width: 100%; }
.tv-prose .wp-caption-text {
  margin-top: var(--tv-space-3);
  font-size: var(--tv-fs-caption);
  color: var(--tv-muted);
  text-align: center;
}

@media (max-width: 767px) {
  .tv-prose .alignleft,
  .tv-prose .alignright {
    float: none;
    margin-inline: 0;
    max-width: 100%;
  }
}

.tv-prose .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5. CONTACT FORM 7
   CF7 wraps every field in a <p> by default. The form layout is a grid, and
   stray paragraph margins break the row rhythm.
   -------------------------------------------------------------------------- */

.tv-form p { margin: 0; max-width: none; }
.tv-form br { display: none; }

.wpcf7 .screen-reader-response { position: absolute; clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; }

/* CF7's submit button inherits the site button, not the browser default. */
.tv-form .wpcf7-submit { width: auto; }

/*
 * inc/elementor.php dequeues CF7's stylesheet so form styling lives here
 * rather than fighting it. Two things that sheet did are not styling, though,
 * and dropping it left them undone — CF7's own scaffolding then draws an
 * empty box above and below every form on the site.
 */

/*
 * 1. The hidden-fields wrapper, above the first field.
 *
 * CF7 6.1 emits it as <fieldset class="hidden-fields-container"> carrying no
 * inline style, so with CF7's CSS gone it renders with the browser's default
 * fieldset border — a bordered empty strip full of _wpcf7 hidden inputs.
 * Older CF7 wrote <div style="display: none;">, which hid itself, which is
 * why this only appeared after a CF7 update rather than on day one.
 */
.wpcf7 .hidden-fields-container { display: none; }

/*
 * 2. The response output, below the submit button.
 *
 * <div class="wpcf7-response-output"> is always in the markup and empty until
 * there is something to report. CF7's sheet hides it for the three states
 * that have nothing to say; without that, the border components.css gives it
 * is drawn around nothing.
 *
 * Mirrors CF7's own selector list rather than hiding it by default and
 * re-showing per state, so a message state CF7 adds later still appears
 * instead of being silently suppressed.
 */
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output { display: none; }

/* --------------------------------------------------------------------------
   6. RANK MATH
   Its breadcrumb output is unused — the theme renders its own markup while
   Rank Math keeps emitting the BreadcrumbList structured data.
   -------------------------------------------------------------------------- */

.rank-math-breadcrumb { display: none; }

/* --------------------------------------------------------------------------
   7. SAFETY NETS
   -------------------------------------------------------------------------- */

/* An image without explicit dimensions is the most common CLS source on a
   photography-heavy site. */
img:not([width]):not([height]) { aspect-ratio: attr(width) / attr(height); }

/* Elementor sometimes leaves an empty wrapper when a widget is deleted; an
   empty carrier must not add vertical space. */
.elementor-widget-html:empty { display: none; }