:root
{
  --max-width-mobile: 375px;
  --min-conatiner-width: 900px;
  --max-container-width: 1200px;
  --max-logo-width: 80px;
  --max-character-width: 100ch;

  --padding-xxsmall: 0.75rem;
  --padding-xsmall: 1rem;
  --padding-small: 2rem;
  --padding-normal: 3rem;
  --padding-large: 5rem;
  --padding-xlarge: 10rem;

  --letterspacing-small: 0.5px;
  --letterspacing-large: 1px;

  --margin-block: 10rem;
  --padding-button-block: 2rem;
  --padding-button-inline: 4rem;
  
  /* Neutral Colors */
  --cl-white-pure: hsl(0, 0%, 100%);
  --cl-white-neutral: hsl(0, 0%, 93%);
  --cl-footer-trans: hsla(0 0% 93% / 0.7);
  --cl-grey-neutral: hsl(0 0% 60% / 0.15);
  --cl-black-neutral: hsl(0, 0%, 10%);
  --cl-black-pure: hsl(0 0% 0%);

  /* Primary Colors */
  --cl-blue-main: rgb(10, 49, 97);
  
  /* Accent Colors */
  --cl-gold-main: rgb(197, 187, 115);
  --cl-gold-hover: rgba(226, 213, 115, 0.8);
  --cl-red-main: rgb(179, 25, 66);
  
  /* Font Family */
  font-size: 12px;

  --ff-heading: Helvetica, Geneva, Verdana, sans-serif;
  --ff-body: Helvetica, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  --fs-xxssmall: 0.5rem;  
  --fs-xsmall: 0.75rem;
  --fs-small: 1rem;
  --fs-normal: 1.5rem;
  --fs-normal-plus: 2rem;
  --fs-large: 3rem;
  --fs-xlarge: 5rem;
  --fs-xxlarge: 7rem;
  --fs-xxxlarge: 10rem;
  --fs-huge: 12rem;

  --fw-lightest: 100;
  --fw-light: 200;
  --fw-semi-light: 300;
  --fw-normal: 400;
  --fw-semi-bold: 500;
  --fw-bold: 700;
  --fw-boldest: 900;

  --fs-nav-lower: var(--fs-small);
  --fs-nav-best: 4vw;
  --fs-nav-upper: var(--fs-normal-plus);
  --fw-nav: var(--fw-semi-light);

  --fs-heading-lower: var(--fs-normal);
  --fs-heading-best: 6vw;
  --fs-heading-upper: var(--fs-large);
  --fw-heading: var(--fw-semi-light);

  --fs-body-lower: var(--fs-small);
  --fs-body-best: 4vw;
  --fs-body-upper: var(--fs-normal);
  --fw-body: var(--fw-light);

  --fs-button-lower: var(--fs-normal);
  --fs-button-best: 4vw;
  --fs-button-upper: var(--fs-large);
  --fw-button: var(--fw-semi-bold);

  --fs-footer-lower: var(--fs-small);
  --fs-footer-best: 2.5vw;
  --fs-footer-upper: var(--fs-normal);
  --fw-footer: var(--fw-lightest);
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
* {
  margin: 0;
  padding: 0;
  font: inherit;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"],
li {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
  text-rendering: optimizeSpeed;
  font-family: var(--ff-body);
  background-color: var(--cl-black-pure);
  color: var(--cl-white-neutral);
  cursor: crosshair;
  letter-spacing: var(--letterspacing-small);
  button
  {
    cursor: pointer;
  }
}

h1, h2, h3
{
  font-family: var(--ff-heading);
}

/* A elements that don't have a class get default styles */
a
{
  text-decoration-skip-ink: auto;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
p
{
  cursor: text;
}
/* Make images easier to work with */
img,
picture,
svg {
  max-width: 100%;
  display: block;
}

/*------------- PROJECT STYLES -------------- */

/* INDEX HEADER STYLES */
.header
{
  background-image: url(resources/uniform-guard.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: -200px top;
  background-color: rgba(0 0 0 / 0.6);
  background-blend-mode: overlay;
}
.nav-wrapper
{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--padding-normal);
  gap: var(--padding-normal);
  .primary-nav
  {
    display: flex;
    gap: clamp(var(--padding-small), 5vw, var(--padding-large));
    align-items: center;
    font-size: clamp(var(--fs-nav-lower), var(--fs-nav-best), var(--fs-nav-upper));
    font-weight: var(--fw-nav);
  }
  li
  {
    position: relative;
    width: max-content;
    padding-block-end: 2px;
  }
  li:not(:has(.active-nav)):after
  {
    content: '';
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    background: white;
    transition: width ease 0.3s;
  }
  li:not(:has(.active-nav)):hover:after
  {
    width: 100%;
  }
  .active-nav
  {
    margin-block-start: 5px;
    border-bottom: 2px white solid;
  }
}

.hero-wrapper
{
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.cta-title
{
  font-size: clamp(var(--fs-xxlarge),12vw,var(--fs-huge));
  font-weight: var(--fw-light);
  text-align: center;
  letter-spacing: -2px;
}
/* INDEX MAIN STYLES */
.about-wrapper
{
  display: flex;
  flex-direction: column;
  gap: var(--padding-normal); 
  
}
.title
{
  font-size: clamp(var(--fs-heading-lower),var(--fs-heading-best),var(--fs-heading-upper));
  font-weight: var(--fw-heading);
}
.about-content
{
  background-image: url(resources/logo.png);
  background-repeat: no-repeat;
  background-position: center;
  background-blend-mode: overlay;
  background-color: rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 2px 0px var(--cl-white-neutral);
  padding: 2rem;
  border-radius: 2rem;
  align-self: center;
  text-align: left;
}
.services-wrapper
{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  img
  {
    width: fit-content;
    place-self: center;
  }
  a
  {
    font-size: clamp(var(--fs-small), 3.5vw, var(--fs-normal-plus));
    font-weight: var(--fw-normal);
  }
  .tabs-content
  {
    width: 80%;
  }
  .button
  {
    align-self: flex-start;
  }
}
.tabs-wrapper
{
  --_active: 0;
  --_tab-count: 2;
  display: grid;
  place-items: center;
  isolation: isolate;
  position: relative;
  width: 100%;
  text-align: center;
  grid-template-columns: repeat(var(--_tab-count),calc(100% / var(--_tab-count)));
  font-size: clamp(var(--fs-small), 3vw, var(--fs-normal-plus));
  font-weight: var(--fw-normal);
  input
  {
    display: none;
  }
  label
  {
    padding: clamp(var(--padding-small),var(--padding-normal),var(--padding-xxlarge));
    cursor: pointer;
  }
  input:checked + label
  {
    text-shadow: 0 0 1px 0px black; 
    color: var(--cl-black-neutral);
    transition: color ease-in-out 0.5s;
    padding: 3rem;
  }
}
.tabs-wrapper::after
{
  content: '';
  background-color: var(--cl-gold-main);
  border-radius: 2rem;
  position: absolute;
  inset: 0;
  width: calc(100% / var(--_tab-count));
  z-index: -1;
  translate: calc(var(--_active)*100%); 
  transition: all ease-in-out 0.5s;
}
.tabs-wrapper:has(:checked:nth-of-type(1))
{
  --_active: 0;
}
.tabs-wrapper:has(:checked:nth-of-type(2))
{
  --_active: 1;
}
.tabs-wrapper:has(:checked:nth-of-type(3))
{
  --_active: 2;
}

[class^="tab-content-"]
{
  display: none;
}
&:has(:checked:nth-of-type(1)) .tab-content-1,
&:has(:checked:nth-of-type(2)) .tab-content-2,
&:has(:checked:nth-of-type(3)) .tab-content-3
{
  margin-block: 5rem;
  display: flex;
  flex-direction: column;  
  gap: var(--padding-normal);
  font-size: clamp(var(--fs-body-lower), var(--fs-body-best), var(--fs-body-upper));
  font-weight: var(--fw-light); 
}

footer
{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--padding-xlarge);
  background-color: var(--cl-blue-main);
  padding: var(--padding-normal);
  border-radius: 2rem;
  width: 80%;
  margin: var(--padding-xlarge) auto;
  
  .footer-nav
  {
    display: flex;
    flex-direction: column;
    gap: var(--padding-xsmall);
    justify-content: center;
    align-items: center;
  }
  .material-icons-wrapper
  {
    display: flex;
    align-items: center;
    gap: var(--padding-xsmall);
  }
  h3
  {
    font-size: clamp(var(--fs-nav-lower), var(--fs-nav-best),var(--fs-nav-upper));
    font-weight: var(--fw-normal);
  }
  p, a, .material-icons
  {
    font-size: clamp(var(--fs-footer-lower), var(--fs-footer-best),var(--fs-footer-upper));
    font-weight: var(--fw-footer);
    transition: all ease 0.3s;
  }
  p:hover, a:hover
  {
    color: var(--cl-white-hover);
  }
  .footer-nav:has(p:hover) p:not(:hover), .footer-nav:has(a:hover) a:not(:hover)
  {
    opacity: 0.3;
  }
  .logo-wrapper
  {
    display: flex;
    flex-direction: column;
    gap: var(--padding-xsmall);
    width: max-content;
    align-items: center;
    justify-content: center;
    img
    {
      width: var(--max-logo-width);
      margin-block-end: 1rem;
    }
    p
    {
      font-size: 10px;
      color: var(--cl-footer-trans);
      line-height: 1.5;
    }
  }
}
.footer-nav-wrapper
{
  display: flex; 
  flex-direction: column;
  gap: var(--padding-large);
}
.footer-nav-content
{
  display: flex;
  flex-direction: column;
  gap: var(--padding-xsmall);
  align-items: center;
}

.contact-details-wrapper
{
  --margin-block: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.contact-details
{
  display: flex;
  align-items: center;
  gap: clamp(5px,2vw,20px);
  p
  {
    font-size: clamp(var(--fs-small), 2.5vw,var(--fs-normal-plus));
    font-weight: var(--fw-light);
  }
  .material-icons
  {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
  }
}
.contact-map
{
  margin-block-start: 5rem;
  width: clamp(300px,90%, 600px);
  aspect-ratio: 3/2;
}
.contact-form
{
    display: flex;
    flex-direction: column;
    margin: 15rem auto;
    gap: 1rem;
    background-color: var(--cl-grey-neutral);
    padding: 2rem;
    border-radius: 20px;
    width: max(50%,300px);
    
}
.form-group
{
    display: grid;
    gap: 5px;
}
.contact-form label
{
    font-size: clamp(var(--fs-small), 3vw, var(--fs-normal));
    font-weight: var(--fw-semi-bold);
    color: var(--cl-white-hover);
    text-shadow: 0.1px 0.1px 1px  black;
    letter-spacing: 0.4px;
}
.contact-form input
{
    font-size: clamp(var(--fs-small), 2vw, var(--fs-normal));
    border: transparent;
    box-shadow: 0 0 3px rgba(51,51,51,0.3);
    border-radius: 0.75rem;
    padding: 1rem 1rem;
    width: 100%;
    margin-block-end: 1rem;
}
.contact-form :nth-child(6)
{
  margin-bottom: var(--padding-small);
}
.contact-form button
{
  align-self: center;
  font-size: clamp(var(--fs-small), 5vw, var(--fs-normal));
  max-width: 300px;
}
.page-wrapper
{
  display: flex;
  flex-direction: column;
  gap: 10rem;
  --margin-block: 5rem;
  .tabs-wrapper
  {
    --_tab-count: 3;
  }
}
/*------------- UTILITY CLASSES -------------- */
.padding-inline
{
  padding-inline: clamp(var(--padding-small), 5vw, var(--padding-xlarge));
}
.wrapper
{
  display: flex;
  flex-direction: column;
  gap: var(--padding-normal); 
}
span
{
  color: var(--cl-gold-main);
}
.separator
{
  width: 80%;
  margin-inline: auto;
  height: 0.5px;
}
.header
{
  display: grid;
  min-height: 100vh;
  grid-template-rows: max-content 1fr;
}
.logo-wrapper
{
  width: var(--max-logo-width); 
}
.uppercase
{
  text-transform: uppercase;
}
.grid-even-col
{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px,100%), 1fr));
}
.hide
{
  display: none;
}
.section
{
  width: min(var(--max-container-width), 100% - (var(--padding-normal) * 2)); 
  margin: var(--margin-block) auto;
}
.sideways
{
  writing-mode: sideways-lr;
}
.content
{
  letter-spacing: var(--letterspacing-small);
  max-width: var(--max-character-width);
  line-height: 1.2;
  /* text-wrap: balance; */
  font-size: clamp(var(--fs-body-lower),var(--fs-body-best),var(--fs-body-upper));
  font-weight: var(--fw-body);
}
.button
{
  font-size: clamp(var(--fs-button-lower), var(--fs-button-best), var(--fs-button-upper));
  font-weight: var(--fw-button);
  color: var(--cl-black-neutral);
  background-color: var(--cl-gold-main);
  padding: var(--padding-button-block) var(--padding-button-inline);
  border: none;
  border-radius: 10px;
  transition: all ease 0.2s;
}
.button:hover
{
  transform: translateY(-5px);
  background-color: var(--cl-gold-hover);
  color: var(--cl-white-neutral);
}


/*------------- MEDIA QUERIES -------------- */
@media(prefers-reduced-motion: no-preference)
{
  .image-fade-in
  {
    scale: 0.8;
    opacity: 0;
    animation: image-fade-in linear forwards;
    animation-timeline: view();
    animation-range: entry;
  }
  @keyframes image-fade-in 
  {
    to
    {
      scale: 1;
      opacity: 1;
    } 
  }
  @keyframes header-image-animation 
  {
    25% {opacity: 1;}
    80%,100% {opacity: 0; scale: 2;}
  }
  @keyframes scroll-reveal
  {
    to
    {
      background-size: 100% 100%;
    }
  }
}

@media (min-width: 900px)
{
  .border-right
  {
    border-right: 1px solid white;
    h1
    {
      text-align: right;
    }
  }
  .border-left
  {
    border-left: 1px solid white;
    h1
    {
      text-align: left;
    }
  }
  .header
  {
    background-position: 20vw 200px;
    background-position: 20vw top;
  }
  .nav-wrapper
  {
    flex-direction: row;
  }
  .section
  {
    --margin-block: 20rem;
  }
  &:has(:checked:nth-of-type(1)) .tab-content-1,
  &:has(:checked:nth-of-type(2)) .tab-content-2,
  &:has(:checked:nth-of-type(3)) .tab-content-3
  {
    flex-direction: row;
  }
  .hero-wrapper
  {
    justify-content: space-evenly;
    align-items: flex-start;
    .cta-title
    {
      text-align: left;
    }
  }
  .content
  {
    line-height: 1.5;
    letter-spacing: 0.5px;
    word-spacing: 2px;
  }
  footer
  {
    gap: var(--padding-large);
  }
  .footer-nav-content
  {
    gap: var(--padding-normal);
  }
  .footer-nav-wrapper
  {
    flex-direction: row;
    gap: 10rem;
  }
  .contact-details-wrapper
  {
    --margin-block: 10rem;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
  }
  .contact-form button
  {
    align-self: flex-end;
    max-width: 300px;
  } 
  .page-wrapper
  {
    --margin-block: 5rem;
    gap: 15rem;
    &>*
    {
      padding: 5rem;
    }
    
    &:has(:checked:nth-of-type(1)) .tab-content-1,
    &:has(:checked:nth-of-type(2)) .tab-content-2,
    &:has(:checked:nth-of-type(3)) .tab-content-3
    {
      flex-direction: column;
    }    
  }
}