/* Theme base styles (not overwritten by generator) */

html, body {
  height: 100%;
}

body {
  /*
    Split into longhands on purpose: the `background` shorthand would reset
    background-image, and this file is enqueued AFTER the generated stylesheet
    that defines --bg-image (site background treatment, variability tranche 6b).
    Sites with a solid treatment simply never define the variable.
  */
  background-color: var(--color-bg);
  background-image: var(--bg-image, none);
  background-size: var(--bg-size, auto);
  background-attachment: fixed;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

@media (prefers-reduced-transparency: reduce) {
  body {
    background-image: none;
  }
}

img {
  max-width: 100%;
  height: auto;
}

/*
  Deterministic container behavior.
  Even if Tailwind fails to load, generated templates keep correct gutters.
*/
.container {
  width: 100%;
  max-width: var(--content-width-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

/* Ensure "readable" sections can opt-in via inline max-width */
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Fix desktop header visibility when generator hardcodes inline display:none */
@media (min-width: 1024px) {
  #site-navigation { display: flex !important; }
  #masthead > div > div.lg\:flex { display: flex !important; }
  #mobile-menu-toggle { display: none !important; }
  #mobile-menu { display: none !important; }
}

/*
  Sticky header (applied by assets/js/header-sticky.js).
  Do not put position:sticky on the whole <header> in generated header.php for tall multi-band layouts.
*/
.trf-is-sticky {
  position: sticky;
  top: var(--trf-admin-bar-offset, 0px);
  z-index: 40;
}

header.trf-site-header[data-trf-sticky="none"] .trf-is-sticky {
  position: static;
}


/* Mobile nav must render above hero, cookie notice, and page stacking contexts */
.trf-site-header,
header.trf-site-header {
  position: relative;
  z-index: 1100;
  overflow: visible;
}

.trf-header__bar,
.trf-mnav {
  overflow: visible;
}

.trf-mnav {
  position: relative;
  z-index: 1101;
}

.trf-mnav__panel {
  z-index: 1102;
}

@media (max-width: 767px) {
  .trf-is-sticky {
    z-index: 1100;
  }

  .trf-header__backdrop {
    z-index: 10050 !important;
  }

  .trf-header__sheet {
    z-index: 10051 !important;
    max-height: min(85vh, calc(100dvh - 4rem));
    padding-bottom: calc(var(--spacing-lg) + env(safe-area-inset-bottom, 0px));
  }

  .trf-header__toggle {
    position: relative;
    z-index: 10052 !important;
  }

  .trf-site-header.trf-header.is-open .trf-header__sheet {
    transform: translateY(0) !important;
  }
}

/* Cookie notice stays below open mobile menu */
.trf-site-header.trf-header.is-open ~ * .trf-cookie-notice,
body.trf-menu-open .trf-cookie-notice {
  z-index: 9000 !important;
}

@media (min-width: 768px) {
  .md\:flex-row { flex-direction: row; }
  .md\:flex-col { flex-direction: column; }
  .md\:items-center { align-items: center; }
  .md\:justify-between { justify-content: space-between; }
  .md\:order-1 { order: 1; }
  .md\:order-2 { order: 2; }
}

/* Layout utilities shim — deterministic export without Tailwind JIT */
.hidden { display: none !important; }

.h-full { height: 100%; }

.w-full { width: 100%; }

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

.flex { display: flex; }

.flex-col { flex-direction: column; }

.flex-wrap { flex-wrap: wrap; }

.items-center { align-items: center; }

.items-start { align-items: flex-start; }

.items-stretch { align-items: stretch; }

.items-baseline { align-items: baseline; }

.justify-center { justify-content: center; }

.justify-start { justify-content: flex-start; }

.text-center { text-align: center; }

.grid { display: grid; }

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

.trf-media-frame img,
.trf-collage-tile__inner img,
[style*="aspect-ratio"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.trf-timeline-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--space-scale, 1.125) * 1rem);
  align-items: stretch;
}

.trf-timeline-spacer {
  display: none;
  min-width: 0;
}

.trf-gallery figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Carousel card images must fill their fixed-aspect frame. !important is
   required because block templates may carry object-fit as an inline style
   (the old slider stub shipped `object-fit:contain`, which letterboxed
   landscape cards with portrait/odd-ratio photos). */
.trf-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center !important;
  display: block;
}

.trf-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .md\:block { display: block; }
  .md\:order-3 { order: 3; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .md\:col-span-1 { grid-column: span 1 / span 1; }
  .md\:col-span-3 { grid-column: span 3 / span 3; }
  .md\:col-span-4 { grid-column: span 4 / span 4; }
  .md\:col-span-5 { grid-column: span 5 / span 5; }
  .md\:col-span-7 { grid-column: span 7 / span 7; }
  .md\:col-span-8 { grid-column: span 8 / span 8; }
  .md\:col-span-12 { grid-column: span 12 / span 12; }
  .lg\:justify-end { justify-content: flex-end; }

  .trf-timeline-row {
    grid-template-columns: 1fr auto 1fr;
  }

  .trf-timeline-spacer {
    display: block;
  }

  .trf-timeline-row .trf-timeline-order-1 { order: 1; }
  .trf-timeline-row .trf-timeline-order-2 { order: 2; }
  .trf-timeline-row .trf-timeline-order-3 { order: 3; }

  .trf-footer-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--spacing-xl);
    align-items: start;
  }

  .trf-footer-nav-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-md);
  }

  .trf-section-header {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: calc(var(--space-scale, 1.125) * 1.25rem);
    align-items: end;
  }

  .trf-posts-list-header {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: calc(var(--space-scale, 1.125) * 1.25rem);
    align-items: end;
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:col-span-12 { grid-column: span 12 / span 12; }
}