/*
Theme Name: Sleep Doctor
Template: devq-starter
Author: Josh Yager
Author URI: https://thedevq.com/
Description: Child theme for Sleep Doctor, built on DevQ Starter
Version: 1.0.0
*/

/* ──────────────────────────────────────────────────────
   Sleep Doctor — Custom Overrides
   ────────────────────────────────────────────────────── */

/* Service-page hero (Content block with .service-hero class) */
.content-block.service-hero {
    padding-top: 0;
    padding-bottom: 60px;
}

.content-block.service-hero h1 {
    font-size: clamp(2.4rem, 5vw, 4.25rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--primary);
    text-transform: none;
    font-weight: 600;
    margin-bottom: 32px;
}

.content-block.service-hero p {
    font-size: 1.05rem;
    line-height: 1.65;
    color: #3a3a3a;
}

@media (max-width: 767px) {
    .content-block.service-hero {
        padding-top: 0;
        padding-bottom: 40px;
    }
    .content-block.service-hero h1 {
        font-size: 2rem;
        line-height: 1.15;
    }
    .devq-header-standard .devq-header-logo img {
        margin: 0 !important;
    }
}

/* Section heading style — apply to any block heading via the block's heading classes */
.textimage-block .textimage-heading,
.cards-block .cards-heading,
.featureslist-block .featureslist-heading,
.testimonials-block .testimonials-heading,
.contactsplit-block .contactsplit-heading,
.pressbits-block .pressbits-heading {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--primary);
}

.content-block.service-symptoms h2,
.content-block.service-approach h2 {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--primary);
}

/* Hero signature — Poppins 300 (Joe staging update 2026-05-18, replacing prior Petemoss script). */
.hero-block .hero-subheading,
.font-script {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-size: 1.75rem;
    line-height: 1.1;
    letter-spacing: 0.06em;
    opacity: 0.95;
    margin-top: 28px;
}

/* Mobile: "Dr. Saema Tahir, M.D." still wraps onto two lines on narrow phones at 1.75rem.
   Sized below the desktop rule so it actually shrinks (not grows) on mobile. */
@media (max-width: 767px) {
    .hero-block .hero-subheading,
    .font-script {
        font-size: 1.5rem;
        letter-spacing: 0.04em;
        margin-top: 20px;
    }
}

@media (max-width: 420px) {
    .hero-block .hero-subheading,
    .font-script {
        font-size: 1.3rem;
        margin-top: 16px;
    }
}

.hero-block .hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 400;
    font-size: 0.95rem;
}

/* Hero headline — Poppins 600, with thin white rules above and below.
   Uses white-space: pre-line so newlines from the ACF heading field render as line breaks. */
.hero-block .hero-heading {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: clamp(2.4rem, 5vw, 4.5rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    white-space: pre-line;
    border-top: 1px solid rgba(255, 255, 255, 0.55);
    border-bottom: 1px solid rgba(255, 255, 255, 0.55);
    padding: 22px 0;
    margin: 22px 0;
    max-width: 720px;
}

/* Hide the in-hero primary button — Figma has none */
.hero-block .hero-buttons,
.hero-block .hero-primary-button,
.hero-block .hero-secondary-button {
    display: none !important;
}

/* Logo Bar — credentials row.
   Parent theme injects an inline <style> block per-instance after this stylesheet,
   so we bump specificity (3 classes) to override its defaults without !important. */
.logobar-block .container .logobar-logos {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 50px;
}
.logobar-block .logobar-logos .logobar-logo {
    max-height: 150px;
    width: auto;
    max-width: 250px;
    object-fit: contain;
}

/* Header — remove background CTA button visual + add pipe separators between top-level nav items */
.site-header .header-cta-button {
    display: none !important;
}

.site-header .menu > li + li::before,
.site-header .nav-menu > li + li::before,
.site-header .primary-menu > li + li::before {
    content: "|";
    color: rgba(31, 61, 90, 0.35);
    margin: 0 14px;
    font-weight: 300;
    pointer-events: none;
}

/* Sleep Doctor — Text Image (fullbleed + bg-accent) tweaks.
   Structural fullbleed/bg-accent rules now live in the parent block's <style>.
   These rules are Sleep Doctor-specific overlays on top of those options. */
.textimage-block.textimage-bg-accent .textimage-content p {
    margin-bottom: 1.25em;
    line-height: 1.65;
}

.textimage-block.textimage-bg-accent .textimage-content p:last-child {
    margin-bottom: 0;
}

/* Merged Symptoms list inside Text Image content — matches the previous
   standalone .service-symptoms list styling now that symptoms are inlined. */
.textimage-block.textimage-bg-accent .textimage-content ul {
    margin: 0 0 1.25em;
    padding-left: 1.25em;
}
.textimage-block.textimage-bg-accent .textimage-content li {
    margin-bottom: 0.5em;
    line-height: 1.55;
}
.textimage-block.textimage-bg-accent .textimage-content li strong {
    color: var(--primary);
}

/* Strip the .btn pill style — button renders as an uppercase, letter-spaced text link.
   Parent .textimage-text is a flex column, so align-self stops the link from stretching. */
.textimage-block.textimage-fullbleed.textimage-bg-accent .textimage-button {
    background: transparent;
    border: 0;
    padding: 0;
    min-width: 0;
    width: auto;
    align-self: flex-start;
    color: var(--primary);
    font-weight: 600;
    font-size: 1.35rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    text-decoration: none;
    border-radius: 0;
    margin-top: 32px;
    box-shadow: none;
    transition: opacity 0.2s ease;
}

.textimage-block.textimage-fullbleed.textimage-bg-accent .textimage-button:hover,
.textimage-block.textimage-fullbleed.textimage-bg-accent .textimage-button:focus-visible {
    background: transparent;
    color: var(--primary);
    border: 0;
    transform: none;
    box-shadow: none;
    opacity: 0.7;
}

/* Footer Contact Split: white card on lavender backdrop */
.contactsplit-block {
    background: var(--accent, #F0F2F8);
}

/* Fullbleed + bg_accent: when text content is long (e.g. types + misconceptions + symptoms),
   the image side stops at its natural height and the right column shows a white gap below.
   Force the image column to stretch to the text column height and fill it with object-fit cover.
   Also strip the parent block's max-height: 100vh cap since the text panel can legitimately
   exceed 100vh on long content pages and the image should stay flush. */
.textimage-block.textimage-fullbleed.textimage-bg-accent .textimage-grid {
    align-items: stretch;
    min-height: 80vh;
}

.textimage-block.textimage-fullbleed.textimage-bg-accent .textimage-image {
    align-self: stretch;
    height: auto;
    max-height: none;
    min-height: 100%;
    overflow: hidden;
}

.textimage-block.textimage-fullbleed.textimage-bg-accent .textimage-image img {
    width: 100%;
    height: 100%;
    max-height: none;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 0;
}

@media (max-width: 767px) {
    .textimage-block.textimage-fullbleed.textimage-bg-accent .textimage-image,
    .textimage-block.textimage-fullbleed.textimage-bg-accent .textimage-image img {
        min-height: 0;
        height: auto;
    }
    .textimage-block.textimage-fullbleed.textimage-bg-accent .textimage-image img {
        aspect-ratio: 4 / 3;
    }
}

.contactsplit-block .contactsplit-grid {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(31, 61, 90, 0.08);
    overflow: hidden;
}

/* Sleep apnea symptom list polish */
.content-block.service-symptoms ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.content-block.service-symptoms li {
    margin-bottom: 0.5rem;
    line-height: 1.55;
}

/* Header CTA button — match the Figma periwinkle */
.site-header .header-cta-button,
.header-cta-button {
    background: var(--secondary);
    color: #fff;
    border-radius: 6px;
    padding: 14px 28px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    transition: var(--transition-default, all 0.25s ease);
}

.site-header .header-cta-button:hover,
.header-cta-button:hover {
    background: var(--primary);
    color: #fff;
}

/* Featured in the Press — match Figma: top + bottom rules around the logo bar,
   full color logos, larger sizing. Class chaining (3 classes) wins over the
   pressbits block's inline <style> default of 2 classes without !important. */
.pressbits-block .container .pressbits-header {
    margin-bottom: 32px;
}

.pressbits-block .container .pressbits-logo-bar {
    border-top: 1px solid rgba(31, 61, 90, 0.18);
    border-bottom: 1px solid rgba(31, 61, 90, 0.18);
    padding: 40px 0;
    margin-bottom: 60px;
    gap: 60px;
    justify-content: space-around;
}

.pressbits-block .pressbits-logo-bar .pressbits-logo {
    max-height: 80px;
    max-width: 180px;
    filter: none;
    opacity: 1;
}

.pressbits-block .pressbits-logo-bar .pressbits-logo-link:hover .pressbits-logo,
.pressbits-block .pressbits-logo-bar .pressbits-logo:hover {
    filter: none;
    opacity: 0.75;
}

@media (max-width: 767px) {
    .pressbits-block .container .pressbits-logo-bar {
        gap: 32px;
        padding: 28px 0;
        margin-bottom: 36px;
    }

    .pressbits-block .pressbits-logo-bar .pressbits-logo {
        max-height: 50px;
        max-width: 120px;
    }
}

/* Press Bits — card overlay variants + corner badges (CPT-driven grid).
   Cards live inside .pressbits-grid; thumbnail wrapper is .pressbits-thumb. */

/* Corner badge — pin (when pinned), play (when type=video), carousel (when type=carousel).
   Suppressed when the overlay style is dark_bar_top because the bar already shows the pin inline. */
.pressbits-block .pressbits-thumb .pressbits-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 5px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--primary, #1F3D5A);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    z-index: 2;
}

.pressbits-block .pressbits-badge-icon {
    width: 100%;
    height: 100%;
    display: block;
}

.pressbits-block .pressbits-badge-pin {
    background: rgba(31, 61, 90, 0.92);
    color: #fff;
}

.pressbits-block .pressbits-badge-video {
    background: rgba(255, 255, 255, 0.95);
    color: #1F3D5A;
}

/* Overlay base */
.pressbits-block .pressbits-overlay {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.pressbits-block .pressbits-overlay-text {
    display: block;
}

/* Variant 1 — dark_bar_top: black bar across the top with white uppercase text + inline pin */
.pressbits-block .pressbits-overlay-dark_bar_top {
    top: 0;
    left: 0;
    right: 0;
    background: #0E0E0E;
    color: #fff;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pressbits-block .pressbits-overlay-dark_bar_top .pressbits-overlay-text {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.25;
}

.pressbits-block .pressbits-overlay-dark_bar_top .pressbits-overlay-pin {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: #fff;
}

.pressbits-block .pressbits-overlay-dark_bar_top .pressbits-overlay-pin .pressbits-badge-icon {
    width: 100%;
    height: 100%;
}

/* Variant 2 — pill_center: muted teal/blue pill in the middle of the card with white serif-y caps */
.pressbits-block .pressbits-overlay-pill_center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #527386;
    color: #fff;
    padding: 14px 24px;
    border-radius: 4px;
    text-align: center;
    max-width: 80%;
}

.pressbits-block .pressbits-overlay-pill_center .pressbits-overlay-text {
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.2;
}

/* Variant 3 — white_card_bottom: white box with serif dark text positioned in the lower portion */
.pressbits-block .pressbits-overlay-white_card_bottom {
    left: 12px;
    right: 12px;
    bottom: 28px;
    background: #fff;
    color: #1a1a1a;
    padding: 12px 14px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.pressbits-block .pressbits-overlay-white_card_bottom .pressbits-overlay-text {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 500;
}

/* Variant 4 — light_text_center: light text centered, no background */
.pressbits-block .pressbits-overlay-light_text_center {
    top: 50%;
    left: 16px;
    right: 16px;
    transform: translateY(-50%);
    color: #fff;
    text-align: center;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.pressbits-block .pressbits-overlay-light_text_center .pressbits-overlay-text {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.1rem;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Tablet trim for overlays */
@media (max-width: 1199px) {
    .pressbits-block .pressbits-overlay-dark_bar_top .pressbits-overlay-text {
        font-size: 0.72rem;
    }

    .pressbits-block .pressbits-overlay-pill_center .pressbits-overlay-text,
    .pressbits-block .pressbits-overlay-light_text_center .pressbits-overlay-text {
        font-size: 0.95rem;
    }

    .pressbits-block .pressbits-overlay-white_card_bottom .pressbits-overlay-text {
        font-size: 0.9rem;
    }
}

@media (max-width: 767px) {
    .pressbits-block .pressbits-thumb .pressbits-badge {
        width: 24px;
        height: 24px;
        padding: 4px;
        top: 6px;
        right: 6px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Gravity Forms — scoped to the footer card. !important throughout because
   GF ships its own opinionated CSS at higher specificity than child theme
   selectors and silently wins otherwise. Apply only inside .sd-footer-form-card
   so we don't accidentally restyle GF on every page.
   ───────────────────────────────────────────────────────────────────────── */
.sd-footer-form-card .gform_wrapper { margin: 0 !important; }

.sd-footer-form-card .gform_wrapper form { margin: 0 !important; }

.sd-footer-form-card .gform_wrapper .gform_fields,
.sd-footer-form-card .gform_wrapper ul.gform_fields {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.sd-footer-form-card .gform_wrapper .gfield {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-column: 1 / -1 !important;
}

.sd-footer-form-card .gform_wrapper .gfield_label,
.sd-footer-form-card .gform_wrapper .gfield_label.gform-field-label {
    color: #6b6b6b !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.sd-footer-form-card .gform_wrapper .gfield_required {
    color: #c0392b !important;
    margin-left: 2px !important;
}

.sd-footer-form-card .gform_wrapper input[type="text"],
.sd-footer-form-card .gform_wrapper input[type="email"],
.sd-footer-form-card .gform_wrapper input[type="tel"],
.sd-footer-form-card .gform_wrapper input[type="number"],
.sd-footer-form-card .gform_wrapper input[type="url"],
.sd-footer-form-card .gform_wrapper textarea,
.sd-footer-form-card .gform_wrapper select {
    width: 100% !important;
    padding: 14px 18px !important;
    font-size: 0.95rem !important;
    font-family: inherit !important;
    color: #2b2b2b !important;
    background: #fff !important;
    border: 1px solid rgba(31, 61, 90, 0.18) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
    min-height: 50px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.sd-footer-form-card .gform_wrapper textarea {
    min-height: 110px !important;
    resize: vertical !important;
}

.sd-footer-form-card .gform_wrapper input::placeholder,
.sd-footer-form-card .gform_wrapper textarea::placeholder {
    color: #8a8a8a !important;
    opacity: 1 !important;
}

/* Select: custom chevron + match placeholder color when nothing selected */
.sd-footer-form-card .gform_wrapper select,
.sd-footer-form-card .gform_wrapper .ginput_container_select select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    padding-right: 48px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'><path d='M1 1L7 7L13 1' stroke='%235B6BA8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 18px center !important;
    background-size: 14px 8px !important;
    cursor: pointer !important;
}

.sd-footer-form-card .gform_wrapper select:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'><path d='M1 1L7 7L13 1' stroke='%231F3D5A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}

.sd-footer-form-card .gform_wrapper select:has(option.gf_placeholder:checked) {
    color: #8a8a8a !important;
}

.sd-footer-form-card .gform_wrapper select option {
    color: #2b2b2b !important;
    background: #fff !important;
}

.sd-footer-form-card .gform_wrapper select option.gf_placeholder {
    color: #8a8a8a !important;
}

.sd-footer-form-card .gform_wrapper input:focus,
.sd-footer-form-card .gform_wrapper textarea:focus,
.sd-footer-form-card .gform_wrapper select:focus {
    outline: none !important;
    border-color: var(--secondary, #5B6BA8) !important;
    box-shadow: 0 0 0 3px rgba(91, 107, 168, 0.18) !important;
}

.sd-footer-form-card .gform_wrapper .gfield_description,
.sd-footer-form-card .gform_wrapper .gform_validation_errors {
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
    margin-top: 6px !important;
    color: #c0392b !important;
}

/* Submit button — full width, lavender, uppercase */
.sd-footer-form-card .gform_wrapper .gform_footer,
.sd-footer-form-card .gform_wrapper .gform_page_footer {
    margin: 22px 0 0 !important;
    padding: 0 !important;
}

.sd-footer-form-card .gform_wrapper .gform_button,
.sd-footer-form-card .gform_wrapper input[type="submit"].gform_button {
    width: 100% !important;
    background: var(--secondary, #5B6BA8) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 16px 28px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.16em !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, transform 0.15s ease !important;
}

.sd-footer-form-card .gform_wrapper .gform_button:hover,
.sd-footer-form-card .gform_wrapper input[type="submit"].gform_button:hover {
    background: var(--primary, #1F3D5A) !important;
    color: #fff !important;
}

.sd-footer-form-card .gform_wrapper .gform_confirmation_wrapper,
.sd-footer-form-card .gform_wrapper .gform_confirmation_message {
    color: #2b2b2b !important;
    text-align: center !important;
    padding: 20px 0 !important;
    font-size: 1rem !important;
}

/* Visually hide field labels — keep accessible for screen readers, mockup uses placeholder-only */
.sd-footer-form-card .gform_wrapper .gfield_label,
.sd-footer-form-card .gform_wrapper .gfield_label.gform-field-label {
    position: absolute !important;
    left: -9999px !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

.sd-footer-form-card .gform_wrapper .gfield_required {
    display: none !important;
}

/* ──────────────────────────────────────────────────────
   Mobile Audit Fixes (2026-05-06) — Scratch/MOBILE-AUDIT.md
   ────────────────────────────────────────────────────── */

/* P0 #3 — cards block: card padding pushed total width past viewport at 375 (9-card sleep-disorders parent overflowed). Force border-box + min-width: 0 on grid items.
   If validated long-term, promote to wp-content/themes/devq-starter/blocks/cards/code.php (~line 156). */
.cards-block .cards-grid > *,
.cards-block .cards-card {
    box-sizing: border-box;
    min-width: 0;
}

/* P0 #4 — textimage block: grid items defaulted to min-content, so the image's intrinsic width or unbreakable headings (e.g. "Neurodevelopmental") expanded the track past viewport. Force min-width: 0 + max-width 100% on children, and overflow-wrap on long words.
   If validated long-term, promote to wp-content/themes/devq-starter/blocks/textimage/code.php (~line 121). */
.textimage-block .textimage-grid > *,
.textimage-block .textimage-text,
.textimage-block .textimage-image {
    min-width: 0;
    max-width: 100%;
}

.textimage-block .textimage-image img {
    max-width: 100%;
    height: auto;
}

.textimage-block .textimage-heading,
.textimage-block .textimage-content,
.textimage-block .textimage-text {
    overflow-wrap: anywhere;
    word-break: normal;
}

/* P1 #6 — home hero: 85vh "large" was 90vh effective with safe-area; pushed all content below the fold on iPhone SE. Cap at 65vh on small mobile and shrink the H1. */
@media (max-width: 420px) {
    .hero-block.hero-height-large,
    .hero-block.hero-height-full {
        min-height: 65vh;
    }
    .hero-block .hero-heading {
        font-size: 32px;
        line-height: 1.1;
    }
    .hero-block .hero-eyebrow {
        font-size: 13px;
        letter-spacing: 0.06em;
    }
}

/* P1 #5 + #8 — service-page H1s wrapped to 4-5 lines at 32px on 375; H2s wrapped to 3 lines at 36px. Tighten on small mobile. */
@media (max-width: 420px) {
    .content-block.service-hero h1,
    main h1,
    .site-content h1 {
        font-size: 28px;
        line-height: 1.15;
    }
    h2,
    .textimage-heading,
    .cards-heading,
    .pressbits-heading,
    .featureslist-heading {
        font-size: 28px;
        line-height: 1.15;
    }
}

/* P1 #9 — Gravity Form selects: chevron icon overlapped placeholder text "Are you an existing patient?*" at 375 width. The .sd-footer-form-card rule (3-class specificity) sets padding-right: 48px and the placeholder text needs ~196px for ~29 chars at 14px — but the input is only 257px wide leaving 191px for text. Shrink the font on small mobile so the full placeholder fits, and match the .sd-footer-form-card specificity so the override actually wins. */
@media (max-width: 420px) {
    .gform_wrapper .ginput_container_select select,
    .gform_wrapper select.gfield_select,
    .sd-footer-form-card .gform_wrapper select,
    .sd-footer-form-card .gform_wrapper .ginput_container_select select,
    .gfield select {
        font-size: 12.5px !important;
        padding-right: 30px !important;
        padding-left: 14px !important;
        background-position: calc(100% - 10px) 50% !important;
    }
}

/* P1 #10 — superseded by the .content-block.service-hero { padding-top: 0 } override at line 36 (≤767px). */

/* P1 #7 — mobile slide-in menu: when 9-item Sleep Disorders submenu expands, the static NAP+social footer block consumes vertical real estate that pushes the last 2 sub-items below the fold. The .devq-slidein-nav already has overflow-y: auto, but discoverability is poor. Fixes:
   - guarantee the flex parent allows nav to shrink (min-height: 0 on the flex item)
   - hide the social row when ANY submenu is open to free ~60px
   - add a subtle scroll-shadow cue on the nav so users know more is below */
.devq-mobile-slidein .devq-slidein-nav {
    min-height: 0;
    /* faint scroll cue: bottom shadow appears when nav can scroll further */
    background:
        linear-gradient(white 30%, rgba(255, 255, 255, 0)) 0 0 / 100% 12px no-repeat,
        radial-gradient(50% 8px at 50% 0, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0)) 0 100% / 100% 8px no-repeat;
    background-attachment: local, scroll;
}

html.devq-submenu-open .devq-slidein-social {
    display: none;
}

html.devq-submenu-open .devq-slidein-footer {
    padding-top: 12px;
    padding-bottom: 12px;
}

/* P2 #11 — mobile menu chevron: positioned at top: 50% of the entire <li>; when sub-menu opens the parent <li> grows tall and the chevron drifts to the middle of the expanded list. Anchor to the top so it stays on the parent text row. */
.devq-mobile-slidein .devq-submenu-toggle {
    top: 18px !important;
    transform: none !important;
}

.devq-mobile-slidein .submenu-open > .devq-submenu-toggle {
    transform: rotate(180deg) !important;
    transform-origin: center 8px;
}

/* P2 #13 — slick carousel pager dots at 16x16 are below the 40px tap-target floor. Expand the hit area while keeping the visible dot small. */
.slick-dots li {
    width: 40px !important;
    height: 40px !important;
    margin: 0 4px !important;
}

/* P2 #14 — textimage "Learn More" button rendered as 32px-tall text link; bump to 44px min target. */
.textimage-block .btn.textimage-button,
.textimage-block .textimage-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 0;
}

/* ──────────────────────────────────────────────────────
   Client Revisions — 2026-05-07
   See Plans & Notes/handoff docs/sleep-doctor-client-revisions-handoff-2026-05-07.md
   ────────────────────────────────────────────────────── */

/* #2 — cap "How Dr. Tahir Approaches Sleep" home textimage height.
   Scoped via :not(.textimage-image-left) to target the second home textimage
   (image-right variant); the first home block uses image-left and keeps full bleed.
   Specificity has to beat the existing fullbleed/bg-accent stretch rules above. */
body.home .textimage-block.textimage-fullbleed.textimage-bg-accent:not(.textimage-image-left) .textimage-grid {
    min-height: 0;
    align-items: stretch;
}
body.home .textimage-block.textimage-fullbleed.textimage-bg-accent:not(.textimage-image-left) .textimage-image,
body.home .textimage-block.textimage-fullbleed.textimage-bg-accent:not(.textimage-image-left) .textimage-image img {
    min-height: 0;
}
body.home .textimage-block.textimage-fullbleed.textimage-bg-accent:not(.textimage-image-left) .textimage-image img {
    object-fit: cover;
}

/* #3 — Text Image bg accent color = #F7FDFD per Figma. Scoped to the block so the
   change doesn't leak into other components (e.g. .contactsplit-block) that also
   read var(--accent). The parent's textimage code emits `background: var(--accent, #F0F2F8)`
   on .textimage-text — defining --accent on the block instance overrides that fallback. */
.textimage-block.textimage-bg-accent {
    --accent: #F7FDFD;
}

/* #4 — H1 50px ALL CAPS on subpages. Mobile breakpoints step down: 34px ≤767px,
   28px ≤420px (matches the existing mobile-audit floor). Specificity 0,4,2 beats
   both the existing service-hero rule (0,2,1) and the mobile-audit rule (0,2,1). */
body:not(.home) h1,
body:not(.home) .content-block.service-hero h1 {
    font-size: 50px;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 32px;
}

@media (max-width: 767px) {
    body:not(.home) h1,
    body:not(.home) .content-block.service-hero h1 {
        font-size: 34px;
    }
}

@media (max-width: 420px) {
    body:not(.home) h1,
    body:not(.home) .content-block.service-hero h1 {
        font-size: 28px;
    }
}

/* #5 — body weight 300 (Poppins 300 is already loaded by parent's font_embed). */
body,
p,
li,
ul,
ol {
    font-weight: 300;
}

/* #6 — hide the .sd-footer-logo (the "Dr. Saema Tahir" logo above
   "Insurance and Payment Policy") on /request-an-appointment/ only.
   The site-header logo stays visible — client wording referred to the
   logo inside the form/contact column, not the header. */
body.page-id-294 .sd-footer-logo {
    display: none;
}

/* #10a — sticky nav. Header tag already has z-index 100 + white bg from the
   parent's inline <style>; only position needs to change, plus an .is-scrolled
   shadow cue toggled by sticky-nav.js. */
.devq-header-wrap.devq-header-standard {
    position: sticky;
    top: 0;
    z-index: 100;
    transition: box-shadow 0.2s ease;
}
.devq-header-wrap.devq-header-standard.is-scrolled {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Cards block — accent background (added 2026-05-18 per Joe/Saema staging review) */
.cards-block {
    background: var(--accent, #F0F2F8);
}