/* ================================================ */
/* Fooli Brand Overrides                            */
/* Targets hugo-scroll theme variables/selectors    */
/* ================================================ */


:root {
 /* Hero area */
 --cover-text-color: #ffffff;
 --cover-title-text-shadow: rgba(0, 0, 0, 0.4) 0px 2px 6px;
 --cover-title-and-description-guard-bg-color: rgba(0, 25, 50, 0.5);


 /* Nav menu buttons in hero + sticky nav highlight color */
 --highlight: #67ABF8;
 --highlight-contrast: #ffffff;
 --highlight-inverse: #DF5326;
 --highlight-inverse-contrast: #ffffff;


 /* Sticky left/top nav */
 --sticky-menu-text-color: #67ABF8;


 /* Light sections */
 --section-light-text-color: #1a1a2e;
 --section-light-bg-color: #f2efe8;


 /* Dark sections */
 --section-dark-text-color: #ffffff;
 --section-dark-bg-color: #DF5326;


 /* Footer */
 --footer-color-background: #67ABF8;
 --footer-color: #c8d8e8;
}

/* ------------------------------------------------ */
/* Hero video background                            */
/* ------------------------------------------------ */

#site-head {
  position: relative !important;
  overflow: hidden !important;
  background: #000 !important;
  height: 100vh !important;
}

#site-head video {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  min-width: 100% !important;
  min-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: cover !important;
  z-index: 0 !important;
}

#site-head .vertical {
  position: relative !important;
  z-index: 1 !important;
}

/* ------------------------------------------------ */
/* Hero background overlay for readability          */
/* ------------------------------------------------ */


/* #site-head.withCenteredImage {
 position: relative;
}


#site-head.withCenteredImage::before {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(
   rgba(0, 25, 50, 0.55),
   rgba(0, 25, 50, 0.55)
 );
 z-index: 0;
}


#site-head .vertical {
 position: relative;
 z-index: 1;
} */


/* ------------------------------------------------ */
/* Section dividers                                 */
/* ------------------------------------------------ */


hr {
 border: 0 !important;
 height: 3px !important;
 background: #67ABF8 !important;
 opacity: 1 !important;
 margin: 3rem auto !important;
 max-width: 900px;
 border-radius: 999px;
}


/* Hide hugo-scroll fixed left navigation */
.fixed-nav {
 display: none !important;
}


.hero-logo {
 width: min(520px, 80vw);
 height: auto;
 display: block;
 margin: 0 auto;
}

/* ================================================ */
/*   GLOBAL: kill full-screen panels in theory but 
  that's not exactly working out like i had hoped it 
  would */
/* ================================================ */

/* Kill the viewport-height chain from the top down */
html,
body {
  height: auto !important;
  max-height: none !important;
}

main.content,
main[role="main"] {
  height: auto !important;
  min-height: 0 !important;
}

/* Kill height on the holder */
div.post-holder,
div.post-holder.dark {
  height: auto !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Kill height: 70% and reduce padding on the article */
article.post {
  height: auto !important;
  min-height: 0 !important;
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

/* Hide triangles on smaller screens so they don't overlap content */
.post-after {
  display: none !important;
}

@media (min-width: 1000px) {
  .post-after {
    display: block !important;
  }
}

/* Hide triangles entirely
Comment out for triangles on larger screens, matching color of article */
.post-after {
  display: none !important;
}

/* ================================================ */
/*               "CREATIVITY"                       */
/* ================================================ */


/* ----------------------------------------- */
/*         SECTION COLOR OVERRIDES           */
/* ----------------------------------------- */


/* ---- BLUE sections ---- */
.post-holder:has(article#cube),
.post-holder:has(article#phone),
.post-holder:has(article#construction),
.post-holder:has(article#space) {
  --color-background: #67ABF8 !important;
  --color-text: #ffffff !important;
  --section-dark-bg-color: #67ABF8 !important;
  --section-dark-text-color: #ffffff !important;
  background-color: #67ABF8 !important;
  color: #ffffff !important;
}

.post-holder:has(article#cube) .post-after,
.post-holder:has(article#phoneguy) .post-after,
.post-holder:has(article#construction) .post-after,
.post-holder:has(article#space) .post-after {
  border-top-color: #67ABF8 !important;
}

/* ---- WHITE sections ---- */
.post-holder:has(article#icons),
.post-holder:has(article#hallway),
.post-holder:has(article#friends),
.post-holder:has(article#guitar),
.post-holder:has(article#thumbs),
.post-holder:has(article#offering),
.post-holder:has(article#employees),
.post-holder:has(article#mosaic),
.post-holder:has(article#rainbow),
.post-holder:has(article#innovation),
.post-holder:has(article#accolades) {
  --color-background: #ffffff !important;
  --color-text: #1a1a2e !important;
  --section-dark-bg-color: #ffffff !important;
  --section-dark-text-color: #1a1a2e !important;
  background-color: #ffffff !important;
  color: #1a1a2e !important;
}

.post-holder:has(article#icons) .post-after,
.post-holder:has(article#hallway) .post-after,
.post-holder:has(article#friends) .post-after,
.post-holder:has(article#guitar) .post-after,
.post-holder:has(article#thumbs) .post-after,
.post-holder:has(article#offering) .post-after,
.post-holder:has(article#employees) .post-after,
.post-holder:has(article#mosaic) .post-after,
.post-holder:has(article#rainbow) .post-after,
.post-holder:has(article#innovation) .post-after,
.post-holder:has(article#accolades) .post-after {
  border-top-color: #ffffff !important;
}

/* ---- ORANGE sections ---- */
.post-holder:has(article#hands),
.post-holder:has(article#values) {
  --color-background: #DF5326 !important;
  --color-text: #ffffff !important;
  --section-dark-bg-color: #DF5326 !important;
  --section-dark-text-color: #ffffff !important;
  background-color: #DF5326 !important;
  color: #ffffff !important;
}

.post-holder:has(article#hands) .post-after,
.post-holder:has(article#values) .post-after {
  border-top-color: #DF5326 !important;
}

/* ---- YELLOW sections ---- */
.post-holder:has(article#globe) {
  --color-background: #FADF4B !important;
  --color-text: #1a1a2e !important;
  --section-dark-bg-color: #FADF4B !important;
  --section-dark-text-color: #1a1a2e !important;
  background-color: #FADF4B !important;
  color: #ffffff !important;
}

.post-holder:has(article#globe) .post-after {
  border-top-color: #FADF4B !important;
}

/* ---- GREY sections ---- */
.post-holder:has(article#key) {
  --color-background: #CFCFCF !important;
  --color-text: #1a1a2e !important;
  --section-dark-bg-color: #CFCFCF !important;
  --section-dark-text-color: #1a1a2e !important;
  background-color: #CFCFCF !important;
  color: #ffffff !important;
}

/* ================================================ */
/* HIDDEN TITLES                                    */
/* ================================================ */

article#cube h2,
article#thumbs h2,
article#about h2,
article#icons h2,
article#hallway h2,
article#phone h2,
article#friends h2,
article#hands h2,
article#globe h2,
article#key h2,
article#guitar h2,
article#values h2,
article#offering h2,
article#construction h2,
article#mosaic h2,
article#employees h2,
article#rainbow h2,
article#innovation h2,
article#accolades h2,
article#space h2 {
  display: none;
}

/* ================================================ */
/* Typography – Manrope                             */
/* ================================================ */

body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
  letter-spacing: -0.005em;
  line-height: 1.6;
  color: #1a1a2e;
}

.post-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.post-content {
  font-weight: 100;
  font-size: clamp(1.8rem, 3vw, 3rem);
  letter-spacing: 0.045em;
  line-height: 1.65;
}

strong {
  font-weight: 900;
}

.post-holder .post-title {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.015em;
}

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

/* ================================================ */
/* Hero typography                                  */
/* ================================================ */

#site-head .blog-title {
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}

#site-head .blog-description,
#site-head.withCenteredImage .blog-description {
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.38em;
  font-size: clamp(0.95rem, 2.2vw, 2.35rem) !important;
  line-height: 1.2 !important;
  margin-top: 0.6rem !important;
  opacity: 0.95;
    /* centering fix */
  display: block;
  width: 100%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 500px) {
  #site-head .blog-description,
  #site-head.withCenteredImage .blog-description {
    letter-spacing: 0.22em;
    font-size: 1.1rem !important;
    /* fixes centering on mobile */
    padding-left: 0.22em;
  }
}

#header-arrow {
  display: none !important;
}

/* ---- Full-bleed images ---- */
.post-holder:has(article#hallway) .post-content img,
.post-holder:has(article#thumbs) .post-content img,
.post-holder:has(article#phone) .post-content img,
.post-holder:has(article#guitar) .post-content img,
.post-holder:has(article#construction) .post-content img,
.post-holder:has(article#rainbow) .post-content img,
.post-holder:has(article#innovation) .post-content img,
.post-holder:has(article#accolades) .post-content img,
.post-holder:has(article#space) .post-content img
 {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  height: 60vh !important;
  max-height: 500px !important;
  object-fit: cover !important;
  display: block !important;
}

/* ---- Remove extra bottom padding ---- */

.post-holder:has(article#phone) article.post
 {
  padding-bottom: 0 !important;
}

.post-holder:has(article#hallway) article.post,
.post-holder:has(article#icons) article.post,
.post-holder:has(article#friends) article.post,
.post-holder:has(article#hands) article.post,
.post-holder:has(article#guitar) article.post,
.post-holder:has(article#thumbs) article.post,
.post-holder:has(article#globe) article.post,
.post-holder:has(article#construction) article.post,
.post-holder:has(article#employees) article.post,
.post-holder:has(article#mosaic) article.post,
.post-holder:has(article#key) article.post,
.post-holder:has(article#rainbow) article.post,
.post-holder:has(article#innovations) article.post,
.post-holder:has(article#accolades) article.post,
.post-holder:has(article#space) article.post,
.post-holder:has(article#cube) article.post {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.post-holder:has(article#hallway) .post-content img {
  display: block !important;
  vertical-align: bottom !important;
  margin-bottom: 0 !important;
}

/* Employees: responsive side-by-side */
.post-holder:has(article#employees) .employees-sbs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 4rem);

  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
}

/* text column */
.post-holder:has(article#employees) .employees-sbs .text {
  flex: 1 1 520px;
  min-width: 340px;
}

/* image column */
.post-holder:has(article#employees) .employees-sbs .image {
  flex: 1 1 520px;
  min-width: 340px;
}

/* image */
.post-holder:has(article#employees) .employees-sbs .image img {
  width: 100%;
  height: auto;
  display: block;
}

/* stack on smaller screens */
@media (max-width: 900px) {
  .post-holder:has(article#employees) .employees-sbs {
    flex-direction: column;
    text-align: center;
  }
}

/* smaller font here? */
/* .post-holder:has(article#employees) .post-content { font-size: clamp(1.25rem, 2vw, 2.5rem); letter-spacing: 0.01em; } */