/* ========================================================================
   OBSERVATIONS – GLOBAL STYLESHEET
   -----------------------------------------------------------------------
   TABLE OF CONTENTS
   -----------------------------------------------------------------------
   1.  Theme Variables
   2.  Base / Reset
   3.  Utility Helpers
   4.  Header & Navigation
   5.  Panels (Contact / About)
   6.  Global Section Spacing
   7.  Image Wrappers & Effects
   8.  Layout Patterns
       8.1  Image Pair
       8.2  Image + Text Row
       8.3  Image Quote Row
       8.4  Proportional Flex Row
   9.  Typography (Quotes, Captions)
   10. Footer
   11. Media-Query Overrides
   -----------------------------------------------------------------------
   NOTE:  Wherever possible, blocks below already begin with an
   explanatory comment (e.g. "--- IMAGE PAIR LAYOUT ---").  This TOC is
   intended to give maintainers a quick map of the file.  Feel free to
   move sections around as the design evolves, keeping the numeric order
   in sync.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
  --primary-color: #E20612;
  --font-family-main: 'Archivo', sans-serif;
  --text-color-light: white;
  --text-color-dark: black;
  --text-color-less: #d8d8d8;
  --text-color-muted: #888;
  --text-color-dark-muted: rgb(120, 120, 120);
  --text-color-opaque: rgba(255, 255, 255, 0.3);
  --background-primary: white;
  --background-dark-secondary: #111;
  --background-dark-secondary-opaque: rgba(0, 0, 0, 0.7);
  --background-dark-tertiary: #222;
  --background-dark-quaternary: rgb(10, 10, 10);
  --border-radius-standard: 4px;
  --border-radius-large: 18px;
  --spacing-unit-xs: 0.25rem;
  --spacing-unit-sm: 0.5rem;
  --spacing-unit-md: 0.75rem;
  --spacing-unit-lg: 1rem;
  --spacing-unit-xl: 1.25rem;
  --spacing-unit-xxl: 3rem;
  --header-bg-color: rgba(0, 0, 0, 0.5);
  --swiper-nav-color: white;
  --swiper-pagination-bullet-color: #686868;
  --panel-desktop-max-width: 900px;
  --panel-mobile-width: 90vw;
  --panel-inner-content-max-width: 700px;
}

html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: var(--background-primary);
  font-family: var(--font-family-main);
  overflow-x: hidden;
}

/* Contact Icon Styling (within header) */
.contact-toggle,
.contact-about {
  font-size: 24px;
  color: var(--text-color-light);
  cursor: pointer;
  z-index: 100;
  transition: color 0.3s ease;
}

@media (max-width: 768px) {

  .contact-toggle,
  .contact-about {
    color: var(--text-color-muted);
    padding: 10px 0 10px 0;
  }
}

.contact-toggle .material-symbols-outlined,
.contact-about .material-symbols-outlined {
  display: block;
}

.contact-toggle:hover,
.contact-about:hover {
  color: var(--primary-color);
}

/* Panels Styling */
.contact-form-container,
.about-panel-container {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: var(--panel-mobile-width);
  max-width: var(--panel-desktop-max-width);
  z-index: 9;
  max-height: 0;
  opacity: 0;
  border-radius: var(--border-radius-large);
  overflow: hidden;
  background-color: var(--background-dark-secondary-opaque);
  box-sizing: border-box;
  transition:
    max-height 1.4s ease-in-out,
    opacity 0.6s ease-in 0.2s,
    padding 0.6s ease-in-out 0.2s,
    width 0.3s ease-in-out;
}

.contact-form-container {
  padding: 0 var(--spacing-unit-xxl);
}

.about-panel-container {
  padding: 0 var(--spacing-unit-lg);
}

.contact-form-container.open,
.about-panel-container.open {
  max-height: 1000px;
  opacity: 1;
  padding: var(--spacing-unit-lg);
}

.contact-form-container form,
.about-panel-container .about-panel-content {
  max-width: var(--panel-inner-content-max-width);
  margin: 0 auto;
  box-sizing: border-box;
}

.contact-form-container form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-unit-md);
}

.contact-form-container input,
.contact-form-container textarea {
  width: 100%;
  padding: var(--spacing-unit-sm);
  font-size: 14pt;
  font-family: var(--font-family-main);
  border: none;
  border-radius: var(--border-radius-standard);
  background: var(--background-dark-tertiary);
  color: var(--text-color-light);
  box-sizing: border-box;
}

.contact-form-container input::placeholder,
.contact-form-container textarea::placeholder {
  color: var(--text-color-muted);
  font-weight: 300;
}

.contact-form-container button {
  align-self: start;
  padding: var(--spacing-unit-sm) var(--spacing-unit-xl);
  background-color: var(--primary-color);
  color: var(--text-color-light);
  border: none;
  border-radius: var(--border-radius-standard);
  font-weight: 600;
  font-size: 14pt;
  font-family: var(--font-family-main);
  cursor: pointer;
}

.about-panel-content {
  color: var(--text-color-light);
  font-size: 14pt;
  font-weight: 300;
  font-family: var(--font-family-main);
  line-height: 1.6;
}

/* Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: var(--header-bg-color);
  color: var(--text-color-light);
  padding: var(--spacing-unit-sm) 0;
  opacity: 0;
  transition: opacity 0.8s ease-in, color 0.6s ease-in-out;
  z-index: 10;
  box-sizing: border-box;
  font-size: 38px;
  font-style: normal;

}

.site-header.visible {
  opacity: 1;
}

.site-header.scrolled {
  color: var(--text-color-opaque);
  /* font-size: 38px; */
  transition: color 2s ease-in-out;
}

.column {
  padding: 0 var(--spacing-unit-lg);
  box-sizing: border-box;
}

.left {
  flex: 0 0 35%;
}

.center {
  flex: 0 0 30%;
  text-align: center;
}

.right {
  flex: 0 0 35%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-unit-lg);
}


@media (max-width: 768px) {
  .site-header {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    background-color: var(--background-primary);
    /* ensure white background on mobile */
    color: var(--text-color-dark);
    /* dark text for contrast */
    padding-top: 15px;
  }

  .left,
  .center,
  .right {
    flex: 0 0 auto;
    width: 100%;
    padding: var(--spacing-unit-sm) var(--spacing-unit-lg);
  }

  .right {
    justify-content: center;
    padding-top: var(--spacing-unit-sm);
    gap: 1.5rem;
  }

  .contact-form-container,
  .about-panel-container {
    width: var(--panel-mobile-width);
    max-width: var(--panel-mobile-width);
  }
}

.site-name {
  font-size: inherit;
  font-weight: 300;
  margin: 0;
  /* This resets the browser's default heading margin */
}

@media (max-width: 768px) {
  .site-name {
    font-size: 28px;
  }
}

.page-title {
  font-size: inherit;
  font-weight: 300;
  margin: 0;
  /* This also resets the browser's default heading margin */
}

@media (max-width: 768px) {
  .page-title {
    font-size: 24px;
  }
}

/* --- GLOBAL SECTION SPACING --- */
main>section {
  margin: 80px 0;
  /* desktop spacing */
}

main>section:first-of-type {
  margin-top: 0;
  /* allow hero to sit under header */
}

@media (max-width: 768px) {
  main>section {
    margin: 40px 0;
    /* mobile spacing */
  }

  main>section:first-of-type {
    margin-top: 0;
  }
}

/* --- END GLOBAL SECTION SPACING --- */

/* Restore gap utility */
.gap {
  margin-top: 50px;
}

@media (max-width: 768px) {
  .gap {
    margin-top: 30px;
  }
}


/* This targets the <div> wrapper our shortcode now creates. */
.fade-image {
  position: relative;
  /* For the overlay and fade effect */
  width: 100vw;
  /* Makes the container span the full window width */
  line-height: 0;
  /* Removes extra space below the picture element */
  opacity: 0;
  transition: opacity 0.8s ease-in;
}

/* This targets the <picture> element and the <img> tag inside the wrapper */
.fade-image picture,
.fade-image img {
  width: 100%;
  /* Makes the image fill the container */
  height: auto;
  /* Maintains the aspect ratio */
  display: block;
}

/* The invisible protection overlay, now correctly on the <div> wrapper */
.fade-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}


.fade-image.visible {
  opacity: 1;
}

/* --- END FINAL IMAGE STYLES --- */

.fade-text {
  max-width: 600px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 10%;
  color: var(--text-color-dark);
  font-size: 18px;
  font-weight: 300;
  font-style: normal;
  text-align: center;
  line-height: 1.5em;
  opacity: 0;
  transition: opacity 0.8s ease-in;
}

.fade-text.visible {
  opacity: 1;
}

@media (max-width: 768px) {
  .fade-text {
    padding: 0 10%;
    font-size: 18px;
    font-weight: 300;
  }
}


.site-footer {
  display: flex;
  /* 1. Turn on Flexbox */
  justify-content: space-between;
  /* 2. Push children to opposite ends */
  align-items: center;
  /* 3. Vertically center them */

  width: 100%;
  height: 140px;
  padding: 0 1.5rem;
  /* Add some padding on the sides */
  box-sizing: border-box;
  /* Include padding in the width calculation */


  color: var(--text-color-dark-muted);
  font-size: 14px;
  font-weight: normal;

  overflow: hidden;
}

.footer-badge img,
.footer-badge picture {
  height: 80px;
  width: auto;
  display: block;
}

@media (max-width: 768px) {

  .footer-badge img,
  .footer-badge picture {
    height: 50px;
  }
}

/* --- IMAGE PAIR LAYOUT --- */
.image-pair {
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
  /* Span the full viewport width */
  margin: 0;
  /* Remove default spacing */
  line-height: 0;
  /* Remove whitespace gaps */
}

.image-pair .pair-item {
  flex: 1 1 50%;
  width: 50%;
  box-sizing: border-box;
}

.image-pair .pair-item .fade-image {
  width: 100%;
}

/* captions remain right aligned like other layouts */
/* (No special alignment override needed) */

/* ensure caption inherits universal .image-caption styles */

@media (max-width: 768px) {
  .image-pair {
    flex-direction: column;
    /* Stack images on small screens */
    /* gap handled by margin on second image */
  }

  .image-pair .pair-item {
    width: 100vw;
    flex: 1 1 100%;
  }

  /* vertical gap between stacked images */
  .image-pair .pair-item+.pair-item {
    margin-top: 40px;
  }

  .image-pair .fade-image {
    width: 100vw;
    /* Each image now takes full width */
    flex: 1 1 100%;
  }

  /* Add vertical gap between stacked images */
  .image-pair .fade-image+.fade-image {
    margin-top: 40px;
  }
}

/* --- END IMAGE PAIR LAYOUT --- */

/* --- IMAGE CAPTION STYLES --- */
.image-caption {
  width: 100%;
  margin-top: var(--spacing-unit-lg);
  padding-right: var(--spacing-unit-lg);
  box-sizing: border-box;
  text-align: right;
  font-size: 16px;
  font-weight: 200;
  font-style: normal;
  color: var(--text-color-dark-muted);
}

@media (max-width: 768px) {
  .image-caption {
    font-size: 14px;
    padding-right: var(--spacing-unit-md);
  }
}

/* --- THREE-COLUMN IMAGE + QUOTE LAYOUT --- */
.image-text-row {
  display: flex;
  flex-wrap: nowrap;
  width: 100vw;
  gap: var(--spacing-unit-lg);
  box-sizing: border-box;
}

.image-text-row .image-column,
.image-text-row .quote-column {
  flex: 1 1 33.333%;
  box-sizing: border-box;
}

/* Override image width inside the column */
.image-text-row .fade-image {
  width: 100%;
}

/* Quote column styling */
.quote-column {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-unit-lg);
}

.quote-block {
  position: relative;
  color: var(--text-color-dark-muted);
  font-size: 21pt;
  font-weight: 200;
  text-align: center;
  line-height: 1.5em;
  max-width: 450px;
  /* widen for better line length */
  overflow: visible;
  /* ensure pseudo-elements aren't clipped */
}

@media (max-width: 768px) {
  .image-text-row {
    flex-direction: column;
    padding: 0;
  }

  .image-text-row .image-column,
  .image-text-row .quote-column {
    flex: 1 1 100%;
    width: 100%;
  }

  /* Provide uniform internal gap but avoid extra at end */
  .image-text-row .image-column {
    margin-bottom: 20px;
  }

  .image-text-row .image-column:last-child {
    margin-bottom: 0;
  }

  .quote-block {
    max-width: 70%;
    margin: 0 auto;
    font-size: 16pt;
  }
}

/* --- END THREE-COLUMN IMAGE + QUOTE LAYOUT --- */

/* Specific tweaks when quote-block is inside fade-text section */
.fade-text.quote-block {
  padding: 40px var(--spacing-unit-lg);
  /* reduce vertical padding */
}

.fade-text.quote-block::before {
  top: -5px;
  /* tighten quote distance */
}

.fade-text.quote-block::after {
  bottom: -5px;
  /* tighten quote distance */
}

/* Custom widths for quote left, image right layout */
.image-quote-row .quote-column {
  flex: 1 1 33.333%;
}

.image-quote-row .image-column {
  flex: 2 1 66.666%;
}

/* --- PROPORTIONAL IMAGE FLEX ROW --- */
.image-flex-row {
  display: flex;
  gap: var(--spacing-unit-lg);
  width: 100vw;
  /* Row height adapts automatically based on child aspect-ratios */
  box-sizing: border-box;
  padding: 0 0 var(--spacing-unit-lg) 0;
  align-items: stretch;
}

.image-flex-row .image-container {
  /* Allow width to grow/shrink proportionally while keeping equal heights */
  flex: var(--ratio, 1) 0 0;
  aspect-ratio: var(--ratio, 1/1);
  position: relative;
}

/* Override the default 100vw width on images inside this layout */
.image-flex-row .fade-image {
  width: 100%;
  height: 100%;
}

.image-flex-row picture,
.image-flex-row img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Mobile: stack images and let them size naturally */
@media (max-width: 768px) {
  .image-flex-row {
    flex-direction: column;
  }

  .image-flex-row .image-container {
    width: 100%;
  }

  /* Uniform 20px gap between stacked images */
  .image-flex-row .image-container+.image-container {
    margin-top: 20px;
  }

  .image-flex-row picture,
  .image-flex-row img {
    height: auto;
  }
}

/* --- DESKTOP CONTENT WIDTH CONSTRAINT (exclude hero) --- */
@media (min-width: 769px) {
  main>section:not(:first-of-type) {
    width: 75vw;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  /* Ensure inner image wrappers respect the new container width */
  main>section:not(:first-of-type) .fade-image,
  main>section:not(:first-of-type) .image-flex-row,
  main>section:not(:first-of-type) .image-pair,
  main>section:not(:first-of-type) .image-text-row {
    width: 100%;
  }
}