/* ===================================================== */
/* BRAND FONTS */
/* ===================================================== */

/* ---------- Lemon Milk ---------- */

@font-face {
  font-family: "Lemon Milk";
  src: url("../fonts/LemonMilk.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lemon Milk";
  src: url("../fonts/LemonMilkLight.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lemon Milk";
  src: url("../fonts/LemonMilkBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lemon Milk";
  src: url("../fonts/LemonMilkItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Lemon Milk";
  src: url("../fonts/LemonMilkBoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}


/* ---------- Sofia Pro ---------- */

@font-face {
  font-family: "Sofia Pro";
  src: url("../fonts/SofiaProRegular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sofia Pro";
  src: url("../fonts/SofiaProRegularItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Sofia Pro";
  src: url("../fonts/SofiaProMedium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sofia Pro";
  src: url("../fonts/SofiaProMediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Sofia Pro";
  src: url("../fonts/SofiaProSemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sofia Pro";
  src: url("../fonts/SofiaProSemiBoldItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* ===================================================== */
/* RESET + BASE */
/* ===================================================== */

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

html {
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* general.css */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


/* ===================================================== */
/* DESIGN TOKENS */
/* ===================================================== */

:root {

  /* ===================== */
  /* SPACING SCALE */
  /* ===================== */
  --space-1: 0.5rem;  /* 8px */
  --space-2: 1rem;    /* 16px */
  --space-3: 1.5rem;  /* 24px */
  --space-4: 2rem;    /* 32px */
  --space-5: 3rem;    /* 48px */
  --space-6: 4rem;    /* 64px */

  --max-width: 1240px;

  /* ===================== */
  /* TYPOGRAPHY */
  /* ===================== */

  --font-display: "Lemon Milk", sans-serif;
  --font-heading: "Lemon Milk", sans-serif;
  --font-body: "Sofia Pro", sans-serif;

  --display-xl: 4rem;
  --display-lg: 3.5rem;
  --display-md: 3rem;
  --display-sm: 2.5rem;
  --display-xs: 2rem;
  --display-xxs: 1.5rem;

  --h1-size: 3rem;
  --h2-size: 2.25rem;
  --h3-size: 1.75rem;
  --h4-size: 1.25rem;

  --body-lg: 1.15rem;
  --body-md: 1.1rem;
  --body-sm: 1rem;

  --leading-tight: 1.1;
  --leading-normal: 1.6;

  --tracking-tight: -0.01em;
  --tracking-wide: 0.05em;


  /* ===================== */
  /* SALSA COLOR SCALES */
  /* Full 100�800 palettes from your snippet. */
  /* ===================== */

  /* --- Salsa Yellow --- */
  --yellow-100: #FCF6E6;
  --yellow-200: #FFEDC0;
  --yellow-300: #FCD786;
  --yellow-400: #FFCC66;
  --yellow-500: #FFBE0C; /* main */
  --yellow-600: #E6AA0B;
  --yellow-700: #C99300;
  --yellow-800: #3B2B03;

  /* --- Salsa Watermelon --- */
  --watermelon-100: #FAF0F2;
  --watermelon-200: #FFD7E2;
  --watermelon-300: #F587B4;
  --watermelon-400: #FF577F;
  --watermelon-500: #E01E45; /* main */
  --watermelon-600: #CC1B3F;
  --watermelon-700: #B31937;
  --watermelon-800: #590016;

  /* --- Salsa Sky Blue --- */
  --sky-100: #EBF2FA;
  --sky-200: #D4E5FF;
  --sky-300: #85B1FA;
  --sky-400: #619FFF;
  --sky-500: #3986FF; /* main */
  --sky-600: #3379E6;
  --sky-700: #094BB3;
  --sky-800: #001F54;

  /* --- Salsa Orange --- */
  --orange-100: #FAF2ED;
  --orange-200: #FBD6C4;
  --orange-300: #FFAB82;
  --orange-400: #FB925F;
  --orange-500: #FB5607; /* main */
  --orange-600: #E64F06;
  --orange-700: #C23E00;
  --orange-800: #A63802;

  /* --- Salsa Purple --- */
  --purple-100: #F7F2FF;
  --purple-200: #CEB8EC;
  --purple-300: #B188EB;
  --purple-400: #9C63EB;
  --purple-500: #8338EC; /* main */
  --purple-600: #7130CC;
  --purple-700: #471E80;
  --purple-800: #2A0073; /* main */

  --salsa-gradient-1: linear-gradient(135deg, rgba(255, 190, 12, 1) 0%, rgba(131, 56, 236, 1) 100%);
  --salsa-gradient-2: linear-gradient(135deg, rgba(224, 30, 69, 1) 0%, rgb(43, 0, 117) 100%);
  --salsa-gradient-3: linear-gradient(135deg, rgba(255, 190, 12, 1) 0%, rgba(42, 0, 115, 1) 100%);
  --salsa-gradient-4: linear-gradient(135deg, rgba(255, 190, 12, 1) 0%, rgba(224, 30, 69, 1) 100%);
  --salsa-gradient-5: linear-gradient(135deg, rgba(42, 0, 115, 1) 0%, rgba(224, 30, 69, 1) 100%);
  --salsa-gradient-6: linear-gradient(135deg, rgba(224, 30, 69, 1) 0%, rgba(57, 134, 255, 1) 100%);
  --salsa-gradient-7: linear-gradient(135deg, rgba(251, 86, 7, 1) 0%, rgba(131, 56, 236, 1) 100%);

  /* ===================== */
  /* SEMANTIC COLOR ROLES */
  /* ===================== */
  --color-primary: var(--watermelon-500);
  --color-secondary: var(--purple-800);
  --color-accent: var(--orange-500);
  --color-highlight: var(--yellow-500);
  --color-info: var(--sky-500);

  --color-text: var(--purple-800);
  --color-text-secondary: white;
  --color-background: #ffffff;
  --color-background-highlight: #d3d3d385;
  --color-surface: #ffffff;
  --color-border: #e5e5e5;

  /* focus ring */
  --color-focus: var(--sky-500);


/* ===================== */
/* BUTTON TOKENS */
/* ===================== */

/* --- Primary (Watermelon) --- */
--btn-primary-bg: var(--watermelon-500);
--btn-primary-bg-hover: var(--watermelon-700);
--btn-primary-bg-pressed: var(--watermelon-800);
--btn-primary-text: #ffffff;

/* --- Primary White (Hero CTA) --- */
--btn-primary-white-bg: #ffffff;
--btn-primary-white-bg-hover: var(--purple-100);
--btn-primary-white-bg-pressed: var(--purple-200);
--btn-primary-white-text: var(--purple-800);

/* --- Secondary (Outline) --- */
--btn-secondary-bg: transparent;
--btn-secondary-bg-hover: var(--purple-100);
--btn-secondary-bg-pressed: var(--purple-200);
--btn-secondary-border: var(--purple-500);
--btn-secondary-text: var(--purple-500);

/* --- Tertiary (Text) --- */
--btn-tertiary-bg: transparent;
--btn-tertiary-bg-hover: var(--sky-100);
--btn-tertiary-bg-pressed: var(--sky-200);
--btn-tertiary-text: var(--sky-500);



  /* Box Shadow style */
  --shadow-sm: 0 2px 10px -7px rgb(0 0 0 / 50%);
  --shadow-md: 0 2px 10px 0px rgb(0 0 0 / 50%);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.18);
}


/* ===================================================== */
/* TYPOGRAPHY SYSTEM */
/* ===================================================== */

body {
  font-family: var(--font-body);
  font-size: var(--body-md);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
}

h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }

p {
  font-size: var(--body-lg);
  font-weight: 500;
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}

.lead {
  font-size: var(--body-lg);
  color: var(--color-text);
}

.small,
.caption {
  font-size: var(--body-sm);
  color: var(--color-text-secondary);
}

.header-title {
  font-family: var(--font-display);
  font-size: var(--display-md);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 var(--space-4);
}

.header-title--primary {
  color: var(--purple-800)
}

.header-title--secondary {
  color: white
}


/* ===================================================== */
/* LINKS */
/* ===================================================== */

a.link {
  color: var(--color-info);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a.link:hover {
  color: var(--color-primary);
}


/* ===================================================== */
/* LAYOUT SYSTEM */
/* ===================================================== */

.section {
  margin: auto;
  padding: var(--space-6);
  position: relative;
}

.content-wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
}

/* ===================================================== */
/* BUTTON SYSTEM */
/* ===================================================== */

/* Optional label above button */
.button-label {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
}


/* ===================== */
/* BASE BUTTON */
/* ===================== */

/* ===================== */
/* BASE BUTTON */
/* ===================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 12px 24px;

  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;

  border-radius: 6px;
  border: none;

  cursor: pointer;
  transition: all 0.2s ease;

  text-transform: uppercase;
  letter-spacing: 0.05em;

  text-decoration: none;
  white-space: nowrap;
}

/* ===================== */
/* SHARED STATES */
/* ===================== */

.btn:hover {
  transform: scale(1.05);
}

.btn:active {
  transform: scale(0.98);
}

.btn:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* Disabled state */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}


/* ===================== */
/* PRIMARY */
/* ===================== */

.btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

.btn-primary:hover {
  background-color: var(--btn-primary-bg-hover);
}

.btn-primary:active {
  background-color: var(--btn-primary-bg-pressed);
}
/* ===================== */
/* PRIMARY WHITE */
/* ===================== */

.btn-primary-white {
  background-color: var(--btn-primary-white-bg);
  color: var(--btn-primary-white-text);
}

.btn-primary-white:hover {
  background-color: var(--btn-primary-white-bg-hover);
}

.btn-primary-white:active {
  background-color: var(--btn-primary-white-bg-pressed);
}

/* ===================== */
/* SECONDARY */
/* ===================== */

.btn-secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: 2px solid var(--btn-secondary-border);
}

.btn-secondary:hover {
  background-color: var(--btn-secondary-bg-hover);
}

.btn-secondary:active {
  background-color: var(--btn-secondary-bg-pressed);
}


/* ===================== */
/* TERTIARY */
/* ===================== */

.btn-tertiary {
  background-color: var(--btn-tertiary-bg);
  color: var(--btn-tertiary-text);
}

.btn-tertiary:hover {
  background-color: var(--btn-tertiary-bg-hover);
}

.btn-tertiary:active {
  background-color: var(--btn-tertiary-bg-pressed);
}

/* ===================== */
/* SIZES */
/* ===================== */

.btn-sm {
  padding: 8px 16px;
  font-size: 14px;
}

.btn-lg {
  padding: 16px 32px;
  font-size: 18px;
}


/* ===================== */
/* FULL WIDTH OPTION */
/* ===================== */

.btn-full {
  width: 100%;
}

/* =========================================
   REVEAL ANIMATION — Premium Smooth
========================================= */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* ===================================================== */
/* BREAKPOINTS */
/* ===================================================== */

@media (max-width: 1100px) {
  .section {
    padding: var(--space-5) var(--space-6);
  }

  .header-title {
    font-size: var(--display-sm);
  }


  h1 {
    font-size: 2.5rem;
  }
}

@media (max-width: 768px) {
  .section {
    padding: var(--space-4);
  }

  .header-title {
    font-size: var(--display-xs);
    margin: 0 0 var(--space-3);
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  p {
    font-size: var(--body-md);
  }

}
@media (max-width: 580px) {
  .section {
    padding: var(--space-4) var(--space-3);
  }

  .header-title {
    font-size: var(--display-xxs);
    margin: 0 0 var(--space-2);
  }

  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.2rem;
  }

  p {
    font-size: var(--body-sm);
  }
}



/* =====================================================
   META BAR COMPONENT
   Shared Across Pages
===================================================== */

.meta-bar{
background:var(--salsa-gradient-6);
color:#fff;
padding:var(--space-4) var(--space-3);
}

.meta-bar__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  align-items: start;
  text-align: center;
}

.meta-bar__item{

display:flex;
flex-direction:column;
gap:var(--space-1);

}

.meta-bar__label{

font-size:var(--body-sm);
letter-spacing:2px;
opacity:.75;
text-transform:uppercase;

}

.meta-bar__value{

font-size:1.05rem;
font-weight:600;
line-height:var(--leading-normal);

}

.meta-bar__value a{

font-size:.85rem;
opacity:.75;
text-decoration:underline;

}

.meta-bar__value a:hover{
opacity:1;
}

/* mobile */

@media(max-width:768px){

.meta-bar__inner{

grid-template-columns:1fr;
gap:var(--space-2);
text-align:left;

}

.meta-bar__item{

padding:var(--space-2);
border-radius:14px;

background:rgba(255,255,255,.10);
backdrop-filter:blur(6px);

}

}


/* =====================================================
   PASSWORD PROTECTED PAGE
   ===================================================== */

   .password-protected-card{
    max-width:800px;
    margin:40px auto 80px;
    padding:40px 36px;
    border:1px solid rgba(42,0,115,0.10);
    border-radius:22px;
    background:rgba(255,255,255,0.98);
    box-shadow:0 15px 40px rgba(20,20,43,0.08);
  }
  
  .password-protected-card__logo{
    display:flex;
    justify-content:center;
    margin-bottom:22px;
  }
  
  .password-protected-card__logo img{
    display:block;
    width:min(220px, 60%);
    height:auto;
  }
  
  .site-main .post-password-form{
    margin:0;
  }
  
  .site-main .post-password-form p{
    margin:0 0 18px;
    color:var(--color-text);
    line-height:1.7;
  }
  
  .site-main .post-password-form > p:first-of-type{
    margin-bottom:24px;
    font-size:1.05rem;
  }
  
  .site-main .post-password-form label{
    display:block;
    width:100%;
    margin:0;
    font-family:var(--font-heading);
    font-size:0.82rem;
    font-weight:400;
    line-height:1.3;
    letter-spacing:var(--tracking-wide);
    text-transform:uppercase;
    color:var(--color-text);
  }
  
  .site-main .post-password-form p:last-of-type{
    display:flex;
    flex-wrap:wrap;
    align-items:end;
    gap:12px;
  }
  
  .site-main .post-password-form p:last-of-type label{
    flex:1 1 320px;
  }
  
  .site-main .post-password-form input[type="password"]{
    display:block;
    width:100%;
    min-height:54px;
    margin-top:10px;
    padding:14px 16px;
    border:1px solid rgba(71,30,128,0.18);
    border-radius:12px;
    background:#fff;
    font-family:var(--font-body);
    font-size:var(--body-md);
    line-height:1.4;
    color:var(--color-text);
    box-shadow:none;
    transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  }
  
  .site-main .post-password-form input[type="password"]:hover{
    border-color:rgba(71,30,128,0.32);
  }
  
  .site-main .post-password-form input[type="password"]:focus{
    outline:none;
    border-color:var(--color-info);
    box-shadow:0 0 0 3px rgba(57,134,255,0.15);
  }
  
  .site-main .post-password-form input[type="submit"]{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:54px;
    padding:12px 24px;
    border:none;
    border-radius:6px;
    background-color:var(--btn-primary-bg);
    color:var(--btn-primary-text);
    font-family:var(--font-heading);
    font-size:16px;
    font-weight:600;
    letter-spacing:.05em;
    text-transform:uppercase;
    cursor:pointer;
    transition:all .2s ease;
  }
  
  .site-main .post-password-form input[type="submit"]:hover{
    background-color:var(--btn-primary-bg-hover);
    transform:scale(1.03);
  }
  
  .site-main .post-password-form input[type="submit"]:active{
    background-color:var(--btn-primary-bg-pressed);
    transform:scale(.98);
  }
  
  .site-main .post-password-form input[type="submit"]:focus-visible{
    outline:3px solid var(--color-focus);
    outline-offset:3px;
  }
  
  .site-main .post-password-form .post-password-form-invalid-password{
    margin:0 0 18px;
    padding:14px 16px;
    border:1px solid rgba(224,30,69,0.16);
    border-radius:16px;
    background:#fff4f6;
  }
  
  .site-main .post-password-form .post-password-form-invalid-password p{
    margin:0;
    color:var(--watermelon-700);
    font-size:var(--body-sm);
    font-weight:600;
    line-height:1.5;
  }
  
  @media (max-width:768px){
    .password-protected-card__logo img{
      width:min(180px, 65%);
    }
  
    .site-main .post-password-form{
      padding:32px 22px;
      border-radius:18px;
    }
  
    .site-main .post-password-form p:last-of-type{
      flex-direction:column;
      align-items:stretch;
    }
  
    .site-main .post-password-form p:last-of-type label{
      flex:1 1 auto;
    }
  
    .site-main .post-password-form input[type="submit"]{
      width:100%;
    }
  }