/* ============================================================
   STYLES.CSS Tattered Flag Foundation
   Primitive Design Tokens ” site-wide / global

   Nonprofit site: flag retirement/disposal + flag donation
   program serving Oracle, San Manuel, Mammoth, and Catalina, AZ.

   ============================================================ */

:root                { color-scheme: light dark; }
[data-theme="light"] { color-scheme: light;      }
[data-theme="dark"]  { color-scheme: dark;        }

:root {
  --reveal-duration: 0.35s;
    /* ============================================================
       SECTION 1 ” TYPOGRAPHY
       ============================================================ */

    --font-family:   system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --line-height:   1.6;

    --content-max-width: 100%;
    /* Fluid type scale 400 min */
    --fs-300: clamp(0.94rem,  calc(0.92rem + 0.08vw), 0.98rem);
    --fs-400: clamp(1.13rem,  calc(1.06rem + 0.33vw), 1.31rem);
    --fs-450: clamp(1.24rem,  calc(1.135rem + 0.51vw), 1.53rem);
    --fs-500: clamp(1.35rem,  calc(1.21rem + 0.69vw), 1.75rem);
    --fs-550: clamp(1.485rem, calc(1.29rem + .965vw), 2.04rem);
    --fs-600: clamp(1.62rem,  calc(1.37rem + 1.24vw), 2.33rem);
    --fs-650: clamp(1.79rem,  calc(1.39rem + 2.03vw), 2.96rem);  /* fs-700, shifted down 0.15rem */
    --fs-700: clamp(1.94rem,  calc(1.54rem + 2.03vw), 3.11rem);
    --fs-750: clamp(2.23rem,  calc(1.60rem + 3.15vw), 4.04rem);  /* fs-800, shifted down 0.1rem */
    --fs-800: clamp(2.33rem,  calc(1.70rem + 3.15vw), 4.14rem);
    --fs-900: clamp(2.80rem,  calc(1.85rem + 4.74vw), 5.52rem);

}

/* ============================================================
   MODERN-WEBKIT-PREFIXES.CSS 
/* ===============================
   Typography & Font Smoothing
   =============================== */
body {
    -webkit-font-smoothing: antialiased;      /* Chrome, Safari, Edge — crisp text on retina */
    -moz-osx-font-smoothing: grayscale;       /* Firefox on Mac */
    -webkit-text-size-adjust: 100%;           /* Prevents iOS Safari auto text resize on rotate */
}
.gradient-text span {
  background: linear-gradient(to right, rgb(11, 183, 230), #037ee9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: var(--fs-700);
}
/* ===============================
   Custom Scrollbar
   Chrome, Safari, Edge
   =============================== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #888 transparent;
}
/* ===============================
   Form Elements
   =============================== */
 input, button, textarea, select {
    -webkit-appearance: none;                 /* Remove default browser form styling */
    appearance: none;                         /* Official standard — write both */
}
/* ===============================
   Gradient Text Effect
   Use on a class when needed
   =============================== */
.gradient-text {
    -webkit-background-clip: text;            /* Safari still needs prefix */
    background-clip: text;                    /* Official standard — write both */
    color: transparent;
}
* {
    width: 100%;
    max-width: 120rem; /* 1920px */
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--clr-yellow);
  color: var(--clr-black-always);
  padding: 0.75rem 1.5rem;
  z-index: 1000;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}
/* ============================================================
   HERO SECTION
   ============================================================ */
#hero-section {
    width: 60vw;
    height: auto;
    padding: 0;
    /* padding: clamp(.1rem, .1vw, .125rem); */
    /* padding: clamp(.1rem, 4vw, 3.125rem); */
    background-image: repeating-linear-gradient(-10deg, blue, lightblue 12%, red 10%, skyblue);
    border: 6px solid hsla(0, 26%, 92%, 0.1);/*was 40px */
    /* border-right: 100px solid hsla(0, 26%, 92%, 0.1);
    border-bottom: 6px solid hsla(0, 26%, 92%, 0.1); */
    margin: 6px auto 60px;
    outline: 1px solid blue;
    border-radius: 6px;
}

.hero-title {
    color: var(--clr-black-always);
    padding: 25px 30px;
    /* padding: 50px 70px; */
}

.hero-title h1 {
    text-align: center;
    padding-bottom: 1rem;
    font-size: var(--fs-700);
    font-weight: 600;
    color: black;
    text-shadow: 0 0 4px white;
}

.hero-title p {
    font-size: var(--fs-500);
    font-weight: 300;
    text-align: left;
    max-width: 60rem;
    margin-inline: auto;
    text-wrap: pretty;
    color: white;
    text-shadow: 0 0 4px black;
    padding-bottom: 1rem;
}
/* .hero-title h3 {
    font-size: var(--fs-550);
    font-weight: 300;
    text-align: left;
    max-width: 60rem;
    margin-inline: auto;
    text-wrap: pretty;
    color: white;
    text-shadow: 0 0 4px black;
    padding-bottom: 1rem;
} */
@media (width <= 768px) {
  #hero-section {
    width: 90vw;
  }
  .hero-title {
    font-size: var(--fs-550);
    font-weight: 200;
  }
}
@media (width <= 500px) {
 #hero-section {
    width: 95vw;
  } 
}

/* ============================================================
   SECOND SECTION
   ============================================================ */
#second-section {
  position: relative;
  width: 100%;
  margin: 3rem auto;
}
 
.second-section-container {
  display: flex;
  align-items: center;
  width: clamp(300px, 95vw, 120rem);
  margin: auto;
}
 
.second-image-container {
  max-width: clamp(300px, 40vw, 50rem);
  height: auto;
  padding: 1rem;
  margin: 0 0 0 1px;
  border-radius: 28px;
  border: 1px solid gray;
  box-shadow: -8px -8px 8px gray;
}
 
.second-image img {
  display: block;
  width: auto;
  height: auto;
  border: .5px solid darkgray;
  border-radius: 28px;
  /* box-shadow: -8px -8px 8px gray; */
}
.second-img-caption {
  color: black;
  font-size: var(--fs-400);
  text-align: center;
  padding-top: .5rem;
}
 
.second-text-container {
  display: block;
  width: clamp(300px, 50vw, 60rem);
  margin: 0 auto;
  padding: clamp(1rem, 2vw, 64px);
  text-align: left;
  color: black;
  /* background-color: var(--clr-blue-dark); */
  /* border: 2px solid gray; */
}
 
.second-text-title {
  color: var(--clr-yellow-dark);
  text-align: center;
  font-size: var(--fs-800);
  padding-bottom: 1rem;
  text-shadow: 0 0 2px var(--clr-black-always);
}
 
.second-text {
  font-size: var(--fs-450);
  text-indent: 3.5em;
}
 
/* Animated collapse/expand via grid-rows trick */
.second-text,
.second-image-2,
.second-image-3 {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows var(--reveal-duration) ease;
}
 
/* Inner wrapper: only clips content, carries no spacing of its own */
.second-text > *,
.second-image-2-inner,
.second-image-3-inner {
  min-height: 0;
  overflow: hidden;
}
 
/* Spacer: sits one level deeper, so its margin gets clipped
   away while collapsed and reappears once the row opens */
.second-image-2-spacer,
.second-image-3-spacer {
  margin-top: clamp(1.5rem, 4rem - 1.5vw, 3rem);
}
 
/* All three images share the same look */
.second-image-container img {
  display: block;
  width: auto;
  height: auto;
  margin: 0 auto;
 
  /* border: .5px solid darkgray;
  border-radius: 28px;
  box-shadow: -8px -8px 8px gray; */
}
 
details[open] .second-text,
.second-image-container.is-open .second-image-2,
.second-image-container.is-open .second-image-3 {
  grid-template-rows: 1fr;
}
.second-image-container.is-open .second-image-2-spacer,
.second-image-container.is-open .second-image-3-spacer {
  border-bottom: 1px solid gray;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-top: 1px solid gray;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  padding-top: 1rem;
  padding-bottom: 1.5rem;
}

/* details[open] 
.second-image-container.is-open .second-image,
.second-image-container.is-open .second-image-2,
.second-image-container.is-open .second-image-3 {
  border-top: 1px solid red;
} */
 
/* Respect user's motion preference — required, not optional */
@media (prefers-reduced-motion: reduce) {
  .second-text,
  .second-image-2,
  .second-image-3 {
    transition: none;
  }
}
 
/* Fallback for browsers without animated grid-template-rows (~pre-2020) */
@supports not (grid-template-rows: 0fr) {
  .second-text,
  .second-image-2,
  .second-image-3 { display: none; }
 
  details[open] .second-text,
  .second-image-container.is-open .second-image-2,
  .second-image-container.is-open .second-image-3 { display: block; }
}
 
summary {
  cursor: pointer;
  color: black;
  font-size: var(--fs-450);
  list-style: none;      /* hides default triangle marker */
  text-indent: 3.5em;
}
summary span {
  font-size: var(--fs-500);
  font-weight: 600;
  color: var(--clr-blue-dark)
}
 
summary::-webkit-details-marker {
  display: none;         /* hides it in Chrome/Safari too */
}

@media (width <= 1000px) {
.second-text-container {
    width: 87vw;
    margin: 1rem .5rem;
    padding: .3rem;
  }
}
@media (769px <= width <= 1100px) {
  .second-image-2-spacer,
  .second-image-3-spacer {
    margin-top: clamp(3rem, 25rem - 29vw, 16rem);
  }
}


@media (width <= 768px) {
  html {
    width: 99vw;
  }

  #second-section {
    width: 99vw;
  }

  .second-image-container {
    width: 99vw;
    padding: .3rem;
    border-radius: 20px;
    box-shadow: -6px -6px 6px gray;
  }

  .second-image-container img {
    width: 96vw;
    padding: .3rem;
    margin: 0;
  }

  .second-section-container {
    display: flex;
    flex-direction: column;
    width: 99vw;
  }

  .second-image-2,
  .second-image-3 {
    display: none;
  }

  .second-text-container {
    width: 88vw;
    margin: 1rem .3rem;
    padding: .3rem;
  }
}

   /* ============================================================
   THIRD SECTION
   ============================================================ */
#third-section {
    position: relative;
    overflow: hidden;
    width: 80vw;
    height: auto;
    margin: auto;
    color: black;
    background-color: var(--clr-blue-dark);
    text-align: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.third-callout-container {
  width: clamp(300px, 80vw, 1600px);
  height: auto;
  margin-bottom: 1rem;
}
.third-callout-title {
  font-size: var(--fs-500);
  font-weight: 700;
  color: var(--clr-yellow-light);
  padding: 1rem;
  margin: auto;
}
.third-callout-text {
  font-size: var(--fs-400);
  color: var(--clr-white-always);
  padding: 2rem;
  margin: auto; 
  text-align: left;
  text-indent: 1.8rem;
}
#third-section .third-callout-link {
  background-color: var(--clr-blue-light);
  color: var(--clr-neutral-900);
  padding: .4rem .8rem;
  border: 1px solid var(--clr-red);
  border-radius: 6px;
  margin-bottom: .6rem;
}
#third-section a {
text-decoration: none;
color: black;
font-weight: 600;
font-size: var(--fs-400);
}
#third-section .third-callout-link:hover{
  background-color: var(--clr-yellow);
  color: var(--clr-neutral-900);
  padding: .4rem .8rem;
  border: 1px solid var(--clr-black-always);
  border-radius: 6px;
  margin-bottom: .6rem;
}
@media (width <= 768px) {
  #third-section {
    width:  99vw;
  }
  .third-callout-container {
    width: 97vw;
    }
  }

   /* ============================================================
   FOURTH SECTION
   ============================================================ */
#fourth-section {
    position: relative;
    overflow: hidden;
    width: 80vw;
    height: auto;
    margin: auto;
    color: black;
    background-color: var(--clr-blue);
    text-align: center;
    
}
#fourth-section a {
text-decoration: none;
color: black;
font-weight: 600;
font-size: var(--fs-400);
}
#fourth-section .fourth-card-link {
  background-color: var(--clr-blue-light);
  color: var(--clr-neutral-900);
  padding: .4rem .8rem;
  border: 1px solid var(--clr-red);
  border-radius: 6px;
  margin: auto auto 1rem;
  width: fit-content;
}
#fourth-section .fourth-card-link:hover{
  background-color: var(--clr-yellow);
  color: var(--clr-neutral-900);
  /* border: 1px solid var(--clr-black-always); */
}
/* .fourth-card-link {
  background-color: var(--clr-yellow);
  color: var(--clr-black-always);
  margin: auto auto 1rem;
  width: fit-content;
} */
.fourth-card {
   display: flex;
  flex-direction: column;
  border: 5px solid var(--clr-blue-dark);
  padding: 1rem;
  background-color: var(--clr-blue-darkest);
  margin-bottom:  1.5rem;
}
.fourth-text-title {
  font-size: var(--fs-500);
  font-weight: 700;
  color: var(--clr-yellow-light);
  padding: 1rem;
  margin: auto;
}
.fourth-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: clamp(300px, 82vw, 1600px);
  height: auto;
  /* background-color: var(--clr-blue); */
}


.fourth-card-title {
  font-size: var(--fs-500);
  color: var(--clr-yellow-light);
  padding: .5rem 1rem 0;
  margin: .1rem auto .1rem;
}

.fourth-card-text {
  font-size: var(--fs-400);
  color: var(--clr-white-always);
  padding: 0 1.2rem 1rem;
  margin: 1.2rem 0 0;
  text-align: left;
  text-indent: 1.8rem;
}
@media (width <= 868px) {
  #fourth-section {
  width: 90vw;
 }
 .fourth-card-grid {
  width: 90vw;
 }
} 

@media (width <= 768px) {
  #fourth-section {
    width: 99vw;
  }
 .fourth-text-title {
  width:  95vw;
 }
 .fourth-card-grid {
  width: 95vw;
  margin: auto;
 }
 .fourth-card-link {
  margin-top: auto;
 margin-bottom: .5rem; 
 }
}
@media (width <= 630px) {
 .fourth-card-grid {
  grid-template-columns: 1fr;
  width: 97vw;
  margin: auto;
  padding-right: 5px;
 } 
}

  /* ============================================================
   FIFTH SECTION
   ============================================================ */
#fifth-section {
  margin-bottom: 3rem;
}
#fifth-section .code-pdf-btns {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  height: 80px;
  width: 80vw;
  margin: auto;
  margin-bottom: 1rem;
  background-color: var(--clr-blue-dark);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.pdf-btn {
  display: inline-block;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0.75rem 1.5rem;
  margin: 10px auto;
  height: auto;
  width: fit-content;
  text-decoration: none;
  text-align: center;
  border: 1px solid var(--clr-red, red);
  border-radius: 4px;
  font-weight: bold;
  background-color: var(--clr-blue-darkest);
  color: white;
  border-radius: 8px;
}
.pdf-btn:hover {
  background-color: var(--clr-yellow);
  color: black;
  border: 2px solid red;
}
@media (width <= 460px) {
#fifth-section .code-pdf-btns {
  flex-direction: column;
  margin: 1rem;
  width: auto;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}
}