/*
Theme Name: Sarkari Chatra
Theme URI: https://sarkarichatra.com/
Author: Sarkari Chatra
Description: Lightweight, SEO-first WordPress theme for government job, result, admit card, answer key and admission updates.
Version: 2.2.0
Requires at least: 6.3
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sarkari-chatra
Tags: news, education, blog, custom-logo, custom-menu, featured-images, translation-ready, accessibility-ready
*/

/* =========================================================================
   1. TOKENS
   ========================================================================= */
:root {
    --sc-slate-900: #0f172a;
    --sc-slate-800: #1e293b;
    --sc-slate-700: #334155;
    --sc-orange-700: #c2410c;
    --sc-orange-600: #ea580c;
    --sc-orange-500: #f97316;
    --sc-orange-300: #fdba74;
    --sc-orange-50: #fff7ed;
    --sc-gray-50: #f9fafb;
    --sc-gray-100: #f3f4f6;
    --sc-gray-200: #e5e7eb;
    --sc-gray-300: #d1d5db;
    --sc-gray-400: #9ca3af;
    --sc-gray-500: #6b7280;
    --sc-gray-600: #4b5563;
    --sc-gray-700: #374151;
    --sc-gray-800: #1f2937;
    --sc-gray-900: #111827;
    --sc-blue-500: #3b82f6;
    --sc-blue-600: #2563eb;
    --sc-blue-700: #1d4ed8;
    --sc-blue-800: #1e40af;
    --sc-red-600: #dc2626;
    --sc-red-700: #b91c1c;
    --sc-green-700: #15803d;
    --sc-green-500: #22c55e;
    --sc-teal-700: #0f766e;
    --sc-purple-700: #7e22ce;
    --sc-lime-600: #65a30d;
    --sc-fuchsia-500: #d946ef;
    --sc-maroon: #701a1a;

    --sc-shell: 80rem;
    --sc-radius: 4px;
    --sc-radius-lg: 8px;
    --sc-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --sc-focus: 3px solid #1d4ed8;
    --sc-tap: 44px;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 16px;
}

body {
    margin: 0;
    font-family: var(--sc-font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--sc-gray-800);
    background: var(--sc-gray-100);
    overflow-x: hidden;
}

img, svg, video, iframe, embed, object, canvas {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

a { color: var(--sc-blue-700); }

h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.25; }
p, ul, ol { margin: 0; }

:focus-visible {
    outline: var(--sc-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

.sc-screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.sc-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: #fff;
    color: var(--sc-slate-900);
    padding: 12px 18px;
    font-weight: 700;
    border-radius: 0 0 var(--sc-radius) 0;
}
.sc-skip-link:focus {
    left: 0;
    outline: var(--sc-focus);
}

.sc-shell {
    width: 100%;
    max-width: var(--sc-shell);
    margin-inline: auto;
    padding-inline: 16px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================================
   3. HEADER + NAVIGATION
   ========================================================================= */
.sc-header {
    background: var(--sc-slate-900);
    color: #fff;
}

.sc-header__top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-block: 12px;
    position: relative;
}

.sc-header__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: #fff;
    margin-inline: auto;
    min-width: 0;
    max-width: calc(100% - 60px);
}

.sc-header__brand img {
    max-height: 64px;
    width: auto;
    object-fit: contain;
}

.sc-header__title {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /* Proportional so "Sarkari Chatra" keeps the same visual word gap at every
       clamp size, instead of the two words crowding together at 3rem. */
    gap: 0.28em;
    font-size: clamp(1.5rem, 6.5vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.1;
}
.sc-header__title-accent { color: var(--sc-orange-500); }

.sc-header__tagline {
    margin-top: 4px;
    font-size: clamp(0.6875rem, 2.4vw, 0.875rem);
    color: var(--sc-gray-300);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.sc-nav-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sc-tap);
    height: var(--sc-tap);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--sc-radius);
    color: #fff;
    cursor: pointer;
    padding: 0;
}
.sc-nav-toggle:hover { background: rgba(255, 255, 255, 0.1); }
.sc-nav-toggle svg { width: 28px; height: 28px; display: block; }
.sc-nav-toggle .sc-nav-toggle__close { display: none; }
.sc-nav-toggle[aria-expanded="true"] .sc-nav-toggle__close { display: block; }
.sc-nav-toggle[aria-expanded="true"] .sc-nav-toggle__open { display: none; }

.sc-nav {
    background: var(--sc-slate-800);
    border-top: 1px solid var(--sc-slate-700);
}

.sc-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.sc-nav__list::-webkit-scrollbar { display: none; }
.sc-nav__list > li { flex-shrink: 0; position: relative; }

.sc-nav__list a {
    display: inline-block;
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}
.sc-nav__list a:hover,
.sc-nav__list a:focus-visible { background: var(--sc-orange-600); }

.sc-nav__list .current-menu-item > a,
.sc-nav__list .current-menu-ancestor > a,
.sc-nav__list .current-menu-parent > a,
.sc-nav__list .current_page_item > a,
.sc-nav__list .sc-nav__link--current {
    background: var(--sc-orange-600);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
}

.sc-nav__list .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 220px;
    background: var(--sc-slate-800);
    border: 1px solid var(--sc-slate-700);
    border-top: 0;
    display: none;
    z-index: 60;
}
.sc-nav__list li:hover > .sub-menu,
.sc-nav__list li:focus-within > .sub-menu { display: block; }
.sc-nav__list .sub-menu a { display: block; white-space: normal; }

@media (max-width: 767px) {
    .sc-nav { display: none; }
    .sc-nav.is-open { display: block; }
    .sc-nav__list {
        flex-direction: column;
        overflow-x: visible;
        max-height: 70vh;
        overflow-y: auto;
    }
    .sc-nav__list > li { width: 100%; }
    .sc-nav__list a {
        display: block;
        padding: 14px 16px;
        border-bottom: 1px solid var(--sc-slate-700);
        white-space: normal;
    }
    .sc-nav__list .sub-menu {
        position: static;
        display: block;
        border: 0;
        background: rgba(0, 0, 0, 0.25);
    }
    .sc-nav__list .sub-menu a { padding-left: 32px; }
}

@media (min-width: 768px) {
    .sc-nav-toggle { display: none; }
    .sc-nav { display: block; }
}

.no-js .sc-nav { display: block; }
.no-js .sc-nav-toggle { display: none; }

/* =========================================================================
   4. TICKER
   ========================================================================= */
.sc-ticker {
    background: var(--sc-orange-600);
    color: #fff;
    border-bottom: 4px solid var(--sc-orange-700);
    overflow: hidden;
}
.sc-ticker__viewport {
    position: relative;
    height: 28px;
    overflow: hidden;
}
.sc-ticker__track {
    position: absolute;
    top: 3px;
    white-space: nowrap;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.025em;
    animation: sc-marquee 30s linear infinite;
}
.sc-ticker__track:hover,
.sc-ticker__track:focus-within { animation-play-state: paused; }
.sc-ticker a { color: #fff; text-decoration: none; }
.sc-ticker a:hover,
.sc-ticker a:focus-visible { text-decoration: underline; }
.sc-ticker__separator { margin-inline: 16px; color: var(--sc-orange-300); }

@keyframes sc-marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
    .sc-ticker__track { position: static; animation: none; }
    .sc-ticker__viewport { height: auto; overflow-x: auto; padding-block: 4px; }
}

/* =========================================================================
   5. HOMEPAGE
   ========================================================================= */
.sc-home { padding-block: 12px 24px; }

.sc-home__utility {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

/* --- Search ------------------------------------------------------------ */
.sc-search-shell {
    position: relative;
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--sc-gray-200);
    border-radius: 999px;
    box-shadow: 0 4px 6px -1px rgba(229, 231, 235, 0.5);
    height: 44px;
}
.sc-search-shell input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 20px;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--sc-gray-700);
    font-size: 16px; /* 16px avoids the iOS auto-zoom on focus. */
    border-radius: 999px 0 0 999px;
    font-family: inherit;
}
.sc-search-shell button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding-inline: 20px;
    background: var(--sc-blue-600);
    color: #fff;
    border: 0;
    border-radius: 0 999px 999px 0;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.sc-search-shell button:hover { background: var(--sc-blue-700); }
.sc-search-shell button svg { width: 18px; height: 18px; }

.sc-live-search {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 80;
    background: #fff;
    border: 1px solid var(--sc-gray-200);
    border-radius: var(--sc-radius-lg);
    box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.25);
    max-height: 70vh;
    overflow-y: auto;
    display: none;
}
.sc-live-search.is-open { display: block; }
.sc-live-search__item,
.sc-live-search__all,
.sc-live-search__status {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--sc-gray-800);
    border-bottom: 1px solid var(--sc-gray-100);
    font-size: 14px;
}
.sc-live-search__item:hover,
.sc-live-search__item:focus,
.sc-live-search__item.is-active,
.sc-live-search__all:hover,
.sc-live-search__all:focus,
.sc-live-search__all.is-active { background: var(--sc-orange-50); }
.sc-live-search__icon { color: var(--sc-gray-400); flex-shrink: 0; }
.sc-live-search__text { display: flex; flex-direction: column; min-width: 0; }
.sc-live-search__title { font-weight: 600; color: var(--sc-blue-800); }
.sc-live-search__meta { font-size: 12px; color: var(--sc-gray-500); margin-top: 2px; }
.sc-live-search__status { color: var(--sc-gray-500); }
.sc-live-search__all {
    justify-content: center;
    font-weight: 700;
    color: var(--sc-blue-700);
    border-bottom: 0;
}

/* --- Share row --------------------------------------------------------- */
.sc-share {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}
.sc-share a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--sc-tap);
    padding: 8px 6px;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    border-radius: var(--sc-radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}
.sc-share a:hover { opacity: 0.9; }
.sc-share svg { width: 15px; height: 15px; flex-shrink: 0; }
.sc-share__whatsapp { background: var(--sc-green-500); }
.sc-share__x { background: #000; font-size: 15px; }
.sc-share__telegram { background: var(--sc-teal-700); }

/* --- Quick links / tools ----------------------------------------------- */
.sc-tools { margin-bottom: 24px; }
.sc-tools__title {
    font-size: clamp(1.125rem, 4vw, 1.5rem);
    font-weight: 700;
    color: var(--sc-blue-800);
    text-align: center;
    margin-bottom: 16px;
    text-decoration: underline;
    text-decoration-color: var(--sc-blue-800);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.sc-tools__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}
.sc-tools__grid a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: var(--sc-tap);
    padding: 8px 6px;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    border-radius: var(--sc-radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    overflow-wrap: anywhere;
}
.sc-tools__grid a:hover { opacity: 0.9; }

/* Tone classes replace the compiled Tailwind bg-* utilities. */
.sc-tone-red-600 { background: var(--sc-red-600); }
.sc-tone-red-700 { background: var(--sc-red-700); }
.sc-tone-orange-500 { background: var(--sc-orange-500); }
.sc-tone-orange-600 { background: var(--sc-orange-600); }
.sc-tone-green-700 { background: var(--sc-green-700); }
.sc-tone-blue-500 { background: var(--sc-blue-500); }
.sc-tone-blue-800 { background: var(--sc-blue-800); }
.sc-tone-purple-700 { background: var(--sc-purple-700); }
.sc-tone-teal-700 { background: var(--sc-teal-700); }
.sc-tone-slate-700 { background: var(--sc-slate-700); }
.sc-tone-lime-600 { background: var(--sc-lime-600); }
.sc-tone-fuchsia-500 { background: var(--sc-fuchsia-500); }
.sc-tone-maroon { background: var(--sc-maroon); }

/* --- Section cards ------------------------------------------------------ */
.sc-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
/*
 * Most visitors arrive on a phone. Below 600px two card columns squeezed the
 * update titles into a narrow ribbon that wrapped after two or three words, so
 * the smallest screens get a single column and the trending tiles drop from
 * three across to two. The desktop three-column layout below is unchanged.
 */
@media (max-width: 599px) {
    .sc-cards {
        grid-template-columns: 1fr;
    }

    .sc-tools__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 768px) {
    .sc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .sc-cards { gap: 24px; }
}

.sc-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--sc-gray-300);
    border-radius: var(--sc-radius);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    scroll-margin-top: 16px;
}
.sc-card__header {
    padding: 12px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: clamp(0.9375rem, 3.4vw, 1.125rem);
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
    /* A long section name must wrap rather than widen the grid column. */
    overflow-wrap: anywhere;
}
.sc-card__header a { color: inherit; text-decoration: none; }
.sc-card__header a:hover { text-decoration: underline; }
.sc-card__body { flex: 1 1 auto; padding: 8px; }
.sc-card__list { list-style: none; margin: 0; padding: 0; }
.sc-card__list li { border-bottom: 1px solid var(--sc-gray-100); }
.sc-card__list li:last-child { border-bottom: 0; }
.sc-card__list a {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding: 8px 6px;
    text-decoration: none;
}
.sc-card__list a:hover,
.sc-card__list a:focus-visible { background: var(--sc-orange-50); }
.sc-card__chevron {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    color: var(--sc-gray-400);
}
.sc-card__list a:hover .sc-card__chevron { color: var(--sc-orange-500); }
.sc-card__link-title {
    font-size: clamp(0.75rem, 2.9vw, 0.9375rem);
    font-weight: 500;
    color: var(--sc-blue-800);
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.sc-card__list a:hover .sc-card__link-title { color: var(--sc-red-600); }
.sc-card__empty {
    padding: 16px 8px;
    font-size: 13px;
    color: var(--sc-gray-500);
    text-align: center;
}
.sc-card__footer {
    background: var(--sc-gray-50);
    border-top: 1px solid var(--sc-gray-200);
    padding: 8px;
    text-align: center;
}
.sc-card__more {
    display: block;
    width: 100%;
    min-height: 38px;
    padding: 8px 16px;
    background: var(--sc-gray-200);
    color: var(--sc-gray-700);
    border-radius: var(--sc-radius);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.sc-card__more:hover,
.sc-card__more:focus-visible {
    background: var(--sc-slate-800);
    color: #fff;
}

/* Post labels (New / Result Out / Last Date Soon ...). */
.sc-label {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.6;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
    white-space: nowrap;
    color: #fff;
}
.sc-label--new { background: var(--sc-red-600); }
.sc-label--updated { background: var(--sc-blue-600); }
.sc-label--result { background: var(--sc-green-700); }
.sc-label--admit-card { background: var(--sc-purple-700); }
.sc-label--answer-key { background: var(--sc-orange-600); }
.sc-label--last-date { background: var(--sc-maroon); }

/* =========================================================================
   6. INNER PAGES
   ========================================================================= */
.sc-main { padding-block: 20px 40px; }

.sc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}
@media (min-width: 1024px) {
    .sc-layout--with-sidebar { grid-template-columns: minmax(0, 1fr) 300px; }
}

.sc-panel {
    background: #fff;
    border: 1px solid var(--sc-gray-300);
    border-radius: var(--sc-radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}
.sc-panel + .sc-panel { margin-top: 20px; }
.sc-panel__body { padding: clamp(14px, 4vw, 28px); }

.sc-page-title {
    font-size: clamp(1.375rem, 5vw, 2rem);
    font-weight: 700;
    color: var(--sc-slate-900);
    line-height: 1.25;
    overflow-wrap: break-word;
}

.sc-entry__header {
    padding: clamp(14px, 4vw, 28px);
    border-bottom: 1px solid var(--sc-gray-200);
}
.sc-entry__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--sc-gray-500);
}
.sc-entry__meta a { color: var(--sc-blue-700); }
.sc-entry__thumbnail { margin: 0; }
.sc-entry__thumbnail img { width: 100%; height: auto; display: block; }

/* --- Post content ------------------------------------------------------- */
.sc-content {
    font-size: clamp(0.9375rem, 2.6vw, 1.0625rem);
    line-height: 1.7;
    color: var(--sc-gray-800);
    overflow-wrap: break-word;
}
.sc-content > * + * { margin-top: 1em; }
.sc-content h2,
.sc-content h3,
.sc-content h4 {
    margin-top: 1.6em;
    color: var(--sc-slate-900);
    scroll-margin-top: 20px;
    line-height: 1.3;
}
.sc-content h2 { font-size: clamp(1.1875rem, 4.2vw, 1.5rem); }
.sc-content h3 { font-size: clamp(1.0625rem, 3.6vw, 1.25rem); }
.sc-content h4 { font-size: 1.0625rem; }
.sc-content ul,
.sc-content ol { padding-left: 1.4em; }
.sc-content li + li { margin-top: 0.4em; }
.sc-content a { text-decoration: underline; }
.sc-content img { height: auto; border-radius: var(--sc-radius); }
.sc-content blockquote {
    border-left: 4px solid var(--sc-orange-500);
    padding: 8px 0 8px 16px;
    color: var(--sc-gray-700);
    font-style: italic;
}
.sc-content pre {
    overflow-x: auto;
    padding: 14px;
    background: var(--sc-gray-100);
    border-radius: var(--sc-radius);
}

/* Responsive tables: horizontally scrollable, never squeezed to unreadable.
   The wrapper is added by JS and by the_content filter. */
.sc-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-block: 1em;
    border: 1px solid var(--sc-gray-200);
    border-radius: var(--sc-radius);
    /* Fading edge hints that more columns exist off-screen. */
    background:
        linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left / 40px 100% no-repeat,
        linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right / 40px 100% no-repeat,
        radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, 0.18), transparent) left / 14px 100% no-repeat,
        radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, 0.18), transparent) right / 14px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
}
.sc-table-scroll:focus-visible { outline: var(--sc-focus); }
.sc-content table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: 0.9375rem;
    background: #fff;
}
.sc-table-scroll > table { margin: 0; }
.sc-content th,
.sc-content td {
    border: 1px solid var(--sc-gray-200);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}
.sc-content thead th,
.sc-content th {
    background: var(--sc-gray-50);
    font-weight: 700;
    color: var(--sc-slate-900);
}

/* =========================================================================
   7. BREADCRUMBS
   ========================================================================= */
.sc-breadcrumbs {
    font-size: 13px;
    color: var(--sc-gray-600);
    padding-block: 12px 4px;
}
.sc-breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}
.sc-breadcrumbs li { display: inline-flex; align-items: center; gap: 8px; }
.sc-breadcrumbs a { color: var(--sc-blue-700); text-decoration: none; }
.sc-breadcrumbs a:hover { text-decoration: underline; }
.sc-breadcrumbs [aria-current="page"] {
    color: var(--sc-gray-600);
    /* Long post titles must not blow out the row on 320px screens. */
    max-width: 100%;
    overflow-wrap: anywhere;
}
.sc-breadcrumbs__sep { color: var(--sc-gray-400); }

/* =========================================================================
   8. STRUCTURED DETAILS / IMPORTANT LINKS / FAQ / TOC
   ========================================================================= */
.sc-block { margin-top: 28px; }
.sc-block__title {
    font-size: clamp(1.0625rem, 3.8vw, 1.375rem);
    font-weight: 700;
    color: #fff;
    background: var(--sc-slate-800);
    padding: 10px 14px;
    border-radius: var(--sc-radius) var(--sc-radius) 0 0;
    text-align: center;
}
.sc-block__inner {
    border: 1px solid var(--sc-gray-300);
    border-top: 0;
    border-radius: 0 0 var(--sc-radius) var(--sc-radius);
    background: #fff;
}

/* Details table -> stacked definition rows on small screens. */
.sc-details { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.sc-details th,
.sc-details td {
    border: 1px solid var(--sc-gray-200);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}
.sc-details th {
    width: 40%;
    background: var(--sc-gray-50);
    font-weight: 600;
    color: var(--sc-slate-900);
}
@media (max-width: 599px) {
    .sc-details,
    .sc-details tbody,
    .sc-details tr,
    .sc-details th,
    .sc-details td { display: block; width: 100%; }
    .sc-details tr { border-bottom: 1px solid var(--sc-gray-200); }
    .sc-details tr:last-child { border-bottom: 0; }
    .sc-details th,
    .sc-details td { border: 0; padding: 8px 12px; }
    .sc-details th {
        background: transparent;
        padding-bottom: 0;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--sc-gray-500);
    }
    .sc-details td { padding-top: 2px; font-weight: 500; }
}

/* Important links */
.sc-links { list-style: none; margin: 0; padding: 8px; display: grid; gap: 8px; }
@media (min-width: 640px) { .sc-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sc-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: var(--sc-tap);
    padding: 10px 14px;
    background: var(--sc-gray-50);
    border: 1px solid var(--sc-gray-300);
    border-radius: var(--sc-radius);
    color: var(--sc-blue-800);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.sc-links a:hover,
.sc-links a:focus-visible {
    background: var(--sc-orange-50);
    border-color: var(--sc-orange-500);
}
.sc-links__action {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--sc-orange-700);
}
.sc-links__external { width: 13px; height: 13px; }

/* Table of contents */
.sc-toc {
    background: var(--sc-gray-50);
    border: 1px solid var(--sc-gray-300);
    border-radius: var(--sc-radius);
    padding: 0;
    margin-block: 20px;
}
.sc-toc > summary {
    cursor: pointer;
    list-style: none;
    padding: 12px 16px;
    font-weight: 700;
    color: var(--sc-slate-900);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: var(--sc-tap);
}
.sc-toc > summary::-webkit-details-marker { display: none; }
.sc-toc > summary::after {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--sc-gray-600);
    border-bottom: 2px solid var(--sc-gray-600);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}
.sc-toc[open] > summary::after { transform: rotate(-135deg); }
.sc-toc__list {
    list-style: none;
    margin: 0;
    padding: 0 16px 14px;
}
.sc-toc__list li { margin-top: 6px; }
.sc-toc__list li.is-sub { padding-left: 18px; }
.sc-toc__list a {
    color: var(--sc-blue-700);
    text-decoration: none;
    font-size: 0.9375rem;
    display: inline-block;
    padding-block: 3px;
}
.sc-toc__list a:hover { text-decoration: underline; }

/* FAQ accordion — <details> works with JS disabled. */
.sc-faq { padding: 8px; display: grid; gap: 8px; }
.sc-faq__item {
    border: 1px solid var(--sc-gray-300);
    border-radius: var(--sc-radius);
    background: #fff;
}
.sc-faq__item > summary {
    cursor: pointer;
    list-style: none;
    padding: 12px 16px;
    font-weight: 600;
    color: var(--sc-slate-900);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--sc-tap);
}
.sc-faq__item > summary::-webkit-details-marker { display: none; }
.sc-faq__item > summary::after {
    content: "+";
    flex-shrink: 0;
    font-size: 20px;
    line-height: 1;
    color: var(--sc-orange-600);
    font-weight: 700;
}
.sc-faq__item[open] > summary::after { content: "\2212"; }
.sc-faq__item[open] > summary { background: var(--sc-orange-50); }
.sc-faq__answer {
    padding: 4px 16px 16px;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--sc-gray-700);
}
.sc-faq__answer > * + * { margin-top: 0.8em; }

/* =========================================================================
   9. LISTINGS / ARCHIVES / RELATED
   ========================================================================= */
.sc-list { list-style: none; margin: 0; padding: 0; }
.sc-list__item {
    padding: 14px 0;
    border-bottom: 1px solid var(--sc-gray-200);
}
.sc-list__item:first-child { padding-top: 0; }
.sc-list__item:last-child { border-bottom: 0; padding-bottom: 0; }
.sc-list__title {
    font-size: clamp(1rem, 3.2vw, 1.125rem);
    font-weight: 600;
    line-height: 1.35;
}
.sc-list__title a { color: var(--sc-blue-800); text-decoration: none; overflow-wrap: anywhere; }
.sc-list__title a:hover,
.sc-list__title a:focus-visible { color: var(--sc-red-600); text-decoration: underline; }
.sc-list__meta {
    margin-top: 4px;
    font-size: 12px;
    color: var(--sc-gray-500);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}
.sc-list__excerpt {
    margin-top: 6px;
    font-size: 0.9375rem;
    color: var(--sc-gray-600);
    line-height: 1.6;
}

/* Compact chevron list used on category archives. */
.sc-rows { list-style: none; margin: 0; padding: 8px; }
.sc-rows li { border-bottom: 1px solid var(--sc-gray-100); }
.sc-rows li:last-child { border-bottom: 0; }
.sc-rows a {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 8px;
    text-decoration: none;
    min-height: var(--sc-tap);
}
.sc-rows a:hover,
.sc-rows a:focus-visible { background: var(--sc-orange-50); }
.sc-rows__chevron { flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; color: var(--sc-gray-400); }
.sc-rows a:hover .sc-rows__chevron { color: var(--sc-orange-500); }
.sc-rows__title {
    font-size: clamp(0.875rem, 3vw, 1rem);
    font-weight: 500;
    color: var(--sc-blue-800);
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.sc-rows a:hover .sc-rows__title { color: var(--sc-red-600); }
.sc-rows__date { display: block; font-size: 11px; color: var(--sc-gray-500); margin-top: 2px; font-weight: 400; }

.sc-archive-intro {
    padding: 12px clamp(14px, 4vw, 28px);
    font-size: 0.9375rem;
    color: var(--sc-gray-600);
    border-bottom: 1px solid var(--sc-gray-200);
    background: var(--sc-gray-50);
}

/* Related updates */
.sc-related__grid {
    list-style: none;
    margin: 0;
    padding: 12px;
    display: grid;
    gap: 10px;
}
@media (min-width: 640px) {
    .sc-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sc-related__grid a {
    display: block;
    height: 100%;
    padding: 12px 14px;
    border: 1px solid var(--sc-gray-200);
    border-radius: var(--sc-radius);
    background: var(--sc-gray-50);
    text-decoration: none;
    color: var(--sc-blue-800);
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.sc-related__grid a:hover,
.sc-related__grid a:focus-visible {
    background: var(--sc-orange-50);
    border-color: var(--sc-orange-500);
}
.sc-related__date { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--sc-gray-500); }

/* =========================================================================
   10. PAGINATION / FORMS / EMPTY STATES
   ========================================================================= */
.sc-pagination {
    padding: 16px clamp(14px, 4vw, 28px);
    border-top: 1px solid var(--sc-gray-200);
}
.sc-pagination .nav-links,
.sc-pagination__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}
.sc-pagination a,
.sc-pagination .current,
.sc-pagination .dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--sc-tap);
    min-height: var(--sc-tap);
    padding: 6px 12px;
    border: 1px solid var(--sc-gray-300);
    border-radius: var(--sc-radius);
    background: #fff;
    color: var(--sc-blue-800);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}
.sc-pagination a:hover,
.sc-pagination a:focus-visible { background: var(--sc-orange-50); border-color: var(--sc-orange-500); }
.sc-pagination .current {
    background: var(--sc-slate-800);
    border-color: var(--sc-slate-800);
    color: #fff;
}
.sc-pagination .dots { border-color: transparent; background: transparent; }
.sc-pagination .screen-reader-text { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }

.sc-empty {
    padding: clamp(20px, 6vw, 40px) clamp(14px, 4vw, 28px);
    text-align: center;
    color: var(--sc-gray-600);
}
.sc-empty p + p { margin-top: 12px; }

.sc-form-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    max-width: 520px;
    margin-inline: auto;
}
.sc-form-row label { flex: 1 1 200px; min-width: 0; }
.sc-form-row input[type="search"],
.sc-form-row input[type="text"] {
    width: 100%;
    min-height: var(--sc-tap);
    padding: 10px 14px;
    font-size: 16px;
    font-family: inherit;
    border: 1px solid var(--sc-gray-300);
    border-radius: var(--sc-radius);
    background: #fff;
    color: var(--sc-gray-800);
}
.sc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--sc-tap);
    padding: 10px 20px;
    background: var(--sc-blue-600);
    color: #fff;
    border: 1px solid var(--sc-blue-600);
    border-radius: var(--sc-radius);
    font-weight: 700;
    font-size: 15px;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
}
.sc-button:hover,
.sc-button:focus-visible { background: var(--sc-blue-700); border-color: var(--sc-blue-700); color: #fff; }
.sc-button--ghost {
    background: transparent;
    color: var(--sc-blue-700);
    border-color: var(--sc-gray-300);
}
.sc-button--ghost:hover { background: var(--sc-gray-100); color: var(--sc-blue-800); }

.sc-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.sc-chips a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 6px 14px;
    border: 1px solid var(--sc-gray-300);
    border-radius: 999px;
    background: #fff;
    color: var(--sc-blue-800);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.sc-chips a:hover,
.sc-chips a:focus-visible { background: var(--sc-orange-50); border-color: var(--sc-orange-500); }

/* Contact / About helper blocks */
.sc-cols { display: grid; gap: 20px; }
@media (min-width: 768px) { .sc-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sc-note {
    padding: 14px 16px;
    border-left: 4px solid var(--sc-orange-500);
    background: var(--sc-orange-50);
    border-radius: 0 var(--sc-radius) var(--sc-radius) 0;
    font-size: 0.9375rem;
    color: var(--sc-gray-700);
}

/* --- Contact form ------------------------------------------------------- */
.sc-contact-form-wrap {
    margin-top: 26px;
    padding: 22px;
    border: 1px solid var(--sc-gray-200, #e2e8f0);
    border-radius: var(--sc-radius, 8px);
    background: var(--sc-gray-50, #f8fafc);
}

.sc-contact-notice {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 6px;
    font-weight: 600;
    line-height: 1.5;
}

.sc-contact-notice--success {
    border: 1px solid #86efac;
    background: #f0fdf4;
    color: #166534;
}

.sc-contact-notice--error {
    border: 1px solid #fca5a5;
    background: #fef2f2;
    color: #991b1b;
}

.sc-contact-form {
    display: grid;
    gap: 16px;
}

.sc-contact-field label {
    display: block;
    margin-bottom: 6px;
    color: var(--sc-slate-900, #0f172a);
    font-size: 14px;
    font-weight: 700;
}

.sc-contact-field input,
.sc-contact-field textarea {
    display: block;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    color: #111827;
    font: inherit;
    line-height: 1.45;
}

.sc-contact-field input:focus,
.sc-contact-field textarea:focus {
    border-color: #991b1b;
    outline: 2px solid rgba(153, 27, 27, 0.14);
    outline-offset: 1px;
}

.sc-contact-submit {
    width: fit-content;
    min-width: 150px;
    padding: 11px 18px;
    border: 0;
    border-radius: 6px;
    background: #991b1b;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.sc-contact-submit:hover,
.sc-contact-submit:focus-visible {
    background: #7f1d1d;
}

/* Honeypot. Must stay visually hidden but remain in the accessibility tree's
   blind spot via aria-hidden on the wrapper -- display:none would let some
   bots detect and skip it. */
.sc-contact-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

@media (max-width: 640px) {
    .sc-contact-form-wrap {
        padding: 16px;
    }

    .sc-contact-submit {
        width: 100%;
    }
}

/* =========================================================================
   11. FOOTER
   ========================================================================= */
.sc-footer {
    background: var(--sc-slate-900);
    color: var(--sc-gray-300);
    border-top: 4px solid var(--sc-orange-600);
    margin-top: 48px;
    padding-block: 32px;
}
.sc-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
}
@media (min-width: 768px) {
    .sc-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
.sc-footer__brand-mark { margin-bottom: 14px; }
.sc-footer__brand-mark img { max-height: 52px; width: auto; }
.sc-footer__heading {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 14px;
}
.sc-footer__text { font-size: 14px; color: var(--sc-gray-400); line-height: 1.65; }
.sc-footer__menu { list-style: none; margin: 0; padding: 0; }
@media (min-width: 480px) {
    .sc-footer__menu {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 20px;
    }
}
.sc-footer__menu a {
    /* Flex + min-height gives the row a 44px tap target without changing how
       the link looks; overflow-wrap keeps a long page title inside the column
       instead of pushing the footer sideways. */
    display: flex;
    align-items: center;
    min-height: var(--sc-tap);
    padding-block: 8px;
    color: var(--sc-gray-300);
    text-decoration: none;
    font-size: 15px;
    overflow-wrap: anywhere;
}
.sc-footer__menu a:hover,
.sc-footer__menu a:focus-visible { color: #fff; text-decoration: underline; }
.sc-footer__bottom {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--sc-slate-800);
    text-align: center;
    font-size: 13px;
    color: var(--sc-gray-500);
    line-height: 1.65;
}
.sc-footer__bottom p + p { margin-top: 8px; }

/* =========================================================================
   12. WORDPRESS CORE CLASSES
   ========================================================================= */
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide, .alignfull { max-width: 100%; }
.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-element-caption {
    font-size: 13px;
    color: var(--sc-gray-500);
    text-align: center;
    margin-top: 6px;
}
.sticky .sc-list__title::before {
    content: "\2605";
    color: var(--sc-orange-500);
    margin-right: 6px;
}
.sc-content .wp-block-embed__wrapper { position: relative; }
.sc-content figure { margin: 0; }

/* Small-screen guards for anything a plugin injects into the content. */
@media (max-width: 480px) {
    .alignleft, .alignright { float: none; margin: 0 0 1em; }
    .sc-content > .wp-block-columns { display: block; }
}

/* =========================================================================
   13. LAYOUT COLUMN, SIDEBAR, WIDGETS, POST NAV, COMMENTS
   ========================================================================= */

/*
 * Grid children default to min-width:auto, which lets a long unbroken string
 * or a wide table push the whole page sideways. Pinning both columns to 0
 * is what keeps the layout from scrolling horizontally on small screens.
 */
.sc-layout__primary,
.sc-sidebar { min-width: 0; }

.sc-sidebar { display: grid; gap: 20px; align-content: start; }

.sc-widget {
    background: #fff;
    border: 1px solid var(--sc-gray-300);
    border-radius: var(--sc-radius);
    padding: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    font-size: 0.9375rem;
    color: var(--sc-gray-700);
    overflow-wrap: break-word;
}
.sc-widget__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sc-slate-900);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--sc-orange-500);
}
.sc-widget ul { list-style: none; margin: 0; padding: 0; }
.sc-widget li + li { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--sc-gray-100); }
.sc-widget a { color: var(--sc-blue-800); text-decoration: none; }
.sc-widget a:hover,
.sc-widget a:focus-visible { color: var(--sc-red-600); text-decoration: underline; }
.sc-widget img { max-width: 100%; height: auto; }

/* Footer widget area inherits the dark footer palette. */
.sc-footer .sc-widget {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    color: var(--sc-gray-300);
}
.sc-footer .sc-widget a { color: var(--sc-gray-300); }
.sc-footer .sc-widget a:hover { color: #fff; }

/* --- Single-post extras -------------------------------------------------- */
.sc-entry__labels { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sc-entry__category { display: inline-flex; gap: 4px; }

.sc-share--block { padding: 12px; }

/* Previous / next update */
.sc-post-nav {
    display: grid;
    gap: 10px;
    margin-top: 28px;
}
@media (min-width: 640px) {
    .sc-post-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sc-post-nav__link {
    display: block;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--sc-gray-300);
    border-radius: var(--sc-radius);
    text-decoration: none;
    min-height: var(--sc-tap);
}
.sc-post-nav__link:hover,
.sc-post-nav__link:focus-visible { background: var(--sc-orange-50); border-color: var(--sc-orange-500); }
/* When only "next" exists it still belongs on the right-hand side. */
.sc-post-nav__link--next { text-align: right; grid-column: -2; }
.sc-post-nav__label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sc-gray-500);
    font-weight: 700;
}
.sc-post-nav__title {
    display: block;
    margin-top: 4px;
    color: var(--sc-blue-800);
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* --- Empty-state search box --------------------------------------------- */
.sc-empty__form { max-width: 520px; margin: 16px auto; text-align: left; }

/* --- Category archive header as a page heading --------------------------- */
.sc-card > .sc-card__header:first-child:not(h3) {
    font-size: clamp(1.25rem, 4.6vw, 1.75rem);
    padding: 16px 12px;
}

/* --- Comments ------------------------------------------------------------ */
.sc-comments__list { list-style: none; margin: 0; padding: 12px; }
.sc-comments__list .children { list-style: none; margin: 12px 0 0; padding-left: clamp(12px, 4vw, 32px); }
.sc-comments__list .comment-body {
    padding: 12px 14px;
    border: 1px solid var(--sc-gray-200);
    border-radius: var(--sc-radius);
    background: var(--sc-gray-50);
    font-size: 0.9375rem;
    line-height: 1.65;
    overflow-wrap: break-word;
}
.sc-comments__list li + li { margin-top: 12px; }
.sc-comments__list .comment-author { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.sc-comments__list .comment-author img { border-radius: 50%; }
.sc-comments__list .comment-metadata { font-size: 12px; color: var(--sc-gray-500); margin-top: 2px; }
.sc-comments__list .comment-metadata a { color: inherit; }
.sc-comments__list .reply { margin-top: 8px; font-size: 13px; font-weight: 600; }

.sc-comments__reply-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--sc-slate-900);
    margin-bottom: 8px;
}
.sc-comment-form { padding: 0 12px 12px; }
.sc-comment-form p { margin-top: 12px; }
.sc-comment-form label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.sc-comment-form input[type="text"],
.sc-comment-form input[type="email"],
.sc-comment-form input[type="url"],
.sc-comment-form textarea {
    width: 100%;
    max-width: 100%;
    /* 16px prevents iOS Safari from zooming the viewport on focus. */
    font-size: 16px;
    font-family: inherit;
    padding: 10px 12px;
    min-height: var(--sc-tap);
    border: 1px solid var(--sc-gray-300);
    border-radius: var(--sc-radius);
    background: #fff;
    color: var(--sc-gray-800);
}
.sc-comment-form textarea { min-height: 120px; resize: vertical; }
.sc-comment-form .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 8px; }
.sc-comment-form .comment-form-cookies-consent label { font-weight: 400; margin: 0; }
.sc-comment-form .comment-form-cookies-consent input { min-width: 18px; min-height: 18px; }

/* Optional footer widget row, above the brand/legal grid. */
.sc-footer__widgets {
    display: grid;
    gap: 24px;
    padding-bottom: 28px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--sc-slate-800);
}
@media (min-width: 768px) {
    .sc-footer__widgets { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/*
 * The search input sets outline:none so the rounded pill is not broken by a
 * square ring, which left keyboard users with no focus indicator at all. The
 * ring is moved to the shell instead, so focus stays visible.
 */
.sc-search-shell:focus-within {
    outline: var(--sc-focus);
    outline-offset: 2px;
}

/*
 * <main> carries tabindex="-1" so the skip link can move focus into it. The
 * ring is suppressed only for that programmatic case: it would otherwise draw
 * a box around the entire page.
 */
main[tabindex="-1"]:focus { outline: none; }

/*
 * External links inside post content are tagged by inc/content.php. They open
 * in a new tab, so they get a visible affordance rather than looking identical
 * to an internal link.
 */
.sc-content a.sc-external-link::after {
    content: "\2197";
    display: inline-block;
    margin-left: 3px;
    font-size: 0.85em;
    text-decoration: none;
    color: var(--sc-orange-700);
}

/* =========================================================================
   12. STANDALONE 500 PAGE
   -------------------------------------------------------------------------
   500.php deliberately renders without wp_head(), wp_footer() or the theme
   header/footer, so that a failure inside a plugin or template hook cannot
   trigger a second failure while the error page itself is being drawn. It
   links only this stylesheet, so the handful of rules it needs live here
   rather than in the shared page chrome above.
   ========================================================================= */
.sc-error-standalone {
    min-height: 100vh;
    margin: 0;
    background: var(--sc-gray-100);
    color: var(--sc-slate-900);
    font-family: var(--sc-font);
}
.sc-error-standalone *,
.sc-error-standalone *::before,
.sc-error-standalone *::after { box-sizing: border-box; }

.sc-error-standalone__header {
    padding: 22px 16px;
    background: var(--sc-slate-900);
    text-align: center;
}
.sc-error-standalone__brand {
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-decoration: none;
}
.sc-error-standalone__brand span { color: var(--sc-orange-500); }

.sc-error-standalone__main {
    display: flex;
    min-height: calc(100vh - 156px);
    align-items: center;
    justify-content: center;
    padding: 28px 12px;
}
.sc-error-standalone__footer {
    padding: 18px 12px;
    color: var(--sc-gray-500);
    font-size: 12px;
    text-align: center;
}

.sc-error-card {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(28px, 5vw, 52px);
    border: 1px solid var(--sc-gray-200);
    border-radius: var(--sc-radius-lg);
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    text-align: center;
}
.sc-error-code {
    margin-bottom: 8px;
    color: var(--sc-red-700);
    font-size: clamp(68px, 14vw, 112px);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 0.95;
}
.sc-error-eyebrow {
    margin: 16px 0 8px;
    color: var(--sc-red-700);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.sc-error-title {
    margin: 0;
    color: var(--sc-slate-900);
    font-size: clamp(25px, 5vw, 38px);
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.sc-error-copy {
    max-width: 620px;
    margin: 16px auto 0;
    color: var(--sc-gray-600);
    font-size: 16px;
    line-height: 1.7;
}
.sc-error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin-top: 22px;
}
.sc-error-action {
    display: inline-flex;
    min-height: var(--sc-tap);
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border: 1px solid var(--sc-gray-300);
    border-radius: var(--sc-radius);
    background: #fff;
    color: var(--sc-slate-900);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}
.sc-error-action--primary {
    border-color: var(--sc-red-700);
    background: var(--sc-red-700);
    color: #fff;
}
.sc-error-action--primary:hover,
.sc-error-action--primary:focus-visible {
    border-color: #7f1d1d;
    background: #7f1d1d;
    color: #fff;
}
.sc-error-action:not(.sc-error-action--primary):hover,
.sc-error-action:not(.sc-error-action--primary):focus-visible {
    border-color: var(--sc-gray-400);
    background: var(--sc-gray-50);
}
.sc-error-action:focus-visible { outline: var(--sc-focus); outline-offset: 2px; }

.sc-error-hint {
    margin: 24px auto 0;
    padding-top: 20px;
    border-top: 1px solid var(--sc-gray-200);
    color: var(--sc-gray-500);
    font-size: 13px;
    line-height: 1.6;
}

@media (max-width: 560px) {
    .sc-error-card { padding: 26px 16px; }
    .sc-error-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .sc-error-actions .sc-error-action:first-child:last-child { grid-column: 1 / -1; }
}

/* =========================================================================
   13. HOMEPAGE LONG-FORM CONTENT
   -------------------------------------------------------------------------
   template-parts/home-seo.php. Ported from the previous release with the same
   proportions and colours; the hard-coded hex values were swapped for the
   tokens above, and the former h1/h2 selectors became .sc-home-seo__title and
   h3 when the block was demoted one heading level so the homepage keeps a
   single H1 and no skipped levels.
   ========================================================================= */
.sc-home-seo {
    width: 100%;
    padding: 8px 0 24px;
}
.sc-home-seo__inner {
    width: 100%;
    padding: 28px 30px 32px;
    border: 1px solid var(--sc-gray-200);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07);
    color: var(--sc-slate-700);
}
.sc-home-seo__intro {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--sc-gray-200);
}
.sc-home-seo__eyebrow {
    margin: 0 0 8px;
    color: var(--sc-orange-600);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.sc-home-seo__title {
    margin: 0 0 14px;
    color: var(--sc-slate-900);
    font-size: clamp(25px, 3.4vw, 36px);
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.sc-home-seo h3 {
    margin: 27px 0 9px;
    color: #172554;
    font-size: clamp(19px, 2.4vw, 23px);
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.sc-home-seo p,
.sc-home-seo li {
    font-size: 16px;
    line-height: 1.75;
}
.sc-home-seo p { margin: 0 0 13px; }
.sc-home-seo strong { color: #1e3a8a; font-weight: 700; }
.sc-home-seo ul { margin: 10px 0 0 22px; padding: 0; }
.sc-home-seo li { margin: 5px 0; padding-left: 3px; }

.sc-home-seo__faq {
    margin-top: 12px;
    border-top: 1px solid var(--sc-gray-200);
}
.sc-home-seo__faq details {
    border-bottom: 1px solid var(--sc-gray-200);
    background: #fff;
}
.sc-home-seo__faq summary {
    cursor: pointer;
    padding: 15px 3px;
    min-height: var(--sc-tap);
    color: var(--sc-slate-900);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
}
.sc-home-seo__faq summary:focus-visible { outline: var(--sc-focus); outline-offset: -2px; }
.sc-home-seo__faq details p {
    margin: 0;
    padding: 0 3px 16px;
    color: var(--sc-gray-600);
}

@media (max-width: 640px) {
    .sc-home-seo { padding: 4px 0 16px; }
    .sc-home-seo__inner { padding: 21px 16px 24px; border-radius: var(--sc-radius); }
    .sc-home-seo__title { font-size: 24px; }
    .sc-home-seo h3 { margin-top: 23px; font-size: 19px; }
    .sc-home-seo p,
    .sc-home-seo li { font-size: 15px; line-height: 1.68; }
}