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

/* ============================================================
   BRAND TOKENS
   ============================================================ */
:root {
    --sjwj-teal: #00DDEB;
    --sjwj-coral: #FF5A3D;
    --sjwj-black: #050505;
    --sjwj-white: #FFFFFF;
    --sjwj-navy: #102542;
    --sjwj-font: 'Inter', system-ui, -apple-system, sans-serif;
    --global-palette1: var(--sjwj-teal);
    --global-palette2: var(--sjwj-navy);
    --global-palette3: var(--sjwj-black);
    --global-palette4: var(--sjwj-navy);
    --global-palette9: var(--sjwj-white);
    --global-palette-highlight: var(--sjwj-teal);
    --global-palette-highlight-alt: var(--sjwj-navy);
    --global-palette-btn-bg: var(--sjwj-coral);
    --global-palette-btn-bg-hover: #e04e34;
    --global-palette-btn: var(--sjwj-white);
    --global-palette-btn-hover: var(--sjwj-white);
    --global-body-font-family: var(--sjwj-font);
    --global-heading-font-family: var(--sjwj-font);
    --global-primary-nav-font-family: var(--sjwj-font);
}

/* ============================================================
   GLOBAL TYPOGRAPHY
   ============================================================ */
body,
.entry-content,
.wp-block-group,
h1, h2, h3, h4, h5, h6,
p, li, a, button, input, select, textarea {
    font-family: var(--sjwj-font) !important;
}

body {
    color: var(--sjwj-black);
}

.sjwj-quick-answer {
    background: #f4f8ff;
    border-left: 4px solid var(--sjwj-teal);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 2rem 0;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.sjwj-quick-answer__title {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    line-height: 1.3;
}

.sjwj-quick-answer p:last-child {
    margin-bottom: 0;
}

.sjwj-faq {
    margin: 3rem 0;
}

.sjwj-faq__item {
    border: 1px solid #d9e2f2;
    border-radius: 10px;
    background: var(--sjwj-white);
    overflow: hidden;
}

.sjwj-faq__item + .sjwj-faq__item {
    margin-top: 1rem;
}

.sjwj-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.25rem;
    font-weight: 700;
    color: var(--sjwj-navy);
    background: #f8fafc;
    border: 0;
    cursor: pointer;
    text-align: left;
}

.sjwj-faq__question::after {
    content: '+';
    font-size: 1.5rem;
    line-height: 1;
    margin-left: 1rem;
    color: var(--sjwj-teal);
}

.sjwj-faq__item.is-open .sjwj-faq__question::after {
    content: '–';
}

.sjwj-faq__answer {
    display: none;
    padding: 0 1.25rem 1.25rem;
}

.sjwj-faq__item.is-open .sjwj-faq__answer {
    display: block;
}

.sjwj-faq__answer > *:first-child {
    margin-top: 1rem;
}

.sjwj-cta {
    background: linear-gradient(135deg, var(--sjwj-navy) 0%, var(--sjwj-teal) 100%);
    color: var(--sjwj-white);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
    margin: 3rem 0;
    box-shadow: 0 18px 40px rgba(16, 37, 66, 0.2);
}

.sjwj-cta h2,
.sjwj-cta h3,
.sjwj-cta p {
    color: inherit;
}

.sjwj-btn-primary,
.sjwj-cta__button,
.wp-block-button__link,
a.sjwj-btn,
.sjwj-cta .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sjwj-coral) !important;
    color: var(--sjwj-white) !important;
    border: none;
    font-family: var(--sjwj-font);
    font-weight: 700;
    border-radius: 999px;
    padding: 0.85rem 2rem;
    margin-top: 1rem;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sjwj-btn-primary:hover,
.sjwj-btn-primary:focus,
.sjwj-cta__button:hover,
.sjwj-cta__button:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
a.sjwj-btn:hover,
a.sjwj-btn:focus,
.sjwj-cta .wp-block-button__link:hover,
.sjwj-cta .wp-block-button__link:focus {
    background: #e04e34 !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(255, 90, 61, 0.3);
}

.sjwj-author-box {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: center;
    padding: 1.5rem;
    margin: 3rem 0;
    background: var(--sjwj-white);
    border: 1px solid #d9e2f2;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.sjwj-author-box__image {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #e7eef9;
    overflow: hidden;
}

.sjwj-author-box__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sjwj-author-box__name {
    margin: 0 0 0.25rem;
    font-size: 1.125rem;
}

.sjwj-author-box__meta,
.sjwj-author-box__bio {
    margin: 0;
}

@media (max-width: 767px) {
    .sjwj-author-box {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .sjwj-author-box__image {
        margin: 0 auto;
    }
}

/* ============================================================
   COMMUNITY HUB GRID
   ============================================================ */
.sjwj-community-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}
.sjwj-community-hub-card {
    display: block;
    text-decoration: none;
    background: #ffffff;
    border: 1px solid #d9e2f2;
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.sjwj-community-hub-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
    border-color: var(--sjwj-teal);
}
.sjwj-community-hub-card__body {
    padding: 1.5rem;
}
.sjwj-community-hub-card__name {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    color: var(--sjwj-navy);
}
.sjwj-community-hub-card__desc {
    font-size: 0.9rem;
    color: #4b5563;
    margin: 0 0 0.75rem;
    line-height: 1.5;
}
.sjwj-community-hub-card__price {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--sjwj-teal);
    margin: 0 0 0.75rem;
}
.sjwj-community-hub-card__cta {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--sjwj-coral);
}

/* ============================================================
   BUILDER GRID
   ============================================================ */
.sjwj-builder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}
.sjwj-builder-card {
    display: block;
    text-decoration: none;
    background: #ffffff;
    border: 1px solid #d9e2f2;
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.sjwj-builder-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
    border-color: var(--sjwj-teal);
}
.sjwj-builder-card__body { padding: 1.5rem; }
.sjwj-builder-card__name { margin: 0 0 0.5rem; font-size: 1.15rem; color: var(--sjwj-navy); }
.sjwj-builder-card__desc { font-size: 0.9rem; color: #4b5563; margin: 0 0 0.75rem; line-height: 1.5; }
.sjwj-builder-card__range { font-size: 0.85rem; font-weight: 700; color: var(--sjwj-teal); margin: 0 0 0.75rem; }
.sjwj-builder-card__cta { font-size: 0.9rem; font-weight: 700; color: var(--sjwj-coral); }

/* ============================================================
   STATS BAR
   ============================================================ */
.sjwj-stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
    text-align: center;
}
.sjwj-stat {
    padding: 1.5rem 1rem;
    background: #ffffff;
    border: 1px solid #d9e2f2;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}
.sjwj-stat__number {
    display: block;
    font-size: 2rem;
    font-weight: 900;
    color: var(--sjwj-teal);
    line-height: 1;
    margin-bottom: 0.4rem;
}
.sjwj-stat__label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sjwj-navy);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================================
   STEPS (Work With Us)
   ============================================================ */
.sjwj-steps { display: flex; flex-direction: column; gap: 1.5rem; margin: 2rem 0; }
.sjwj-step { display: flex; gap: 1.25rem; align-items: flex-start; }
.sjwj-step__number {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; min-width: 48px;
    background: var(--sjwj-teal); color: var(--sjwj-navy);
    font-size: 1.25rem; font-weight: 900; border-radius: 50%;
}
.sjwj-step__title { margin: 0 0 0.35rem; font-size: 1.1rem; color: var(--sjwj-navy); }
.sjwj-step__desc { margin: 0; color: #4b5563; }

/* ============================================================
   CONTACT OPTIONS
   ============================================================ */
.sjwj-contact-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; margin: 2rem 0; }
.sjwj-contact-option { background: #ffffff; border: 1px solid #d9e2f2; border-radius: 12px; padding: 1.5rem; text-align: center; }
.sjwj-contact-option__icon { font-size: 2rem; display: block; margin-bottom: 0.5rem; }
.sjwj-contact-option__title { margin: 0 0 0.5rem; font-size: 1rem; color: var(--sjwj-navy); }
.sjwj-contact-option__detail a { color: var(--sjwj-teal); font-weight: 700; text-decoration: none; }
.sjwj-contact-option__note { font-size: 0.8rem; color: #6b7280; margin: 0.25rem 0 0; }

/* ============================================================
   TRUST ROW
   ============================================================ */
.sjwj-trust-row { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 2rem 0; padding: 1.5rem; background: #f8fafc; border-radius: 12px; }
.sjwj-trust-item { font-weight: 700; color: var(--sjwj-navy); font-size: 0.95rem; white-space: nowrap; }

/* ============================================================
   SPECIALTY LIST
   ============================================================ */
.sjwj-specialty-list { list-style: none; padding: 0; margin: 1rem 0; }
.sjwj-specialty-list li { padding: 0.6rem 0; border-bottom: 1px solid #f0f4f8; font-size: 1rem; }
.sjwj-specialty-list li:last-child { border-bottom: none; }

/* ============================================================
   INFO BOX
   ============================================================ */
.sjwj-info-box { background: #fffbeb; border: 1px solid #fde68a; border-left: 4px solid #f59e0b; border-radius: 10px; padding: 1.5rem; margin: 2rem 0; }
.sjwj-info-box__title { font-weight: 700; margin-bottom: 0.5rem; color: var(--sjwj-navy); }

/* ============================================================
   NC COMMUNITY LIST
   ============================================================ */
.sjwj-nc-community-list { list-style: none; padding: 0; margin: 1rem 0; }
.sjwj-nc-community-list li { padding: 0.75rem 0; border-bottom: 1px solid #f0f4f8; font-size: 1rem; }
.sjwj-nc-community-list li:last-child { border-bottom: none; }
.sjwj-nc-community-list a { font-weight: 700; color: var(--sjwj-teal); }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.sjwj-page-hero {
    background: linear-gradient(135deg, var(--sjwj-navy) 0%, #1a3a5c 100%);
    color: var(--sjwj-white);
    padding: 4rem 2rem;
    text-align: center;
    border-radius: 16px;
    margin-bottom: 2rem;
}
.sjwj-page-hero h1 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 900;
    color: var(--sjwj-white);
    margin-bottom: 1rem;
}
.sjwj-page-hero__sub { font-size: 1.2rem; opacity: 0.85; margin-bottom: 1.5rem; }

/* ============================================================
   TABLE OF CONTENTS
   ============================================================ */
.sjwj-toc { background: #f8fafc; border: 1px solid #d9e2f2; border-left: 4px solid var(--sjwj-teal); border-radius: 10px; padding: 1.5rem; margin: 2rem 0; }
.sjwj-toc__title { font-weight: 700; margin-bottom: 0.75rem; font-size: 1rem; color: var(--sjwj-navy); }
.sjwj-toc__list { margin: 0; padding-left: 1.25rem; }
.sjwj-toc__list li { margin-bottom: 0.4rem; }
.sjwj-toc__list a { color: var(--sjwj-teal); text-decoration: none; font-weight: 500; }
.sjwj-toc__list a:hover { color: var(--sjwj-coral); text-decoration: underline; }

/* ============================================================
   COMMUNITY GRID (simple links, used on Moving to SJC page)
   ============================================================ */
.sjwj-community-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.sjwj-community-card {
    display: flex; align-items: center; justify-content: center;
    padding: 1rem; background: #ffffff; border: 2px solid #d9e2f2;
    border-radius: 10px; font-weight: 700; color: var(--sjwj-navy);
    text-decoration: none; text-align: center;
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.sjwj-community-card:hover { border-color: var(--sjwj-teal); color: var(--sjwj-teal); transform: translateY(-2px); }

/* ============================================================
   FORM SECTION
   ============================================================ */
.sjwj-form-section { margin: 2rem 0; }
.sjwj-form-section h2 { margin-bottom: 0.5rem; }

/* ============================================================
   FAQ — H3 VARIANT (no button/accordion, fully visible)
   Used on builder pages where WP-CLI stripped button tags
   ============================================================ */
.sjwj-faq__item h3 {
    padding: 1rem 1.25rem;
    font-weight: 700;
    color: var(--sjwj-navy);
    background: #f8fafc;
    border-radius: 8px 8px 0 0;
    margin: 0;
    font-size: 1rem;
    border-left: 4px solid var(--sjwj-teal);
}

.sjwj-faq__item h3 + p {
    padding: 1rem 1.25rem;
    margin: 0;
    border: 1px solid #d9e2f2;
    border-top: none;
    border-radius: 0 0 8px 8px;
    background: #ffffff;
    color: #374151;
    line-height: 1.6;
}

/* ============================================================
   FAQ — DETAILS/SUMMARY VARIANT (native HTML accordion)
   Used on Durbin Crossing, Julington Creek pages
   ============================================================ */
details.sjwj-faq__item {
    border: 1px solid #d9e2f2;
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
}

details.sjwj-faq__item + details.sjwj-faq__item {
    margin-top: 1rem;
}

details.sjwj-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.25rem;
    font-weight: 700;
    color: var(--sjwj-navy);
    background: #f8fafc;
    cursor: pointer;
    list-style: none;
    font-family: var(--sjwj-font);
    font-size: 1rem;
}

details.sjwj-faq__item summary::-webkit-details-marker {
    display: none;
}

details.sjwj-faq__item summary::after {
    content: '+';
    font-size: 1.5rem;
    line-height: 1;
    margin-left: 1rem;
    color: var(--sjwj-teal);
    flex-shrink: 0;
}

details.sjwj-faq__item[open] summary::after {
    content: '–';
}

details.sjwj-faq__item > *:not(summary) {
    padding: 0 1.25rem 1.25rem;
    color: #374151;
    line-height: 1.6;
}


/* ── Comparison table styling ──────────────────────────────────────── */
.entry-content table,
.page-content table {
    width: 100%;
    max-width: 860px;
    margin: 2rem auto;
    border-collapse: collapse;
    font-size: 0.97rem;
    line-height: 1.5;
}

.entry-content table th,
.page-content table th {
    background-color: #00DDEB;
    color: #050505;
    font-weight: 700;
    text-align: left;
    padding: 0.75rem 1rem;
    border: 1px solid #c0f5f8;
}

.entry-content table td,
.page-content table td {
    padding: 0.7rem 1rem;
    border: 1px solid #e0e0e0;
    vertical-align: top;
    color: #333;
}

.entry-content table tr:nth-child(even) td,
.page-content table tr:nth-child(even) td {
    background-color: #f7feff;
}

.entry-content table td:first-child,
.page-content table td:first-child {
    font-weight: 600;
    color: #050505;
    width: 30%;
}

@media (max-width: 600px) {
    .entry-content table th,
    .entry-content table td,
    .page-content table th,
    .page-content table td {
        padding: 0.5rem 0.6rem;
        font-size: 0.88rem;
    }
}