/*
 * Joy Concept — Design System
 * CSS custom properties, reset, base typography, and utility classes.
 *
 * Package:  JoyConcept
 * Author:   Folorunso John Tosin (Joafjoe)
 * Version:  1.4.6
 *
 * Table of contents:
 * 1.  CSS Custom Properties (Design Tokens)
 * 2.  CSS Reset
 * 3.  Base Typography
 * 4.  Base Element Styles
 * 5.  Accessibility
 * 6.  Utility Classes
 * 7.  Animations & Transitions
 * 8.  Scrollbar
 */


/* ─────────────────────────────────────────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ───────────────────────────────────────────────────────────────────────────── */

:root {

    /* ── Brand Colours ────────────────────────────────────────────────────── */
    --jc-green:        #1C3D2B;   /* Primary — deep forest green               */
    --jc-green-mid:    #2A5C40;   /* Mid green — hover states                  */
    --jc-green-light:  #3D7A58;   /* Light green — accents                     */
    --jc-green-pale:   #EAF2EC;   /* Very pale green — subtle backgrounds      */
    --jc-cream:        #F9F5EE;   /* Primary background — warm cream           */
    --jc-cream-dark:   #EFE9DC;   /* Slightly darker cream — section alt bg    */
    --jc-cream-darker: #E4DDD0;   /* Darker cream — borders, dividers          */
    --jc-gold:         #B8861B;   /* Accent gold — CTAs, badges, highlights    */
    --jc-gold-light:   #D4A940;   /* Light gold — hover, subheadings           */
    --jc-gold-pale:    #FBF3E2;   /* Very pale gold — warm background tints    */
    --jc-ink:          #1A1A14;   /* Primary text — warm near-black            */
    --jc-muted:        #5C5C4E;   /* Secondary text — muted warm grey          */
    --jc-subtle:       #8C8C7E;   /* Tertiary text — metadata, captions        */
    --jc-border:       rgba(28, 61, 43, 0.12);  /* Default border colour       */
    --jc-border-light: rgba(28, 61, 43, 0.07);  /* Subtle border               */
    --jc-white:        #FFFFFF;

    /* ── Typography ──────────────────────────────────────────────────────── */
    --jc-serif:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --jc-sans:   'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --jc-mono:   'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

    /* ── Type Scale (fluid where possible) ───────────────────────────────── */
    --jc-text-xs:   clamp(0.65rem,  1vw,   0.75rem);   /* ~10–12px  */
    --jc-text-sm:   clamp(0.78rem,  1.2vw, 0.875rem);  /* ~12–14px  */
    --jc-text-base: clamp(0.9375rem,1.4vw, 1rem);      /* ~15–16px  */
    --jc-text-md:   clamp(1rem,     1.6vw, 1.125rem);  /* ~16–18px  */
    --jc-text-lg:   clamp(1.125rem, 2vw,   1.25rem);   /* ~18–20px  */
    --jc-text-xl:   clamp(1.25rem,  2.5vw, 1.5rem);    /* ~20–24px  */
    --jc-text-2xl:  clamp(1.5rem,   3vw,   2rem);      /* ~24–32px  */
    --jc-text-3xl:  clamp(1.875rem, 4vw,   2.5rem);    /* ~30–40px  */
    --jc-text-4xl:  clamp(2.25rem,  5vw,   3rem);      /* ~36–48px  */
    --jc-text-5xl:  clamp(2.75rem,  6vw,   3.75rem);   /* ~44–60px  */
    --jc-text-6xl:  clamp(3.25rem,  7vw,   4.5rem);    /* ~52–72px  */

    /* ── Line Heights ─────────────────────────────────────────────────────── */
    --jc-lh-tight:   1.15;
    --jc-lh-snug:    1.35;
    --jc-lh-normal:  1.6;
    --jc-lh-relaxed: 1.8;
    --jc-lh-loose:   2;

    /* ── Letter Spacing ───────────────────────────────────────────────────── */
    --jc-ls-tight:  -0.02em;
    --jc-ls-normal:  0;
    --jc-ls-wide:    0.04em;
    --jc-ls-wider:   0.08em;
    --jc-ls-widest:  0.14em;

    /* ── Spacing Scale ────────────────────────────────────────────────────── */
    --jc-sp-1:   0.25rem;   /*  4px  */
    --jc-sp-2:   0.5rem;    /*  8px  */
    --jc-sp-3:   0.75rem;   /* 12px  */
    --jc-sp-4:   1rem;      /* 16px  */
    --jc-sp-5:   1.25rem;   /* 20px  */
    --jc-sp-6:   1.5rem;    /* 24px  */
    --jc-sp-8:   2rem;      /* 32px  */
    --jc-sp-10:  2.5rem;    /* 40px  */
    --jc-sp-12:  3rem;      /* 48px  */
    --jc-sp-16:  4rem;      /* 64px  */
    --jc-sp-20:  5rem;      /* 80px  */
    --jc-sp-24:  6rem;      /* 96px  */
    --jc-sp-32:  8rem;      /* 128px */

    /* ── Layout ───────────────────────────────────────────────────────────── */
    --jc-container:  1200px;  /* Max content width             */
    --jc-content:    760px;   /* Blog post / prose max width   */
    --jc-narrow:     600px;   /* Narrow content / lead magnets */
    --jc-nav-h:      72px;    /* Navigation bar height         */
    --jc-gutter:     clamp(1.5rem, 5vw, 4rem);  /* Horizontal page padding */

    /* ── Border Radius ────────────────────────────────────────────────────── */
    --jc-radius-xs:   2px;
    --jc-radius-sm:   4px;
    --jc-radius:      6px;
    --jc-radius-md:   10px;
    --jc-radius-lg:   16px;
    --jc-radius-xl:   24px;
    --jc-radius-2xl:  32px;
    --jc-radius-full: 9999px;

    /* ── Shadows ──────────────────────────────────────────────────────────── */
    --jc-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --jc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --jc-shadow:    0 4px 16px rgba(0, 0, 0, 0.07);
    --jc-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.09);
    --jc-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.11);
    --jc-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.13);

    /* ── Z-Index Scale ────────────────────────────────────────────────────── */
    --jc-z-below:   -1;
    --jc-z-base:     0;
    --jc-z-raised:   10;
    --jc-z-dropdown: 100;
    --jc-z-sticky:   200;
    --jc-z-overlay:  300;
    --jc-z-modal:    400;
    --jc-z-toast:    500;

    /* ── Transitions ──────────────────────────────────────────────────────── */
    --jc-ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --jc-ease-in:     cubic-bezier(0.4, 0, 1, 1);
    --jc-ease-out:    cubic-bezier(0, 0, 0.2, 1);
    --jc-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --jc-dur-fast:    150ms;
    --jc-dur-base:    200ms;
    --jc-dur-slow:    350ms;
    --jc-dur-slower:  500ms;

    --jc-transition:      var(--jc-dur-base) var(--jc-ease);
    --jc-transition-slow: var(--jc-dur-slow) var(--jc-ease);
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. CSS RESET
   ───────────────────────────────────────────────────────────────────────────── */

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

html {
    font-size:                  100%;
    scroll-behavior:            smooth;
    -webkit-text-size-adjust:   100%;
    text-size-adjust:           100%;
    hanging-punctuation:        first last;
}

body {
    font-family:             var(--jc-sans);
    font-size:               var(--jc-text-base);
    font-weight:             400;
    line-height:             var(--jc-lh-relaxed);
    color:                   var(--jc-ink);
    background-color:        var(--jc-cream);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering:          optimizeLegibility;
    overflow-x:              hidden;
}

img,
picture,
video,
canvas,
svg {
    display:    block;
    max-width:  100%;
    height:     auto;
}

input,
button,
textarea,
select {
    font:    inherit;
    color:   inherit;
}

p,
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

ul,
ol {
    list-style: none;
}

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

button {
    cursor:     pointer;
    background: none;
    border:     none;
}

table {
    border-collapse: collapse;
    border-spacing:  0;
}

/* Remove default fieldset styles */
fieldset {
    border:  0;
    padding: 0;
    margin:  0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   3. BASE TYPOGRAPHY
   ───────────────────────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    font-family:    var(--jc-serif);
    font-weight:    300;
    line-height:    var(--jc-lh-tight);
    letter-spacing: var(--jc-ls-tight);
    color:          var(--jc-green);
}

h1 { font-size: var(--jc-text-5xl); }
h2 { font-size: var(--jc-text-4xl); }
h3 { font-size: var(--jc-text-3xl); }
h4 { font-size: var(--jc-text-2xl); }
h5 { font-size: var(--jc-text-xl);  }
h6 { font-size: var(--jc-text-lg);  }

p {
    font-size:   var(--jc-text-base);
    line-height: var(--jc-lh-relaxed);
    color:       var(--jc-muted);
}

p + p { margin-top: var(--jc-sp-4); }

strong, b { font-weight: 500; color: var(--jc-ink); }
em, i     { font-style:  italic; }

small { font-size: var(--jc-text-sm); }

/* Eyebrow / label text — small all-caps above headings */
.jc-eyebrow {
    font-family:     var(--jc-sans);
    font-size:       var(--jc-text-xs);
    font-weight:     500;
    letter-spacing:  var(--jc-ls-widest);
    text-transform:  uppercase;
    color:           var(--jc-gold);
    display:         flex;
    align-items:     center;
    gap:             var(--jc-sp-3);
    margin-bottom:   var(--jc-sp-4);
}

.jc-eyebrow::before {
    content:          '';
    display:          inline-block;
    width:            20px;
    height:           1px;
    background-color: var(--jc-gold);
    flex-shrink:      0;
}

/* Prose — used in blog post content */
.jc-prose {
    max-width:   var(--jc-content);
    font-size:   var(--jc-text-md);
    line-height: var(--jc-lh-relaxed);
}

.jc-prose h2 { margin-top: var(--jc-sp-10); margin-bottom: var(--jc-sp-4); font-size: var(--jc-text-3xl); }
.jc-prose h3 { margin-top: var(--jc-sp-8);  margin-bottom: var(--jc-sp-3); font-size: var(--jc-text-2xl); }
.jc-prose p  { margin-bottom: var(--jc-sp-5); color: var(--jc-ink); }
.jc-prose ul,
.jc-prose ol {
    margin-bottom:  var(--jc-sp-5);
    padding-left:   var(--jc-sp-6);
}
.jc-prose ul { list-style: disc; }
.jc-prose ol { list-style: decimal; }
.jc-prose li { margin-bottom: var(--jc-sp-2); color: var(--jc-ink); line-height: var(--jc-lh-relaxed); }
.jc-prose a  { color: var(--jc-gold); text-decoration: underline; text-underline-offset: 3px; }
.jc-prose a:hover { color: var(--jc-green); }
.jc-prose blockquote {
    border-left:    3px solid var(--jc-gold);
    margin:         var(--jc-sp-8) 0;
    padding:        var(--jc-sp-4) var(--jc-sp-6);
    background:     var(--jc-gold-pale);
    border-radius:  0 var(--jc-radius) var(--jc-radius) 0;
    font-family:    var(--jc-serif);
    font-size:      var(--jc-text-xl);
    font-style:     italic;
    font-weight:    300;
    color:          var(--jc-green);
    line-height:    var(--jc-lh-snug);
}
.jc-prose hr {
    border:         none;
    border-top:     1px solid var(--jc-border);
    margin:         var(--jc-sp-10) 0;
}
.jc-prose code {
    font-family:    var(--jc-mono);
    font-size:      0.875em;
    background:     var(--jc-cream-dark);
    padding:        0.15em 0.4em;
    border-radius:  var(--jc-radius-xs);
}


/* ─────────────────────────────────────────────────────────────────────────────
   4. BASE ELEMENT STYLES
   ───────────────────────────────────────────────────────────────────────────── */

a {
    transition: color var(--jc-transition);
}

a:hover { color: var(--jc-green-mid); }

hr {
    border:     none;
    border-top: 1px solid var(--jc-border);
    margin:     var(--jc-sp-8) 0;
}

::selection {
    background-color: var(--jc-gold-pale);
    color:            var(--jc-green);
}

:focus-visible {
    outline:        2px solid var(--jc-gold);
    outline-offset: 3px;
}

img {
    border-radius: var(--jc-radius-sm);
}


/* ─────────────────────────────────────────────────────────────────────────────
   5. ACCESSIBILITY
   ───────────────────────────────────────────────────────────────────────────── */

.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;
}

.skip-link {
    position:   absolute;
    top:        -100%;
    left:       var(--jc-sp-4);
    background: var(--jc-green);
    color:      var(--jc-white);
    padding:    var(--jc-sp-3) var(--jc-sp-6);
    border-radius: var(--jc-radius-sm);
    font-weight:   500;
    z-index:    var(--jc-z-toast);
    transition: top var(--jc-dur-fast) var(--jc-ease);
}

.skip-link:focus {
    top: var(--jc-sp-4);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1      !important;
        transition-duration:       0.01ms !important;
        scroll-behavior:           auto   !important;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   6. UTILITY CLASSES
   ───────────────────────────────────────────────────────────────────────────── */

/* Text colours */
.text-green  { color: var(--jc-green); }
.text-gold   { color: var(--jc-gold);  }
.text-muted  { color: var(--jc-muted); }
.text-white  { color: var(--jc-white); }
.text-ink    { color: var(--jc-ink);   }

/* Backgrounds */
.bg-cream      { background-color: var(--jc-cream);      }
.bg-cream-dark { background-color: var(--jc-cream-dark); }
.bg-green      { background-color: var(--jc-green);      }
.bg-gold       { background-color: var(--jc-gold);       }
.bg-white      { background-color: var(--jc-white);      }

/* Display */
.d-flex        { display: flex;          }
.d-grid        { display: grid;          }
.d-block       { display: block;         }
.d-inline      { display: inline;        }
.d-none        { display: none;          }

/* Flex utilities */
.flex-center   { display: flex; align-items: center; justify-content: center; }
.flex-between  { display: flex; align-items: center; justify-content: space-between; }
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap;        }
.gap-2         { gap: var(--jc-sp-2);   }
.gap-4         { gap: var(--jc-sp-4);   }
.gap-6         { gap: var(--jc-sp-6);   }
.gap-8         { gap: var(--jc-sp-8);   }

/* Text alignment */
.text-center { text-align: center; }
.text-left   { text-align: left;   }
.text-right  { text-align: right;  }

/* Font families */
.font-serif { font-family: var(--jc-serif); }
.font-sans  { font-family: var(--jc-sans);  }

/* Weight */
.fw-300  { font-weight: 300; }
.fw-400  { font-weight: 400; }
.fw-500  { font-weight: 500; }

/* Spacing */
.mt-auto { margin-top: auto;         }
.mx-auto { margin-inline: auto;      }

/* Border */
.border-top    { border-top:    1px solid var(--jc-border); }
.border-bottom { border-bottom: 1px solid var(--jc-border); }

/* Italic */
.italic { font-style: italic; }

/* Uppercase label */
.label {
    font-size:      var(--jc-text-xs);
    font-weight:    500;
    letter-spacing: var(--jc-ls-widest);
    text-transform: uppercase;
}

/* Divider line */
.jc-divider {
    width:            100%;
    height:           1px;
    background-color: var(--jc-border);
    border:           none;
    margin:           var(--jc-sp-8) 0;
}

/* Disclosure notices */
.jc-disclosure {
    font-size:   var(--jc-text-sm);
    color:       var(--jc-subtle);
    line-height: var(--jc-lh-relaxed);
}

.jc-disclosure--block {
    background:    var(--jc-cream-dark);
    border:        1px solid var(--jc-border);
    border-radius: var(--jc-radius-sm);
    padding:       var(--jc-sp-3) var(--jc-sp-4);
    display:       flex;
    align-items:   flex-start;
    gap:           var(--jc-sp-2);
    margin-bottom: var(--jc-sp-6);
}

.jc-disclosure__icon { flex-shrink: 0; color: var(--jc-gold); }

/* Medical disclaimer */
.jc-disclaimer {
    font-size:     var(--jc-text-sm);
    color:         var(--jc-subtle);
    background:    var(--jc-cream-dark);
    border-left:   3px solid var(--jc-gold);
    border-radius: 0 var(--jc-radius-sm) var(--jc-radius-sm) 0;
    padding:       var(--jc-sp-3) var(--jc-sp-4);
    margin-top:    var(--jc-sp-8);
    line-height:   var(--jc-lh-relaxed);
}

.jc-disclaimer__label { color: var(--jc-gold); font-weight: 500; }

/* Badges / category tags */
.jc-badge {
    display:         inline-block;
    font-size:       var(--jc-text-xs);
    font-weight:     500;
    letter-spacing:  var(--jc-ls-wider);
    text-transform:  uppercase;
    padding:         0.25em 0.75em;
    border-radius:   var(--jc-radius-full);
    transition:      background-color var(--jc-transition), color var(--jc-transition);
}

.jc-badge--health           { background: var(--jc-green-pale); color: var(--jc-green); }
.jc-badge--faith            { background: var(--jc-gold-pale);  color: var(--jc-gold);  }
.jc-badge--faith-encouragement { background: var(--jc-gold-pale); color: var(--jc-gold); }
.jc-badge--learn            { background: rgba(28,61,43,0.08);  color: var(--jc-green-mid); }
.jc-badge--resources        { background: var(--jc-cream-dark); color: var(--jc-muted); }
.jc-badge--wellness-picks   { background: var(--jc-gold-pale);  color: var(--jc-gold);  }


/* ─────────────────────────────────────────────────────────────────────────────
   7. ANIMATIONS & TRANSITIONS
   ───────────────────────────────────────────────────────────────────────────── */

@keyframes jc-fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0);    }
}

@keyframes jc-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes jc-slide-in {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0);     }
}

@keyframes jc-pulse {
    0%, 100% { opacity: 1;   }
    50%       { opacity: 0.5; }
}

.jc-animate-fade-up {
    animation: jc-fade-up var(--jc-dur-slower) var(--jc-ease) both;
}

.jc-animate-fade-in {
    animation: jc-fade-in var(--jc-dur-slow) var(--jc-ease) both;
}

/* Stagger animation delays for children */
.jc-stagger > *:nth-child(1) { animation-delay: 0ms;   }
.jc-stagger > *:nth-child(2) { animation-delay: 100ms; }
.jc-stagger > *:nth-child(3) { animation-delay: 200ms; }
.jc-stagger > *:nth-child(4) { animation-delay: 300ms; }
.jc-stagger > *:nth-child(5) { animation-delay: 400ms; }

/* Scroll reveal — JS adds .is-visible class */
.jc-reveal {
    opacity:    0;
    transform:  translateY(20px);
    transition: opacity var(--jc-dur-slower) var(--jc-ease),
                transform var(--jc-dur-slower) var(--jc-ease);
}

.jc-reveal.is-visible {
    opacity:   1;
    transform: translateY(0);
}


/* ─────────────────────────────────────────────────────────────────────────────
   8. SCROLLBAR
   ───────────────────────────────────────────────────────────────────────────── */

::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--jc-cream-dark); }
::-webkit-scrollbar-thumb {
    background:    var(--jc-green);
    border-radius: var(--jc-radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--jc-green-mid); }