/*
Theme Name:     GLN Team365
Theme URI:      n/a
Template:       kadence
Author:         Joshua Callandret
Author URI:     n/a
Description:    Child theme for managing custom code in the GLN Team365 page.
Version:        1.0
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/

/* ============================================================
   TABLE OF CONTENTS
   ============================================================
   1. Custom Properties (Design Tokens)
   2. Utilities
   3. Content Carousel — Layout
   4. Content Carousel — Splide Overrides
   5. Content Carousel — Card
   6. Content Carousel — Card Body
   7. Query Loop Card Overrides
   8. SearchWP — Form & Results
   9. Password-Protected Page (page-id-510)
  10. Video Page Mobile Fix (page-id-510)
  11. MemberPress Account Page
   ============================================================ */


/* ==========================================================================
   1. CUSTOM PROPERTIES (DESIGN TOKENS)
   ========================================================================== */

:root {
    /* ── Brand tokens — mapped to Kadence globals ── */
    --cc-accent           : var(--global-palette1);          /* Kadence: Palette 1          */
    --cc-accent-light     : ar(--global-palette7);                         /* no Kadence match — hardcoded */
    --cc-text             : var(--global-palette4);          /* Kadence: Palette 4          */
    --cc-text-muted       : ar(--global-palette5);                         /* no Kadence match — hardcoded */
    --cc-bg               : var(--global-palette9);          /* Kadence: Palette 9          */
    --cc-card-radius      : 0px;
    --cc-card-shadow      : 0 0 15px 2px rgba(0,0,0,.1);
    --cc-card-shadow-hover: 0 0 15px 2px rgba(0,0,0,.15);
    --cc-duration-bg      : rgba(0,0,0,.72);
    --cc-duration-color   : var(--global-palette9);          /* Kadence: Palette 9          */
    --cc-section-spacing  : var(--global-lg-spacing);        /* Kadence: 2.5em              */
}


/* ==========================================================================
   2. UTILITIES
   ========================================================================== */

.u-text-balance {
    text-wrap: balance;
}


/* ==========================================================================
   3. CONTENT CAROUSEL — LAYOUT
   ========================================================================== */

/* ── Section ── */
.cc-carousel-section {
    margin-bottom: var(--cc-section-spacing);
}
.cc-carousel-section:last-child {
    margin-bottom: 0;
}

/* ── Section heading ── */
.cc-carousel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.cc-carousel-heading {
    font-size: var(--global-kb-font-size-sm, 0.9em);
    font-family: var(--global-body-font-family), inherit;
    font-weight: 700;
    color: var(--cc-text);
    margin: 0;
    line-height: 1.3;
}


/* ==========================================================================
   4. CONTENT CAROUSEL — SPLIDE OVERRIDES
   ========================================================================== */

.cc-carousel.splide {
    visibility: hidden;         /* hidden until Splide mounts */
    opacity: 0;
    transition: opacity .35s ease;
}
.cc-carousel--visible.splide {
    visibility: visible;
    opacity: 1;
}

/* Arrow styling */
.cc-carousel .splide__arrow {
    background: var(--cc-bg);
    box-shadow: var(--cc-card-shadow);
    width: 2.25rem;
    height: 2.25rem;
    opacity: 1;
    transition: box-shadow .2s ease, transform .2s ease;
}

/*
.cc-carousel .splide__arrow:hover {
    box-shadow: var(--cc-card-shadow-hover);
    transform: scale(1.08);
}
*/
.cc-carousel .splide__arrow svg {
    width: 1rem;
    height: 1rem;
    fill: var(--cc-text);
}
.cc-carousel .splide__arrow--prev { left: -1.125rem; }
.cc-carousel .splide__arrow--next { right: -1.125rem; }

/* Hide arrows on touch devices / small screens */
@media (max-width: 899px) {
    .cc-carousel .splide__arrows {
        display: none;
    }
}

.cc-carousel .splide__track {
    overflow: hidden; /* keep default */
    padding: 1rem 0;
    margin: -1rem 0;
}


/* ==========================================================================
   5. CONTENT CAROUSEL — CARD
   ========================================================================== */

.cc-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--cc-card-radius);
    overflow: hidden;
    background: var(--cc-bg);
    box-shadow: var(--cc-card-shadow);
    text-decoration: none;
    color: var(--cc-text);
    transition: box-shadow .25s ease, transform .25s ease;
    height: 100%;
}
.cc-card:hover,
.cc-card:focus-visible {
    box-shadow: var(--cc-card-shadow-hover);
    transform: translateY(-3px);
}
.cc-card:focus-visible {
    outline: 2px solid var(--cc-accent);
    outline-offset: 2px;
}

/* ── Thumbnail ── */
.cc-card__thumb-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #e2e8f0;
}
.cc-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cc-card__thumb-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
}

/* Duration badge (overlaid on thumbnail) */
.cc-card__duration {
    position: absolute;
    bottom: 0.4rem;
    right: 0.4rem;
    background: var(--cc-duration-bg);
    color: var(--cc-duration-color);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    line-height: 1.4;
    letter-spacing: 0.02em;
}


/* ==========================================================================
   6. CONTENT CAROUSEL — CARD BODY
   ========================================================================== */

.cc-card__body {
    padding: 0.875rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Category badge */
.cc-card__badge {
    display: inline-block;
    align-self: flex-start;
    font-size: var(--global-kb-font-size-xs, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cc-accent);
    background: var(--cc-accent-light);
    padding: 0.15rem 0.5rem;
    /*border-radius: 999px;*/
    line-height: 1.5;
}

/* Title */
.cc-card__title {
    font-family: var(--global-body-font-family, inherit);
    font-size: var(--global-kb-font-size-sm, 0.9rem);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0px !important;
    color: var(--global-palette3, var(--cc-text));
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Speaker */
.cc-card__speaker {
    font-size: 0.9rem;
    color: var(--cc-text-muted);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Year */
.cc-card__year {
    font-size: 0.75rem;
    color: var(--cc-text-muted);
    margin-top: top; /* push to bottom of card */
}


/* ==========================================================================
   7. QUERY LOOP CARD OVERRIDES
   ========================================================================== */

.query-card-figure {
    margin: 0px !important;
}

/* Make the Kadence query-loop figure match .cc-card__thumb-wrap
   so the duration badge lands in the same position as splide cards. */
.kb-query-item figure.wp-block-kadence-image {
    position: relative;
    overflow: hidden;
    margin: 0;
}
.kb-query-item figure.wp-block-kadence-image img {
    display: block;
    padding: 0 !important;   /* override Kadence's per-block xxs bottom padding */
}

.card__title--truncated {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.talk-speakers {
    font-size: var(--global-kb-font-size-sm, 0.9rem);
}


/* ==========================================================================
   8. SEARCHWP — FORM & RESULTS
   ========================================================================== */

#searchwp-form-1 .swp-input,
#searchwp-form-1 .swp-select {
    border-radius: 0px !important;
}

/* form.searchwp-form .searchwp-form-input-container .swp-input {
  margin:0;
  width:100%;
  background: var(--global-palette8);
} */

mark.searchwp-highlight {
    background-color: var(--global-palette7);
}

.searchwp-live-search-results {
    box-shadow: 0px 0px 8px grey !important;
}

.swp-rp-page-header #searchwp-form-1 {
    display: none;
}

/* Center the SearchWP results page within Kadence's layout */
.swp-rp-main,
#primary.content-area,
#content.site-content {
    max-width: var(--global-content-width, 1290px);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.swp-rp-page-header h1 {
    font-size: var(--global-font-size-larger,)
}


/* ==========================================================================
   9. PASSWORD-PROTECTED PAGE (page-id-510)
   ========================================================================== */

/* Scope to the body for reliability */
body.page-id-510 .post-password-form {
    background-color: #F1E6B2 !important;
    padding: 60px 40px !important;
    border-radius: 12px !important;
    max-width: 500px !important;
    margin: 80px auto !important;
    border: 1px solid #009CDE !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

/* Logo */
body.page-id-510 .post-password-form::before {
    content: "" !important;
    display: block !important;
    width: 385px !important;
    height: 173px !important;
    margin-bottom: 30px !important;
    background-image: url('https://team365.kinsta.cloud/wp-content/uploads/2026/01/GLN-C12-1-1.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Only style the FIRST paragraph (the message copy) */
body.page-id-510 .post-password-form > p:first-of-type {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 400 !important;
    color: #3D3935 !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
    margin-bottom: 25px !important;
}

/* Keep label, hide its text without hiding the input */
body.page-id-510 .post-password-form label {
    font-size: 0 !important;       /* hides "Password:" text */
    line-height: 0 !important;
}

/* Password input (inside the label) */
body.page-id-510 .post-password-form label input[type="password"] {
    font-size: 16px !important;    /* restore font-size for the input */
    line-height: normal !important;
    display: block !important;
    margin: 0 auto 20px auto !important;
    padding: 12px !important;
    width: 280px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    text-align: center !important;
}

/* Submit button */
body.page-id-510 .post-password-form input[type="submit"] {
    background-color: #2B3575 !important;
    color: white !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 400 !important;
    padding: 14px 60px !important;
    border-radius: 50px !important;
    border: none !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
}


/* ==========================================================================
   10. VIDEO PAGE MOBILE FIX (page-id-510)
   ========================================================================== */

/* Force the video row to grow on actual mobile devices */
@media (max-width: 767px) {
    .page-id-510 .kt-row-column-wrap,
    .page-id-510 .wp-block-kadence-column,
    .page-id-510 .kt-inside-inner-col {
        height: auto !important;
        min-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
    }

    /* Prevents the video from being clipped by its container */
    .page-id-510 .wp-block-kadence-rowlayout {
        overflow: visible !important;
        display: block !important;
    }
}


/* ==========================================================================
   11. MEMBERPRESS ACCOUNT PAGE
   ========================================================================== */

/* ── Font override ── */
/* ReadyLaunch sets system-ui; override with Open Sans everywhere */
.mepr-account-container,
.mepr-account-container body,
.mepr-account-container button,
.mepr-account-container input,
.mepr-account-container select,
.mepr-account-container optgroup,
.mepr-account-container textarea,
.mepr-account-container h1,
.mepr-account-container h2,
.mepr-account-container h3,
.site-header .profile-menu__text,
.mepr_modal,
.mepr_modal .mepr_modal_form .mp-form-label label {
    font-family: 'Open Sans', sans-serif;
}

/* ── Page background ── */
body.mepr-app-layout {
    background: #f5f5f5 !important;
}

/* ── Header ── */
.app-layout .site-header {
    background: #fff !important;
    border-bottom: 1px solid #ecebeb;
    box-shadow: none;
}
.site-header .profile-menu__text {
    color: #3d3935 !important;
}
.site-header .profile-menu__text--small {
    color: #6e6b68 !important;
}
.site-header .profile-menu__arrow_down {
    color: #3d3935 !important;
}
.site-header .profile-menu__button:hover {
    background: rgba(0, 0, 0, 0.05) !important;
}

/* ── Sidebar nav ── */
#mepr-account-nav {
    background: #fff !important;
    border-right: 1px solid #ecebeb;
}
#mepr-account-nav .mepr-nav-item a {
    color: #504d49;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 12px 20px;
    border-left: 3px solid transparent;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
#mepr-account-nav .mepr-nav-item a::before {
    color: #6e6b68;
    transition: color 0.15s ease;
}
#mepr-account-nav .mepr-nav-item a:hover {
    color: #009cde !important;
    background: rgba(0, 156, 222, 0.05);
}
#mepr-account-nav .mepr-nav-item a:hover::before {
    color: #009cde;
}
#mepr-account-nav .mepr-nav-item.mepr-active-nav-tab a,
#mepr-account-nav .mepr-nav-item.--active a {
    background: rgba(0, 156, 222, 0.08) !important;
    color: #009cde !important;
    font-weight: 600;
    border-left-color: #009cde;
}
#mepr-account-nav .mepr-nav-item.mepr-active-nav-tab a::before,
#mepr-account-nav .mepr-nav-item.--active a::before {
    color: #009cde;
}

/* ── Content area ── */
.mepr-account-container .mepr_page_header {
    font-weight: 700;
    font-size: 1.5rem;
    color: #3d3935;
    margin-top: 0;
}

/* ── Welcome message ── */
.mepr-account-container .mepr-account-welcome-message {
    background-color: rgba(0, 156, 222, 0.08);
    border: 1px solid rgba(0, 156, 222, 0.25);
    color: #3d3935;
    border-radius: 6px;
}

/* ── Profile card ── */
.mepr-account-container .mepr-profile-wrapper > div {
    border: 1px solid #ecebeb;
    border-radius: 8px;
    background: #fff;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
#mepr-profile-details dt {
    color: #6e6b68 !important;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600 !important;
    margin-top: 0.75rem;
}
#mepr-profile-details dt:first-child {
    margin-top: 0;
}
#mepr-profile-details dd {
    color: #3d3935;
    font-size: 0.95rem;
}

/* ── Edit pencil buttons ── */
.mepr-account-container .mepr-profile-details__button.btn-link {
    color: #6e6b68;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: background 0.15s ease;
}
.mepr-account-container .mepr-profile-details__button.btn-link:hover {
    background: rgba(0, 156, 222, 0.1);
}
.mepr-profile-details__button:focus svg,
.mepr-profile-details__button:focus path {
    fill: #009cde !important;
}

/* ── Outline buttons ("View Payments", etc.) ── */
.mepr-account-container .mepr-button.btn-outline {
    background: transparent;
    color: #009cde;
    border: 1px solid #009cde;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 8px 16px;
    transition: background 0.15s ease, color 0.15s ease;
}
.mepr-account-container .mepr-button.btn-outline:hover,
.mepr-account-container .mepr-button.btn-outline:focus-visible {
    background: #009cde;
    color: #fff;
    border-color: #009cde;
    text-decoration: none;
}

/* ── Profile card footer divider ── */
.mepr-account-container .mepr-profile-wrapper__footer {
    border-top: 1px solid #ecebeb;
}

/* ── Primary buttons (filled) ── */
.mepr-account-container button:not(.btn-link):not(.mepr-profile-details__button):not(.mepr_modal__close):not(.mepr-pro-account-table__col-actions button),
.mepr-account-container input[type="submit"],
.mepr-account-container .mepr-button:not(.btn-outline),
.mepr_modal .mepr_modal_form input[type="submit"] {
    background: #009cde;
    color: #fff;
    border: none;
    border-color: #009cde;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 10px 24px;
    transition: background 0.15s ease;
}
.mepr-account-container button:not(.btn-link):not(.mepr-profile-details__button):not(.mepr_modal__close):hover,
.mepr-account-container input[type="submit"]:hover,
.mepr-account-container .mepr-button:not(.btn-outline):hover,
.mepr_modal .mepr_modal_form input[type="submit"]:hover {
    background: #006d9b;
    border-color: #006d9b;
    color: #fff;
}

/* ── Links ── */
.mepr-account-container a {
    color: #009cde;
}
.mepr-account-container a:visited {
    color: #009cde;
}
.mepr-account-container a:hover,
.mepr-account-container a:focus,
.mepr-account-container a:active {
    color: #006d9b;
}

/* ── Modal ── */
.mepr_modal__box {
    border-radius: 8px;
}
.mepr_modal .mepr_modal_form input[type="text"]:focus-visible,
.mepr_modal .mepr_modal_form input[type="email"]:focus-visible,
.mepr_modal .mepr_modal_form input[type="tel"]:focus-visible,
.mepr_modal .mepr_modal_form select:focus-visible {
    border-color: #009cde !important;
}

/* ── Tables (Payments / Subscriptions) ── */
.mepr-account-container .mepr-pro-account-table thead th {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6e6b68;
}
.mepr-account-container .mepr-pro-account-table__badge.--is-active,
.mepr-account-container .mepr-pro-account-table__badge.--is-complete {
    background-color: rgba(0, 156, 222, 0.1);
    color: #006d9b;
}
.mepr-account-container .mepr-pro-account-table svg:focus-visible {
    fill: #009cde;
}
.mepr-profile-details__button:focus-visible {
    outline: 2px dashed #009cde !important;
}