/* ============================================================
   DISCERNING AUTHORITY — brand tokens & base type
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Public+Sans:wght@400;500;600;700&display=swap');

:root {
    --bone: #F7F4EF;
    --ink: #211D1B;
    --plum: #4B2E3D;
    --plum-dark: #37202C;
    --plum-tint: #EDE8EA;
    --clay: #8C7568;
    --sage: #6B7A63;
    --hairline: #DED7CC;
}

body {
    font-family: 'Public Sans', sans-serif;
}

h1, h2 {
    font-family: 'Fraunces', serif;
}

h3, h4, h5, h6 {
    font-family: 'Public Sans', sans-serif;
}

/* Baseline link color — the original file never set this site-wide, only in
   specific scoped spots, which is why things like the "Read more" links on
   the blog listing page were falling back to the theme's default blue. */
a,
.read-more {
    color: var(--plum);
}
a:hover,
.read-more:hover {
    color: var(--plum-dark);
}

/* DESKTOP LEFT SIDEBAR */
@media (min-width: 769px) {
    /* Remove the normal header */
    .site-header {
        display: none;
    }
    /* Let the site use the full browser width */
    #page {
        max-width: none;
        width: 100%;
        margin: 0;
    }
    /* Fixed sidebar */
    #left-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        height: 100vh;
        background: var(--ink);
        z-index: 100;
        padding: 70px 28px;
        box-sizing: border-box;
    }
    /* Remove the white box around the navigation */
    #left-sidebar .inside-left-sidebar,
    #left-sidebar .main-navigation {
        background: transparent;
    }
    /* Main content moves to the right of sidebar */
    #primary {
        width: calc(100% - 280px);
        margin-left: 280px;
        float: none;
    }
    /* Navigation links */
    #left-sidebar .main-navigation a {
        color: #bdbdbd;
        background: transparent;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        padding: 7px 0;
    }
    /* Hover/current page */
    #left-sidebar .main-navigation a:hover,
    #left-sidebar .main-navigation .current-menu-item > a {
        color: #ffffff;
        background: transparent;
    }
    /* Keep sidebar menu items on one line */
    #left-sidebar .main-navigation a {
        white-space: nowrap;
    }
    /* Name / logo at top of sidebar — desktop only. This used to have no
       media-query scope at all, which is what caused it to fall into the
       normal page flow (and show up as a stray, illegible white-on-light
       box) near the bottom of every page on mobile. */
    #left-sidebar::before {
        content: "Sarah Sheu, MD";
        display: block;
        color: #ffffff;
        font-family: 'Fraunces', serif;
        font-size: 25px;
        font-weight: 600;
        letter-spacing: -0.02em;
        line-height: 1.15;
        margin-bottom: 55px;
    }
}

/* CLEAN EDITORIAL BLOG LAYOUT */
@media (min-width: 769px) {
    /* White background instead of gray WordPress background */
    body,
    #page,
    .site-content,
    #primary,
    .site-main {
        background: #ffffff;
    }
    /* Give the main content comfortable spacing */
    #primary {
        padding: 0 70px;
        box-sizing: border-box;
    }
    /* Don't let articles stretch across the entire screen */
    .site-main {
        max-width: 1050px;
        margin-left: auto;
        margin-right: auto;
    }
    /* Remove the individual white "cards" */
    .inside-article {
        background: transparent;
        padding: 55px 0 !important;
    }
    /* Separate posts with a subtle line instead */
    .site-main > article {
        margin-bottom: 0 !important;
        border-bottom: 1px solid var(--hairline);
    }
    /* Cleaner blog titles */
    .blog .entry-title,
    .archive .entry-title {
        font-family: 'Fraunces', serif;
        font-size: 38px;
        line-height: 1.12;
        font-weight: 500;
        letter-spacing: -0.025em;
        margin-bottom: 10px;
        color: var(--ink);
    }
    /* Metadata */
    .blog .entry-meta,
    .archive .entry-meta {
        font-size: 15px;
        color: var(--clay);
    }
    /* Post preview text */
    .blog .entry-summary,
    .blog .entry-content,
    .archive .entry-summary {
        font-size: 18px;
        line-height: 1.6;
        margin-top: 28px;
        color: var(--ink);
    }
    /* Hide category + comment clutter underneath posts */
    footer.entry-meta {
        display: none;
    }
}

/* SINGLE ARTICLE LAYOUT */
@media (min-width: 769px) {
    /* Narrower article column */
    .single-post .site-main {
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }
    /* Comfortable space above/below article */
    .single-post .inside-article {
        padding: 65px 0 !important;
    }
    /* Article headline */
    .single-post .entry-title {
        font-family: 'Fraunces', serif;
        font-size: 46px;
        line-height: 1.08;
        font-weight: 500;
        letter-spacing: -0.035em;
        margin-bottom: 14px;
        color: var(--ink);
    }
    /* Date / author line */
    .single-post .entry-meta {
        font-size: 15px;
        color: var(--clay);
        margin-bottom: 36px;
    }
    /* Article body */
    .single-post .entry-content {
        font-size: 18px;
        line-height: 1.7;
    }
    /* Paragraph spacing */
    .single-post .entry-content p {
        margin-bottom: 1.5em;
    }
    /* Images fill the editorial column */
    .single-post .entry-content img {
        width: 100%;
        height: auto;
    }
}

/* Correct desktop content centering */
@media (min-width: 769px) {
    /* Stop GeneratePress's original sidebar grid from affecting positioning */
    .site-content {
        display: block;
    }
    /* White panel begins immediately after our 280px sidebar */
    #primary {
        width: auto !important;
        float: none !important;
        margin-left: 280px !important;
        margin-right: 0 !important;
        padding-left: 70px;
        padding-right: 70px;
    }
    /* Center article within the entire white panel */
    .single-post .site-main {
        width: 100%;
        max-width: 900px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Breadcrumb above article */
.single-post .sarah-breadcrumb {
    font-size: 15px;
    color: var(--clay);
    margin-bottom: 30px;
}
.single-post .sarah-breadcrumb a {
    color: var(--clay);
    text-decoration: none;
}
.single-post .breadcrumb-arrow {
    margin: 0 8px;
    color: var(--clay);
}

/* Category pill - individual posts and blog listings */
.sarah-category-pill {
    display: inline-block;
    background: var(--plum-tint);
    color: var(--plum);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    padding: 8px 14px;
    border-radius: 999px;
    margin-bottom: 20px;
}

/* Hide default GeneratePress date/author line */
.entry-header > .entry-meta {
    display: none;
}

/* Custom article metadata */
.sarah-post-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 15px;
    color: var(--clay);
    margin-top: 8px;
    margin-bottom: 36px;
}
.sarah-post-meta a {
    color: var(--clay);
    text-decoration: none;
}
.sarah-post-meta a:hover {
    color: var(--ink);
}
.sarah-post-meta .meta-dot {
    color: var(--clay);
}

/* Article disclosure box */
.single-post .sarah-disclosure-box {
    margin: 34px 0 40px;
    padding: 18px 20px;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    background: var(--plum-tint);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.55;
}
.single-post .sarah-disclosure-box strong {
    color: var(--ink);
    font-weight: 700;
}

/* Social icons at bottom of fixed sidebar */
@media (min-width: 769px) {
    #left-sidebar .inside-left-sidebar {
        height: 100%;
        position: relative;
    }
    #left-sidebar .wp-block-social-links {
        position: absolute;
        bottom: 5px;
        left: 0;
        margin: 0;
        gap: 14px;
    }
    #left-sidebar .wp-social-link {
        background: transparent !important;
    }
    #left-sidebar .wp-social-link svg {
        fill: #aeb4bd;
        width: 22px;
        height: 22px;
    }
    #left-sidebar .wp-social-link:hover svg {
        fill: #ffffff;
    }
}

/* FIX SOCIAL ICON WIDGET IN SIDEBAR */
@media (min-width: 769px) {
    #left-sidebar .inside-left-sidebar {
        height: 100%;
        position: relative;
    }
    /* Position the entire social widget at the bottom */
    #left-sidebar .widget:has(.wp-block-social-links) {
        position: absolute !important;
        bottom: 20px;
        left: 0;
        width: auto !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
    }
    /* Reset the social icons block itself */
    #left-sidebar .wp-block-social-links {
        position: static !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 14px;
    }
    /* Remove circles/backgrounds around icons */
    #left-sidebar .wp-social-link {
        background: transparent !important;
        margin: 0 !important;
    }
    /* Icon appearance */
    #left-sidebar .wp-social-link svg {
        width: 22px;
        height: 22px;
        fill: #aeb4bd;
    }
    #left-sidebar .wp-social-link:hover svg {
        fill: #ffffff;
    }
}

/* Make sidebar social icons larger and less cramped */
@media (min-width: 769px) {
    #left-sidebar .wp-block-social-links {
        gap: 20px !important;
    }
    #left-sidebar .wp-social-link svg {
        width: 27px !important;
        height: 27px !important;
    }
    #left-sidebar .widget:has(.wp-block-social-links) {
        bottom: 24px !important;
        left: 24px !important;
    }
}

/* Hide the sidebar's social-icon widget on mobile. It's only positioned
   (bottom of the fixed sidebar) at desktop widths above — on mobile it has
   no positioning at all, so it was falling into normal page flow near the
   footer, same as the branding text used to. */
@media (max-width: 768px) {
    #left-sidebar .wp-block-social-links {
        display: none !important;
    }
}

/* MOBILE DESIGN */
@media (max-width: 768px) {
    /* Compact site header */
    .site-header .inside-header {
        padding: 20px 22px !important;
    }
    .site-title {
        font-size: 25px !important;
        line-height: 1.15 !important;
        margin: 0 !important;
    }
    /* Make mobile menu more compact */
    .main-navigation .menu-toggle {
        font-size: 16px !important;
        padding: 12px 22px !important;
    }
    /* Remove excessive article side padding */
    .single-post #primary {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 22px !important;
    }
    .single-post .site-main {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }
    .single-post .inside-article {
        padding: 34px 0 50px !important;
    }
    /* Mobile article headline */
    .single-post .entry-title {
        font-family: 'Fraunces', serif;
        font-size: 34px !important;
        line-height: 1.08 !important;
        font-weight: 500 !important;
        letter-spacing: -0.025em !important;
        margin-bottom: 14px !important;
        color: var(--ink);
    }
    /* Breadcrumb */
    .single-post .sarah-breadcrumb {
        font-size: 14px !important;
        margin-bottom: 22px !important;
    }
    /* Category pill */
    .sarah-category-pill {
        font-size: 13px !important;
        padding: 7px 12px !important;
        margin-bottom: 16px !important;
    }
    /* Author/date/read-time line */
    .sarah-post-meta {
        font-size: 14px !important;
        gap: 7px !important;
        margin-bottom: 26px !important;
    }
    /* Disclosure box */
    .single-post .sarah-disclosure-box {
        font-size: 15px !important;
        line-height: 1.5 !important;
        padding: 16px !important;
        margin: 26px 0 30px !important;
        border-radius: 10px !important;
    }
    /* Article text */
    .single-post .entry-content {
        font-size: 17px !important;
        line-height: 1.65 !important;
    }
}

/* FINAL MOBILE HEADER + ARTICLE SIZING */
@media screen and (max-width: 768px) {
    /* Compact top header */
    .site-header {
        position: relative;
        background: #ffffff;
    }
    .site-header .inside-header {
        padding: 20px 22px !important;
        min-height: 64px;
    }
    .site-branding {
        margin: 0 !important;
    }
    .site-title {
        font-family: 'Fraunces', serif;
        font-size: 24px !important;
        line-height: 1.1 !important;
        margin: 0 !important;
        color: var(--ink);
    }
    /* Move menu into upper-right */
    .main-navigation {
        position: absolute !important;
        top: 14px;
        right: 16px;
        width: auto !important;
        background: transparent !important;
        z-index: 999;
    }
    .main-navigation .menu-toggle {
        padding: 10px !important;
        font-size: 0 !important;
        background: transparent !important;
    }
    /* Keep hamburger, hide the word "Menu" */
    .main-navigation .menu-toggle .gp-icon {
        font-size: 22px !important;
    }
    /* Article area */
    body.single-post #primary {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 22px !important;
    }
    body.single-post .inside-article {
        padding: 34px 0 50px !important;
    }
    /* Smaller mobile headline */
    body.single-post .entry-header .entry-title {
        font-family: 'Fraunces', serif;
        font-size: 30px !important;
        line-height: 1.08 !important;
        letter-spacing: -0.025em !important;
        font-weight: 500 !important;
        color: var(--ink);
    }
    /* Category pill */
    body.single-post .sarah-category-pill {
        font-size: 13px !important;
        padding: 7px 12px !important;
        margin-bottom: 16px !important;
    }
    /* Breadcrumb */
    body.single-post .sarah-breadcrumb {
        font-size: 14px !important;
        margin-bottom: 20px !important;
    }
    /* Metadata */
    body.single-post .sarah-post-meta {
        font-size: 13px !important;
        line-height: 1.4 !important;
        gap: 6px !important;
        margin-bottom: 24px !important;
    }
}

/* Cleaner mobile metadata wrapping */
@media (max-width: 768px) {
    .sarah-post-meta .meta-dot {
        display: none;
    }
    .sarah-post-meta > span:not(.meta-dot):not(:first-child)::before {
        content: "•";
        margin-right: 7px;
        color: var(--clay);
    }
    .sarah-post-meta > span:not(.meta-dot) {
        white-space: nowrap;
    }
}

/* ARTICLE BODY TYPOGRAPHY */
/* Main article text */
.single-post .entry-content {
    font-family: 'Public Sans', sans-serif;
    font-size: 18px;
    line-height: 1.75;
    color: var(--ink);
}
/* Paragraph spacing */
.single-post .entry-content p {
    margin-bottom: 1.55em;
}
/* H2 section headings */
.single-post .entry-content h2 {
    font-family: 'Fraunces', serif;
    font-size: 32px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin-top: 2.2em;
    margin-bottom: 0.7em;
}
/* H3 subsection headings */
.single-post .entry-content h3 {
    font-family: 'Public Sans', sans-serif;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--ink);
    margin-top: 1.8em;
    margin-bottom: 0.6em;
}
/* Links */
.single-post .entry-content a {
    color: var(--plum);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
/* Lists */
.single-post .entry-content ul,
.single-post .entry-content ol {
    margin: 0 0 1.6em 1.3em;
}
.single-post .entry-content li {
    margin-bottom: 0.55em;
    padding-left: 0.2em;
}
/* Blockquotes */
.single-post .entry-content blockquote {
    margin: 2em 0;
    padding: 18px 24px;
    border-left: 4px solid var(--plum);
    background: var(--plum-tint);
    font-size: 19px;
    line-height: 1.65;
    color: var(--ink);
}
/* Images inside articles */
.single-post .entry-content figure {
    margin-top: 2.2em;
    margin-bottom: 2.2em;
}
.single-post .entry-content figcaption {
    font-size: 14px;
    line-height: 1.5;
    color: var(--clay);
    margin-top: 8px;
}

/* REFERENCES SECTION */
.single-post .entry-content .references-section {
    margin-top: 30px !important;
    padding-top: 28px !important;
    border-top: 1px solid var(--hairline);
}
/* Remove inherited H2 spacing */
.single-post .entry-content .references-section h2 {
    font-size: 28px;
    line-height: 1.2;
    margin: 0 0 20px 0 !important;
}
/* Citation text */
.single-post .entry-content .references-section ol {
    font-size: 15px;
    line-height: 1.65;
    color: var(--clay);
    padding-left: 1.4em;
    margin-top: 0 !important;
}
.single-post .entry-content .references-section li {
    margin-bottom: 12px;
}
.single-post .entry-content .references-section a {
    color: var(--plum);
    overflow-wrap: anywhere;
}
@media (max-width: 768px) {
    .single-post .entry-content .references-section {
        margin-top: 28px !important;
        padding-top: 24px !important;
    }
    .single-post .entry-content .references-section h2 {
        font-size: 24px;
    }
    .single-post .entry-content .references-section ol {
        font-size: 14px;
    }
}

/* Mobile typography */
@media (max-width: 768px) {
    .single-post .entry-content {
        font-size: 17px;
        line-height: 1.7;
    }
    .single-post .entry-content h2 {
        font-size: 26px;
        margin-top: 1.9em;
    }
    .single-post .entry-content h3 {
        font-size: 21px;
    }
    .single-post .entry-content blockquote {
        font-size: 17px;
        padding: 16px 18px;
    }
}

/* AUTHOR BOX */
.single-post .sarah-author-box {
    margin-top: 55px;
    padding: 30px 32px;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}
.single-post .sarah-author-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--clay);
    margin-bottom: 12px;
}
.single-post .sarah-author-name {
    font-family: 'Fraunces', serif;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 10px;
}
.single-post .sarah-author-box p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--clay);
    margin-bottom: 14px;
}
.single-post .sarah-author-link {
    font-size: 15px;
    font-weight: 600;
    color: var(--plum);
    text-decoration: none;
}
.single-post .sarah-author-link:hover {
    color: var(--plum-dark);
    text-decoration: underline;
}
@media (max-width: 768px) {
    .single-post .sarah-author-box {
        margin-top: 40px;
        padding: 24px 0;
    }
    .single-post .sarah-author-name {
        font-size: 22px;
    }
}

/* HOMEPAGE - remove default page title and excess top space */
.home .entry-header {
    display: none !important;
}
.home .inside-article {
    padding-top: 20px !important;
}
.home .entry-content {
    margin-top: 0 !important;
}
/* HOMEPAGE LATEST POSTS */
.home .wp-block-query .wp-block-post-title {
    font-family: 'Fraunces', serif;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 500;
}
.home .wp-block-query .wp-block-post-title a {
    color: var(--ink);
    text-decoration: none;
}
.home .wp-block-query .wp-block-post-title a:hover {
    color: var(--plum-dark);
}
/* Featured images */
.home .wp-block-query .wp-block-post-featured-image img {
    border-radius: 8px;
}

/* CLINIC PATIENTS PAGE — hide default WordPress page title */
.page-id-246 .entry-header {
    display: none !important;
}
.page-id-246 .entry-content {
    margin-top: 0 !important;
}
/* CLINIC PATIENTS — mobile Quick Guide table */
@media (max-width: 600px) {
    .page-id-246 .wp-block-table table {
        width: 100% !important;
        table-layout: auto !important;
    }
    .page-id-246 .wp-block-table th,
    .page-id-246 .wp-block-table td {
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
        white-space: normal !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        padding: 10px 8px !important;
    }
    .page-id-246 .wp-block-table th:first-child,
    .page-id-246 .wp-block-table td:first-child {
        width: 62% !important;
    }
    .page-id-246 .wp-block-table th:last-child,
    .page-id-246 .wp-block-table td:last-child {
        width: 38% !important;
    }
}

/* ABOUT PAGE — hide default WordPress title */
#post-67 .entry-header {
    display: none !important;
}
#post-67 .entry-content {
    margin-top: 0 !important;
}
/* HEADSHOT PHOTO — used on the Home page hero */
.site-headshot {
    margin: 0;
}
.site-headshot img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    border: 1px solid var(--hairline);
}
@media (max-width: 767px) {
    .site-headshot {
        max-width: 220px;
        margin: 0 auto;
    }
}

/* MOBILE MENU FIX — makes the dropdown menu opaque instead of see-through
   so menu text doesn't overlap the page content behind it */

/* 1. Give the menu panel itself a solid background when it's open.
   NOTE: all three selectors below must carry .toggled — the original file
   was missing it on the third one, which meant this cream panel (and the
   ink text color below) was quietly painting itself behind the desktop
   sidebar nav at all times, not just when the mobile menu is opened. */
.main-navigation.toggled .inside-navigation,
.main-navigation.toggled .main-nav,
.main-navigation.toggled .main-nav ul {
    background-color: var(--bone);
}
/* 2. Make sure the menu link text is dark and readable against that background */
.main-navigation.toggled .main-nav ul li a {
    color: var(--ink);
}
/* 3. Phone/tablet-only rules (screens 768px wide or narrower) —
   reinforces the background and adds a subtle shadow so the
   menu visually "lifts" off the page instead of blending into it */
@media (max-width: 768px) {
    .main-navigation.toggled {
        background-color: var(--bone);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        position: relative;
        z-index: 999;
    }
}
/* MOBILE MENU — increase font size of menu items so they're easier to read/tap */
.main-navigation .main-nav ul li a {
    font-size: 20px;
}

/* FOOTER CREDIT — remove "Built with GeneratePress," keep the copyright line.
   If Appearance > Customize > Footer Bar has a copyright text field, editing
   that directly is cleaner than this. This is a fallback in case that field
   isn't easy to find: it hides the original line entirely and replaces it
   with just the copyright text, styled to match. */
.site-footer .site-info {
    display: none;
}
.site-footer::after {
    content: "© 2026 Sarah Sheu, MD";
    display: block;
    text-align: center;
    padding: 20px 0;
    font-size: 14px;
    color: var(--clay);
}