/*
 * Freezer Focus — Custom Page Styles
 * Theme family: sky (Tailwind sky)
 * Version: 1.0.0
 */

/* ─── Design tokens ─────────────────────────────────────── */

:root {
    --ff-accent: #0ea5e9; /* sky-500  */
    --ff-accent-deep: #0284c7; /* sky-600  */
    --ff-accent-hover: #0369a1; /* sky-700  */
    --ff-accent-dark: #075985; /* sky-800  */
    --ff-accent-soft: #e0f2fe; /* sky-100  */
    --ff-accent-glow: #bae6fd; /* sky-200  */
    --ff-accent-mid: #7dd3fc; /* sky-300  */
    --ff-hero-bg: #f0f9ff; /* sky-50   */
    --ff-page-bg: #f8fcff; /* near-white, sky-tinted */
    --ff-surface: #ffffff;
    --ff-border: #bae6fd; /* sky-200  */
    --ff-border-soft: #e0f2fe; /* sky-100  */
    --ff-heading: #0f172a; /* slate-900 */
    --ff-heading-accent: #0c4a6e; /* sky-900  */
    --ff-subheading: #075985; /* sky-800  */
    --ff-body: #1e293b; /* slate-800 */
    --ff-body-mid: #334155; /* slate-700 */
    --ff-muted: #475569; /* slate-600 */
    --ff-muted-light: #64748b; /* slate-500 */
    --ff-table-head-bg: #e0f2fe; /* sky-100  */
    --ff-table-head-text: #0c4a6e; /* sky-900  */
    --ff-table-row-alt: #f8fbff;
    --ff-callout-bg: #f0f9ff; /* sky-50   */
    --ff-callout-border: #38bdf8; /* sky-400  */
    --ff-badge: #0ea5e9;
    --ff-badge-text: #ffffff;
}

/* ─── Force full-width layout (override theme sidebar) ───── */
/*
 * Most WordPress themes reserve space for a sidebar even on pages with no
 * sidebar content, leaving a blank column on the right. These rules expand
 * the theme's primary content area to fill the full container so our
 * article can center itself correctly with max-width + margin auto.
 */

body.freezer-focus #primary,
body.freezer-focus .content-area,
body.freezer-focus #content,
body.freezer-focus .site-content,
body.freezer-focus .content-wrap,
body.freezer-focus .entry-content-wrap,
body.freezer-focus .entry-content,
body.freezer-focus .single-content {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
}

body.freezer-focus #secondary,
body.freezer-focus .widget-area,
body.freezer-focus .sidebar {
    display: none !important;
}

/* ─── Base ───────────────────────────────────────────────── */

.page-content,
.pillar-page {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.78;
    color: var(--ff-body);
    background-color: var(--ff-surface);
    /*max-width: 820px;*/
    width: 100%;
    margin: 0 auto;
    padding: 2rem 1.5rem 3.5rem;
    box-sizing: border-box;
}

/* ─── Hero ───────────────────────────────────────────────── */

.ff-hero {
    background: linear-gradient(140deg, var(--ff-hero-bg) 0%, var(--ff-accent-soft) 100%);
    border: 1px solid var(--ff-accent-glow);
    border-radius: 12px;
    padding: 3rem 2.25rem;
    margin-bottom: 3rem;
    text-align: center;
}

.ff-hero h1 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--ff-heading-accent);
    margin: 0 0 1rem;
    line-height: 1.2;
}

.ff-hero p {
    font-size: 1.125rem;
    color: var(--ff-body-mid);
    margin: 0 0 1.75rem;
    /*max-width: 620px;*/
    margin-left: auto;
    margin-right: auto;
    line-height: 1.65;
}

.ff-btn {
    display: inline-block;
    background-color: var(--ff-accent);
    color: #fff !important;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.8rem 1.875rem;
    border-radius: 6px;
    text-decoration: none !important;
    letter-spacing: 0.01em;
    transition: background-color 0.15s ease;
}

.ff-btn:hover {
    background-color: var(--ff-accent-hover) !important;
}

/* ─── Typography ─────────────────────────────────────────── */

.page-content h1,
.pillar-page h1 {
    font-size: 1.875rem;
    font-weight: 800;
    color: var(--ff-heading);
    margin: 0 0 0.625rem;
    line-height: 1.28;
}

.page-content h2,
.pillar-page h2 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--ff-heading-accent);
    margin: 2.75rem 0 0.875rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--ff-accent-glow);
    line-height: 1.35;
}

.page-content h3,
.pillar-page h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ff-subheading);
    margin: 1.875rem 0 0.5rem;
}

.page-content h4,
.pillar-page h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ff-heading);
    margin: 1.5rem 0 0.375rem;
}

.page-content p,
.pillar-page p {
    margin: 0 0 1.125rem;
}

.ff-updated {
    font-size: 0.875rem;
    color: var(--ff-muted-light);
    margin-bottom: 1.625rem;
}

.ff-lead {
    font-size: 1.125rem;
    color: var(--ff-body-mid);
    line-height: 1.72;
    margin-bottom: 2rem;
    border-left: 4px solid var(--ff-accent-mid);
    padding-left: 1rem;
    background: var(--ff-hero-bg);
    border-radius: 0 6px 6px 0;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}

/* ─── Links ──────────────────────────────────────────────── */

.page-content a,
.pillar-page a {
    color: var(--ff-accent-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: color 0.12s;
}

.page-content a:hover,
.pillar-page a:hover {
    color: var(--ff-accent-hover);
}

/* ─── Lists ──────────────────────────────────────────────── */

.page-content ul,
.pillar-page ul {
    margin: 0.25rem 0 1.25rem 0;
    padding-left: 1.375rem;
}

.page-content ol,
.pillar-page ol {
    margin: 0.25rem 0 1.25rem 0;
    padding-left: 1.5rem;
}

.page-content li,
.pillar-page li {
    margin-bottom: 0.4rem;
}

.page-content ul > li::marker,
.pillar-page ul > li::marker {
    color: var(--ff-accent);
}

.page-content ol > li::marker,
.pillar-page ol > li::marker {
    color: var(--ff-accent-deep);
    font-weight: 700;
}

/* ─── Category cards ─────────────────────────────────────── */

.ff-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.125rem;
    margin: 1.5rem 0 2.25rem;
}

.ff-card {
    background: var(--ff-hero-bg);
    border: 1px solid var(--ff-accent-glow);
    border-radius: 8px;
    padding: 1.25rem 1.25rem 1rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.ff-card:hover {
    border-color: var(--ff-accent-mid);
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.12);
}

.ff-card h3 {
    font-size: 1rem;
    margin: 0 0 0.5rem;
    color: var(--ff-accent-deep);
    font-weight: 700;
}

.ff-card h3 a {
    text-decoration: none;
    color: inherit;
}

.ff-card h3 a:hover {
    color: var(--ff-accent-hover);
}

.ff-card p {
    font-size: 0.9375rem;
    color: var(--ff-body-mid);
    margin: 0;
    line-height: 1.6;
}

/* ─── Tables ─────────────────────────────────────────────── */

.page-content table,
.pillar-page table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.75rem 0;
    font-size: 0.9375rem;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--ff-border-soft);
}

.page-content thead,
.pillar-page thead {
    background-color: var(--ff-table-head-bg);
}

.page-content th,
.pillar-page th {
    color: var(--ff-table-head-text);
    font-weight: 700;
    text-align: left;
    padding: 0.7rem 1rem;
    border-bottom: 2px solid var(--ff-accent-mid);
}

.page-content td,
.pillar-page td {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--ff-border-soft);
    color: var(--ff-body);
    vertical-align: top;
}

.page-content tr:last-child td,
.pillar-page tr:last-child td {
    border-bottom: none;
}

.page-content tbody tr:nth-child(even) td,
.pillar-page tbody tr:nth-child(even) td {
    background-color: var(--ff-table-row-alt);
}

/* ─── Callouts ───────────────────────────────────────────── */

.ff-callout,
blockquote {
    background: var(--ff-callout-bg);
    border-left: 4px solid var(--ff-callout-border);
    border-radius: 0 6px 6px 0;
    padding: 1rem 1.375rem;
    margin: 1.75rem 0;
    color: var(--ff-body-mid);
}

.ff-callout p:last-child,
blockquote p:last-child {
    margin-bottom: 0;
}

blockquote {
    font-style: italic;
}

/* ─── Decision box ───────────────────────────────────────── */

.ff-decision {
    background: var(--ff-hero-bg);
    border: 1px solid var(--ff-accent-mid);
    border-radius: 8px;
    padding: 1.375rem 1.5rem;
    margin: 2rem 0;
}

.ff-decision h3 {
    margin-top: 0;
    color: var(--ff-accent-hover);
    font-size: 1.0625rem;
}

.ff-decision p:last-child,
.ff-decision ul:last-child {
    margin-bottom: 0;
}

/* ─── FAQ section ────────────────────────────────────────── */

.ff-faq h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ff-heading);
    border-top: 1px solid var(--ff-border-soft);
    padding-top: 1.125rem;
    margin-top: 1.375rem;
}

/* ─── Related pages nav ──────────────────────────────────── */

.ff-related {
    background: var(--ff-hero-bg);
    border: 1px solid var(--ff-accent-glow);
    border-radius: 8px;
    padding: 1.375rem 1.5rem;
    margin-top: 3rem;
}

.ff-related h2 {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ff-accent-deep);
    margin: 0 0 0.875rem;
    border: none !important;
    padding: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ff-related ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ff-related ul li {
    margin: 0;
}

.ff-related ul li a {
    display: inline-block;
    background: var(--ff-surface);
    border: 1px solid var(--ff-accent-mid);
    color: var(--ff-accent-deep);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.325rem 0.875rem;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.13s, color 0.13s, border-color 0.13s;
}

.ff-related ul li a:hover {
    background-color: var(--ff-accent);
    color: #fff;
    border-color: var(--ff-accent);
}

/* ─── Responsive ─────────────────────────────────────────── */

@media (max-width: 640px) {
    .page-content,
    .pillar-page {
        padding: 1.25rem 1rem 2.5rem;
    }

    .ff-hero {
        padding: 2rem 1.25rem;
    }

    .ff-hero h1 {
        font-size: 1.5rem;
    }

    .ff-hero p {
        font-size: 1rem;
    }

    .page-content h1,
    .pillar-page h1 {
        font-size: 1.5rem;
    }

    .page-content h2,
    .pillar-page h2 {
        font-size: 1.25rem;
    }

    .ff-card-grid {
        grid-template-columns: 1fr;
    }

    .page-content table,
    .pillar-page table {
        font-size: 0.875rem;
        display: block;
        overflow-x: auto;
    }

    .ff-lead {
        font-size: 1rem;
    }
}