/*
 * Theme Name:  Platform Child
 * Theme URI:   https://platform.codesupply.co/
 * Description: Platform Child Theme
 * Author:      Code Supply Co.
 * Author URI:  https://codesupply.co/
 * Template:    platform
 * Version:     1.1.0
 */

/* Copy any classes from parent theme here. They will override the parent's version. */

@media (min-width: 1200px) {
    :root {
        --cs-entry-content-width: 840px;
        --cs-entry-content-large-width: 840px;
    }
}

.cs-container {
    width: 98%;
    padding-right: 10px;
    padding-left: 10px;
}

/* ══════════════════════════════════════════════════════════════
   DESKTOP SEARCH — light mode placeholder + icon fix
   Header uses data-scheme="inverse" so placeholder/icon inherit
   white; override to dark when the body is light mode.
   ══════════════════════════════════════════════════════════════ */

body:not([data-scheme=dark]) .cs-search-active .cs-search__input::placeholder,
body:not([data-scheme=dark]) .cs-header__inner-desktop:hover .cs-search__input::placeholder {
    color: #555 !important;
    opacity: 1;
}

body:not([data-scheme=dark]) .cs-search__form .cs-icon {
    color: #0a2540 !important;
}

.cs-search__form-group svg,
.cs-search__submit.aps-icon-submit svg {
    color: #fff !important;
    stroke: #fff !important;
}

/* ══════════════════════════════════════════════════════════════
   OFFCANVAS DRAWER — MOBILE HEADER BAR
   Header: [close] [darkmode — right]
   Footer: [social links]
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   WPSM BUTTERFLY BUTTON — [wpsm_button] shortcode replacement
   Wings expand from the centre outward on hover.
   ══════════════════════════════════════════════════════════════ */
.wpsm-btn {
    --wpsm-color:  var(--cs-light-accent-color, #2958ff);
    --wpsm-text:   #fff;
    --wpsm-ease:   cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
    text-decoration: none !important;
    font-weight: 600;
    letter-spacing: 0.4px;
    line-height: 1;
    border: 2px solid var(--wpsm-color);
    border-radius: 50px;
    color: var(--wpsm-color);
    background: transparent;
    cursor: pointer;
    transition: color 0.3s var(--wpsm-ease), box-shadow 0.3s var(--wpsm-ease);
    -webkit-tap-highlight-color: transparent;
}
/* Left wing */
.wpsm-btn::before,
.wpsm-btn::after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 0;
    background: var(--wpsm-color);
    transition: width 0.3s var(--wpsm-ease);
    z-index: 0;
}
.wpsm-btn::before { left:  50%; }
.wpsm-btn::after  { right: 50%; }
/* Hover — wings open */
.wpsm-btn:hover::before,
.wpsm-btn:hover::after  { width: 51%; }
.wpsm-btn:hover {
    color: var(--wpsm-text) !important;
    text-decoration: none !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.wpsm-btn:active { transform: scale(0.97); }
/* Keep content above wings */
.wpsm-btn__icon,
.wpsm-btn__label { position: relative; z-index: 1; }
.wpsm-btn__icon  { display: inline-flex; align-items: center; flex-shrink: 0; }
.wpsm-btn__icon svg { display: block; transition: transform 0.28s var(--wpsm-ease); }
.wpsm-btn:hover .wpsm-btn__icon svg { transform: translateX(3px); }
/* Sizes */
.wpsm-btn--sm { padding:  9px 20px; font-size: 12px; }
.wpsm-btn--md { padding: 13px 28px; font-size: 14px; }
.wpsm-btn--lg { padding: 16px 36px; font-size: 16px; }
/* Dark mode */
[data-scheme=dark] .wpsm-btn:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.38);
}

.cs-featured-archive__grid {
    --cs-thumbnail-border-radius: 0;
    width: auto;
    margin-left: -10px;
    margin-right: -10px;
    border-radius: 0;
    row-gap: 0;
}

@media (max-width: 575.98px) {
    .cs-entry__header:not(.cs-entry__header-overlay) {
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }
}

/* Reserve scrollbar gutter so drawer open/close doesn't shift page content */
html {
    scrollbar-gutter: stable;
}

/* Offcanvas sidebar — hide scrollbar, prevent pushing footer out */
.cs-offcanvas__sidebar {
    scrollbar-width: none;
}
.cs-offcanvas__sidebar::-webkit-scrollbar {
    display: none;
}
.cs-offcanvas__footer {
    flex-shrink: 0;
}

/* Dark mode pill in offcanvas header — use transparent bg to avoid grey blob */
.cs-offcanvas .cs-site-scheme-toggle .cs-header__scheme-toggle-icons {
    background: transparent;
    box-shadow: none;
}

/* cs-mob-scheme only exists in our child template — hide on desktop */
.cs-mob-scheme {
    display: none;
}

@media (max-width: 767px) {

    /* ── Header: single flex row, no wrapping ── */
    .cs-offcanvas__header {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        padding: 0 0.5rem 0 0 !important;
    }

    /* Close button: bring into flex flow (was position:absolute) */
    .cs-offcanvas__close-toggle {
        position: relative !important;
        left: auto !important;
        flex-shrink: 0 !important;
    }

    /* No logo in the drawer */
    .cs-offcanvas__header .cs-logo,
    .cs-offcanvas__header .cs-logo-mobile {
        display: none !important;
    }

    /* Dark-mode toggle: pushed to the far right via auto left margin */
    .cs-mob-scheme {
        display: flex !important;
        flex-shrink: 0 !important;
        align-items: center !important;
        margin-left: auto !important;
    }
}