/* #region ________C_O_P_Y___M_E_____ */       
/* #endregion _____C_O_P_Y___M_E_____ */       

/* #region COLOR_VARIABLES */      
:root,
:root[data-theme='actual'] {
  --border_grey: rgb(170,170,170);
  --inner-default: white;
  --hero-outer: rgba(var(--alder_4_alpha),.6);
  --hero-outer-tablet: none;
  --hero-inner-title: none;
  --hero-inner-text-and-image: none;
  --hero-inner-text: none;
  --button-container: none;
  --button-wrapper: none;
  --hero-image: none;
  --about-outer: rgba(var(--alder_4_alpha),.4);
  --about-outer-tablet: none;
  --footer: rgba(var(--alder_4_alpha),.6);
  --footer-tablet: none;
  --footer-left: none;
}

:root[data-theme='test'] {
  --border_grey: none;
  --inner-default: yellow;
  --hero-outer: lightblue;
  --hero-outer-tablet: grey;
  --hero-inner-title: pink;
  --hero-inner-text-and-image: pink;
  --hero-inner-text: forestgreen;
  --button-container: orange;
  --button-wrapper: white;
  --hero-image: white;
  --about-outer: black;
  --footer: blue;
  --footer-left: salmon;
}

/* #region ALDER_BRAND_COLORS */       
:root {
  /* DON'T MESS WITH THESE */
  --alder_1: rgb(79,124,34);
  --alder_1_alpha: 79,124,34;
  --alder_2: rgb(213,189,48);
  --alder_2_alpha: 213,189,48;
  --alder_3: rgb(84,151,185);
  --alder_3_alpha: 84,151,185;
  --alder_4: rgb(74,69,42);
  --alder_4_alpha: 74,69,42;
  --alder_5: rgb(146,56,1);
  --alder_5_alpha: 146,56,1;
  }
  /* #endregion ALDER_BRAND_COLORS */       

/* #endregion COLOR_VARS_IN_ROOT */       

/* #region FONT_VARIABLES */       
:root {
  --font-heading: "Oswald", sans-serif;
  --font-body: "Montserrat", sans-serif;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semi-bold: 600;
  --weight-bold: 700;
}
/* #endregion FONT_VARS_IN_ROOT */       

/* #region TEXT_STYLES */

/* TEXT   TEXT   TEXT   TEXT   TEXT   TEXT
   TEXT   TEXT   TEXT   TEXT   TEXT   TEXT
   TEXT   TEXT   TEXT   TEXT   TEXT   TEXT
   TEXT   TEXT   TEXT   TEXT   TEXT   TEXT
   TEXT   TEXT   TEXT   TEXT   TEXT   TEXT
   TEXT   TEXT   TEXT   TEXT   TEXT   TEXT */

body {


  background-color: white;

  /* 
  background-color: white;
  */
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  line-height: 1.6;
  font-size: 16px;
  color: rgb(110,110,110);
  margin: 0;
}
ul {
  margin-top: .5rem;
  margin-bottom: 2rem;
}
.heading-1 {
  color: var(--alder_4);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 5rem;
  line-height: 1.2;
  margin:  /* top: */ -.6rem /* right: */ 0rem /* bottom: */ .6rem /* left: */ 0rem;
}
.heading-2 {
  font-family: var(--font-heading);
  font-weight: var(--weight-semi-bold);
  font-size: 2rem;
  line-height: 1.3;
  margin:  /* top: */ 0rem /* right: */ 0rem /* bottom: */ .9rem /* left: */ 0rem;
}
.heading-3 {
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: 1.5rem;
  margin:  /* top: */ 0rem /* right: */ 0rem /* bottom: */ 0rem /* left: */ 0rem;
}
.body-regular {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 1rem; 
  margin:  /* top: */ 0rem /* right: */ 0rem /* bottom: */ 1.5rem /* left: */ 0rem;
}
.body-small {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 0.875rem;
  margin:  /* top: */ 0rem /* right: */ 0rem /* bottom: */ 0rem /* left: */ 0rem;
}
.button-text {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 0.875rem;
  margin-top: 0;
  margin-bottom: 0;
}
.text-highlight-alder {
  color: var(--alder_2);
}
/* #endregion TEXT_VAR_STYLES */       

/* #region OUTER_DEFAULTS */       
section, footer {
  width: 100%;
  margin: 0;
  padding: 20px 0;
  border: none;
}
/* #endregion OUTER_CONTAINERS_DEFAULTS */       

/* #region INNER_DEFAULTS */   
.inner {
  background: var(--inner-default);
  border: solid 1px var(--border_grey);
  border-radius: .4rem;
  width: 800px;
}

/* #endregion INNER_CONTAINERS_DEFAULTS */       

/* #region HERO_HERO_HERO_HERO_HERO_HERO_HERO_ */       
.hero-outer {
  /*
  background-image: url('tiled-background-alder.svg');
  background-repeat: repeat;
  background-size: 200px 200px;
  */
  background-color: var(--hero-outer); 
  padding-top: 0;
}
body.scrolled .hero-outer {
  position: fixed; /* or 'sticky' depending on your needs */
  top: 0;
  left: 0;
  width: 100%;
  padding: 0;
  z-index: 999;/*
  transition: all 0.3s ease;  Smooth changes (optional) */
}
.hero-inner {
  background-color: var(--inner-default);
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
  border-radius: 0 0 .4rem .4rem;
  border-top: none;
  /* how this flexbox's flex items behave */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: .8rem;
}
body.scrolled .hero-inner {
  width: 100%;
  margin:  /* top: */ 0rem /* right: */ 0rem /* bottom: */ 0rem /* left: */ 0rem;
  padding:  /* top: */ .5rem /* right: */ 1rem /* bottom: */ 0rem /* left: */ 1rem;
  border-radius: 0;
  border-top: none;
  border-right: none;
  border-left: none;
  /* how this flexbox's flex items behave */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: .8rem;
}
.hero-inner-title {
  background-color: var(--hero-inner-title); 
  border-bottom: solid 1px var(--border_grey);
  width: 100%;
  flex: 1;
}
body.scrolled .hero-inner-title {
  border: none;
  flex: 1;
  padding: 4px 0 0 0;
}
body.scrolled .heading-1 {
  font-size: clamp(1rem, 6.6vw, 4.5rem);
  line-height: 1.1;
}
.hero-inner-text-and-image {
  background-color: var(--hero-inner-text-and-image); 
  padding: 11px 0 0 0;
  flex: 0 0 auto;      /* ⬅ prevents it from stretching */
  /*width: 30vw;          ⬅ now width will take effect */
  margin-left: auto;   /* ⬅ aligns it to the right inside hero-inner */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: nowrap;
}

body.scrolled .hero-inner-text-and-image {
  flex: 0 0 auto;      /* ⬅ explicitly stop flex-stretching in scrolled state */
  width: 33vw;         /* ⬅ apply your reduced width */
  margin-left: auto;   /* ⬅ keep it aligned right */
}
.hero-inner-text {
  background-color: var(--hero-inner-text); 
  flex: 1 1 66.6%;
}
body.scrolled .hero-inner-text .button-style {
  margin-top: .4rem;
  margin-left: .3rem; /* spacing between the two buttons */
}
body.scrolled .hero-inner-text .button-style:first-of-type {
  margin-left: auto; /* push the first button to the far right */
}
.hero-inner .heading-2 {
  font-family: var(--font-heading);
  font-weight: var(--weight-semi-bold);
  font-size: 2.7rem;
  line-height: 1.3;
  margin:  /* top: */ 0rem /* right: */ 0rem /* bottom: */ .9rem /* left: */ 0rem;
}
.button-container {
  background-color: var(--button-container); 
  margin: -5px auto;
  padding: 0;
  box-sizing: border-box;
  border-radius: 0rem;
  border-top: none;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: .8rem;
}
.button-wrapper {
  background-color: var(--button-wrapper); 
  flex: 1;
}
.button-wrapper .button-style {
    /* width: 100%; */
    display: block;
    text-align: center;
}
.hero-image {
  background-color: var(--hero-image); 
  display: inline-block;
  flex: 1 1 33.3%;
  text-align: center;
  padding: none;
  margin: .5rem 0 0 0;
}
body.scrolled .hero-image, body.scrolled .hero-outer p, body.scrolled .hero-outer h2 {
  display: none;
}
.hero-image img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: .35rem;
  margin: none;
  padding: none;
}
/* #endregion HERO */       

/* #region ABOUT */       
.about-outer {
  background-color: var(--about-outer); 
}
body.scrolled .about-outer {
  margin: 500px 0 0 0;
}
.about-inner {
  margin: 0 auto;
  padding: 1rem;
  display: block;
  box-sizing: border-box;
}
/* #endregion ABOUT */       

/* #region FOOTER */       
footer {
  background-color: var(--footer); 
}
.footer-inner {
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
}
.footer-left {
  background-color: var(--footer-left); 
  display: flex;
  gap: 1rem; /* space between icons */
  align-items: center;
}
/* #endregion FOOTER */       

/* #region SHARED_BUTTONS_AND_ANCHORS */       
.button-style,
a.button-style,
button.button-style {
  display: inline-block;
  background: rgba(var(--alder_2_alpha),.75);
  /* OPTION 1
     KEEP THIS HERE - OVERWRITE THE LIVE LINE ABOVE
     PRO: TRANSITION ANIMATION WORKS
     CON: COLOR WON'T BE TRUE ON COLORED BG 
  background: rgba(var(--alder_2_alpha),.5);
  */
  /* OPTION 2
     KEEP THIS HERE - OVERWRITE THE LIVE LINE ABOVE
     PRO: COLOR WILL BE TRUE ON COLORED BG 
     CON: TRANSITION ANIMATION DOESN'T WORK 
  background: linear-gradient(rgba(var(--alder_2_alpha),.5), rgba(var(--alder_2_alpha),.5)), white;
  */
  color: white;
  text-decoration: none;
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  font-family: inherit;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  transition: background-color .4s ease;
}
.button-style:hover,
.button-style:focus {
  background: rgba(var(--alder_2_alpha),1);
  /* OPTION 1 - KEEP THIS HERE - OVERWRITE THE LIVE LINE ABOVE
  background: rgba(var(--alder_2_alpha),.5);
  */
  /* OPTION 2 - KEEP THIS HERE - OVERWRITE THE LIVE LINE ABOVE
  background: linear-gradient(rgba(var(--alder_2_alpha),.5), rgba(var(--alder_2_alpha),.5)), white;
  */
}
/* Optional: make <button> elements behave visually the same */
button.button-style {
  appearance: none;
  -webkit-appearance: none;
}
/* #endregion SHARED_BUTTONS_AND_ANCHORS */       

/* #region SOCIAL_ICONS */       
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.social-icon svg {
  width: 24px;
  height: auto;
  max-width: 100%;
  display: block;
  transition: fill 0.3s ease;
}
.social-icon:hover svg {
  fill: #1a252f;
}
/* #endregion SOCIAL_ICONS */       

/* #region TABLET TABLET TABLET TABLET TABLET  */

/* TABLET TABLET TABLET TABLET TABLET
   TABLET TABLET TABLET TABLET TABLET   
   TABLET TABLET TABLET TABLET TABLET   
   TABLET TABLET TABLET TABLET TABLET   
   TABLET TABLET TABLET TABLET TABLET */

@media (min-width: 601px) and (max-width: 1024px) {
section, footer {
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
}
.inner {
  border: none;
  border-radius: 0rem;
  width: 100%;
}
.hero-outer {
  background-color: var(--hero-outer-tablet);
  padding-top: 0;
  border-bottom: 1px solid var(--border_grey); 
}
.hero-inner {
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
  border-radius: 0rem;
  border-top: none;  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: .8rem;
}
body.scrolled .hero-inner {
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
  border-radius: 0rem;
  border-top: none;  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: .8rem;
}
.heading-1 {
  font-size: clamp(1rem, 9.9vw, 6.4rem);
}
body.scrolled .hero-inner-text-and-image {
  margin-top: -16px;
  margin-left: 0;      /* align left */
  margin-right: auto;  /* ensure no residual centering */
  padding-top: 0;
  width: 100%;         /* collapse to content width */
}
.hero-inner-text .heading-2 {
  font-size: clamp(.1rem, 5.25vw, 15rem);
}
body.scrolled .button-container {
  margin: 0 0 0 0 !important;
  justify-content: flex-start; /* align buttons left inside container */
  width: auto;
  align-self: flex-start;
}
.about-outer {
  background-color: var(--about-outer-tablet);

  border-bottom: 1px solid var(--border_grey); 
}
body.scrolled .about-outer {
  margin: 610px 0 0 0;
}
footer {
  background-color: var(--footer-tablet);
}
}
/* #endregion MEDIA_QUERIES_MEDIUM_TABLET_1024_601 */

/* #region SMALL SMALL SMALL SMALL SMALL  */       

/* SMALL SMALL SMALL SMALL SMALL
   SMALL SMALL SMALL SMALL SMALL   
   SMALL SMALL SMALL SMALL SMALL   
   SMALL SMALL SMALL SMALL SMALL   
   SMALL SMALL SMALL SMALL SMALL */  

@media (max-width: 600px) {
section, footer {
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
}
.inner {
  border: none;
  border-radius: 0rem;
  width: 100%;
}
.hero-outer {
  background-color: white; 
  /* keep this at 'white' instead of 'none', which seems to be ignored in favor of inherited color. */
  padding-top: 0;
  border-bottom: 1px solid var(--border_grey); 
}
.hero-inner {
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
  border-radius: 0rem;
  border-top: none;  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: .8rem;
}
body.scrolled .hero-inner {
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
  border-radius: 0rem;
  border-top: none;  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: .8rem;
}
.heading-1 {
  font-size: clamp(1rem, 10vw, 4.5rem);
}
.hero-inner-text-and-image {
  padding: 0;
  flex-direction: column;
}
body.scrolled .hero-inner-text-and-image {
    flex-direction: column !important;
}
body.scrolled .hero-inner-text-and-image {
  margin-top: -16px;
  margin-left: 0;      /* align left */
  margin-right: auto;  /* ensure no residual centering */
  padding-top: 0;
  width: 100%;         /* collapse to content width */
}
.hero-inner-text {
  padding: 0;      
}
body.scrolled .hero-inner-text {
  width: 100%;         /* collapse to content width */
}
.hero-inner-text .heading-2 {
  font-size: clamp(.1rem, 6.5vw, 15rem);
}
body.scrolled .button-container {
  margin: 0 0 0 0 !important;
  justify-content: flex-start; /* align buttons left inside container */
  width: 100%;
  align-self: flex-start;
}
.about-outer {
  background-color: var(--about-outer-tablet);
  border-bottom: 1px solid var(--border_grey); 
}
body.scrolled .about-outer {
  margin: 610px 0 0 0;
}
footer {
  background-color: var(--footer-tablet);
}
}
/* #endregion MEDIA_QUERIES_SMALL_CELL_600_0 */