/* ============================================================
   app.css

   CHANGED:
   - Removed `body { font-family: 'Poppins' }`. The storefront
     font family is now driven entirely by --site-font-family
     (see header.php inline styles / SettingsController).
   - Removed the legacy #mobile-menu rules. The mobile menu is
     fully styled by mobile-menu.php; the old rules here were
     forcing a white background over the dark overlay and a
     translateX(-100%) that pushed the panel off-screen.
   - Removed the legacy #dropdown-menu rules. menus.php renders
     dropdowns via the .dropdown-menu class inside .desktop-menu.
   - Replaced hard-coded .content heading / .page-content / .badge
     font sizes with the theme's --text-* tokens so Fonts &
     Typography -> Element Sizes is the single source of truth.
   - Added .content p / .content > div paragraph spacing (see the
     "Content paragraph spacing" block further down). This is the
     one place paragraph spacing is defined; page / blog / product
     views all inherit it automatically because they render their
     rich-text inside a .content wrapper.
   - Moved the [contact_form] intro (heading + subheading) styles
     out of the pages route and into this file. The intro is a
     shared component — renderContactIntro() emits its markup from
     PageController, so its styling belongs alongside .content and
     .sidebar-card, not buried in one route's inline <style>.
   ============================================================ */

header {
    transition: top 0.3s ease-in-out;
}

.active {
    font-weight: bold;
    color: #1a202c;
}

/* ---- Rich text (WYSIWYG output) ---- */
.page-content {
    font-size: var(--text-body);
    line-height: var(--line-height-normal, 1.5);
}

.page-content ul,
.page-content ol {
    padding-left: 2rem;
    margin-bottom: 1rem;
}

.page-content ul {
    list-style-type: disc;
}

.page-content ol {
    list-style-type: decimal;
}

.page-content ul li,
.page-content ol li {
    margin-bottom: 0.5rem;
}

.page-content a {
    color: #007bff;
    text-decoration: none;
}

.page-content a:hover {
    text-decoration: underline;
}

.page-content blockquote {
    border-left: 4px solid #e2e8f0;
    padding-left: 1rem;
    margin: 1rem 0;
    font-style: italic;
    color: #4a5568;
}

.page-content pre {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.375rem;
    overflow-x: auto;
    white-space: pre-wrap;
}

.page-content code {
    background-color: #f8f9fa;
    padding: 0.2rem 0.4rem;
    border-radius: 0.375rem;
    font-size: var(--text-small);
}

.image-arrow {
    color: white;
}

@media (max-width: 768px) {
    .mobile-search {
        width: 100%;
        margin-top: 1rem;
        margin-bottom: 2rem;
        display: block;
    }
}

/* ---- Account drawer (legacy markup, if it is still rendered
       anywhere outside drawer.php) ---- */
.drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 250px;
    height: 100%;
    background-color: white;
    box-shadow: -2px 0px 8px rgba(0, 0, 0, 0.2);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1000;
}

.drawer-open {
    transform: translateX(0);
}

.drawer-content {
    padding: 1rem;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.drawer-close {
    cursor: pointer;
    font-size: 1.5rem;
}

.drawer-item {
    margin: 0.5rem 0;
    padding: 0.5rem;
    font-size: var(--text-shell-item);
    font-weight: normal;
    color: #333;
    cursor: pointer;
    border-radius: 0;
    transition: background-color 0.3s ease, border-radius 0.3s ease;
}

.drawer-item:hover {
    background-color: #e2e8f0;
    border-radius: 0.5rem;
}

@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up {
    animation: fade-in-up 0.6s ease-out forwards;
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }

/* ---- FAQ (legacy markup) ---- */
.faq-item {
    overflow: hidden;
}

.faq-item .answer-container div {
    font-weight: normal !important;
    margin-bottom: -1px;
    margin-left: -1px;
    margin-right: -1px;
    width: calc(100% + 2px);
}

.faq-item.active .answer-container div {
    font-weight: normal !important;
}

/* ---- Rich text content (product / page body) ---- */
.content a {
    color: #1a0dab;
    text-decoration: underline;
}

.content blockquote {
    border-left: 4px solid #ccc;
    margin: 1.5em 0;
    padding: 0.75em 1em;
    background-color: #f9f9f9;
    font-style: italic;
    color: #555;
}

.content q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

.content q:before {
    content: open-quote;
}

.content q:after {
    content: close-quote;
}

/* ---- Content paragraph spacing ----
   Paragraphs come in two flavours depending on when they were saved:

     - <div>  — content saved before the Trix editor was switched to
                output <p> (older pages and blog posts).
     - <p>    — content saved after that change (new or re-saved).

   Both must get the same spacing, so both selectors carry the same
   rule. `.content > div` uses the direct-child combinator on purpose:
   nested divs inside figures, code blocks, or embeds are not touched.

   This is the single place on the site that decides paragraph
   spacing. Product descriptions, dynamic pages, blog posts and FAQ
   answers all render inside a `.content` wrapper, so they all inherit
   this rule automatically. */
.content p,
.content > div {
    margin-bottom: 1rem;
}

.content ul, .content ol {
    padding-left: 1.5rem;
    margin: 1rem 0;
}

.content ul {
    list-style-type: disc;
}

.content ol {
    list-style-type: decimal;
}

.content li {
    margin-bottom: 0.5rem;
}

.content code {
    background-color: #f4f4f4;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95em;
    color: #d63384;
    white-space: pre-wrap;
}

.content pre {
    background-color: #2d2d2d;
    color: #f8f8f2;
    padding: 1em;
    border-radius: 6px;
    overflow-x: auto;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95em;
    margin-bottom: 1em;
    line-height: 1.5;
}

.content pre code {
    background: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

/* Content headings now flow through the Element Sizes panel.
   Previously these were hard-coded (1.5rem, 1.375rem, ...) which
   silently overrode the merchant's Typography settings for any
   rich-text description. */
.content h1, .content h2, .content h3,
.content h4, .content h5, .content h6 {
    font-weight: 600;
    color: #1a202c;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
    line-height: var(--line-height-tight, 1.25);
}

.content h1 { font-size: var(--text-h1); }
.content h2 { font-size: var(--text-h2); }
.content h3 { font-size: var(--text-h3); }
.content h4 { font-size: var(--text-h4); }
.content h5 { font-size: var(--text-h5); }
.content h6 { font-size: var(--text-h6); }

/* ---- Draft / published badge (admin + product header) ---- */
.badge {
    display: inline-block;
    padding: 4px 8px;
    font-size: var(--text-badge);
    font-weight: 600;
    border-radius: 4px;
    margin-left: 10px;
}

.badge.published {
    background-color: green;
    color: white;
}

.badge.draft {
    background-color: gray;
    color: white;
}

/* ---- Desktop menu current-item accent ---- */
.desktop-menu .current-menu-item > .header-link {
    color: var(--primary-color, #007cba);
    font-weight: 600;
    position: relative;
}

.desktop-menu .current-menu-item > .header-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    /*background-color: var(--header-hover-bg);*/
    border-radius: 1px;
}

.desktop-menu .header-link.active {
    color: var(--primary-color, #007cba);
    font-weight: 600;
}

.desktop-menu .dropdown-link.active {
    color: var(--primary-color, #007cba);
    font-weight: 600;
    background-color: var(--primary-color-light, rgba(0, 124, 186, 0.1));
}

.mobile-menu-items .current-menu-item {
    background-color: var(--primary-color-light, rgba(0, 124, 186, 0.1));
    border-left: 4px solid var(--primary-color, #007cba);
}

.mobile-menu-items .mobile-menu-link.active {
    color: var(--primary-color, #007cba) !important;
    font-weight: 600;
}

.mobile-menu-items .mobile-submenu a.active {
    color: var(--primary-color, #007cba) !important;
    font-weight: 600;
    background-color: var(--primary-color-light, rgba(0, 124, 186, 0.1));
}

.desktop-menu .header-link:not(.active):hover {
    color: var(--primary-color, #007cba);
    transition: color 0.2s ease;
}

.desktop-menu .dropdown-link:not(.active):hover {
    color: var(--primary-color, #007cba);
    background-color: var(--primary-color-light, rgba(0, 124, 186, 0.05));
    transition: all 0.2s ease;
}

.mobile-menu-items .mobile-menu-link:not(.active):hover {
    color: var(--primary-color, #007cba) !important;
    transition: color 0.2s ease;
}

/*
Alternative highlighting styles for menu items
Uncomment these to use different visual treatments

.desktop-menu .current-menu-item > .header-link {
    background-color: var(--primary-color, #007cba);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
}

.mobile-menu-items .current-menu-item {
    background: linear-gradient(90deg, var(--primary-color, #007cba), transparent);
}
*/
/* ---- Remove focus ring from all buttons ----
   Covers the browser default outline and Tailwind's focus:ring-* utilities
   (which work through the --tw-ring-* variables). */
button,
button:focus,
button:focus-visible,
[type="button"],
[type="button"]:focus,
[type="button"]:focus-visible,
[type="submit"],
[type="submit"]:focus,
[type="submit"]:focus-visible,
[type="reset"],
[type="reset"]:focus,
[type="reset"]:focus-visible,
[role="button"],
[role="button"]:focus,
[role="button"]:focus-visible {
    outline: none !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

/* ============================================================
   CONTACT FORM INTRO (heading + subheading)

   Rendered by PageController::renderContactIntro() above every
   [contact_form] expansion. The intro appears either:

     - inline, inside .content (when "Show contact form in
       sidebar" is off), or
     - in the right sidebar, inside .page-sidebar (when it is
       on).

   The rules below are deliberately scoped so the merchant's
   Trix formatting flows through unchanged in the inline case
   (.content h1..h6 above handles the sizes), while the
   sidebar case gets a compact heading scale that fits a
   narrow column.

   There is no specificity conflict between the two cases
   because the two parent selectors (.content vs .page-sidebar)
   never co-exist on the same element.
   ============================================================ */

.sidebar-contact-intro {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: var(--border-width-thin, 1px) var(--border-style, solid) var(--body-border, #e5e7eb);
}

/* Default look for plain text typed without any heading applied.
   This is what the merchant gets when they just type into the
   editor and don't reach for the H-buttons. */
.sidebar-contact-heading {
    font-size: var(--text-h4, 1.25rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.3;
    color: var(--body-text, #1a202c);
    margin: 0 0 0.5rem 0;
    word-break: break-word;
}
.sidebar-contact-subheading {
    font-size: var(--text-sm, 0.9375rem);
    font-weight: var(--font-weight-normal, 400);
    line-height: 1.55;
    color: var(--body-text, #374151);
    word-break: break-word;
}

/* Paragraph spacing inside the intro. Only margin is reset — font-size
   and font-weight are NOT touched, so <strong>, <em>, and any heading
   tag the merchant actually applied survive as-is. */
.sidebar-contact-heading p,
.sidebar-contact-heading div,
.sidebar-contact-subheading p,
.sidebar-contact-subheading div {
    margin: 0 0 0.5rem 0;
}
.sidebar-contact-heading > :first-child,
.sidebar-contact-subheading > :first-child { margin-top: 0; }
.sidebar-contact-heading > :last-child,
.sidebar-contact-subheading > :last-child  { margin-bottom: 0; }

/* Inline links inside the intro. Explicit colours because the intro
   can render outside .content (sidebar case), where .content a does
   not apply. */
.sidebar-contact-heading a,
.sidebar-contact-subheading a {
    color: var(--link-primary-text, #2563eb);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.sidebar-contact-heading a:hover,
.sidebar-contact-subheading a:hover {
    color: var(--link-primary-hover_text, #1d4ed8);
}

/* Lists inside the intro. */
.sidebar-contact-heading ul,
.sidebar-contact-heading ol,
.sidebar-contact-subheading ul,
.sidebar-contact-subheading ol {
    padding-left: 1.25rem;
    margin: 0.25rem 0 0.5rem 0;
}
.sidebar-contact-heading ul,
.sidebar-contact-subheading ul { list-style-type: disc; }
.sidebar-contact-heading ol,
.sidebar-contact-subheading ol { list-style-type: decimal; }
.sidebar-contact-heading li,
.sidebar-contact-subheading li { margin-bottom: 0.125rem; }

/* Blockquote, inline code and horizontal rule — preserved so nothing
   breaks if the merchant reaches for them. */
.sidebar-contact-heading blockquote,
.sidebar-contact-subheading blockquote {
    border-left: 2px solid var(--body-border, #e5e7eb);
    padding-left: 0.75rem;
    margin: 0.5rem 0;
    color: var(--breadcrumb-current, #555);
    font-style: italic;
}
.sidebar-contact-heading code,
.sidebar-contact-subheading code {
    background: var(--empty-state-background, #f3f4f6);
    padding: 0.1em 0.35em;
    border-radius: 3px;
    font-size: 0.9em;
}
.sidebar-contact-heading hr,
.sidebar-contact-subheading hr {
    border: 0;
    border-top: 1px solid var(--body-border, #e5e7eb);
    margin: 0.75rem 0;
}

/* Sidebar-only heading scale.
   When the intro renders inline (toggle off), it sits inside .content,
   so .content h1..h6 above handles the size — a merchant-applied H2
   renders at content-H2 size, exactly like any other content heading.

   When the intro renders in the sidebar, .content doesn't apply, so a
   raw H2 would fall back to browser default (32px), which overflows a
   narrow column. This scoped scale keeps the merchant's hierarchy
   (H1 > H2 > H3 > ...) but shrinks the range to fit the sidebar. */
.page-sidebar .sidebar-contact-heading :is(h1, h2, h3, h4, h5, h6) {
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.3;
    color: inherit;
    margin: 0 0 0.5rem 0;
}
.page-sidebar .sidebar-contact-heading h1 { font-size: 1.75rem; }
.page-sidebar .sidebar-contact-heading h2 { font-size: 1.5rem; }
.page-sidebar .sidebar-contact-heading h3 { font-size: 1.25rem; }
.page-sidebar .sidebar-contact-heading h4 { font-size: 1.125rem; }
.page-sidebar .sidebar-contact-heading h5 { font-size: 1rem; }
.page-sidebar .sidebar-contact-heading h6 { font-size: 0.9375rem; }

.page-sidebar .sidebar-contact-subheading :is(h1, h2, h3, h4, h5, h6) {
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.4;
    color: inherit;
    margin: 0 0 0.375rem 0;
}
.page-sidebar .sidebar-contact-subheading h1 { font-size: 1.125rem; }
.page-sidebar .sidebar-contact-subheading h2 { font-size: 1rem; }
.page-sidebar .sidebar-contact-subheading h3 { font-size: 0.9375rem; }
.page-sidebar .sidebar-contact-subheading h4 { font-size: 0.9rem; }
.page-sidebar .sidebar-contact-subheading h5 { font-size: 0.875rem; }
.page-sidebar .sidebar-contact-subheading h6 { font-size: 0.85rem; }

/* Remove the gap between the intro and the form it sits above.
   .lead-contact-form's own margin-top is 1.5rem; when preceded by
   the intro, that gap would read as "form starts after a break"
   instead of "form is the intro's content". */
.sidebar-contact-intro + .lead-contact-form {
    margin-top: 0;
}