/**
 * SecureClimate reusable design-system components.
 *
 * Phase 49H scope: presentation-only CSS primitives for later PHP
 * templates, ACF-driven output, and Elementor content. No content
 * templates, no database queries, no JavaScript, no search/filter logic.
 *
 * Existing primitives from Phase 49C (assets/css/secureclimate-brand-
 * tokens.css) are reused as-is and are NOT redefined here: .sc-button,
 * .sc-button--primary, .sc-button--secondary, .sc-link, .sc-eyebrow,
 * .sc-meta. All colors/spacing/typography below reference existing
 * tokens only - no new hex colors, no new fonts.
 *
 * @package HelloElementorChild
 */

/* ==========================================================================
   Accessibility utility
   Needed by the search and pagination primitives below for icon-only or
   context-only controls that require an accessible name without visible
   text. Standard "visually hidden but available to screen readers"
   pattern - not a visual component.
   ========================================================================== */

.sc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   1. Container
   ========================================================================== */

.sc-container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--sc-content-width);
  margin: 0 auto;
  padding-left: var(--sc-container-padding-desktop);
  padding-right: var(--sc-container-padding-desktop);
}

@media (max-width: 1023px) {
  .sc-container {
    padding-left: var(--sc-container-padding-tablet);
    padding-right: var(--sc-container-padding-tablet);
  }
}

@media (max-width: 767px) {
  .sc-container {
    padding-left: var(--sc-container-padding-mobile);
    padding-right: var(--sc-container-padding-mobile);
  }
}

/* ==========================================================================
   2. Reading width
   Usable inside a wider .sc-container section for long-form editorial
   text; not applied globally.
   ========================================================================== */

.sc-reading {
  max-width: var(--sc-reading-width);
}

/* ==========================================================================
   7. Tags
   Color communicates emphasis only - the text label is always present,
   so meaning never depends on color alone.
   ========================================================================== */

.sc-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--sc-space-1) var(--sc-space-3);
  border-radius: var(--sc-radius-sm);
  font-family: var(--sc-font-body);
  font-weight: var(--sc-font-weight-semibold);
  font-size: var(--sc-text-tag-size);
  line-height: var(--sc-text-tag-line-height);
  letter-spacing: var(--sc-text-tag-letter-spacing);
  color: var(--sc-color-deep-ink);
  background-color: var(--sc-color-cloud);
}

.sc-tag--mint {
  background-color: var(--sc-color-fresh-mint);
}

.sc-tag--coral {
  background-color: var(--sc-color-warm-coral);
}

.sc-tag--yellow {
  background-color: var(--sc-color-sun-yellow);
}

/* ==========================================================================
   8. Cards
   Generic container - not styled per content type. Optional colored top
   border is a modifier, not a separate component.
   ========================================================================== */

.sc-card {
  box-sizing: border-box;
  display: block;
  padding: var(--sc-card-padding);
  border: 1px solid var(--sc-card-border-color);
  border-radius: var(--sc-card-radius);
  background-color: var(--sc-color-white);
}

.sc-card--blue {
  border-top: 4px solid var(--sc-color-clear-blue);
}

.sc-card--violet {
  border-top: 4px solid var(--sc-color-vivid-violet);
}

.sc-card__heading {
  margin: 0 0 var(--sc-space-2);
  font-family: var(--sc-font-heading);
  font-weight: var(--sc-font-weight-semibold);
  font-size: var(--sc-text-h4-size-desktop);
  line-height: var(--sc-text-h4-line-height);
  color: var(--sc-color-deep-ink);
}

.sc-card__body {
  margin: 0;
  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);
}

@media (max-width: 767px) {
  .sc-card {
    padding: var(--sc-space-5); /* 20px card padding on mobile, per spec */
  }
}

/* ==========================================================================
   9. Callouts
   ========================================================================== */

.sc-callout {
  box-sizing: border-box;
  padding: var(--sc-space-5);
  border-radius: var(--sc-card-radius);
  background-color: var(--sc-color-cloud); /* neutral surface by default */
}

.sc-callout--mint {
  background-color: var(--sc-color-fresh-mint);
}

.sc-callout--bordered {
  background-color: var(--sc-color-white);
  border-radius: 0;
  border-left: 4px solid var(--sc-color-clear-blue);
}

.sc-callout--bordered.sc-callout--violet {
  border-left-color: var(--sc-color-vivid-violet);
}

.sc-callout__icon {
  display: inline-flex;
}

.sc-callout__heading {
  margin: 0 0 var(--sc-space-2);
  font-family: var(--sc-font-heading);
  font-weight: var(--sc-font-weight-semibold);
  font-size: var(--sc-text-h4-size-desktop);
  line-height: var(--sc-text-h4-line-height);
  color: var(--sc-color-deep-ink);
}

.sc-callout__body {
  margin: 0;
  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);
}

.sc-callout__body + .sc-callout__actions {
  margin-top: var(--sc-space-4);
}

/* ==========================================================================
   10. Breadcrumbs
   ========================================================================== */

.sc-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--sc-font-body);
  font-size: var(--sc-text-body-sm-size);
  line-height: var(--sc-text-body-sm-line-height);
}

.sc-breadcrumbs__item {
  display: flex;
  align-items: center;
}

.sc-breadcrumbs__item:not(:last-child)::after {
  content: "/";
  margin: 0 var(--sc-space-2);
  color: var(--sc-color-muted-ink);
}

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

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

.sc-breadcrumbs__link:focus-visible {
  outline: var(--sc-focus-width) solid var(--sc-focus-color);
  outline-offset: var(--sc-focus-offset);
}

.sc-breadcrumbs__current {
  color: var(--sc-color-deep-ink);
}

/* ==========================================================================
   11. Pagination
   ========================================================================== */

.sc-pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sc-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: var(--sc-control-height);
  min-height: var(--sc-control-height);
  padding: 0 var(--sc-space-3);
  border-radius: var(--sc-radius-sm);
  font-family: var(--sc-font-body);
  font-weight: var(--sc-font-weight-semibold);
  font-size: var(--sc-text-body-size);
  color: var(--sc-color-action-green);
  text-decoration: underline;
}

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

.sc-pagination__link:focus-visible {
  outline: var(--sc-focus-width) solid var(--sc-focus-color);
  outline-offset: var(--sc-focus-offset);
}

.sc-pagination__link[aria-current="page"] {
  background-color: var(--sc-color-deep-ink);
  color: var(--sc-color-white);
  text-decoration: none;
  cursor: default;
}

/* ==========================================================================
   12. Form controls
   ========================================================================== */

.sc-field {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-2);
}

.sc-label {
  font-family: var(--sc-font-body);
  font-weight: var(--sc-font-weight-semibold);
  font-size: var(--sc-text-body-sm-size);
  line-height: var(--sc-text-body-sm-line-height);
  color: var(--sc-color-deep-ink);
}

.sc-input,
.sc-select,
.sc-textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--sc-control-height);
  padding: var(--sc-space-2) var(--sc-space-3);
  border: 1px solid var(--sc-input-border-color);
  border-radius: var(--sc-input-radius);
  background-color: var(--sc-color-white);
  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);
}

.sc-textarea {
  min-height: calc(var(--sc-control-height) * 2);
  resize: vertical;
}

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

.sc-field--checkbox,
.sc-field--radio {
  flex-direction: row;
  align-items: center;
  min-height: var(--sc-control-height);
  gap: var(--sc-space-3);
}

.sc-field--checkbox input,
.sc-field--radio input {
  width: 20px;
  height: 20px;
  accent-color: var(--sc-color-action-green);
  flex-shrink: 0;
}

.sc-field--checkbox input:focus-visible,
.sc-field--radio input:focus-visible {
  outline: var(--sc-focus-width) solid var(--sc-focus-color);
  outline-offset: var(--sc-focus-offset);
}

.sc-field--checkbox .sc-label,
.sc-field--radio .sc-label {
  font-weight: var(--sc-font-weight-regular);
}

/* ==========================================================================
   13. Search / filter UI primitives (presentation only)
   ========================================================================== */

.sc-search {
  display: flex;
  align-items: stretch;
  gap: var(--sc-space-2);
}

.sc-search__input {
  flex: 1 1 auto;
}

.sc-search__submit {
  flex-shrink: 0;
  width: var(--sc-control-height);
  height: var(--sc-control-height);
}

.sc-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sc-space-3);
}

.sc-filter-control {
  flex: 0 1 auto;
}

.sc-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-space-2);
  min-height: var(--sc-control-height);
  padding: var(--sc-space-2) var(--sc-space-3);
  border: 1px solid var(--sc-color-soft-border);
  border-radius: var(--sc-radius-sm);
  background-color: var(--sc-color-cloud);
  font-family: var(--sc-font-body);
  font-size: var(--sc-text-body-sm-size);
  color: var(--sc-color-deep-ink);
}

.sc-filter-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--sc-control-height);
  min-height: var(--sc-control-height);
  margin: calc(-1 * var(--sc-space-2)) calc(-1 * var(--sc-space-3))
    calc(-1 * var(--sc-space-2)) 0;
  border: none;
  background: transparent;
  color: var(--sc-color-deep-ink);
  cursor: pointer;
}

.sc-filter-chip__remove:focus-visible {
  outline: var(--sc-focus-width) solid var(--sc-focus-color);
  outline-offset: var(--sc-focus-offset);
}

.sc-filter-clear {
  color: var(--sc-color-action-green);
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--sc-font-body);
  font-size: var(--sc-text-body-sm-size);
  cursor: pointer;
}

.sc-filter-clear:focus-visible {
  outline: var(--sc-focus-width) solid var(--sc-focus-color);
  outline-offset: var(--sc-focus-offset);
}

/* ==========================================================================
   14. Responsive grid primitives
   Generic content grids - not tied to any content type. Choose --3 or
   --4 depending on the content being laid out.
   ========================================================================== */

.sc-grid {
  display: grid;
  gap: var(--sc-space-5);
  grid-template-columns: 1fr;
}

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

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

  .sc-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ==========================================================================
   Reduced motion
   No component above animates by default; this rule only guards the
   :hover opacity transitions if a future implementer adds a transition
   property to any of them.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .sc-button,
  .sc-link,
  .sc-breadcrumbs__link,
  .sc-pagination__link,
  .sc-filter-clear {
    transition: none;
  }
}