/**
 * SecureClimate base: typography, page header, prose, listing entries and
 * cards, and neutralisation of the parent theme's reset for our controls.
 * Loaded on every page. Tokens only - no new colors, fonts or shadows.
 *
 * Scope: everything is under .sc-main (our <main> landmark) or an .sc-*
 * class, so Elementor-built content (.sc-main--elementor) keeps its own
 * styling.
 *
 * @package HelloElementorChild
 */

/* ==========================================================================
   Parent-theme reset neutralisation
   Hello Elementor's reset.css gives every <button>/[type=submit] a pink
   (#c36) border and a pink background on :hover/:focus, links a pink color,
   and inputs a grey border. Our controls restate their own look here with
   equal-or-higher specificity (this file loads after the parent CSS).
   ========================================================================== */

.sc-button,
button.sc-button,
[type="submit"].sc-button {
  border: 1px solid transparent;
  border-radius: var(--sc-button-radius);
  padding: var(--sc-button-padding-y) var(--sc-button-padding-x);
  font-size: var(--sc-text-button-size);
  font-weight: var(--sc-font-weight-semibold);
  white-space: normal;
  text-align: center;
  transition: none;
}

.sc-button--primary,
.sc-button--primary:hover,
.sc-button--primary:focus,
button.sc-button--primary:hover,
button.sc-button--primary:focus {
  background-color: var(--sc-color-action-green);
  border-color: var(--sc-color-action-green);
  color: var(--sc-color-white);
  text-decoration: none;
}

.sc-button--secondary,
.sc-button--secondary:hover,
.sc-button--secondary:focus {
  background-color: var(--sc-color-horizon-green);
  border-color: var(--sc-color-horizon-green);
  color: var(--sc-color-deep-ink);
  text-decoration: none;
}

/* Outline: same Action Green, used when a second action sits next to a primary one. */
.sc-button--outline,
.sc-button--outline:hover,
.sc-button--outline:focus {
  background-color: var(--sc-color-white);
  border-color: var(--sc-color-action-green);
  color: var(--sc-color-action-green);
  text-decoration: none;
}

.sc-button:hover {
  opacity: 0.9;
}

/* Icon/utility buttons from the existing header, drawer and navigation. */
.sc-header__menu-toggle,
.sc-header__menu-toggle:hover,
.sc-header__menu-toggle:focus,
.sc-mobile-nav__close,
.sc-mobile-nav__close:hover,
.sc-mobile-nav__close:focus,
.sc-nav__submenu-toggle,
.sc-nav__submenu-toggle:hover,
.sc-nav__submenu-toggle:focus,
.sc-nav__parent,
.sc-nav__parent:hover,
.sc-nav__parent:focus {
  border: none;
  border-radius: var(--sc-radius-sm);
  background-color: transparent;
  color: var(--sc-color-deep-ink);
  transition: none;
}

input.sc-input,
select.sc-select,
textarea.sc-textarea,
input.sc-input:focus,
select.sc-select:focus {
  border: 1px solid var(--sc-input-border-color);
  border-radius: var(--sc-input-radius);
  padding: var(--sc-space-2) var(--sc-space-3);
  transition: none;
}

/* Skip link (parent theme markup): brand colors, 44px, visible focus. */
.skip-link.screen-reader-text:focus {
  min-height: var(--sc-control-height);
  background-color: var(--sc-color-deep-ink);
  color: var(--sc-color-white);
  font-family: var(--sc-font-body);
  font-weight: var(--sc-font-weight-semibold);
  outline: var(--sc-focus-width) solid var(--sc-color-horizon-green);
  outline-offset: var(--sc-focus-offset);
}

/* ==========================================================================
   Main landmark and typography
   ========================================================================== */

body {
  background-color: var(--sc-color-white);
}

.sc-main {
  display: block;
  font-family: var(--sc-font-body);
  font-size: var(--sc-text-body-size);
  line-height: var(--sc-text-body-line-height);
  color: var(--sc-color-deep-ink);
  overflow-wrap: break-word;
}

:where(.sc-main:not(.sc-main--elementor)) h1,
:where(.sc-main:not(.sc-main--elementor)) h2,
:where(.sc-main:not(.sc-main--elementor)) h3,
:where(.sc-main:not(.sc-main--elementor)) h4,
:where(.sc-main:not(.sc-main--elementor)) h5,
:where(.sc-main:not(.sc-main--elementor)) h6 {
  font-family: var(--sc-font-heading);
  font-weight: var(--sc-font-weight-semibold); /* 700 is never used for Source Serif 4 */
  color: var(--sc-color-deep-ink);
  text-wrap: balance;
}

:where(.sc-main:not(.sc-main--elementor)) a {
  color: var(--sc-color-action-green);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

:where(.sc-main:not(.sc-main--elementor)) a:hover {
  text-decoration-thickness: 2px;
}

:where(.sc-main:not(.sc-main--elementor)) a.sc-button {
  text-decoration: none;
}

.sc-main a:focus-visible,
.sc-main button:focus-visible,
.sc-main input:focus-visible,
.sc-main select:focus-visible,
.sc-main summary:focus-visible {
  outline: var(--sc-focus-width) solid var(--sc-focus-color);
  outline-offset: var(--sc-focus-offset);
}

.sc-lead {
  margin: 0 0 var(--sc-space-5);
  font-size: var(--sc-text-body-lg-size);
  line-height: var(--sc-text-body-lg-line-height);
}

.sc-sep {
  margin: 0 var(--sc-space-2);
  color: var(--sc-color-muted-ink);
}

/* ==========================================================================
   Page header (breadcrumbs, label, H1, lead, meta, hero image)
   ========================================================================== */

.sc-page-header {
  padding: var(--sc-space-6) 0 var(--sc-space-7);
  border-bottom: 1px solid var(--sc-color-soft-border);
}

.sc-page-header--has-image {
  border-bottom: none;
  padding-bottom: 0;
}

.sc-page-header .sc-breadcrumbs {
  margin-bottom: var(--sc-space-6);
}

.sc-page-header__text {
  max-width: 100%;
}

.sc-page-header__eyebrow {
  margin: 0 0 var(--sc-space-3);
  color: var(--sc-color-action-green);
}

.sc-main .sc-page-header__eyebrow a {
  color: inherit;
  text-decoration: none;
}

.sc-main .sc-page-header__eyebrow a:hover {
  text-decoration: underline;
}

.sc-main .sc-page-header__title {
  margin: 0;
  font-size: var(--sc-text-h1-size-desktop);
  line-height: var(--sc-text-h1-line-height);
}

.sc-page-header__intro {
  margin: var(--sc-space-4) 0 0;
  font-size: var(--sc-text-body-lg-size);
  line-height: var(--sc-text-body-lg-line-height);
  color: var(--sc-color-muted-ink);
}

.sc-page-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sc-space-2) var(--sc-space-3);
  margin: var(--sc-space-5) 0 0;
  font-size: var(--sc-text-body-sm-size);
  line-height: var(--sc-text-body-sm-line-height);
  color: var(--sc-color-muted-ink);
}

.sc-page-header__meta .sc-sep {
  margin: 0;
}

.sc-page-header__media {
  margin: var(--sc-space-6) 0 0;
}

.sc-page-header__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--sc-radius-md);
  background-color: var(--sc-color-cloud);
}

.sc-page-header__media figcaption {
  margin-top: var(--sc-space-2);
}

/* Event date line in the header and listings. */
.sc-event-when {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sc-space-3);
  margin: 0;
}

.sc-event-when time {
  font-weight: var(--sc-font-weight-semibold);
  color: var(--sc-color-deep-ink);
}

/* ==========================================================================
   Prose (post content and WYSIWYG fields)
   ========================================================================== */

.sc-prose {
  max-width: 100%;
  font-size: var(--sc-text-body-lg-size);
  line-height: var(--sc-text-body-lg-line-height);
}

.sc-prose--small {
  font-size: var(--sc-text-body-size);
  line-height: var(--sc-text-body-line-height);
}

.sc-prose > * {
  margin-top: 0;
  margin-bottom: var(--sc-space-5);
}

.sc-prose > :last-child {
  margin-bottom: 0;
}

.sc-main .sc-prose h2 {
  margin: var(--sc-space-7) 0 var(--sc-space-4);
  font-size: var(--sc-text-h3-size-desktop);
  line-height: var(--sc-text-h3-line-height);
}

.sc-main .sc-prose h3 {
  margin: var(--sc-space-6) 0 var(--sc-space-3);
  font-size: var(--sc-text-h4-size-desktop);
  line-height: var(--sc-text-h4-line-height);
}

.sc-main .sc-prose h4,
.sc-main .sc-prose h5,
.sc-main .sc-prose h6 {
  margin: var(--sc-space-5) 0 var(--sc-space-2);
  font-size: var(--sc-text-h5-size);
  line-height: var(--sc-text-h5-line-height);
}

.sc-prose ul,
.sc-prose ol {
  padding-left: var(--sc-space-5);
}

.sc-prose li + li {
  margin-top: var(--sc-space-2);
}

.sc-prose blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: var(--sc-space-1) 0 var(--sc-space-1) var(--sc-space-5);
  border-left: 4px solid var(--sc-color-horizon-green);
  font-family: var(--sc-font-heading);
  font-size: var(--sc-text-h4-size-desktop);
  line-height: var(--sc-text-h4-line-height);
}

.sc-prose img,
.sc-prose video,
.sc-prose iframe {
  max-width: 100%;
  height: auto;
}

.sc-prose iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.sc-prose figure {
  margin-left: 0;
  margin-right: 0;
}

.sc-prose figcaption,
.sc-prose .wp-caption-text {
  margin-top: var(--sc-space-2);
  font-size: var(--sc-text-meta-size);
  line-height: var(--sc-text-meta-line-height);
  color: var(--sc-color-muted-ink);
}

/* Wide tables scroll inside themselves, never the page. */
.sc-prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--sc-text-body-sm-size);
}

.sc-prose th,
.sc-prose td {
  padding: var(--sc-space-2) var(--sc-space-3);
  border: 1px solid var(--sc-color-soft-border);
  text-align: left;
  vertical-align: top;
}

.sc-prose th {
  background-color: var(--sc-color-cloud);
}

.sc-prose hr {
  border: 0;
  border-top: 1px solid var(--sc-color-soft-border);
}

.sc-prose code {
  font-size: 0.9em;
  background-color: var(--sc-color-cloud);
  padding: 0 var(--sc-space-1);
  border-radius: var(--sc-radius-sm);
}

/* ==========================================================================
   Listing entries (rows) and cards
   Rows are the default everywhere - a thin divider, not a box - so long
   listings stay calm. Cards (image on top) are reserved for small
   editorial sets (blog spotlight, "from the blog").
   ========================================================================== */

.sc-entry-list {
  border-top: 1px solid var(--sc-color-soft-border);
}

.sc-entry--row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sc-space-4);
  padding: var(--sc-space-5) 0;
  border-bottom: 1px solid var(--sc-color-soft-border);
}

.sc-entry--row.sc-entry--has-image {
  grid-template-columns: minmax(0, 1fr) 88px;
}

.sc-entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sc-space-3);
  margin: 0 0 var(--sc-space-2);
  font-size: var(--sc-text-meta-size);
  line-height: var(--sc-text-meta-line-height);
  color: var(--sc-color-muted-ink);
}

.sc-entry__label {
  font-weight: var(--sc-font-weight-bold);
  letter-spacing: var(--sc-text-eyebrow-letter-spacing);
  text-transform: uppercase;
  font-size: var(--sc-text-eyebrow-size);
  color: var(--sc-color-action-green);
}

.sc-main .sc-entry__title {
  margin: 0;
  font-size: var(--sc-text-h4-size-desktop);
  line-height: var(--sc-text-h4-line-height);
}

.sc-main .sc-entry__link {
  color: var(--sc-color-deep-ink);
  text-decoration: none;
}

.sc-main .sc-entry__link:hover {
  color: var(--sc-color-action-green);
  text-decoration: underline;
}

.sc-entry__teaser {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: var(--sc-space-2) 0 0;
  color: var(--sc-color-muted-ink);
}

.sc-entry__media {
  order: 2;
}

.sc-entry__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--sc-radius-sm);
  background-color: var(--sc-color-cloud);
}

/* Card variant: image on top, no box. */
.sc-entry--card {
  display: flex;
  flex-direction: column;
}

.sc-entry--card .sc-entry__media {
  order: -1;
  margin-bottom: var(--sc-space-4);
}

.sc-entry--card .sc-entry__image {
  aspect-ratio: 16 / 9;
  border-radius: var(--sc-radius-md);
}

.sc-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sc-space-6) var(--sc-space-5);
}

/* Compact entry list inside related sections. */
.sc-entry-list--compact .sc-entry--row {
  padding: var(--sc-space-4) 0;
}

.sc-entry-list--compact .sc-entry__title {
  font-size: var(--sc-text-h5-size);
  line-height: var(--sc-text-h5-line-height);
}

/* ==========================================================================
   Small shared lists
   ========================================================================== */

.sc-link-list,
.sc-people,
.sc-tag-list,
.sc-social {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-link-list li + li {
  margin-top: var(--sc-space-1);
}

.sc-tag-list,
.sc-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-space-2) var(--sc-space-4);
}

.sc-social a {
  display: inline-flex;
  align-items: center;
  min-height: var(--sc-control-height);
}

.sc-people__item + .sc-people__item {
  margin-top: var(--sc-space-2);
}

.sc-people__item--detailed {
  display: flex;
  align-items: center;
  gap: var(--sc-space-3);
}

.sc-people__photo {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;
}

.sc-people__text {
  display: flex;
  flex-direction: column;
}

.sc-people__name {
  font-weight: var(--sc-font-weight-semibold);
}

.sc-people__role {
  font-size: var(--sc-text-body-sm-size);
  line-height: var(--sc-text-body-sm-line-height);
  color: var(--sc-color-muted-ink);
}

.sc-download__facts {
  margin-left: var(--sc-space-1);
  font-weight: var(--sc-font-weight-regular);
}

/* Visible only to logged-in editors (reconstruction queue, private Person preview). */
.sc-editor-notice {
  margin: var(--sc-space-5) 0;
  padding: var(--sc-space-4);
  border-left: 4px solid var(--sc-color-sun-yellow);
  background-color: var(--sc-color-cloud);
  font-size: var(--sc-text-body-sm-size);
}

/* ==========================================================================
   Responsive (Phase 49B tiers: <768 / 768-1023 / >=1024)
   ========================================================================== */

@media (min-width: 768px) {
  .sc-entry--row.sc-entry--has-image {
    grid-template-columns: minmax(0, 1fr) 200px;
    gap: var(--sc-space-6);
  }

  .sc-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .sc-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .sc-main .sc-page-header__title {
    font-size: var(--sc-text-h1-size-tablet);
  }

  .sc-main .sc-prose h2 {
    font-size: var(--sc-text-h3-size-tablet);
  }
}

@media (max-width: 767px) {
  .sc-page-header {
    padding: var(--sc-space-4) 0 var(--sc-space-6);
  }

  .sc-page-header .sc-breadcrumbs {
    margin-bottom: var(--sc-space-4);
  }

  .sc-main .sc-page-header__title {
    font-size: var(--sc-text-h1-size-mobile);
  }

  .sc-page-header__image {
    aspect-ratio: 16 / 9;
  }


  .sc-main .sc-prose h2 {
    font-size: var(--sc-text-h3-size-mobile);
  }

  .sc-main .sc-prose h3 {
    font-size: var(--sc-text-h4-size-mobile);
  }

  .sc-main .sc-entry__title {
    font-size: var(--sc-text-h4-size-mobile);
  }

  .sc-prose blockquote {
    font-size: var(--sc-text-h4-size-mobile);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sc-main *,
  .sc-main *::before,
  .sc-main *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* Two-item card sets (homepage blog spotlight: exactly 2 posts by design). */
@media (min-width: 1024px) {
  .sc-card-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Target sizes: desktop menu links and breadcrumb links reach 44px. */
.sc-nav__menu > .menu-item > a {
  min-height: var(--sc-control-height);
}

.sc-breadcrumbs__link,
.sc-breadcrumbs__current {
  display: inline-flex;
  align-items: center;
  min-height: var(--sc-control-height);
}

/* The taller breadcrumb targets absorb the space below them. */
.sc-page-header .sc-breadcrumbs {
  margin-top: calc(-1 * var(--sc-space-2));
  margin-bottom: var(--sc-space-4);
}

/* ==========================================================================
   Explore list (homepage Explore + Flexible Page / Country explore layout)
   Launch Kit language: white/Cloud surface, one Horizon green accent rule,
   text labels, no boxes. The whole item is the link target.
   ========================================================================== */

.sc-explore {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sc-space-5) var(--sc-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-explore__item {
  position: relative;
  padding-top: var(--sc-space-4);
  border-top: 3px solid var(--sc-color-horizon-green);
}

.sc-main .sc-explore__title {
  margin: 0 0 var(--sc-space-2);
  font-size: var(--sc-text-h4-size-desktop);
  line-height: var(--sc-text-h4-line-height);
}

.sc-main .sc-explore__link {
  color: var(--sc-color-deep-ink);
  text-decoration: none;
}

/* Stretch the title link over the whole item (large touch target). */
.sc-explore__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.sc-main .sc-explore__item--link:hover .sc-explore__link {
  color: var(--sc-color-action-green);
  text-decoration: underline;
}

.sc-explore__item--link:hover {
  border-top-color: var(--sc-color-action-green);
}

.sc-explore__text {
  margin: 0;
  color: var(--sc-color-muted-ink);
}

@media (min-width: 768px) {
  .sc-explore {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .sc-explore {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .sc-main .sc-explore__title {
    font-size: var(--sc-text-h4-size-mobile);
  }
}

/* ==========================================================================
   Listing entries: the title link covers the whole entry, so each row/card
   is one large touch target without enlarging the editorial type. Entries
   contain no other links (the label and date are plain text).
   ========================================================================== */

.sc-entry {
  position: relative;
}

.sc-entry__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.sc-main .sc-entry:hover .sc-entry__link {
  color: var(--sc-color-action-green);
  text-decoration: underline;
}

/* Compact related lists sit in two columns on tablet/desktop: keep the
   small thumbnail there so titles never get squeezed. */
.sc-entry-list--compact .sc-entry--row.sc-entry--has-image {
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: var(--sc-space-4);
}

/* ==========================================================================
   Reading text (Launch Kit: body 18px / 1.55 for reading). Applies to
   running text only - UI labels, controls, navigation, facts and listing
   summaries keep their sizes. Article text is 18px on phones as well.
   ========================================================================== */

.sc-term-rows__text,
.sc-cta__teaser,
.sc-empty__text {
  font-size: var(--sc-text-body-lg-size);
  line-height: var(--sc-text-body-lg-line-height);
}