/*
Theme Name:   Creators Academy Child
Theme URI:    https://creators-academy.co.uk
Description:  Child theme for Salient. Custom templates bypass WPBakery entirely.
Author:       Creators Academy
Author URI:   https://creators-academy.co.uk
Template:     salient
Version:      1.0.0
Text Domain:  creators-academy-child
*/

/* Force Gilroy across the entire site — overrides Salient's Open Sans setting */
body,
body p,
body li,
body input,
body textarea,
body select,
body button,
h1, h2, h3, h4, h5, h6,
#header-outer,
#header-outer nav,
.nectar-button,
.btn {
    font-family: 'Gilroy', system-ui, sans-serif !important;
}

/* WPBakery / Nectar button consistency (companion to the .ca-btn system
   in main.css, which only loads on clean-template pages). Salient/
   WPBakery's own .nectar-button defaults use a 2-5px radius depending on
   size, uppercase Open Sans-style text, and an opacity-fade hover — this
   brings Bakery-page buttons in line with the same two-tier radius system
   and hover language used everywhere else on the site: small/medium
   buttons are inline-style (11px), large/jumbo/extra_jumbo are pill. */
.nectar-button {
    text-transform: none !important;
    letter-spacing: normal !important;
}
.nectar-button.small,
.nectar-button.medium {
    border-radius: 11px !important;
}
.nectar-button.large,
.nectar-button.jumbo,
.nectar-button.extra_jumbo {
    border-radius: 999px !important;
}
/* Solid buttons darken on hover instead of fading to a translucent version
   of themselves (Salient's default), matching every solid CTA elsewhere on
   the site. Outline (.see-through*) buttons keep Salient's own border-
   brightening hover, which already behaves the same way our ghost buttons do. */
.nectar-button:not(.see-through):not(.see-through-2):not(.see-through-3):hover {
    opacity: 1 !important;
    filter: brightness(.88);
}

/* Native Creators Academy header/menu. Keeps Salient's outer wrappers
   during the transition, but owns desktop/mobile menu markup here. */
#header-outer .ca-site-header {
    width: 100%;
    font-family: 'Gilroy', system-ui, sans-serif;
}

#header-outer .ca-site-header__inner {
    width: 100%;
    max-width: var(--container-width, 1425px);
    min-height: 90px;
    margin: 0 auto;
    padding: 0 var(--container-padding, 90px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.ca-site-logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    color: #17182a;
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    text-decoration: none;
}

.ca-site-logo img,
.ca-site-logo__img {
    display: block;
    width: auto;
    max-width: 230px;
    max-height: 58px;
    object-fit: contain;
}

.ca-primary-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
}

.ca-primary-nav ul,
.ca-mobile-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ca-primary-nav__list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 30px;
}

.ca-primary-nav li {
    position: relative;
    margin: 0;
}

.ca-primary-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #17182a;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: color .18s ease;
}

.ca-primary-nav a:hover,
.ca-primary-nav a:focus,
.ca-primary-nav .current-menu-item > a,
.ca-primary-nav .current-menu-ancestor > a {
    color: #ee486d;
}

.ca-primary-nav .sub-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: -18px;
    z-index: 1000;
    min-width: 220px;
    width: max-content !important;
    max-width: min(360px, calc(100vw - 48px));
    padding: 12px;
    background: #fff;
    border: 1px solid rgba(23, 24, 42, .1);
    box-shadow: 0 18px 45px rgba(23, 24, 42, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

#header-outer .ca-primary-nav .sub-menu {
    float: none !important;
    right: auto !important;
    height: auto !important;
}

.ca-primary-nav li:hover > .sub-menu,
.ca-primary-nav li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ca-primary-nav .sub-menu a {
    width: 100%;
    min-height: 0;
    padding: 10px 12px;
    color: #252944;
    font-size: 14px;
    border-radius: 6px;
}

.ca-primary-nav .sub-menu a:hover,
.ca-primary-nav .sub-menu a:focus {
    background: #f5f5f5;
    color: #ee486d;
}

.ca-mobile-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}

.ca-mobile-menu-toggle__bar {
    display: block;
    width: 24px;
    height: 2px;
    background: #17182a;
    border-radius: 999px;
}

.ca-mobile-menu[hidden] {
    display: none;
}

.ca-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 100000;
    font-family: 'Gilroy', system-ui, sans-serif;
    background: var(--ca-dark-navy, #17182a);
}

.ca-mobile-menu__backdrop {
    display: none;
}

.ca-mobile-menu__panel {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: var(--ca-dark-navy, #17182a);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.ca-mobile-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    height: 80px;
    padding: 0 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ca-mobile-menu__head .ca-site-logo__img {
    filter: brightness(0) invert(1);
}

.ca-mobile-menu__close {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    flex: 0 0 auto;
}

.ca-mobile-menu__close::before,
.ca-mobile-menu__close::after {
    content: "";
    position: absolute;
    top: 21px;
    left: 10px;
    width: 24px;
    height: 2px;
    background: #fff;
    border-radius: 999px;
}

.ca-mobile-menu__close::before {
    transform: rotate(45deg);
}

.ca-mobile-menu__close::after {
    transform: rotate(-45deg);
}

.ca-mobile-nav {
    --ca-mobile-nav-pad-x: 24px;
    padding: 8px var(--ca-mobile-nav-pad-x) 48px;
}

.ca-mobile-nav ul,
.ca-mobile-nav li,
#ajax-content-wrap .ca-mobile-nav ul,
#ajax-content-wrap .ca-mobile-nav li {
    margin: 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
}

.ca-mobile-nav li::before,
.ca-mobile-nav li::after {
    display: none !important;
    content: none !important;
}

.ca-mobile-nav__list > li:not(.menu-item-type-custom):not(.menu-item-object-custom) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ca-mobile-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 34px;
    padding: 24px 0;
    color: #fff;
    font-size: clamp(24px, 6.5vw, 30px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-decoration: none;
}

.ca-mobile-nav a:hover,
.ca-mobile-nav a:focus {
    color: var(--ca-teams-purple-light, #c8bfe0);
}

.ca-mobile-nav .sub-menu {
    display: grid;
    gap: 6px;
    padding: 4px 0 20px clamp(12px, 4vw, 24px) !important;
}

.ca-mobile-nav .sub-menu a {
    padding: 9px 0;
    min-height: 0;
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
}

.ca-mobile-menu-is-open {
    overflow: hidden;
}

@media (max-width: 999px) {
    #header-outer .ca-site-header__inner {
        min-height: 74px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .ca-site-logo img,
    .ca-site-logo__img {
        max-width: 190px;
        max-height: 46px;
    }

    .ca-primary-nav {
        display: none;
    }

    .ca-mobile-menu-toggle {
        display: inline-flex;
    }
}

@media (max-width: 480px) {
    #header-outer .ca-site-header__inner {
        padding-left: 18px;
        padding-right: 18px;
    }

    .ca-mobile-menu__head {
        height: 64px;
        padding: 0 18px;
    }

    .ca-mobile-menu__head .ca-site-logo__img {
        max-width: 150px;
    }

    .ca-mobile-nav {
        --ca-mobile-nav-pad-x: 18px;
        padding: 4px var(--ca-mobile-nav-pad-x) 34px;
    }
}

/* ============================================================
   Basics Salient's CSS used to provide (needed once it's gone; harmless
   while it's still loaded). See docs/SALIENT-REMOVAL-PLAN.md, Phase 2.
   ============================================================ */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    word-wrap: normal !important;
}

/* "Skip to content": hidden until focused with the keyboard. */
.ca-skip-link:focus {
    clip: auto;
    clip-path: none;
    width: auto;
    height: auto;
    top: 8px;
    left: 8px;
    z-index: 100001;
    padding: 12px 18px;
    background: #fff;
    color: #17182a;
    font: 600 15px/1.2 'Gilroy', system-ui, sans-serif;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(23, 24, 42, .2);
    text-decoration: none;
}

/* Without Salient (body.ca-native): the header sticks to the top itself.
   Salient did this with position:fixed, a spacer and JS. */
.ca-native #header-outer {
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0px);
    z-index: 9998;
    background: #fff;
    box-shadow: 0 1px 0 rgba(23, 24, 42, .08);
}
@media (max-width: 600px) {
    /* WordPress's admin bar stops being fixed on phones. */
    .ca-native #header-outer { top: 0; }
}

/* Font Awesome icons, inlined as SVG by includes/icons.php. Sized and
   coloured like the icon font was: 1em tall, current text colour. */
.ca-fa {
    display: inline-block;
    font-style: normal;
    line-height: 1;
}
/* Salient's Font Awesome 4 stylesheet (still loaded while Salient is
   active) also matches .fa-linkedin etc. and adds its own glyph in a
   ::before — that would show the icon twice. */
.ca-fa::before,
.ca-fa::after {
    content: none !important;
    display: none !important;
}
.ca-fa__svg {
    display: inline-block;
    height: 1em;
    width: auto;
    overflow: visible;
    vertical-align: -0.125em;
}