/* ============================================================================
   The Penny Flow — Responsive + accessibility overrides (child theme)
   ----------------------------------------------------------------------------
   Enqueued after the parent style.css (depends on `rivax-theme-style` via
   `penny-flow-child-style`) so these rules win on ties. Each block is tagged
   with its QA report ID. This is the single home for responsive/a11y CSS.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Closed-dialog fix — the search/off-canvas panels are managed as inert +
   aria-hidden + [hidden] when closed (penny-flow-a11y.js) so they leave the tab
   order and accessibility tree. This fallback guarantees a hidden panel is
   removed from layout even if a theme rule sets `display` on it.
   --------------------------------------------------------------------------- */
[hidden] {
    display: none !important;
}

/* ---------------------------------------------------------------------------
   Phase 6 support — the search/hamburger openers and closers are now native
   <button>s (were non-focusable <span>s). Reset UA button styling so they look
   exactly like before, and give a clear keyboard focus ring.
   --------------------------------------------------------------------------- */
.popup-search-opener,
.popup-search-closer,
.offcanvas-opener,
.offcanvas-closer {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    line-height: 0;
    cursor: pointer;
}

.popup-search-opener:focus-visible,
.popup-search-closer:focus-visible,
.offcanvas-opener:focus-visible,
.offcanvas-closer:focus-visible,
.popup-search-form .submit:focus-visible,
.offcanvas-mobile-search button:focus-visible,
#site-header a:focus-visible,
#site-sticky-header a:focus-visible,
.header-vertical-nav a:focus-visible,
.search-field:focus-visible,
.default-post-list-pagination a:focus-visible {
    outline: 3px solid var(--accent-color, #b8552f);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   R-01 — Restore the mobile search opener
   The parent hides the entire .popup-search-wrapper at <=767px, removing the
   only mobile search entry point. Keep the opener visible; the popup panel
   stays hidden until JS/interaction adds `.open`.
   --------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
    .header-default-search .popup-search-wrapper {
        display: block !important;
    }

    .header-default-search .popup-search-opener-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        min-width: 52px;
        height: 52px;
        margin-left: auto;
    }
}

/* ---------------------------------------------------------------------------
   R-02 — Compact hamburger header for small tablets and short landscape phones
   The parent keeps the full 8-item nav as a 4x2 grid 768-1199px, and the
   Additional CSS hides .rivax-offcanvas at >=768px. From 768-900px, and on any
   short landscape screen up to 1024px, drop the dense nav and expose the
   off-canvas hamburger. !important beats the later-printing Additional CSS.
   --------------------------------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 900px),
       screen and (max-height: 500px) and (max-width: 1024px) {
    .header-default-bottom,
    .sticky-header-navigation {
        display: none !important;
    }

    .header-default-top .rivax-offcanvas {
        display: block !important;
    }

    .header-default-menu {
        display: flex;
        align-items: center;
    }

    .sticky-header-menu {
        display: block !important;
        justify-self: end;
    }
}

/* ---------------------------------------------------------------------------
   R-03 — Single-post featured image below the title/meta
   The DOM order is now fixed in the child override of
   template-parts/post/hero/content-1.php (title/meta first, image second), so
   NO CSS `order` is used. We only keep the spacing and the desktop height cap.
   --------------------------------------------------------------------------- */
.single-hero-layout-1 > .image-container {
    margin-top: clamp(20px, 3vw, 32px);
}

@media screen and (min-width: 1025px) {
    .single-hero-layout-1 > .image-container {
        height: clamp(420px, 52vh, 600px);
        overflow: hidden;
    }

    .single-hero-layout-1 > .image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* ---------------------------------------------------------------------------
   R-04 — Shorter archive cards
   Posts-per-page is cut to 6 by the penny-flow-site plugin. On phones, crop
   card images to 16:9 and clamp excerpts to three lines.
   --------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
    .default-post-list-item .image-container {
        aspect-ratio: 16 / 9;
        overflow: hidden;
    }

    .default-post-list-item .image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .default-post-list-item .excerpt {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
    }
}

/* ---------------------------------------------------------------------------
   R-05 + R-08 (Phase 8) — Hide the archive/home/SEARCH sidebar at <=1024px
   Below 1024px the theme stacks the sidebar after the entire post list. Those
   links also live in the footer, so hide the sidebar and let results use the
   full width. Search results (body.search) are included.
   --------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    body.blog .sidebar-container,
    body.home .sidebar-container,
    body.archive .sidebar-container,
    body.search .sidebar-container {
        display: none !important;
    }

    body.blog .page-content-wrapper .content-container,
    body.home .page-content-wrapper .content-container,
    body.archive .page-content-wrapper .content-container,
    body.search .page-content-wrapper .content-container {
        width: 100%;
        max-width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   R-07 (Phase 7) — Touch targets of at least 44x44px on touch layouts
   Icon glyphs keep their design size; the clickable wrapper grows. The
   off-canvas search submit specifically measured ~28x44 and is corrected here.
   --------------------------------------------------------------------------- */
@media (pointer: coarse) {
    #site-header a,
    #site-header button,
    #site-sticky-header a,
    #site-sticky-header button,
    .single-share-box a,
    .share-link-btn,
    .popup-search-close,
    .popup-search-closer,
    .popup-search-opener,
    .offcanvas-opener,
    .offcanvas-closer,
    #site-footer a {
        min-height: 44px;
    }

    .share-link-btn,
    .popup-search-close,
    .popup-search-closer,
    .popup-search-opener,
    .popup-search-opener-wrapper,
    .offcanvas-opener,
    .offcanvas-closer {
        min-width: 44px;
    }

    /* Search + off-canvas submit buttons: full 44x44 hit area. */
    .popup-search-form .submit,
    .offcanvas-mobile-search button {
        min-width: 44px;
        min-height: 44px;
    }

    /* Pagination controls. */
    .default-post-list-pagination a,
    .default-post-list-pagination .page-numbers {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Give footer/share links a real vertical hit area without stretching the
       visual layout. Plain inline text links are not forced to 44px WIDTH. */
    #site-footer a,
    .single-share-box a {
        display: inline-flex;
        align-items: center;
    }
}

/* ---------------------------------------------------------------------------
   R-08 — Prevent iOS Safari focus zoom (inputs below 16px)
   --------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
    input,
    select,
    textarea,
    .pf-newsletter-form input[type="email"],
    .popup-search input,
    .search-field {
        font-size: 16px !important;
    }
}

/* ---------------------------------------------------------------------------
   R-09 — Cap static-page reading width on desktop
   .single-content / .single-page-title-wrapper only exist on non-Elementor
   pages, so full-width Elementor landing pages are automatically excluded.
   --------------------------------------------------------------------------- */
@media screen and (min-width: 1025px) {
    body.page:not(.elementor-page) .single-page-title-wrapper,
    body.page:not(.elementor-page) .single-content {
        width: min(100%, 800px);
        margin-inline: auto;
    }
}

/* ---------------------------------------------------------------------------
   R-10 — Logo aspect-ratio safety net (dimensions also fixed in functions.php)
   --------------------------------------------------------------------------- */
.site-brand-logo,
.sticky-header-logo img,
#site-footer .site-brand-logo {
    aspect-ratio: 6 / 7;
    width: auto;
}

/* ---------------------------------------------------------------------------
   Phase 6 — modal panel behaviour
   While an off-canvas/search panel is open, prevent background scroll and make
   the open state explicit for assistive tech via the JS-toggled classes.
   --------------------------------------------------------------------------- */
body.pf-panel-open {
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
   R-11 — Preloader + reduced motion
   Safe code-side mitigation only: for visitors who opt out of motion, remove
   the full-page preloader/fade so content is never left pale. This does NOT
   create another loader. Fully disabling the preloader for everyone is a
   one-click Customizer toggle (Appearance > Customize > site-preloader off).
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .site-preloader {
        display: none !important;
    }
}

/* ---------------------------------------------------------------------------
   Phase 12 — Opt-in "control motion" class
   Deliberately applied only to controls that should lift/grow on interaction
   (e.g. primary buttons that opt in with class `pf-motion-control`). Same
   effect on hover and keyboard focus. Excluded from nav/inline/disabled by not
   being applied to them. Fully disabled under reduced-motion.
   --------------------------------------------------------------------------- */
.pf-motion-control {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    will-change: transform;
}

.pf-motion-control:hover,
.pf-motion-control:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.45);
}

.pf-motion-control:disabled,
.pf-motion-control[aria-disabled="true"] {
    transform: none;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .pf-motion-control,
    .pf-motion-control:hover,
    .pf-motion-control:focus-visible {
        transition: none;
        transform: none;
    }
}