/*
 * Joy Concept — Component Library
 * Buttons, cards, forms, tags, disclosure notices, resource cards.
 */


/* ─── Buttons ───────────────────────────────────────────────────────────── */

.jc-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--jc-sp-2);
    font-family:     var(--jc-sans);
    font-size:       var(--jc-text-sm);
    font-weight:     500;
    letter-spacing:  var(--jc-ls-wider);
    text-transform:  uppercase;
    padding:         0.75em 1.75em;
    border-radius:   var(--jc-radius-xs);
    border:          1.5px solid transparent;
    cursor:          pointer;
    white-space:     nowrap;
    text-decoration: none;
    transition:      background-color var(--jc-transition),
                     color var(--jc-transition),
                     border-color var(--jc-transition),
                     transform var(--jc-dur-fast) var(--jc-ease),
                     box-shadow var(--jc-transition);
}

.jc-btn:hover  { transform: translateY(-1px); box-shadow: var(--jc-shadow); }
.jc-btn:active { transform: translateY(0);    box-shadow: none; }

/* Primary — gold */
.jc-btn--primary {
    background-color: var(--jc-gold);
    color:            var(--jc-white);
    border-color:     var(--jc-gold);
}
.jc-btn--primary:hover {
    background-color: var(--jc-gold-light);
    border-color:     var(--jc-gold-light);
    color:            var(--jc-white);
}

/* Secondary — green */
.jc-btn--secondary {
    background-color: var(--jc-green);
    color:            var(--jc-white);
    border-color:     var(--jc-green);
}
.jc-btn--secondary:hover {
    background-color: var(--jc-green-mid);
    border-color:     var(--jc-green-mid);
    color:            var(--jc-white);
}

/* Outline — green border, transparent bg */
.jc-btn--outline {
    background-color: transparent;
    color:            var(--jc-green);
    border-color:     var(--jc-green);
}
.jc-btn--outline:hover {
    background-color: var(--jc-green);
    color:            var(--jc-white);
}

/* Ghost — white on dark backgrounds */
.jc-btn--ghost {
    background-color: transparent;
    color:            rgba(255, 255, 255, 0.85);
    border-color:     rgba(255, 255, 255, 0.35);
}
.jc-btn--ghost:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color:            var(--jc-white);
    border-color:     rgba(255, 255, 255, 0.7);
}

/* Text link button */
.jc-btn--text {
    background:  none;
    border:      none;
    color:       var(--jc-gold);
    padding:     0;
    font-weight: 500;
    font-size:   var(--jc-text-sm);
    letter-spacing: var(--jc-ls-wide);
    text-transform: none;
    gap:         var(--jc-sp-1);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.jc-btn--text:hover { color: var(--jc-green); transform: none; box-shadow: none; }

/* Sizes */
.jc-btn--sm { font-size: var(--jc-text-xs); padding: 0.6em 1.25em; }
.jc-btn--lg { font-size: var(--jc-text-base); padding: 0.9em 2.2em; }

/* Full width */
.jc-btn--full { width: 100%; }


/* ─── Cards ─────────────────────────────────────────────────────────────── */

.jc-card {
    background:    var(--jc-white);
    border:        1px solid var(--jc-border);
    border-radius: var(--jc-radius);
    overflow:      hidden;
    transition:    box-shadow var(--jc-transition), transform var(--jc-transition);
}

.jc-card:hover {
    box-shadow: var(--jc-shadow-md);
    transform:  translateY(-2px);
}

.jc-card__image {
    aspect-ratio:    16 / 10;
    overflow:        hidden;
    background:      var(--jc-cream-dark);
}

.jc-card__image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform var(--jc-transition-slow);
}

.jc-card:hover .jc-card__image img { transform: scale(1.04); }

.jc-card__body   { padding: var(--jc-sp-5) var(--jc-sp-5) var(--jc-sp-6); }
.jc-card__meta   { display: flex; align-items: center; gap: var(--jc-sp-3); margin-bottom: var(--jc-sp-3); }
.jc-card__date   { font-size: var(--jc-text-xs); color: var(--jc-subtle); }
.jc-card__read   { font-size: var(--jc-text-xs); color: var(--jc-subtle); }
.jc-card__sep    { width: 3px; height: 3px; border-radius: 50%; background: var(--jc-subtle); }

.jc-card__title {
    font-family:   var(--jc-serif);
    font-size:     var(--jc-text-xl);
    font-weight:   400;
    color:         var(--jc-green);
    line-height:   var(--jc-lh-snug);
    margin-bottom: var(--jc-sp-3);
    transition:    color var(--jc-transition);
}

.jc-card:hover .jc-card__title { color: var(--jc-green-mid); }

.jc-card__excerpt {
    font-size:   var(--jc-text-sm);
    color:       var(--jc-muted);
    line-height: var(--jc-lh-relaxed);
}

.jc-card__footer {
    padding:    var(--jc-sp-4) var(--jc-sp-5);
    border-top: 1px solid var(--jc-border-light);
    display:    flex;
    align-items:center;
    justify-content: space-between;
}


/* ─── Resource Cards ─────────────────────────────────────────────────────── */

.jc-resource-card {
    background:    var(--jc-white);
    border:        1px solid var(--jc-border);
    border-radius: var(--jc-radius);
    padding:       var(--jc-sp-5);
    display:       flex;
    flex-direction: column;
    gap:           var(--jc-sp-3);
    transition:    box-shadow var(--jc-transition), border-color var(--jc-transition);
}

.jc-resource-card:hover {
    box-shadow:   var(--jc-shadow);
    border-color: var(--jc-gold);
}

.jc-resource-card__category {
    font-size:      var(--jc-text-xs);
    font-weight:    500;
    letter-spacing: var(--jc-ls-widest);
    text-transform: uppercase;
    color:          var(--jc-gold);
}

.jc-resource-card__title {
    font-family: var(--jc-serif);
    font-size:   var(--jc-text-lg);
    font-weight: 400;
    color:       var(--jc-green);
    line-height: var(--jc-lh-snug);
}

.jc-resource-card__desc {
    font-size:   var(--jc-text-sm);
    color:       var(--jc-muted);
    line-height: var(--jc-lh-relaxed);
    flex:        1;
}

.jc-resource-card__link {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--jc-sp-2);
    font-size:       var(--jc-text-sm);
    font-weight:     500;
    color:           var(--jc-green);
    text-decoration: none;
    margin-top:      auto;
    padding-top:     var(--jc-sp-3);
    border-top:      1px solid var(--jc-border-light);
    transition:      color var(--jc-transition), gap var(--jc-transition);
}

.jc-resource-card__link:hover {
    color: var(--jc-gold);
    gap:   var(--jc-sp-3);
}

/* Affiliate product card — Wellness Picks */
.jc-pick-card {
    background:    var(--jc-white);
    border:        1px solid var(--jc-border);
    border-radius: var(--jc-radius);
    overflow:      hidden;
    transition:    box-shadow var(--jc-transition);
}

.jc-pick-card:hover { box-shadow: var(--jc-shadow-md); }

.jc-pick-card__img {
    aspect-ratio: 4 / 3;
    overflow:     hidden;
    background:   var(--jc-cream-dark);
}

.jc-pick-card__img img { width: 100%; height: 100%; object-fit: cover; }

.jc-pick-card__body    { padding: var(--jc-sp-4) var(--jc-sp-5); }
.jc-pick-card__title   { font-family: var(--jc-serif); font-size: var(--jc-text-lg); color: var(--jc-green); margin-bottom: var(--jc-sp-2); font-weight: 400; }
.jc-pick-card__note    { font-size: var(--jc-text-sm); color: var(--jc-muted); font-style: italic; line-height: var(--jc-lh-relaxed); margin-bottom: var(--jc-sp-4); }
.jc-pick-card__footer  { padding: var(--jc-sp-3) var(--jc-sp-5); background: var(--jc-cream); border-top: 1px solid var(--jc-border-light); }


/* ─── Forms ─────────────────────────────────────────────────────────────── */

.jc-form-group {
    display:       flex;
    flex-direction: column;
    gap:           var(--jc-sp-2);
    margin-bottom: var(--jc-sp-5);
}

.jc-label {
    font-size:      var(--jc-text-sm);
    font-weight:    500;
    color:          var(--jc-ink);
    letter-spacing: var(--jc-ls-wide);
}

.jc-input,
.jc-select,
.jc-textarea {
    width:         100%;
    padding:       0.75em 1em;
    font-family:   var(--jc-sans);
    font-size:     var(--jc-text-base);
    color:         var(--jc-ink);
    background:    var(--jc-white);
    border:        1.5px solid var(--jc-border);
    border-radius: var(--jc-radius-sm);
    transition:    border-color var(--jc-transition), box-shadow var(--jc-transition);
    appearance:    none;
}

.jc-input::placeholder,
.jc-textarea::placeholder { color: var(--jc-subtle); }

.jc-input:focus,
.jc-select:focus,
.jc-textarea:focus {
    outline:      none;
    border-color: var(--jc-green);
    box-shadow:   0 0 0 3px rgba(28, 61, 43, 0.1);
}

.jc-textarea { resize: vertical; min-height: 120px; }

/* Inline email capture form */
.jc-email-form {
    display: flex;
    gap:     var(--jc-sp-2);
    flex-wrap: wrap;
}

.jc-email-form .jc-input {
    flex: 1;
    min-width: 220px;
}

/* Form feedback messages */
.jc-form-success,
.jc-form-error {
    font-size:     var(--jc-text-sm);
    padding:       var(--jc-sp-3) var(--jc-sp-4);
    border-radius: var(--jc-radius-sm);
    margin-top:    var(--jc-sp-4);
    display:       none;
}

.jc-form-success {
    background: var(--jc-green-pale);
    color:      var(--jc-green);
    border:     1px solid rgba(28, 61, 43, 0.2);
}

.jc-form-error {
    background: #fef2f2;
    color:      #991b1b;
    border:     1px solid rgba(153, 27, 27, 0.2);
}

.jc-form-success.visible,
.jc-form-error.visible { display: block; }


/* ─── Pathway Cards (Homepage) ───────────────────────────────────────────── */

.jc-pathway-card {
    background:    var(--jc-white);
    border:        1px solid var(--jc-border);
    border-radius: var(--jc-radius);
    padding:       var(--jc-sp-8) var(--jc-sp-6);
    display:       flex;
    flex-direction: column;
    gap:           var(--jc-sp-4);
    text-decoration: none;
    transition:    box-shadow var(--jc-transition),
                   border-color var(--jc-transition),
                   transform var(--jc-transition);
}

.jc-pathway-card:hover {
    box-shadow:   var(--jc-shadow-md);
    border-color: var(--jc-gold);
    transform:    translateY(-3px);
}

.jc-pathway-card__icon {
    width:            44px;
    height:           44px;
    border-radius:    50%;
    background:       var(--jc-green-pale);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    color:            var(--jc-green);
}

.jc-pathway-card__label {
    font-size:      var(--jc-text-xs);
    font-weight:    500;
    letter-spacing: var(--jc-ls-widest);
    text-transform: uppercase;
    color:          var(--jc-gold);
}

.jc-pathway-card__title {
    font-family: var(--jc-serif);
    font-size:   var(--jc-text-2xl);
    font-weight: 400;
    color:       var(--jc-green);
    line-height: var(--jc-lh-snug);
}

.jc-pathway-card__desc {
    font-size:   var(--jc-text-sm);
    color:       var(--jc-muted);
    line-height: var(--jc-lh-relaxed);
    flex:        1;
}

.jc-pathway-card__cta {
    font-size:      var(--jc-text-sm);
    font-weight:    500;
    color:          var(--jc-green);
    display:        flex;
    align-items:    center;
    gap:            var(--jc-sp-2);
    letter-spacing: var(--jc-ls-wide);
    margin-top:     auto;
    transition:     gap var(--jc-transition), color var(--jc-transition);
}

.jc-pathway-card:hover .jc-pathway-card__cta {
    color: var(--jc-gold);
    gap:   var(--jc-sp-3);
}


/* ─── Trust Bar ──────────────────────────────────────────────────────────── */

.jc-trust-bar {
    background:    var(--jc-cream-dark);
    border-top:    1px solid var(--jc-border);
    border-bottom: 1px solid var(--jc-border);
    padding:       var(--jc-sp-4) var(--jc-gutter);
    display:       flex;
    align-items:   center;
    gap:           var(--jc-sp-6);
    flex-wrap:     wrap;
    justify-content: center;
}

.jc-trust-item {
    display:     flex;
    align-items: center;
    gap:         var(--jc-sp-2);
    font-size:   var(--jc-text-xs);
    color:       var(--jc-muted);
    font-weight: 400;
    white-space: nowrap;
}

.jc-trust-item::before {
    content:          '';
    display:          block;
    width:            5px;
    height:           5px;
    border-radius:    50%;
    background-color: var(--jc-gold);
    flex-shrink:      0;
}


/* ─── Lead Magnet Box ────────────────────────────────────────────────────── */

.jc-lead-magnet {
    background:    var(--jc-green);
    border-radius: var(--jc-radius-md);
    padding:       var(--jc-sp-10) var(--jc-sp-10);
    position:      relative;
    overflow:      hidden;
}

.jc-lead-magnet::before {
    content:       '';
    position:      absolute;
    top:           -80px;
    right:         -80px;
    width:         280px;
    height:        280px;
    border-radius: 50%;
    border:        1px solid rgba(184, 134, 27, 0.15);
    pointer-events: none;
}

.jc-lead-magnet__tag   { color: var(--jc-gold-light); }
.jc-lead-magnet__tag::before { background: var(--jc-gold-light); }

.jc-lead-magnet__title {
    font-family:   var(--jc-serif);
    font-size:     var(--jc-text-3xl);
    font-weight:   300;
    color:         var(--jc-white);
    line-height:   var(--jc-lh-snug);
    margin-bottom: var(--jc-sp-4);
}

.jc-lead-magnet__title em {
    font-style: italic;
    color:      var(--jc-gold-light);
}

.jc-lead-magnet__desc {
    color:         rgba(255, 255, 255, 0.65);
    font-size:     var(--jc-text-base);
    line-height:   var(--jc-lh-relaxed);
    margin-bottom: var(--jc-sp-6);
    max-width:     460px;
}

.jc-lead-magnet__checklist {
    list-style:    none;
    margin-bottom: var(--jc-sp-8);
    display:       flex;
    flex-direction: column;
    gap:           var(--jc-sp-3);
}

.jc-lead-magnet__checklist li {
    display:     flex;
    align-items: flex-start;
    gap:         var(--jc-sp-3);
    font-size:   var(--jc-text-sm);
    color:       rgba(255, 255, 255, 0.75);
    line-height: var(--jc-lh-relaxed);
}

.jc-lead-magnet__checklist li::before {
    content:          '✓';
    color:            var(--jc-gold-light);
    font-weight:      500;
    flex-shrink:      0;
    margin-top:       1px;
}


/* ─── Icons ──────────────────────────────────────────────────────────────── */

.jc-icon {
    display:        inline-block;
    width:          1em;
    height:         1em;
    vertical-align: middle;
    flex-shrink:    0;
}