/* =================================================================== * CertEmpire — Exam Information CPT Styles (Enhanced) * Consolidated CSS (with robust sticky sidebar for tablet & desktop) * =================================================================== */
/* --- 1) Design System & Globals --- */
:root {
    --ce-color-text-primary: #2d1684;
    --ce-color-text-secondary: #475569;
    --ce-color-text-link: #2563EB;
    --ce-color-border: #E2E8F0;
    --ce-radius: 16px;
    --ce-shadow: 0 4px 12px -2px rgba(15, 23, 42, .05);
    /* Height of your site header (for sticky offset). Adjust if needed. */
    --header-height: 72px;
}

/* --- 2) Layout & Spacing --- */
.ce-wrap {
    max-width: 1280px;
    margin: 2rem auto;
    padding: 0 2rem;
    /* Ensure sticky isn't blocked by overflow on ancestors */
    overflow: visible;
}

.ce-layout {
    display: grid;
    /* Main content (flexible) + fixed-width sidebar */
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 2rem;
    align-items: start;
    overflow: visible;
    /* keep visible so sticky works */
}

/* --- 3) Card & Content Styling --- */
.ce-card {
    background: #fff;
    border: 1px solid var(--ce-color-border);
    border-radius: var(--ce-radius);
    box-shadow: var(--ce-shadow);
    padding: 2rem;
}

/* Breadcrumbs */
.ce-breadcrumbs {
    font-size: 0.875rem;
    color: var(--ce-color-text-link);
    margin-bottom: 1rem;
}

.ce-breadcrumbs a {
    color: var(--ce-color-text-secondary);
    text-decoration: none;
}

.ce-breadcrumbs a:hover {
    text-decoration: underline;
}

/* Title */
h1.entry-title {
    color: var(--ce-color-text-primary);
    font-size: 2rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

/* Specifications Table */
.ce-spec table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 1rem;
}

.ce-spec th,
.ce-spec td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--ce-color-border);
    text-align: left;
    vertical-align: top;
}

.ce-spec tr:last-child th,
.ce-spec tr:last-child td {
    border-bottom: none;
}

.ce-spec th {
    font-weight: 600;
    color: var(--ce-color-text-primary);
    width: 30%;
}

.ce-spec td {
    color: var(--ce-color-text-secondary);
}

.ce-spec td a {
    color: var(--ce-color-text-link);
    text-decoration: none;
    font-weight: 500;
}

.ce-spec td a:hover {
    text-decoration: underline;
}

/* Main Content Area from Block Editor */
.entry-content {
    color: var(--ce-color-text-secondary);
    line-height: 1.7;
}

.entry-content h2 {
    color: var(--ce-color-text-primary);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

/* --- 4) Sidebar Styling --- */
aside {
    overflow: visible;
}

/* don't block sticky */
aside .ce-card {
    padding: 1.5rem;
}

.ce-sidebar h3 {
    margin-top: 0;
    color: var(--ce-color-text-primary);
    font-size: 1.25rem;
    font-weight: 700;
}

.ce-sidebar p {
    color: var(--ce-color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* CTA Button */
.ce-cta {
    display: block;
    width: 100%;
    padding: 12px 16px;
    margin-top: 1rem;
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    color: var(--ce-color-text-secondary);
    background: #fff;
    border: 2px solid var(--ce-color-border);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.ce-cta:hover,
.ce-cta:focus {
    background: #f8fafc;
    border-color: #c7d2fe;
    color: var(--ce-color-text-link);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}

.ce-cta:active {
    transform: translateY(0);
}

/* Sticky Sidebar (tablet & desktop only) */
.sticky-sidebar {
    position: static;
}

/* default for mobile */
@media (min-width: 768px) {
    .sticky-sidebar {
        position: sticky;
        top: calc(var(--header-height) + 16px);
        /* header + breathing room */
        height: fit-content;
        /* Safari/Grid quirk */
        align-self: start;
        /* start at top of grid area */
    }
}

/* Offset when logged in (WP admin bar ~32px on desktop) */
body.admin-bar .sticky-sidebar {
    top: calc(var(--header-height) + 16px + 32px);
}

/* --- 5) Responsive Design --- */
/* Stack columns only BELOW 1024px (keep two columns at exactly 1024px/iPad) */
@media (max-width: 1023px) {
    .ce-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .ce-wrap {
        padding: 0 1rem;
        margin: 1rem auto;
    }

    .ce-card {
        padding: 1.5rem;
    }

    h1.entry-title {
        font-size: 1.75rem;
    }

    /* Make spec table vertical on small screens */
    .ce-spec th,
    .ce-spec td {
        display: block;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .ce-spec th {
        padding-bottom: 4px;
        border-bottom: none;
    }

    .ce-spec td {
        padding-top: 0;
    }
}

/* --- 6) New Full-Width Header Styles --- */
.ce-entry-header {
    margin-bottom: 2.5rem;
}

.ce-entry-header .entry-title {
    color: var(--ce-color-text-primary);
    font-size: 2.25rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.ce-entry-header .ce-breadcrumbs {
    margin-top: 0.75rem;
}

/* Short description under title */
.ce-short-description {
    font-size: 1.15rem;
    color: var(--ce-color-text-secondary, #475569);
    line-height: 1.7;
    max-width: 800px;
    margin-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--ce-color-border);
}

/* Remove duplicate elements from inside the card */
.ce-card>.entry-title,
.ce-card>.ce-breadcrumbs {
    display: none;
}

/* --- 7) Intro Paragraph Styling --- */
.ce-spec-intro {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--ce-color-border);
}

.ce-spec-intro p:last-child {
    margin-bottom: 0;
}

/* Keep two columns on tablet/desktop (don’t collapse at 1024) */
@media (min-width: 1024px) {
    .ce-layout {
        grid-template-columns: minmax(0, 1fr) 380px;
    }
}

@media (max-width: 1023px) {
    .ce-layout {
        grid-template-columns: 1fr;
    }
}

/* Make the ASIDE itself sticky (more reliable in CSS Grid) */
:root {
    --header-height: 72px;
}

/* adjust to your header */
.ce-layout>aside {
    position: sticky;
    top: calc(var(--header-height) + 16px);
    align-self: start;
    height: fit-content;
    z-index: 2;
    /* keep above content if needed */
    overflow: visible;
    /* ensure sticky isn't blocked here */
}

/* If logged in, account for the WP admin bar */
body.admin-bar .ce-layout>aside {
    top: calc(var(--header-height) + 16px + 32px);
}

/* Make sure common theme wrappers don’t block sticky via overflow */
.site-content,
.content-area,
.site-main,
.ast-container,
.ast-row,
.ast-separate-container .ast-article-post,
.entry-content,
.ce-wrap,
.ce-layout,
aside {
    overflow: visible !important;
}

/* Optional: the inner card can just be normal */
.ce-sidebar.sticky-sidebar {
    position: static !important;
}

/* Smooth anchor scroll globally */
html {
    scroll-behavior: smooth;
}

/* Make anchor land below sticky header */
#ce-resources {
    scroll-margin-top: calc(var(--header-height, 72px) + 16px);
}

body.admin-bar #ce-resources {
    scroll-margin-top: calc(var(--header-height, 72px) + 16px + 32px);
}

/* Mobile-only utility */
.only-mobile {
    display: none;
}

@media (max-width: 768px) {
    .only-mobile {
        display: block;
    }
}

/* Mobile button styling */
.ce-mobile-cta {
    margin: 12px 0 16px;
}

.ce-mobile-resources-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 16px;
    border: 2px solid var(--ce-color-border, #E2E8F0);
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    color: var(--ce-color-text-secondary, #475569);
    background: #fff;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.ce-mobile-resources-btn:hover,
.ce-mobile-resources-btn:focus {
    transform: translateY(-2px);
    border-color: #c7d2fe;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .04);
    color: var(--ce-color-text-link, #2563EB);
}

/* Fix mobile table padding (previously zeroed out) */
@media (max-width: 768px) {

    .ce-spec th,
    .ce-spec td {
        display: block;
        width: 100%;
        padding-left: 12px;
        /* restore left padding */
        padding-right: 12px;
        /* restore right padding */
    }

    .ce-spec th {
        padding-bottom: 4px;
        border-bottom: none;
    }

    .ce-spec td {
        padding-top: 0;
    }
}

/* == Use the same breakpoint as the grid collapse == 2-col ≥1024px, single-col ≤1023px */
/* 1) Show the “Go to exam prep resources” button whenever we’re in single-column */
.only-mobile {
    display: none;
}

@media (max-width: 1023px) {
    .only-mobile {
        display: block;
    }
}

/* 2) Make the sidebar sticky only when two columns are active */
.sticky-sidebar {
    position: static;
}

@media (min-width: 1024px) {
    .sticky-sidebar {
        position: sticky;
        top: calc(var(--header-height, 72px) + 16px);
        height: fit-content;
        align-self: start;
    }
}

body.admin-bar .sticky-sidebar {
    top: calc(var(--header-height, 72px) + 16px + 32px);
}

/* 3) Ensure the anchor lands correctly with the sticky header across all single-column widths */
#ce-resources {
    scroll-margin-top: calc(var(--header-height, 72px) + 16px);
}

body.admin-bar #ce-resources {
    scroll-margin-top: calc(var(--header-height, 72px) + 16px + 32px);
}

/* 4) Improve table readability across the whole single-column range */
@media (max-width: 1023px) {

    .ce-spec th,
    .ce-spec td {
        display: block;
        width: 100%;
        padding-left: 12px;
        padding-right: 12px;
    }

    .ce-spec th {
        padding-bottom: 4px;
        border-bottom: none;
    }

    .ce-spec td {
        padding-top: 0;
    }
}