/*
Theme Name: Singer Campaign Hub
Theme URI: https://singerindustrial.com/
Author: Fantasktic
Author URI: https://fantasktic.com/
Description: Internal marketing campaign library for the Singer Industrial family of brands. Employees browse, filter, and download campaigns by industry, brand, and type. Branded to the Singer Industrial identity with the modernized, clean design language of the RW Connection rebrand.
Version: 1.1.1
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: singer-campaign-hub
Tags: custom-post-type, custom-colors, full-width-template, translation-ready
*/

/* ==========================================================================
   1. Design Tokens — Singer Industrial / RW Connection system
   ========================================================================== */
:root {
    /* Brand */
    --si-red:         #BE0006;   /* primary action / Singer Industrial red */
    --si-red-dark:    #8E0005;   /* hover / pressed */
    --si-red-tint:    #FBE9EA;   /* subtle red surface */
    --si-ink:         #0A0A0A;   /* headings, wordmark */
    --si-gray:        #939598;   /* peak-mark gray, secondary */
    --si-slate:       #4A4F54;   /* body copy */
    --si-muted:       #6B7177;   /* meta text */

    /* Surfaces */
    --si-bg:          #FFFFFF;
    --si-surface:     #F5F6F7;
    --si-surface-2:   #EDEFF1;
    --si-line:        #E2E4E7;
    --si-line-strong: #CDD1D5;

    /* Type */
    --si-font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --si-font-condensed: "Roboto Condensed", var(--si-font);

    /* Geometry — square corners per brand system */
    --si-radius: 0px;
    --si-radius-sm: 2px;

    /* Shadows — restrained, clean */
    --si-shadow: 0 1px 2px rgba(10,10,10,.04), 0 2px 8px rgba(10,10,10,.06);
    --si-shadow-hover: 0 6px 14px rgba(190,0,6,.16), 0 2px 6px rgba(10,10,10,.08);

    /* Layout */
    --si-max: 1320px;
    --si-gap: 28px;
    --si-header-h: 76px;

    --si-ease: cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   2. Reset / Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--si-font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--si-slate);
    background: var(--si-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--si-font);
    color: var(--si-ink);
    line-height: 1.12;
    margin: 0 0 .5em;
    font-weight: 700;
    letter-spacing: -0.01em;
}

a { color: var(--si-red); text-decoration: none; transition: color .18s var(--si-ease); }
a:hover { color: var(--si-red-dark); }

img { max-width: 100%; height: auto; display: block; }

p { margin: 0 0 1rem; }

:focus-visible { outline: 3px solid var(--si-red); outline-offset: 2px; }

.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; white-space: nowrap;
}
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 1000;
    background: var(--si-ink); color: #fff; padding: 12px 18px; font-weight: 700;
}
.skip-link:focus { left: 8px; top: 8px; color: #fff; }

.sch-container {
    width: 100%;
    max-width: var(--si-max);
    margin-inline: auto;
    padding-inline: 24px;
}

/* ==========================================================================
   3. Buttons — signature animated-arrow CTA
   ========================================================================== */
.sch-btn {
    --btn-bg: var(--si-red);
    --btn-fg: #fff;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--si-font-condensed);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    border: 1px solid var(--btn-bg);
    border-radius: var(--si-radius);
    cursor: pointer;
    transition: background .2s var(--si-ease), border-color .2s var(--si-ease), transform .2s var(--si-ease);
    line-height: 1;
}
.sch-btn:hover { background: var(--si-red-dark); border-color: var(--si-red-dark); color: #fff; }
.sch-btn .sch-arrow {
    display: inline-block;
    transition: transform .25s var(--si-ease);
    will-change: transform;
}
.sch-btn:hover .sch-arrow { transform: translateX(5px); }

.sch-btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--si-ink);
    border-color: var(--si-line-strong);
}
.sch-btn--ghost:hover { --btn-fg:#fff; background: var(--si-ink); border-color: var(--si-ink); color:#fff; }

.sch-btn--sm { padding: 9px 16px; font-size: .82rem; }

/* ==========================================================================
   4. Header
   ========================================================================== */
.sch-header {
    position: sticky; top: 0; z-index: 200;
    background: var(--si-bg);
    border-bottom: 1px solid var(--si-line);
}
.sch-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; min-height: var(--si-header-h);
}
.sch-brand { display: flex; align-items: center; gap: 16px; }
.sch-brand__logo img { height: 34px; width: auto; }
.sch-brand__divider { width: 1px; height: 30px; background: var(--si-line-strong); }
.sch-brand__label {
    font-family: var(--si-font-condensed);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .74rem;
    font-weight: 700;
    color: var(--si-gray);
    white-space: nowrap;
}
.sch-header__nav { display: flex; align-items: center; gap: 28px; }
.sch-header__nav a {
    font-family: var(--si-font-condensed);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    font-size: .82rem;
    color: var(--si-ink);
    position: relative;
    padding: 6px 0;
}
.sch-header__nav a::after {
    content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
    background: var(--si-red); transition: right .22s var(--si-ease);
}
.sch-header__nav a:hover::after, .sch-header__nav a.is-active::after { right: 0; }

.sch-header__search { display:flex; align-items:center; }

/* ==========================================================================
   5. Page hero / library masthead
   ========================================================================== */
.sch-masthead {
    background: linear-gradient(180deg, var(--si-surface) 0%, var(--si-bg) 100%);
    border-bottom: 1px solid var(--si-line);
    padding: 54px 0 38px;
}
.sch-masthead__kicker {
    display:inline-flex; align-items:center; gap:8px;
    font-family: var(--si-font-condensed);
    text-transform: uppercase; letter-spacing:.16em; font-weight:700;
    font-size:.74rem; color: var(--si-red);
    margin-bottom: 14px;
}
.sch-masthead__kicker::before { content:""; width:26px; height:2px; background: var(--si-red); display:inline-block; }
.sch-masthead h1 {
    font-size: clamp(2rem, 4.4vw, 3rem);
    text-transform: uppercase;
    letter-spacing: -0.015em;
    margin-bottom: .35em;
}
.sch-masthead__lead { max-width: 720px; font-size: 1.06rem; color: var(--si-slate); margin:0; }
.sch-masthead__stats { display:flex; gap: 40px; margin-top: 28px; flex-wrap: wrap; }
.sch-stat__num { font-family: var(--si-font-condensed); font-size: 1.9rem; font-weight:700; color: var(--si-ink); line-height:1; }
.sch-stat__label { font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; color: var(--si-muted); font-weight:700; margin-top:6px; }

/* ==========================================================================
   6. Filter bar
   ========================================================================== */
.sch-toolbar { padding: 26px 0 0; }
.sch-toolbar__top {
    display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;
    margin-bottom: 20px;
}
.sch-toolbar__count { font-size:.9rem; color: var(--si-muted); }
.sch-toolbar__count strong { color: var(--si-ink); font-weight:700; }

.sch-filters {
    display:flex; flex-wrap:wrap; gap: 26px;
    background: var(--si-bg);
    border: 1px solid var(--si-line);
    border-top: 3px solid var(--si-red);
    padding: 22px 24px;
    margin-bottom: 8px;
}
.sch-filter-group { flex: 1 1 220px; min-width: 200px; }
.sch-filter-group__head {
    display:flex; align-items:center; gap:8px;
    font-family: var(--si-font-condensed);
    text-transform: uppercase; letter-spacing:.1em; font-weight:700;
    font-size:.76rem; color: var(--si-ink);
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--si-line);
}
.sch-filter-group__head .sch-ico { color: var(--si-red); display:inline-flex; }
.sch-chips { display:flex; flex-wrap:wrap; gap: 8px; }
.sch-chip {
    display:inline-flex; align-items:center; gap:7px;
    padding: 7px 13px;
    background: var(--si-surface);
    border: 1px solid var(--si-line);
    border-radius: var(--si-radius);
    font-size: .82rem;
    font-weight: 500;
    color: var(--si-slate);
    cursor: pointer;
    user-select: none;
    transition: all .16s var(--si-ease);
}
.sch-chip:hover { border-color: var(--si-red); color: var(--si-ink); }
.sch-chip .sch-chip__count { color: var(--si-muted); font-size:.74rem; font-weight:700; }
.sch-chip.is-active {
    background: var(--si-red); border-color: var(--si-red); color:#fff;
}
.sch-chip.is-active .sch-chip__count { color: rgba(255,255,255,.8); }
.sch-chip input { position:absolute; opacity:0; width:0; height:0; }

/* Collapsed overflow chips (revealed by the "+ N more" toggle) */
.sch-chip--overflow { display:none; }
.sch-filter-group.is-expanded .sch-chip--overflow { display:inline-flex; }
.sch-chip--overflow.is-kept { display:inline-flex; } /* keep a selected chip visible when collapsed */

.sch-filter-more {
    display:inline-flex; align-items:center;
    font-family: var(--si-font-condensed); text-transform:uppercase; letter-spacing:.04em;
    font-weight:700; font-size:.74rem; padding:7px 13px;
    border:1px solid var(--si-line); background:#fff; color: var(--si-red);
    cursor:pointer; transition: border-color .15s, background .15s;
}
.sch-filter-more:hover { border-color: var(--si-red); background: var(--si-red-tint); }

.sch-filters__footer {
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    margin-top: 4px;
}
.sch-active-summary { font-size:.85rem; color: var(--si-muted); }
.sch-clear {
    background:none; border:none; cursor:pointer;
    font-family: var(--si-font-condensed); text-transform:uppercase; letter-spacing:.06em;
    font-weight:700; font-size:.8rem; color: var(--si-red);
    display:inline-flex; align-items:center; gap:6px; padding:6px 2px;
}
.sch-clear:hover { color: var(--si-red-dark); }
.sch-clear[hidden] { display:none; }

/* ==========================================================================
   7. Campaign grid + cards
   ========================================================================== */
.sch-results { padding: 30px 0 80px; position: relative; min-height: 280px; }
.sch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: var(--si-gap);
}
.sch-results.is-loading .sch-grid { opacity: .35; pointer-events:none; transition: opacity .2s; }

.sch-card {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--si-bg);
    border: 1px solid var(--si-line);
    border-radius: var(--si-radius);
    overflow: hidden;
    transition: transform .25s var(--si-ease), box-shadow .25s var(--si-ease), border-color .25s var(--si-ease);
}
.sch-card:hover { transform: translateY(-4px); box-shadow: var(--si-shadow-hover); border-color: var(--si-line-strong); }
.sch-card__thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--si-surface-2);
    overflow: hidden;
}
.sch-card__thumb img { width:100%; height:100%; object-fit: cover; transition: transform .5s var(--si-ease); }
.sch-card:hover .sch-card__thumb img { transform: scale(1.04); }
.sch-card__thumb--placeholder {
    display:flex; align-items:center; justify-content:center;
    background: repeating-linear-gradient(135deg, var(--si-surface) 0 14px, var(--si-surface-2) 14px 28px);
    color: var(--si-gray);
}
.sch-card__thumb--placeholder svg { width:46px; height:46px; opacity:.5; }

.sch-card__assets-badge {
    position:absolute; bottom:12px; right:12px; z-index:2;
    display:inline-flex; align-items:center; gap:5px;
    background: rgba(10,10,10,.78); color:#fff; backdrop-filter: blur(2px);
    font-size:.72rem; font-weight:700; padding:4px 9px;
}
.sch-card__body { padding: 18px 18px 20px; display:flex; flex-direction:column; flex:1; }
.sch-card__industry {
    font-family: var(--si-font-condensed); text-transform:uppercase; letter-spacing:.1em;
    font-weight:700; font-size:.7rem; color: var(--si-red); margin-bottom:8px;
}
.sch-card__title {
    font-size: 1.16rem; line-height:1.22; margin:0 0 12px;
    letter-spacing:-0.01em;
}
.sch-card__title a { color: var(--si-ink); }
.sch-card__title a:hover { color: var(--si-red); }
.sch-card__excerpt { font-size:.9rem; color: var(--si-muted); margin:0 0 16px; flex:1; }
.sch-card__tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.sch-tag {
    font-size:.72rem; color: var(--si-slate);
    background: var(--si-surface); border:1px solid var(--si-line);
    padding: 3px 9px; letter-spacing:.01em;
}
.sch-card__footer {
    display:flex; align-items:center; justify-content:space-between;
    border-top:1px solid var(--si-line); padding: 13px 18px;
    font-size:.78rem; color: var(--si-muted);
}
.sch-card__cta {
    font-family: var(--si-font-condensed); text-transform:uppercase; letter-spacing:.06em;
    font-weight:700; font-size:.78rem; color: var(--si-red);
    display:inline-flex; align-items:center; gap:7px;
}
.sch-card:hover .sch-card__cta .sch-arrow { transform: translateX(4px); }
.sch-card__cta .sch-arrow { transition: transform .25s var(--si-ease); }
.sch-card__stretched { position:absolute; inset:0; z-index:1; }

/* Loading overlay */
.sch-spinner {
    position:absolute; top:60px; left:50%; transform:translateX(-50%);
    width:34px; height:34px; border:3px solid var(--si-line);
    border-top-color: var(--si-red); border-radius:50%;
    animation: sch-spin .7s linear infinite; opacity:0; pointer-events:none;
    transition: opacity .2s;
}
.sch-results.is-loading .sch-spinner { opacity:1; }
@keyframes sch-spin { to { transform: translateX(-50%) rotate(360deg); } }

/* Empty state */
.sch-empty {
    grid-column: 1 / -1;
    text-align:center; padding: 70px 20px;
    border: 2px dashed var(--si-line); background: var(--si-surface);
}
.sch-empty svg { width:48px; height:48px; color: var(--si-gray); margin-bottom:16px; }
.sch-empty h3 { font-size:1.3rem; margin-bottom:8px; }
.sch-empty p { color: var(--si-muted); margin-bottom:18px; }

/* ==========================================================================
   8. Single campaign
   ========================================================================== */
.sch-single { padding-bottom: 90px; }
.sch-single__hero { background: var(--si-surface); border-bottom:1px solid var(--si-line); padding: 30px 0 40px; }
.sch-breadcrumb { font-size:.8rem; color: var(--si-muted); margin-bottom: 22px; display:flex; gap:8px; flex-wrap:wrap; }
.sch-breadcrumb a { color: var(--si-muted); }
.sch-breadcrumb a:hover { color: var(--si-red); }
.sch-single__grid { display:grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items:start; }
.sch-single__meta-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.sch-single h1 { font-size: clamp(1.8rem, 4vw, 2.7rem); text-transform:uppercase; letter-spacing:-0.015em; margin-bottom:.4em; }
.sch-single__lead { font-size:1.08rem; color: var(--si-slate); }
.sch-single__featured { border:1px solid var(--si-line); background:#fff; overflow:hidden; }
.sch-single__featured img { width:100%; height:auto; }

.sch-pill {
    display:inline-flex; align-items:center; gap:7px;
    font-family: var(--si-font-condensed); text-transform:uppercase; letter-spacing:.06em;
    font-weight:700; font-size:.72rem; padding:6px 12px;
    border:1px solid var(--si-line); background:#fff; color: var(--si-slate);
}

.sch-section { padding-top: 48px; }
.sch-section__title {
    font-family: var(--si-font-condensed); text-transform:uppercase; letter-spacing:.04em;
    font-size:1.35rem; display:flex; align-items:center; gap:12px; margin-bottom:22px;
    padding-bottom:14px; border-bottom:2px solid var(--si-ink);
}
.sch-section__title .sch-ico { color: var(--si-red); }

.sch-content { font-size:1.02rem; color: var(--si-slate); max-width: 760px; }
.sch-content h2 { font-size:1.5rem; margin-top:1.4em; }
.sch-content h3 { font-size:1.2rem; margin-top:1.2em; }
.sch-content img { margin: 1.4em 0; border:1px solid var(--si-line); }

/* Asset library */
.sch-assets { display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap:18px; }
.sch-asset {
    display:flex; flex-direction:column;
    border:1px solid var(--si-line); background:#fff;
    transition: border-color .2s var(--si-ease), box-shadow .2s var(--si-ease), transform .2s var(--si-ease);
}
.sch-asset:hover { border-color: var(--si-red); box-shadow: var(--si-shadow); transform: translateY(-2px); }
.sch-asset__preview {
    aspect-ratio: 4/3; background: var(--si-surface-2); position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
}
.sch-asset__preview img { width:100%; height:100%; object-fit:cover; }
.sch-asset__filetype {
    position:absolute; top:10px; left:10px;
    font-family: var(--si-font-condensed); font-weight:700; font-size:.64rem; letter-spacing:.08em;
    text-transform:uppercase; background: var(--si-ink); color:#fff; padding:3px 8px;
}
.sch-asset__icon { color: var(--si-gray); }
.sch-asset__icon svg { width:48px; height:48px; }
.sch-asset__body { padding:14px 14px 16px; display:flex; flex-direction:column; gap:10px; flex:1; }
.sch-asset__label { font-weight:700; color: var(--si-ink); font-size:.92rem; line-height:1.3; }
.sch-asset__sub { font-size:.76rem; color: var(--si-muted); }
.sch-asset__actions { margin-top:auto; display:flex; gap:8px; }
.sch-asset__actions .sch-btn { flex:1; justify-content:center; }

.sch-sidebar-card {
    border:1px solid var(--si-line); border-top:3px solid var(--si-red);
    padding: 22px 22px 24px; background: var(--si-bg); margin-bottom: 22px;
}
.sch-sidebar-card h3 {
    font-family: var(--si-font-condensed); text-transform:uppercase; letter-spacing:.06em;
    font-size:1rem; margin-bottom:16px;
}
.sch-meta-row { display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--si-line); font-size:.88rem; }
.sch-meta-row:last-child { border-bottom:none; }
.sch-meta-row dt { color: var(--si-muted); }
.sch-meta-row dd { margin:0; color: var(--si-ink); font-weight:600; text-align:right; }

/* Related */
.sch-related { background: var(--si-surface); border-top:1px solid var(--si-line); padding: 56px 0; }

/* ==========================================================================
   9. Footer
   ========================================================================== */
.sch-footer { background: var(--si-ink); color: #C7CBCF; padding: 48px 0 30px; }
.sch-footer__top { display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:flex-start; }
.sch-footer__logo img { height: 30px; width:auto; margin-bottom:14px; }
.sch-footer__tag { font-size:.86rem; max-width:340px; color:#9AA0A6; }
.sch-footer__links { display:flex; gap:48px; flex-wrap:wrap; }
.sch-footer__col h4 { color:#fff; font-family: var(--si-font-condensed); text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; margin-bottom:12px; }
.sch-footer__col a { display:block; color:#9AA0A6; font-size:.88rem; padding:4px 0; }
.sch-footer__col a:hover { color:#fff; }
.sch-footer__bottom {
    margin-top:36px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1);
    display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
    font-size:.8rem; color:#7E848A;
}

/* ==========================================================================
   10. Search results / generic pages
   ========================================================================== */
.sch-page { padding: 50px 0 80px; }
.sch-searchform { display:flex; align-items:center; border:1px solid var(--si-line); background:#fff; }
.sch-searchform input[type=search] {
    border:none; padding: 11px 14px; font-size:.92rem; min-width: 230px; outline:none; color: var(--si-ink);
    background:transparent;
}
.sch-searchform button {
    border:none; background: var(--si-red); color:#fff; padding: 0 16px; align-self:stretch; cursor:pointer;
    display:flex; align-items:center;
}
.sch-searchform button:hover { background: var(--si-red-dark); }

/* ==========================================================================
   11. Responsive
   ========================================================================== */
@media (max-width: 980px) {
    .sch-single__grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 860px) {
    .sch-header__nav { display:none; }
    .sch-masthead { padding: 38px 0 28px; }
}
@media (max-width: 600px) {
    .sch-container { padding-inline: 18px; }
    .sch-filters { gap:20px; padding:18px; }
    .sch-filter-group { flex-basis: 100%; }
    .sch-brand__label { display:none; }
    .sch-masthead__stats { gap:26px; }
    .sch-footer__top { flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}