/*
Theme Name:  ADMX New Yard
Theme URI:   https://admx.newyard.nl
Author:      New Yard
Author URI:  https://newyard.nl
Description: Branded single-page theme for admx.newyard.nl. Matches the New Yard website identity. Supports custom logo, header image and site icon via the WordPress Customizer.
Version:     1.2.0
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: admx-newyard
*/

/* ── Google Fonts ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Poppins:wght@400;500;600;700&display=swap');

/* ── Brand tokens ─────────────────────────────────────────── */
:root {
    --ny-blue:        #009EE2;
    --ny-blue-dk:     #0088c5;
    --ny-blue-2:      #196290;
    --ny-navy:        #0B3B57;
    --ny-yellow:      #FFB700;
    --ny-cyan:        #00B2FF;
    --ny-bg:          #F8F8F8;
    --ny-white:       #FFFFFF;
    --ny-text:        #292929;
    --ny-text-muted:  #196290;
    --ny-border:      #cde5f0;
    --ny-border-lt:   #e3f2f9;
    --ny-radius-sm:   5px;
    --ny-radius-md:   10px;
    --ny-radius-lg:   15px;
    --ny-shadow:      0 2px 20px rgba(0,62,92,.08);
    --ny-shadow-md:   0 4px 32px rgba(0,62,92,.13);
    --ny-font-head:   'Inter',   -apple-system, BlinkMacSystemFont, sans-serif;
    --ny-font-body:   'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Reset / base ─────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
}

body {
    margin:      0;
    padding:     0;
    background:  var(--ny-bg);
    font-family: var(--ny-font-body);
    font-size:   15px;
    color:       var(--ny-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color:           var(--ny-blue);
    text-decoration: none;
}

a:hover { color: var(--ny-blue-dk); }

/* ============================================================
   SITE HEADER
   ============================================================ */
.site-header {
    background:    var(--ny-white);
    border-bottom: 1px solid var(--ny-border-lt);
    box-shadow:    0 1px 12px rgba(0,62,92,.06);
    position:      sticky;
    top:           0;
    z-index:       200;
}

.site-header-inner {
    max-width:       1140px;
    margin:          0 auto;
    padding:         0 24px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          90px;
    gap:             24px;
    position:        relative;
}

/* ── Logo ─────────────────────────────────────────────────── */
.site-logo-wrap {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
}

/* WordPress outputs: <a class="custom-logo-link"><img class="custom-logo"></a>
   Use !important to beat the width/height HTML attributes WP adds to the <img> */
.site-logo-wrap .custom-logo-link {
    display:     block;
    line-height: 0;
}

.site-logo-wrap .custom-logo-link img,
.site-logo-wrap img.custom-logo {
    display:   block !important;
    height:    62px !important;
    width:     auto !important;
    max-width: none !important;
}

/* Fallback text logo when no image is set */
.site-logo-text {
    font-family: var(--ny-font-head);
    font-size:   22px;
    font-weight: 900;
    color:       var(--ny-navy);
    line-height: 1;
}

.site-logo-text .accent { color: var(--ny-blue); }

.site-logo-text-link {
    text-decoration: none;
    display:         flex;
    align-items:     center;
}

/* ── Primary nav ──────────────────────────────────────────── */
.site-nav {
    display:     flex;
    align-items: center;
    gap:         4px;
    flex:        1;
    justify-content: flex-end;
}

/* wp_nav_menu outputs a <ul> */
.site-nav ul {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    align-items: center;
    gap:        4px;
    flex-wrap:  wrap;
}

.site-nav ul li { margin: 0; padding: 0; }

.site-nav ul li a,
.site-nav ul li a:visited {
    font-family:  var(--ny-font-body);
    font-size:    14px;
    font-weight:  500;
    color:        var(--ny-navy);
    padding:      7px 14px;
    border-radius: var(--ny-radius-sm);
    transition:   color .15s, background .15s;
    display:      block;
    white-space:  nowrap;
}

.site-nav ul li a:hover,
.site-nav ul li.current-menu-item > a {
    color:      var(--ny-blue);
    background: var(--ny-border-lt);
}

/* ── CTA knop-stijlen ──────────────────────────────────────
   Gebruik via WordPress Weergave → Menu's.
   Schakel eerst "CSS-klassen" in via Scherminstellingen (rechtsboven).

   Klassen die je aan een menu-item kunt toevoegen:
     menu-cta-yellow  →  gele knop  (newyard.nl huisstijl)
     menu-cta-blue    →  blauwe knop
     menu-cta         →  alias voor menu-cta-blue

   Standaard krijgt het LAATSTE item in het menu automatisch
   de gele knopstijl (handig voor de "newyard.nl"-link).
   Voeg een expliciete klasse toe om dit te overschrijven.
   ──────────────────────────────────────────────────────── */

/* Standaard: laatste item = gele knop */
.site-nav ul li:last-child > a {
    background:    var(--ny-yellow);
    color:         var(--ny-navy) !important;
    border-radius: var(--ny-radius-sm);
    padding:       8px 22px;
    font-weight:   700;
    border:        2px solid var(--ny-yellow);
    transition:    background .15s, border-color .15s;
}
.site-nav ul li:last-child > a:hover {
    background:   #e6a800;
    border-color: #e6a800;
}

/* Expliciete klasse: geel */
.site-nav ul li.menu-cta-yellow > a {
    background:    var(--ny-yellow) !important;
    color:         var(--ny-navy) !important;
    border-radius: var(--ny-radius-sm) !important;
    padding:       8px 22px !important;
    font-weight:   700 !important;
    border:        2px solid var(--ny-yellow) !important;
    transition:    background .15s, border-color .15s !important;
}
.site-nav ul li.menu-cta-yellow > a:hover {
    background:   #e6a800 !important;
    border-color: #e6a800 !important;
}

/* Expliciete klasse: blauw (menu-cta-blue of kortweg menu-cta) */
.site-nav ul li.menu-cta-blue > a,
.site-nav ul li.menu-cta > a {
    background:    var(--ny-blue) !important;
    color:         var(--ny-white) !important;
    border-radius: var(--ny-radius-sm) !important;
    padding:       8px 22px !important;
    font-weight:   600 !important;
    border:        2px solid var(--ny-blue) !important;
    transition:    background .15s, border-color .15s !important;
}
.site-nav ul li.menu-cta-blue > a:hover,
.site-nav ul li.menu-cta > a:hover {
    background:   var(--ny-cyan) !important;
    border-color: var(--ny-cyan) !important;
}

/* Als een item ZOWEL last-child is én een expliciete klasse heeft,
   wint de expliciete klasse (hogere specificiteit via !important hierboven) */

/* ── Mobile hamburger ─────────────────────────────────────── */
.nav-toggle {
    display:    none;
    background: none;
    border:     none;
    cursor:     pointer;
    padding:    6px;
    color:      var(--ny-navy);
    font-size:  26px;
    line-height: 1;
    flex-shrink: 0;
}

.nav-toggle:focus { outline: 2px solid var(--ny-blue); border-radius: 4px; }

@media (max-width: 768px) {
    .nav-toggle { display: flex; align-items: center; }

    .site-nav {
        display:    none;
        position:   absolute;
        top:        90px;
        left:       0;
        right:      0;
        background: var(--ny-white);
        border-top: 1px solid var(--ny-border);
        border-bottom: 1px solid var(--ny-border);
        box-shadow: var(--ny-shadow-md);
        padding:    14px 24px 18px;
        flex-direction: column;
        align-items: flex-start;
    }

    .site-nav.is-open { display: flex; }

    .site-nav ul {
        flex-direction: column;
        align-items:    flex-start;
        width:          100%;
        gap:            2px;
    }

    .site-nav ul li { width: 100%; }
    .site-nav ul li a { width: 100%; }

    .site-nav ul li.menu-cta > a,
    .site-nav ul li:last-child > a {
        text-align: center;
        margin-top: 6px;
    }
}

/* ============================================================
   HERO SECTION  (header image + title/subtitle from Customizer)
   ============================================================ */
.site-hero {
    position:   relative;
    overflow:   hidden;
    min-height: 220px;
    display:    flex;
    align-items: center;

    /* Default gradient — overridden inline when header image is set */
    background: linear-gradient(135deg, var(--ny-navy) 0%, var(--ny-blue-2) 55%, var(--ny-blue) 100%);
}

/* When a custom header image is uploaded, an inline background-image is added.
   This overlay keeps text readable. */
.site-hero::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(135deg,
        rgba(11,59,87,.88)  0%,
        rgba(25,98,144,.75) 55%,
        rgba(0,158,226,.55) 100%);
    z-index:    1;
}

.site-hero-inner {
    position:   relative;
    z-index:    2;
    max-width:  1140px;
    width:      100%;
    margin:     0 auto;
    padding:    52px 24px 44px;
}

.site-hero-badge {
    display:        inline-block;
    background:     var(--ny-yellow);
    color:          var(--ny-navy);
    font-family:    var(--ny-font-head);
    font-size:      11px;
    font-weight:    700;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding:        4px 12px;
    border-radius:  100px;
    margin-bottom:  16px;
}

.site-hero h1 {
    font-family: var(--ny-font-head);
    font-size:   40px;
    font-weight: 800;
    color:       var(--ny-white);
    margin:      0 0 14px;
    line-height: 1.15;
}

.site-hero-sub {
    font-size:  16px;
    font-weight: 400;
    color:      rgba(255,255,255,.80);
    margin:     0;
    max-width:  580px;
    line-height: 1.65;
}

@media (max-width: 768px) {
    .site-hero-inner  { padding: 36px 16px 30px; }
    .site-hero h1     { font-size: 28px; }
    .site-hero-sub    { font-size: 14px; }
}

/* ============================================================
   PAGE CONTENT WRAPPER
   ============================================================ */
.site-content {
    max-width: 1140px;
    margin:    0 auto;
    padding:   36px 24px 72px;
}

@media (max-width: 600px) {
    .site-content { padding: 20px 12px 56px; }
}

/* ── WordPress page/post content reset ───────────────────── */
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
    font-family: var(--ny-font-head);
    color:       var(--ny-navy);
    line-height: 1.25;
    margin:      0 0 .5em;
}

.entry-content p   { margin: 0 0 1.2em; }
.entry-content ul,
.entry-content ol  { padding-left: 1.5em; margin-bottom: 1.2em; }
.entry-content a   { color: var(--ny-blue); }
.entry-content a:hover { color: var(--ny-blue-dk); }

/* ============================================================
   SITE FOOTER
   ============================================================ */
.site-footer {
    background:  var(--ny-navy);
    color:       rgba(255,255,255,.70);
    padding:     44px 24px 36px;
    margin-top:  auto;
}

.site-footer-inner {
    max-width:       1140px;
    margin:          0 auto;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             20px;
}

.site-footer-brand-name {
    font-family: var(--ny-font-head);
    font-size:   20px;
    font-weight: 800;
    color:       var(--ny-white);
    display:     block;
    margin-bottom: 4px;
}

.site-footer-brand-name .accent { color: var(--ny-blue); }

.site-footer-copy {
    font-size:  13px;
    color:      rgba(255,255,255,.48);
    margin:     0;
}

/* Footer nav links */
.site-footer-nav ul {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-wrap:  wrap;
    gap:        6px 20px;
}

.site-footer-nav ul li a,
.site-footer-nav ul li a:visited {
    font-size:   13px;
    color:       rgba(255,255,255,.58);
    transition:  color .15s;
    white-space: nowrap;
}

.site-footer-nav ul li a:hover { color: var(--ny-blue); }

@media (max-width: 600px) {
    .site-footer-inner   { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   ADMX VIEWER — New Yard brand overrides
   (loaded after admx-viewer.css via wp_enqueue_style dependency)
   ============================================================ */

.admx-viewer {
    --c-accent:    #009EE2;
    --c-accent-dk: #0088c5;
    --c-selected:  #dff2fc;
    --c-sel-bdr:   #009EE2;
    --c-hover:     #f0f9ff;
    --c-border:    #cde5f0;
    --c-border-lt: #e3f2f9;
    --c-bg:        #f5fafd;
    --c-panel:     #ffffff;
    --c-header:    #eef6fb;
    --c-text:      #0B3B57;
    --c-muted:     #196290;
    --c-badge-m:   #d83b01;
    --c-badge-u:   #009EE2;
    --c-badge-b:   #0d7a0d;
    --c-code:      #f0f8ff;
    --radius:      4px;
    --font:        'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    border-color:  var(--ny-border);
    border-radius: var(--ny-radius-lg);
    box-shadow:    var(--ny-shadow-md);
}

/* Top bar: dark navy like the site header */
.admx-viewer .admx-topbar {
    background:    var(--ny-navy);
    border-bottom-color: rgba(0,158,226,.25);
}

.admx-viewer .admx-breadcrumb,
.admx-viewer .admx-bc-sep {
    color: rgba(255,255,255,.50);
}

.admx-viewer .admx-bc-item:last-child {
    color:       rgba(255,255,255,.90);
    font-weight: 600;
}

.admx-viewer .admx-search-input {
    background:   rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.20);
    color:        #fff;
}

.admx-viewer .admx-search-input::placeholder { color: rgba(255,255,255,.40); }

.admx-viewer .admx-search-input:focus {
    background:   rgba(255,255,255,.20);
    border-color: var(--ny-blue);
    box-shadow:   0 0 0 2px rgba(0,158,226,.25);
    color:        #fff;
}

.admx-viewer .admx-search-btn { background: var(--ny-blue); }
.admx-viewer .admx-search-btn:hover { background: var(--ny-cyan); }

/* Vendor heading */
.admx-viewer .admx-nav-vendor-hd {
    background:     var(--ny-navy);
    color:          rgba(255,255,255,.58);
    font-size:      9px;
    letter-spacing: 1px;
}

/* Group headers */
.admx-viewer .admx-nav-group-hd {
    background: #e8f5fb;
    color:      var(--ny-blue-2);
}

.admx-viewer .admx-nav-group-hd:hover {
    background: #d6edf8;
    color:      var(--ny-navy);
}

/* Active states */
.admx-viewer .admx-nav-item.active {
    border-left-color: var(--ny-blue);
    background:        var(--c-selected);
    color:             var(--ny-navy);
    font-weight:       600;
}

.admx-viewer .admx-cat-item.active > .admx-cat-row {
    background: var(--c-selected);
    color:      var(--ny-navy) !important;
}

.admx-viewer .admx-cat-item.active { border-left-color: var(--ny-blue); }

.admx-viewer .admx-policy-list li.active {
    background:   var(--c-selected);
    border-left-color: var(--ny-blue);
}

/* Pane header */
.admx-viewer .admx-pane-header {
    background:    #eef6fb;
    border-bottom-color: var(--ny-border);
}

.admx-viewer .admx-pane-title {
    color:          var(--ny-blue-2);
    font-size:      10px;
    letter-spacing: .6px;
}

/* Detail header */
.admx-viewer .admx-d-header {
    background:    #eef6fb;
    border-bottom-color: var(--ny-border);
}

.admx-viewer .admx-d-title {
    color:       var(--ny-navy);
    font-weight: 700;
}

/* Badges */
.admx-viewer .admx-badge.u {
    background: #dff2fc;
    color:      var(--ny-blue-2);
}

/* Section titles & type badge */
.admx-viewer .admx-d-section-title {
    color:             var(--ny-blue-2);
    border-bottom-color: var(--ny-border);
}

.admx-viewer .admx-type-badge {
    background:  #dff2fc;
    color:       var(--ny-blue-2);
    border-color: var(--ny-border);
}

/* Explain text */
.admx-viewer .admx-explain-text {
    background:  #f5fafd;
    border-color: var(--ny-border-lt);
    color:       var(--ny-navy);
}

/* Search results highlight */
.admx-viewer .admx-sr-item mark {
    background:   rgba(255,183,0,.30);
    border-radius: 2px;
}

.admx-viewer .admx-search-results-dropdown {
    border-color: var(--ny-border);
    box-shadow:   var(--ny-shadow-md);
}

/* Column resizer */
.admx-viewer .admx-col-resizer           { background: var(--ny-border); }
.admx-viewer .admx-col-resizer:hover,
.admx-viewer .admx-col-resizer.dragging  { background: var(--ny-blue); }

/* Radio accent */
.admx-viewer .admx-state-radio input { accent-color: var(--ny-blue); }

/* Spinner */
.admx-viewer .admx-spinner {
    border-color:     var(--ny-border);
    border-top-color: var(--ny-blue);
}

/* Scrollbars */
.admx-viewer .admx-nav-panel::-webkit-scrollbar-thumb,
.admx-viewer .admx-cat-panel::-webkit-scrollbar-thumb,
.admx-viewer .admx-detail-pane::-webkit-scrollbar-thumb,
.admx-viewer .admx-policy-list::-webkit-scrollbar-thumb {
    background: var(--ny-border);
}

.admx-viewer .admx-nav-panel,
.admx-viewer .admx-cat-panel,
.admx-viewer .admx-detail-pane,
.admx-viewer .admx-policy-list {
    scrollbar-color: var(--ny-border) transparent;
}

/* SEO index */
.admx-viewer .admx-seo-heading   { color: var(--ny-navy); }
.admx-viewer .admx-seo-vendor-hd { background: #eef6fb; color: var(--ny-navy); }
.admx-viewer .admx-seo-product-hd { background: #f5fafd; color: var(--ny-blue-2); }