@font-face {
  font-family: "Coolvetica";
  src: url('../media/fonts/thick_fonts/Coolvetica_Rg.ttf') format('truetype');
  /* src: url(http:/www.christinmorton.local/wp-content/themes/media/fonts/thick_fonts/Coolvetica_Rg.ttf); */
  font-weight: normal;
}

@font-face {
  font-family: "Designer";
  src: url('../media/fonts/thick_fonts/Designer.ttf') format('truetype');
  font-weight: normal;
}

@font-face {
  font-family: "JUST-Sans-Outline-Regular";
  src: url('../media/fonts/thick_fonts/JUST_Sans_Outline_Regular.ttf') format('truetype');
  font-weight: normal;
}

@font-face {
  font-family: "StretchPro";
  src: url('../media/fonts/thick_fonts/StretchPro.ttf') format('truetype');
  font-weight: normal;
}

@font-face {
  font-family: "Aesthetic Moment";
  src: url('../media/fonts/serif_fonts/Aesthetic_Moment_italic_personal.ttf') format('truetype');
  font-weight: normal;
}

@font-face {
  font-family: "Gradeur";
  src: url('../media/fonts/serif_fonts/Gradeur_demo_version.ttf') format('truetype');
  font-weight: normal;
}

@font-face {
  font-family: "Sermo Regular";
  src: url('../media/fonts/serif_fonts/SERMORegular.ttf') format('truetype');
  font-weight: normal;
}


@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  /* https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html */
  [role="list"] {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  body {
    min-block-size: 100vh;
    line-height: 1.6;
  }

  h1,
  h2,
  h3,
  button,
  input,
  label {
    line-height: 1.1;
  }

  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
  }


  h1{
    font-size: 3rem;
    font-family: "Coolvetica";
  }

  p,
  li {
    text-wrap: pretty;
  }

  img,
  picture {
    max-inline-size: 100%;
    display: block;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }

}

@layer base {
  /* Primitives */
  :root {
    --ff-headline: "Designer", serif;
    --ff-body: sans-serif; /* "Gradeur", */

    --ff-spacing-100: 0.875px;
    /* --ff-spacing-200: ;
    --ff-spacing-300: ;
    --ff-spacing-400: ; */
    --ff-spacing-500: 1.125px;
    --ff-spacing-600: 1.25px;
    --ff-spacing-700: 1.5px;
    --ff-spacing-800: 1.75px;
    --ff-spacing-900: 2px;
  
    /* Sizes */
    --fs-300: 0.875rem;
    --fs-400: 1rem;
    --fs-500: 1.125rem;
    --fs-600: 1.25rem;
    --fs-700: 1.5rem;
    --fs-800: 2rem;
    --fs-900: 3.75rem;
    --fs-1000: 3.75rem;

    @media (width > 760px) {
      --fs-300: 0.875rem;
      --fs-400: 1rem;
      --fs-500: 1.25rem;
      --fs-600: 1.5rem;
      --fs-700: 2rem;
      --fs-800: 3rem;
      --fs-900: 5rem;
      --fs-1000: 7.5rem;
    }
  }

  /* Layout and Content */
  :root {
    --content-width: ;
  }

  /* Primitive Colors*/
  :root {
    /* 🎨 Core Brand Colors */
    /* CSS HEX */
    --clr-emerald: #00cc92ff;
    --clr-magnolia: #f7f0f5ff;
    --clr-eerie-black: #111d13ff;
    --clr-finn: #63326eff;
    --clr-citrine: #ddd92aff;
    --clr-white: #ffffff;       /* Base white */

    /* CSS HSL */
    --clr-hsl-emerald: hsla(163, 100%, 40%, 1);
    --clr-hsl-magnolia: hsla(317, 30%, 95%, 1);
    --clr-hsl-eerie-black: hsla(130, 26%, 9%, 1);
    --clr-hsl-finn: hsla(289, 38%, 31%, 1);
    --clr-hsl-citrine: hsla(59, 72%, 52%, 1);
  
    /* 💡 Optional Enhancements */
    --clr-alice-blue: #f4faff;
    --clr-seasalt: #f9f8f8;
    --clr-cerulean: #0075A2;
    --clr-isabelline: #F5F1ED;
    --clr-magnolia: #F7F0F5;
  
    /* 🔲 Borders & UI */
    --color-border: #e0e0e0;      /* Light gray border for cards/inputs */
    --color-muted: #f9f9f9;       /* Background for soft sections */
  
    /* ⚠️ Status Colors (Optional Extras) */
    --color-success: #4CAF50;
    --color-warning: #FFC107;
    --color-error: #F44336;
  }

/* */
  :root {
  /* Theme Variables */
  --text-main: var(--clr-eerie-black);
  --text-high-contrast: var(--clr-emerald);
  --text-brand: var(--clr-emerald);
  --text-brand-light: var(--clr-brand-400);

  --background-accent-light: var(--clr-alice-blue);
  --background-accent-main: var(--clr-citrine);
  --background-accent-dark: var(--clr-finn);

  --background-extra-light: var(--clr-magnolia);
  --background-light: var(--clr-seasalt);
  --background-main: var(--clr-white);
  --background-dark: var(--clr-eerie-black);
  --background-extra-dark: var(--clr-brown-900);
}

/* Theme Font Settins*/
:root {
  --font-size-heading-sm: var(--fs-700);
  --font-size-heading-regular: var(--fs-800);
  --font-size-heading-lg: var(--fs-900);
  --font-size-heading-xl: var(--fs-1000);

  --font-size-sm: var(--fs-300);
  --font-size-regular: var(--fs-400);
  --font-size-md: var(--fs-500);
  --font-size-lg: var(--fs-600);

  --logo-text-spacing: var(var(--ff-spacing-900));
}


/* Theme Border settings*/
:root {
  --border-radius-1: 0.25rem;
  --border-radius-2: 0.5rem;
  --border-radius-3: 0.75rem;
}


:root {
  --equal-columns-gap: 1rem;
}
 

html {
  font-family: var(--ff-body), sans-serif;
  line-height: 1.6;
}

body {
  font-size: var(--font-size-regular);
  color: var(--text-main);
  background-color: var(--background-main);
}

h1, h2, h3, h4 {
  font-family: var(--ff-headline);
  color: var(--text-high-contrast)
}

h1 {
  font-size: var(--font-size-heading-lg);
}

a {
  color: var(--text-high-contrast);
}

a:hover,
a:focus-visible {
  color: var(--clr-citrine);
  font-weight: bold;
}

img {
  border-radius: var(--border-radius-3);
}

.numbers, #star_rating {
 font-family: 'Courier New', Courier, monospace;
 font-weight: bold;
}

.logo_text {
  font-family: "Aesthetic Moment", serif;
  font-weight: bold;
  letter-spacing: var(--logo-text-spacing);
  color: var(--text-brand);
  text-wrap: wrap;

  padding: 20px;

  width: .5rem;
  font-size: var(--fs-700);
}



}

@layer layout {
  .flow > * + * {
    margin-top: var(--flow-spacer, 1em);
  }

  .grid-flow {
    display: grid;
    gap: var(--grid-flow-gap, 1rem);
  }

  /* .consistent-flow > * + * {} */

  .wrapper {
    --wrapper-max-width: 1130px;

    max-width: var(--wrapper-max-width);
    margin-inline: auto;
    padding-inline: 1rem;
    box-sizing: content-box;
  
    /* nested wide class */
    &[data-width="wide"] {
      --wrapper-max-width: 1330px;
    }

    &[data-width="narrow"] {
      --wrapper-max-width:  720px;
    }
  }

  .equal-columns {
    display: grid;
    gap: var(--equal-columns-gap, 1rem);
    align-items: var(--equal-columns-vertical-alignment, stretch);

    @media (width > 760px) {
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
    }

    &[data-gap="large"] {
      --equal-columns-gap: 2rem;
    }

    &[data-alignment="centered"] {
      --equal-columns-vertical-alignment: center;
    }
    
  }

  .flex-equal-columns {
    display: flex;

    > * {
      flex: 1;
    }
  }

  .section {
    --padding: 3.75rem;
    padding-block: var(--padding);

    @media (width > 760px) {
      --padding: 8rem;

      &[data-padding="compact"] {
        --padding: 4.5rem;
      }
    }
  }

  .column-layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, 1fr);

    @media (width < 600px) {
      grid-template-columns: 1fr;
    }
  }



}

@layer components {
  .site-header {
    padding-block: 1rem;
  }

  .site-header__inner {
    display: flex;
    gap: 0.5rem 1rem;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;


    [aria-controls="primary-nav"] {
      z-index: 100;
      background-color: transparent;
      border: 0;
      cursor: pointer;

      /*removing the general selector style*/
      img {
        border-radius: 0;
      }
     
      @media (width > 760px) {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
      }
    }

    .site-navigation {
      
      ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
      }
      
      a {
        text-decoration: none;
        /* color: var(--clr-emerald); */
      }

      @media (width < 760px) {
        display: none;
        /* width: 80%; */
        position: absolute;
        z-index: 10;
        top: 25%;
        right: 25%;

        width: 300px;
        background-color: var(--clr-eerie-black);
        font-size: var(--font-size-lg);
        font-family: var(--ff-headline);
        text-align: center;
        /* color: var(--clr-alice-blue); */
        padding: 2rem;
        border-radius: 0 0 var(--border-radius-3s) 0;

        a {
          /* color: var(--clr-alice-blue); */
        }
        
        ul {
          gap: 0;
          flex-direction: column;
        }
        
        li + li {
          margin-block-start: 1.5rem;
          padding-block-start: 1.5rem;
          border-top: 2px solid var(--background-accent-light);
        };
      }

      @media (width < 420px) {
        top: 15%;
        right: 5%;

        width: 300px;
      }
    }
  }

  @media (width > 760px) {
    [aria-expanded="true"] + .site-navigation {
      display: block;
    }
  }
  

  /* .primary-navigation {} */
  
  .site-navigation {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    font-size:  1.75rem; /*var(--font-size-heading-sm);*/

    & > ul > li {
      padding: 1rem;
    }
  }

  .cta-primary {
    text-decoration: none;
    outline: var(--clr-emerald);
    padding: 1rem;
    border: 1px;
  }

  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
    font-size: var(--font-size-md);
    /* background-image: url('http://christinmorton.local/wp-content/uploads/2025/05/4253052.jpeg'); */
    background-size: cover;
    background-position: center;
  }
    
  .hero-profile-pic {
    width: 360px;
  }

  .hero__title {

    @media (width < 480px){
      font-size: var(--font-size-heading-regular);
    }
  }

  .hero__subtext {

    @media (width < 480px){
      font-size: var(--font-size-regular);
    }
  }

  .hero-text {
    padding: 0 4rem;
    margin-inline: auto;
    text-align: center;
    color: var(--clr-magnolia);

    @media (width < 480px) {
      padding: 0 1.5rem;
      font-size: var(--font-size-regular);
    }
  }

  .services {
    /* height: 60rem; */
    
    img {
      width: 360px;
    }
  }

  .services__layout {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    gap: 1rem;

    
    @media (width < 760px) {
      flex-direction: column-reverse;
    }
  }

  .services__content{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: start;
    text-align: center;
    padding-inline: 1rem;


    ul {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0;
    }

    ul > li {
      list-style: none;
      padding: 0;
    }

    p {
      width: 360px;

      @media (width < 480px){
        /* font-size: var(--font-size-sm); */
        width: 280px;
      }
    }
  }

  .services__content--card {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    justify-items: center;
    /* align-items: center; */

    padding-block: 2rem;
  }

  .values {
        /* height: 60rem; */
    background-color: var(--clr-cerulean);

    p {
      color: var(--clr-alice-blue)
    }
    
    img {
      width: 360px;
    }
  }

  .values__content{
    display: grid;
    align-items: center;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));

    p {
      /* width: 360px; */
      text-align: center;

      /* @media (width < 480px) {
        width: 260px;
      } */
    }
  }

  .values__content--card {
    background-color: var(--background-accent-dark);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 1.5rem;
    border-radius: var(--border-radius-2);

    @media (width < 480px) {
      /* width: 290px; */
      padding: .5rem;

      img {
        width: 100%;
      }

    }
  }
  
  .values__content--title {
    text-align: center;
  }


  .process {
    background-color: var(--clr-alice-blue);
  }

  .process__content {
    display: grid;
    align-items: center;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  }

  .process__content--card {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    justify-items: center;
    background-color: var(--clr-emerald);

    padding: 2rem;
    border-radius: var(--border-radius-2);

    h4 {
      color: var(--clr-alice-blue);
    }

    p {
      color: var(--clr-alice-blue);
    }

    img {
      width: 100%;
    }

    @media (width < 480px) {
      width: 290px;
      padding: 1rem;
      

      p {
        /* width: 260px; */
      }
    }

  }

  .skills {
    display: grid;
  }


  .skills-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));

    @media (760px < width < 860px) {}

    @media (width < 760px) {}
  }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .auto-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  }

  #slider article:not(:first-child) {
    display: none;
  }

  #slider-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-block: 1rem;
  }

  .reel {
    --gap: 1rem;
    display: grid;
    gap: var(--gap);
    grid-auto-flow: column;
    grid-auto-columns: 100%; /* calc(50% - (var(--gap) / 2)); */
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-padding: var(--gap);
    -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
  }

  .reel > * {
    scroll-snap-align: start;
  }

  .skills-grid__item {
    display: flex;
    flex-direction: column;

    padding: 2rem;
    background-color: var(--background-accent-light);

    border-radius: var(--border-radius-2);
  }

  .skills-grid__item--title {
    text-align: center;
    color: var(--text-brand);
  }

  .skills-grid__item--text {
    color: var(--background-accent-dark);
    font-weight: bold;
  }

  .skill-box {
    /* width: 100%; */
    min-height: 500px;
    padding: 2rem;

    @media (width < 760px) {
      min-height: 375px;
      
    }

  }

  .contact {
    /* height: 20rem; */
    background-color: var(--text-brand);
  }

  .contact__content {
      display: flex;
      flex-direction: column;
      text-align: center;
      gap: 1rem;
      /*justify-content: center; */
  }

  .contact__title {
    color: var(--clr-white);
  }

  .contact__text {
    align-self: center;
    text-align: center;
    width: 30rem;
    color: var(--clr-white);

    @media (width < 480px) {
      width: 20rem;
    }
  }

  .button {
    display: inline-flex;
    text-decoration: none;
    cursor: pointer;
    padding: .5rem;
    background-color: var(--clr-emerald);
    font-family: var(--ff-headline);
    font-weight: 700;
    font-size: var(--font-size-md);
    color: var(--background-accent-light);
    border-radius: var(--border-radius-2);
  }

  .light-button {
    display: inline;
    text-decoration: none;
    cursor: pointer;
    padding: .5rem;
    background-color: var(--clr-alice-blue);
    font-family: var(--ff-headline);
    font-weight: 700;
    font-size: var(--font-size-md);
    color: var(--text-brand);
    border: 1px solid var(--clr-emerald);
    border-radius: var(--border-radius-2);
  }


  .about {

    h2 {
      text-align: center;
    }

  }

  .about__content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 5rem;

    @media (width < 760px) {
      flex-direction: column-reverse;
    }
  }

  .about__content--text {
    padding-inline: 2rem;
  }


  .portfolio {
    background-color: var(--clr-isabelline);
  }

  .portfolio > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    p {
      text-align: center;
      width: 560px;
      color: var(--clr-cerulean);
      font-size: 1.56rem;

      @media (width < 760px){
        width: 360px;
      }

      @media (width < 400px){
        width: 300px;
        font-size: 1.2rem;
      }
    }
  }

  .community {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 1rem;
    /*justify-content: center; */

    p {
      width: 520px;

      @media (width < 560px) {
        width: 280px;
      }
    }
  }


  .site-footer {
    padding: 2rem;
    background-color: var(--background-extra-light);
  }

  .site-footer > .wrapper {
    display: flex;
    flex-direction: column;
  }

  .main__footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    @media (width < 850px){
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
    }
  }

  .footer_logo {

  /* font-family: "Aesthetic Moment", serif;
  font-weight: bold;
  letter-spacing: var(--logo-text-spacing);
  color: var(--text-brand);
  text-wrap: wrap;

  padding: 20px; */

  width: 10rem;
  /* font-size: var(--fs-700); */

  }

  .footer-content {
    width: inherit;
    display: flex;
    /* grid-template-columns: repeat(3, 1fr); */
    /* justify-content: right; */
    flex-direction: row;
    justify-content: space-evenly;
    gap: 1rem;

    
    @media (width < 760px) {
      width: inherit;
      flex-direction: column;
      gap: .5rem;
    }
  }

  .footer__bio{
    max-width: 360px;
    padding: 1rem;

    @media(width < 400px) {
      max-width: 280px;
    }
  }

  .footer__quick__links, .footer__social__icons {
    display: flex;
    flex-direction: column;

    list-style: none;
    text-decoration: none;

    @media(width < 400px) {
      max-width: 280px;
    }
  }

  .footer__quick__links {}

  .footer__social__icons {
    display: flex;
    flex-direction: row;
    justify-items: right;
    

    & > li {
      padding-inline: .25rem;
      font-size: var(--font-size-lg);
    }

    @media(width < 400px) {
      max-width: 280px;
    }
  }

  .copy-right-text {

    @media(width < 550px) {
      text-align: center;
    }
  }


  .contact-page {}

  .contact-page__content {
    align-items: center;
  }

  .contact-page__content--card {

    ul {
      display: block;
      list-style: none;
    }
  }

  .contact-map {
    width: 100%;
  }

  .hire-me__header {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding-inline: 2rem;
  }

  .hire-me__content {
    align-items: center;
    padding: 2.5rem;
    margin-block: 1.75rem;
    background-color: var(--clr-emerald);

    color: var(--clr-alice-blue);

    h2 {
      color: var(--clr-alice-blue);
    }

    @media (width < 760) {
      padding: 1.2367;
    }
  }

  .hire-me__content--card {

    ul {
      display: block;
      list-style: none;
    }
  }

  .hire-me__form {}

}

@layer utilities {
  .no-list-style > li {
    list-style: none;
    display: inline;
  }

  .no-list-style > li > a {
    text-decoration: none;
  }

  
  .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .hamburger {
    height: 45px;
    width: 45px;
    /* padding: .25rem; */
  }

  .card-gap {
    gap: 1.75rem;
  }

  .text-center {
    text-align: center;
  }
  .text-brand {
    color: var(--text-brand);
  }
  .text-high-contrast {
    color: var(--text-high-contrast);
  }

  .section-title {
    font-size: var(--font-size-heading-regular);
  }

  .background-base {
    background-color: var(--background-base);
  }
  .background-light {
    background-color: var(--background-light);
  }
  .background-extra-light {
    background-color: var(--background-extra-light);
  }
  .background-dark {
    background-color: var(--background-dark);
  }
  .background-extra-dark {
    background-color: var(--background-extra-dark);
  }

  .background-accent {
    background-color: var(--background-accent-dark);
  }

  .font-size-sm {
    font-size: var(--font-size-sm);
  }
  .font-size-regular {
    font-size: var(--font-size-regular);
  }
  .font-size-md {
    font-size: var(--font-size-md);
  }
  .font-size-lg {
    font-size: var(--font-size-lg);
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .text-justify {
    text-align: justify;
  }
  .icon {
    width: 45px;
  }

  .text-padding-sm {
    padding: 1rem;
  }
}