/**
 * APMFI Theme – Brand Color Overrides
 *
 * These rules apply the primary and override Bootstrap/component
 * defaults. This file loads LAST so it wins over all other stylesheets.
 *
 * @package APMFI_Theme
 */

/* NOTE: Module files (variables, base, layout, components, pages, utilities)
   are enqueued separately by class-assets.php — do NOT @import them here. */

:root {
    --color-primary-rgb:  184, 0, 15;
}

/* Bootstrap primary override */
.btn-primary,
.btn-primary-custom {
    background-color: var(--color-primary) !important;
    border-color:     var(--color-primary-dark) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary-custom:hover {
    background-color: var(--color-primary-dark) !important;
    border-color:     var(--color-primary-dark) !important;
}

/* Links */
a { color: var(--color-primary); }


/* Text utility */
.text-primary-custom { color: var(--color-primary) !important; }

/* Background utility */
.bg-primary-custom  { background-color: var(--color-primary) !important; }

/* Border utility */
.border-primary-custom { border-color: var(--color-primary) !important; }

/* Divider bar */
.divider-bar {
    width: 60px; height: 4px;
    background: var(--color-primary);
    border-radius: 2px;
    margin: 12px 0;
}


/* ══════════════════════════════════════════════════════════
   SINGLE POST — Featured image
   Shows the full image without hard-cropping.
   ══════════════════════════════════════════════════════════ */

.single-featured-figure {
    border-radius: var(--radius-xl, 20px);
    overflow: hidden;
    margin-bottom: 1.5rem;
    background: var(--color-light-gray, #eee);
}

/* Full-width, full height visible — never cut off */
.single-featured-img {
    display: block;
    width: 100%;
    height: auto;           /* preserves full image height    */
    max-height: 560px;      /* cap very tall images on desktop */
    object-fit: contain;    /* show entire image, no crop      */
    object-position: center top;
}

/* Content images inside the post body */
.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md, 8px);
    display: block;
    margin: 1rem auto;
}

/* Linked images in content should not show a border */
.entry-content a img { border: none; }


/* ══════════════════════════════════════════════════════════
   FORM INPUTS — Date picker & Range slider
   ══════════════════════════════════════════════════════════ */

/* ── input[type=date] ──────────────────────────────────── */
input[type="date"] {
    accent-color: var(--color-primary);
}

/* Focus ring */
input[type="date"]:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 184,0,15), .15) !important;
}

/* Calendar icon tint (Chrome/Edge) */
input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(10%) sepia(90%) saturate(700%) hue-rotate(330deg) brightness(90%);
    opacity: .75;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}


/* ── input[type=range] ─────────────────────────────────── */
input[type="range"] {
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* WebKit (Chrome, Safari, Edge) — thumb */
input[type="range"]::-webkit-slider-thumb {
    background: var(--color-primary);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--color-primary);
}

/* WebKit — filled track */
input[type="range"]::-webkit-slider-runnable-track {
    background: linear-gradient(
        to right,
        var(--color-primary) var(--range-fill, 50%),
        #ddd                  var(--range-fill, 50%)
    );
    border-radius: 4px;
    height: 4px;
}

/* Firefox — thumb */
input[type="range"]::-moz-range-thumb {
    background: var(--color-primary);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--color-primary);
    border-radius: 50%;
}

/* Firefox — filled track */
input[type="range"]::-moz-range-progress {
    background: var(--color-primary);
    border-radius: 4px;
    height: 4px;
}
input[type="range"]::-moz-range-track {
    background: #ddd;
    border-radius: 4px;
    height: 4px;
}

/* Focus ring */
input[type="range"]:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}