/* Global CSS variables — Charity's Landing Retreat Center */

:root {
  /* Fonts */
  --font-book-antiqua: "Book Antiqua", Georgia, serif;
  --font-book-antiqua-lefty:
    "Book Antiqua Bold Extreme Lefty", "Book Antiqua", Georgia, serif;
  --font-primary: var(--font-book-antiqua);
  --font-display: var(--font-book-antiqua-lefty);

  /* Colors — set manually */
  --color-primary: #343b31;
  --color-secondary: #443e34;
  --color-white: #ffffff;
  --color-heading: #343b31;
  --color-body-fallback: #443e34;
  --color-text-body: #443e34;
  --color-link: #443e34;
  --color-link-secondary: #4e4d49;
  --color-link-hover: #343b31;
  --color-accent: #646c5b;
  --color-accent-hover: #443e34;

  /* Header */
  --color-header-background: #c8c9b7;
  --color-social-icon-bg: #636b58;
  /* --header-logo-max-width: 400px; */
  --header-logo-max-width: 300px;
  --header-logo-width: 100%;
  --header-social-size: 2.5rem;
  --header-social-gap: 0.625rem;
  /* --header-top-padding-block: 1.5rem; */
  --header-top-padding-block: 0.5rem;
  --header-nav-font-size: 1.3rem;
  --header-nav-letter-spacing: 0.02em;
  --header-nav-margin-top: 0.75rem;
  --header-nav-padding-block: 0.875rem;
  --header-nav-gap: 1.25rem; /* 20px */
  --header-nav-border-width: 1px;
  --header-nav-border-color: var(--color-primary);
  --header-nav-separator-color: #9a9a9a;
  --header-nav-separator-width: 1px;
  --header-nav-shadow: 0 0 16px 5px rgba(52, 59, 49, 0.4);

  /* Buttons */
  --btn-font-size: 1rem;
  --btn-letter-spacing: 0.02em;
  --btn-padding-block: 0.875rem;
  --btn-padding-inline: 1.5rem;
  --btn-gap: 0.75rem;
  --btn-arrow-size: 1.125rem;
  --btn-inset-offset: 4px;
  --btn-inset-border-width: 1px;
  --btn-inset-border-color: rgba(255, 255, 255, 0.9);
  --btn-primary-bg: var(--color-accent);
  --btn-primary-bg-hover: var(--color-accent-hover);
  --btn-primary-color: var(--color-white);

  /* Title separator */
  --title-separator-width-sm: 11.25rem; /* 180px */
  --title-separator-width-lg: 18.75rem; /* 300px */
  --title-separator-margin-block: 0.75rem;

  /* Photo frame */
  --photo-frame-border-filter: drop-shadow(0 10px 10px rgba(52, 59, 49, 0.4));

  /* Footer */
  --footer-content-padding-top: 8rem;
  --footer-content-padding-bottom: 18rem;
  --footer-content-gap: 2.5rem;
  --footer-heading-font-size: var(--h6-size);
  --footer-heading-letter-spacing: 0.02em;
  --footer-link-font-size: 1.125rem;
  --footer-link-gap: 0.625rem;
  --footer-col-divider-color: rgba(68, 62, 52, 0.2);
  --footer-social-size: 2.25rem;
  --footer-social-gap: 0.625rem;
  --footer-logo-max-width: 100%;
  --footer-cta-margin-top: 1.25rem;
  --footer-contact-icon-size: 1.125rem;
  --footer-contact-gap: 0.875rem;
  --footer-trees-max-height: 18rem;
  --footer-copyright-padding-block: 1.5rem;
  --footer-copyright-font-size: 1rem;
  --footer-copyright-color: var(--color-white);
  --footer-bg-drop-shadow: drop-shadow(0 10px 12px rgba(52, 59, 49, 0.48));
  --footer-copyright-drop-shadow: drop-shadow(
    0 6px 12px rgba(52, 59, 49, 0.48)
  );

  /* Border system — set as needed */
  --border-width: ;
  --border-color: ;
  --border-radius: ;

  /* Container inline padding — set clamp values manually */
  --container-sm-padding: clamp(
    1.25rem,
    0.9466rem + 1.2945vw,
    2.5rem
  ); /* 20px - 40px */
  --container-md-padding: clamp(
    1.25rem,
    0.6432rem + 2.589vw,
    3.75rem
  ); /* 20px - 60px */
  --container-lg-padding: clamp(
    1.25rem,
    0.3398rem + 3.8835vw,
    5rem
  ); /* 20px - 80px */
  --container-xl-padding: clamp(
    1.25rem,
    0.0364rem + 5.178vw,
    6.25rem
  ); /* 20px - 100px */
  --container-xxl-padding: clamp(
    1.25rem,
    -0.267rem + 6.4725vw,
    7.5rem
  ); /* 20px - 120px */
  --container-footer-padding: ;

  /* Site main wrapper — set manually */
  --main-max-width: 1440px;

  /* Body spacing — set manually */
  --body-padding-top: 0px;
  --body-padding-bottom: 200px;
  --body-padding-inline: 20px;
  --body-padding-inline-mobile: 0px;

  /* Body typography */
  --body-font-weight: 400;
  --body-line-height: 1.2;
  --body-letter-spacing: normal;

  /* Type sizes — set clamp / px values manually */
  --paragraph-font-size: clamp(
    1rem,
    0.9697rem + 0.1294vw,
    1.125rem
  ); /* 16px - 18px */
  --paragraph-line-height: 1.5;
  --paragraph-spacing: 1.5em;

  --h1-size: clamp(2.125rem, 1.6092rem + 2.2006vw, 4.25rem); /* 34px - 68px */
  --h2-size: clamp(1.875rem, 1.5109rem + 1.5534vw, 3.375rem); /* 30px - 54px */
  --h3-size: clamp(1.5rem, 1.2573rem + 1.0356vw, 2.5rem); /* 24px - 40px */
  --h4-size: clamp(1.25rem, 1.0983rem + 0.6472vw, 1.875rem); /* 20px - 30px */
  --h5-size: clamp(1.125rem, 1.0947rem + 0.1294vw, 1.25rem); /* 18px - 20px */
  --h6-size: clamp(1rem, 0.9697rem + 0.1294vw, 1.125rem); /* 16px - 18px */

  /* Hero */
  /* --hero-min-height: clamp(28.125rem, 23.75rem + 21.875vw, 50rem); */
  --hero-min-height: 450px;
  --hero-content-max-width: 46rem;
  --hero-content-padding: clamp(1.25rem, 0.75rem + 2.5vw, 3.75rem);
  --hero-content-padding-block: clamp(3.75rem, 3.5rem + 1.25vw, 5rem);
  --hero-content-padding-inline: clamp(1.875rem, 1.75rem + 0.625vw, 2.5rem);
  --hero-content-drop-shadow: drop-shadow(0 10px 18px rgba(52, 59, 49, 0.28));
  --hero-media-drop-shadow: drop-shadow(0 16px 18px rgba(52, 59, 49, 0.48));
  --hero-note-font-size: clamp(1.125rem, 1.075rem + 0.25vw, 1.375rem);
  --hero-cta-margin-top: 1.25rem;
  --hero-bottom-bar-offset: -4.5rem;

  /* Feature cards (Mission / Retreats) */
  --feature-cards-padding-block: clamp(3rem, 2rem + 3vw, 5rem);
  --feature-cards-gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  --feature-card-padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
  --feature-card-drop-shadow: drop-shadow(0 0 28px rgba(0, 0, 0, 0.5));
  --feature-card-title-size: clamp(1.5rem, 1.2269rem + 1.165vw, 2.625rem);
  --feature-card-media-radius: 0;
  --feature-card-text-max-width: 28rem;
  --feature-card-cta-margin-top: 1.25rem;

  /* Accommodations */
  --accommodations-padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  --accommodations-panel-padding: clamp(
    1.25rem,
    1.0983rem + 0.6472vw,
    1.875rem
  );
  --accommodations-box-shadow: 0 0 28px 7px rgba(0, 0, 0, 0.5);
  --accommodations-title-size: clamp(1.5rem, 1.1663rem + 1.4239vw, 2.875rem);
  --accommodations-grid-gap: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  --accommodations-image-border: 1px solid var(--color-primary);
  --accommodations-cta-margin-top: 1.5rem;

  /* Site leaves */
  --site-leaves-width-top: clamp(17.5rem, 11.7354rem + 24.5955vw, 41.25rem);
  --site-leaves-width-middle: clamp(9rem, 7rem + 7vw, 16rem);
  --site-leaves-width-bottom: clamp(11rem, 9rem + 8vw, 20rem);
  --site-leaves-edge-shift: 0%;

  /* About intro / Legacy */
  --about-intro-padding-block: clamp(3.5rem, 2.5rem + 3vw, 6rem);
  --about-intro-header-margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3.25rem);
  --about-intro-layout-gap: clamp(1.75rem, 1rem + 2.5vw, 3.5rem);
  --about-intro-title-size: var(--h3-size);
  --about-intro-subtitle-size: var(--h3-size);
  --about-intro-media-max-width: 34rem;

  /* About family — Meet the Family */
  --about-family-padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  --about-family-panel-padding: clamp(2rem, 1.25rem + 2vw, 3.5rem);
  --about-family-header-margin-bottom: 10px;
  --about-family-layout-gap: clamp(1.75rem, 1rem + 2.5vw, 3.5rem);
  --about-family-media-max-width: 34rem;
  --about-family-drop-shadow: drop-shadow(0 0 28px rgba(0, 0, 0, 0.5));

  /* Spiritual Retreats grid */
  --retreats-padding-block: clamp(2.5rem, 1.5rem + 3vw, 5rem);
  --retreats-header-margin-bottom: 10px;
  --retreats-panel-padding: clamp(1.5rem, 1rem + 1.5vw, 2.75rem);
  --retreats-panel-drop-shadow: drop-shadow(0 0 28px rgba(0, 0, 0, 0.45));
  --retreats-grid-gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  --retreat-card-padding: clamp(1.25rem, 1rem + 0.75vw, 1.875rem);
  --retreat-card-drop-shadow: drop-shadow(0 0 22px rgba(0, 0, 0, 0.4));
  --retreat-card-title-size: var(--h4-size);
  --retreat-card-meta-font-size: 1rem;
  --retreat-card-icon-size: 1.5rem;
  --retreat-card-cta-margin-top: 1.25rem;
}