/*
 * Òrìṣà Spiritual Assembly — Design System
 * Loaded on all front-end pages to ensure consistent typography,
 * button styles, and utility classes even when using a page builder.
 */

/* ── Google Fonts are enqueued via wp_enqueue_style in PHP ── */

:root {
    --orisa-crimson:    #8B1A1A;
    --orisa-gold:       #C5973B;
    --orisa-deep-brown: #2B1810;
    --orisa-cream:      #FAF3E8;
    --orisa-indigo:     #1A1A3E;
    --orisa-text-dark:  #1A1008;
    --orisa-text-muted: #6B5A4A;

    --orisa-font-head:  "Cinzel", Georgia, serif;
    --orisa-font-body:  "Cormorant Garamond", Georgia, serif;
    --orisa-font-ui:    "Jost", system-ui, sans-serif;

    --orisa-radius:     8px;
    --orisa-max-width:  1140px;
    --orisa-transition: 0.2s ease;
}

/* ── Base typography overrides ─────────────────────────────── */
body.orisa-page-active {
    font-family: var(--orisa-font-body);
    color: var(--orisa-text-dark);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

/* ── Announcement bar ──────────────────────────────────────── */
.orisa-announce-bar {
    background: var(--orisa-gold);
    padding: 10px 20px;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.orisa-announce-bar p,
.orisa-announce-text {
    font-family: var(--orisa-font-ui);
    font-size: 13px;
    font-weight: 500;
    color: var(--orisa-deep-brown);
    margin: 0;
}

/* ── Buttons ────────────────────────────────────────────────── */
.orisa-btn,
.orisa-btn-primary {
    display: inline-block;
    background: var(--orisa-gold);
    color: var(--orisa-deep-brown);
    font-family: var(--orisa-font-ui);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 32px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: background var(--orisa-transition), transform var(--orisa-transition);
    line-height: 1;
}
.orisa-btn:hover,
.orisa-btn-primary:hover {
    background: #d4a84b;
    transform: translateY(-2px);
    color: var(--orisa-deep-brown);
}

.orisa-btn-secondary,
.orisa-btn-outline {
    display: inline-block;
    background: transparent;
    color: var(--orisa-text-dark);
    font-family: var(--orisa-font-ui);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 13px 31px;
    border-radius: 4px;
    border: 1.5px solid rgba(43, 24, 16, 0.3);
    cursor: pointer;
    transition: all var(--orisa-transition);
    line-height: 1;
}
.orisa-btn-secondary:hover,
.orisa-btn-outline:hover {
    border-color: var(--orisa-gold);
    color: var(--orisa-gold);
}

.orisa-btn-dark {
    background: var(--orisa-crimson);
    color: var(--orisa-cream);
}
.orisa-btn-dark:hover {
    background: #a02020;
    color: var(--orisa-cream);
}

/* ── Section utilities ──────────────────────────────────────── */
.orisa-section { padding: 90px 24px; }
.orisa-section-light { background: var(--orisa-cream); }
.orisa-section-dark  { background: var(--orisa-deep-brown); }
.orisa-section-white { background: #fff; }

.orisa-container {
    max-width: var(--orisa-max-width);
    margin: 0 auto;
}
.orisa-container-narrow {
    max-width: 820px;
    margin: 0 auto;
}

/* ── Typography utilities ───────────────────────────────────── */
.orisa-kicker {
    font-family: var(--orisa-font-ui);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--orisa-gold);
    display: block;
    margin-bottom: 12px;
}
.orisa-heading {
    font-family: var(--orisa-font-head);
    font-weight: 700;
    color: var(--orisa-text-dark);
    line-height: 1.15;
}
.orisa-heading-light { color: var(--orisa-cream); }
.orisa-heading-gold  { color: var(--orisa-gold); }
.orisa-heading-crimson { color: var(--orisa-crimson); }

.orisa-divider {
    width: 60px;
    height: 3px;
    background: var(--orisa-gold);
    border: none;
    margin: 0 0 24px;
}
.orisa-divider-center {
    margin-left: auto;
    margin-right: auto;
}

.orisa-body-text {
    font-family: var(--orisa-font-body);
    font-size: 18px;
    color: var(--orisa-text-muted);
    line-height: 1.75;
}
.orisa-body-text-light {
    color: rgba(250, 243, 232, 0.82);
}

/* ── Card ────────────────────────────────────────────────────── */
.orisa-card {
    background: var(--orisa-cream);
    border: 1px solid rgba(197, 151, 59, 0.2);
    border-radius: var(--orisa-radius);
    padding: 32px 28px;
}
.orisa-card-dark {
    background: linear-gradient(170deg, var(--orisa-deep-brown), var(--orisa-crimson));
    border-color: var(--orisa-gold);
}

/* ── Wigmorean Forms styling ─────────────────────────────────── */
.wig-form,
form.wig-form {
    font-family: var(--orisa-font-body);
}
.wig-form label,
.wig-form .wig-field-label {
    font-family: var(--orisa-font-ui);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--orisa-text-muted);
    display: block;
    margin-bottom: 6px;
}
.wig-form input[type="text"],
.wig-form input[type="email"],
.wig-form input[type="tel"],
.wig-form select,
.wig-form textarea {
    width: 100%;
    font-family: var(--orisa-font-body);
    font-size: 16px;
    color: var(--orisa-text-dark);
    background: #fff;
    border: 1.5px solid rgba(197, 151, 59, 0.3);
    border-radius: 4px;
    padding: 12px 16px;
    transition: border-color var(--orisa-transition);
    box-sizing: border-box;
}
.wig-form input:focus,
.wig-form select:focus,
.wig-form textarea:focus {
    outline: none;
    border-color: var(--orisa-gold);
    box-shadow: 0 0 0 3px rgba(197, 151, 59, 0.12);
}
.wig-form .wig-field-group {
    margin-bottom: 20px;
}
.wig-form .wig-submit,
.wig-form button[type="submit"] {
    background: var(--orisa-gold);
    color: var(--orisa-deep-brown);
    font-family: var(--orisa-font-ui);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 16px 36px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background var(--orisa-transition);
    width: 100%;
    margin-top: 8px;
}
.wig-form .wig-submit:hover,
.wig-form button[type="submit"]:hover {
    background: #d4a84b;
}

/* ── Wigmorean Purchase Button styling ───────────────────────── */
.wig-purchase-btn,
.wigmorean-buy-btn {
    display: block;
    text-align: center;
    background: var(--orisa-crimson);
    color: var(--orisa-cream);
    font-family: var(--orisa-font-ui);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 16px 24px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: all var(--orisa-transition);
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
}
.wig-purchase-btn:hover,
.wigmorean-buy-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    color: var(--orisa-cream);
}

/* ── Member portal / login ────────────────────────────────────── */
.wig-login-form,
.wigmorean-login {
    max-width: 440px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(197, 151, 59, 0.3);
    border-radius: var(--orisa-radius);
    padding: 36px;
}

/* ── Responsive utilities ───────────────────────────────────── */
@media (max-width: 768px) {
    .orisa-section { padding: 60px 20px; }
    .orisa-hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
    .orisa-hide-desktop { display: none !important; }
}

/* ── Smooth scroll ──────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
    overflow-y: scroll !important;
    height: auto !important;
}

/* ── Scroll safety — ensure login/portal pages are never overflow-hidden ── */
/* This protects the /portal/ login page from inherited overflow restrictions */
body {
    overflow-x: hidden;  /* prevent horizontal scroll on all pages */
    overflow-y: auto !important;    /* ALWAYS allow vertical scroll */
    height: auto !important;
    min-height: 100vh;
    position: static !important;
}

/* ── Admin notice styles ─────────────────────────────────────── */
.orisa-admin-wrap h1 {
    font-size: 24px;
    margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   PRICING GRID — 2 × 2 LAYOUT
   These rules override anything Wigmorean theme sets.
   ═══════════════════════════════════════════════════════════════════ */
#orisa-pricing-grid,
.oj-cards,
div.oj-cards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 28px !important;
    max-width: 940px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 48px !important;
    flex-wrap: unset !important;
    flex-direction: unset !important;
}
/* Each card fills its grid cell and stacks its content vertically */
#orisa-pricing-grid > *,
.oj-cards > .oj-card,
.oj-cards > div {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
}
/* Push the CTA button to the bottom of every card */
.oj-card-cta,
.oj-card > a:last-child,
.oj-card > [class*="btn"]:last-child {
    margin-top: auto !important;
}
/* Single column on phones only */
@media (max-width: 640px) {
    #orisa-pricing-grid,
    .oj-cards,
    div.oj-cards {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   MEMBER NAVIGATION BAR
   Shows for logged-in users (body.orisa-logged-in).
   PHP adds this body class via body_class filter.
   ═══════════════════════════════════════════════════════════════════ */
#orisa-member-nav {
    display: none;            /* hidden until JS confirms logged-in */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    background: #2B1810;
    border-top: 1px solid rgba(197,151,59,.25);
    justify-content: center;
    align-items: stretch;
    gap: 0;
}
body.orisa-logged-in #orisa-member-nav {
    display: flex !important;
}
body.orisa-logged-in {
    padding-bottom: 64px !important;
}
#orisa-member-nav a {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 10px 18px;
    color: rgba(250,243,232,.65) !important;
    text-decoration: none !important;
    font-family: "Jost", sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    min-width: 60px;
    border-top: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
#orisa-member-nav a:hover,
#orisa-member-nav a.omn-active {
    color: #C5973B !important;
    border-top-color: #C5973B;
}
#orisa-member-nav a .omn-icon { font-size: 18px; line-height: 1; }
/* Desktop: move to top */
@media (min-width: 960px) {
    #orisa-member-nav {
        bottom: auto;
        top: 0;
        border-top: none;
        border-bottom: 1px solid rgba(197,151,59,.2);
    }
    body.orisa-logged-in {
        padding-bottom: 0 !important;
        padding-top: 52px !important;
    }
    #orisa-member-nav a {
        flex-direction: row;
        gap: 6px;
        padding: 14px 20px;
        font-size: 11px;
        border-top: none;
        border-bottom: 2px solid transparent;
    }
    #orisa-member-nav a:hover,
    #orisa-member-nav a.omn-active {
        border-top-color: transparent;
        border-bottom-color: #C5973B;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   HOME PAGE — LOGGED-IN DASHBOARD BUTTON
   ═══════════════════════════════════════════════════════════════════ */
.orisa-dashboard-btn {
    display: inline-block;
    background: #C5973B;
    color: #2B1810 !important;
    font-family: "Jost", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none !important;
    padding: 14px 32px;
    border-radius: 4px;
    margin-top: 20px;
}
.orisa-signin-link {
    display: block;
    font-family: "Jost", sans-serif;
    font-size: 13px;
    color: rgba(250,243,232,.65) !important;
    text-decoration: none !important;
    margin-top: 16px;
    letter-spacing: 0.5px;
}
.orisa-signin-link:hover { color: #C5973B !important; }

/* ═══════════════════════════════════════════════════════════════════
   COURSE CARDS — HIDE GENERIC THUMBNAILS & METADATA
   ═══════════════════════════════════════════════════════════════════ */
/* Hide "Free" badge and zero metadata */
.wig-course-price,
.course-price,
[class*="course"][class*="price"],
.wig-course-free, .is-free, .price-free,
.free-label { display: none !important; }

/* Style the thumbnail container so a background-image shows */
.wig-course-card [class*="thumbnail"],
.wig-course-card [class*="thumb"],
.wig-course-card [class*="image"],
.course-card [class*="thumbnail"],
.course-card [class*="image"] {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    min-height: 200px;
    position: relative;
    overflow: hidden;
}
/* Make the default emoji/icon invisible once we set background */
.wig-course-card.orisa-thumb-set [class*="thumbnail"] img,
.wig-course-card.orisa-thumb-set [class*="thumb"] img {
    opacity: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HIDE "UNDER CONSTRUCTION" OVERLAY ON FRONT END
   (only the public-facing bar, not the admin bar)
   ═══════════════════════════════════════════════════════════════════ */
body:not(.wp-admin) .uc-frontend-bar,
body:not(.wp-admin) #uc-frontend-bar { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   CART WIDGET (RETIRED — Log Out is now in member nav)
   ═══════════════════════════════════════════════════════════════════ */
#orisa-cart-trigger {
    display: none !important;
}