/* =========================================================
   LUMISCHEMA SHARED LAYOUT SYSTEM  (single source of truth)

   Loaded LAST (functions.php, priority 99). Page stylesheets must NOT set
   outer frame width, horizontal gutters, or main/sidebar column widths:
   those belong here only.

   Desktop target: 1260px = 900px main + 40px gap + 320px sidebar.

   Breakpoints (one scheme, used everywhere):
     >1300px      centred 1260px frame, no gutter
     1001-1300px  fluid columns, 20px gutter, 28px column gap
     769-1000px   single column, 20px gutter
     <=768px      single column, 6px gutter

   The GeneratePress .site-content element is the ONLY owner of the
   horizontal gutter. Nested template wrappers use 0 horizontal padding,
   so gutters never stack (the old 6px + 6px / 20px + 20px problem).
   ========================================================= */

:root {
    --ls-content-max: 1260px;
    --ls-sidebar-width: 320px;
    --ls-column-gap: 40px;
    --ls-gutter: 0px;
    --ls-pad-top: 32px;
    --ls-pad-bottom: 60px;
}
@media (max-width: 1300px) {
    :root { --ls-gutter: 20px; --ls-column-gap: 28px; }
}
@media (max-width: 1024px) {
    :root { --ls-pad-top: 24px; }
}
@media (max-width: 768px) {
    :root { --ls-gutter: 6px; --ls-pad-top: 16px; --ls-pad-bottom: 40px; }
}

html, body { max-width: 100%; }
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe, embed, object { max-width: 100%; }

@media (max-width: 768px) {
    /* #page only: overflow on html/body breaks sticky headers on iOS Safari. */
    #page { overflow-x: clip; }
}

/* ---------------------------------------------------------
   1. OUTER FRAME (all templates)
   --------------------------------------------------------- */
body .site-content {
    width: 100%;
    max-width: calc(var(--ls-content-max) + (2 * var(--ls-gutter)));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--ls-gutter);
    padding-right: var(--ls-gutter);
    /* THE one place that sets the gap between the header and page content
       (32px desktop / 24px tablet / 16px mobile). Pages must not add their own. */
    padding-top: var(--ls-pad-top);
    min-width: 0;
}

/* Templates whose sidebar lives INSIDE their own inner grid: the outer
   GeneratePress area is a plain full-width block. */
body.category .site-content,
body.single-post .site-content,
body.author .site-content,
body.single-device .site-content { display: block; }

body.category .site-content > #primary,
body.single-post .site-content > #primary,
body.author .site-content > #primary,
body.single-device .site-content > #primary {
    float: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

/* ---------------------------------------------------------
   2. STANDARD GENERATEPRESS PAGES
      (homepage, Reviews archive, single Review): sidebar is a sibling of
      #primary inside .site-content.
   --------------------------------------------------------- */
@media (min-width: 1001px) {
    body .site-content:has(> #primary + #secondary),
    body .site-content:has(> #primary + #right-sidebar),
    body .site-content:has(> #secondary + #primary),
    body .site-content:has(> #right-sidebar + #primary) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(280px, var(--ls-sidebar-width));
        column-gap: var(--ls-column-gap);
        row-gap: 0;
        align-items: start;
    }
    body .site-content:has(> #secondary + #primary),
    body .site-content:has(> #right-sidebar + #primary) {
        grid-template-columns: minmax(280px, var(--ls-sidebar-width)) minmax(0, 1fr);
    }
}
body .site-content:has(> #primary + #secondary) > #primary,
body .site-content:has(> #primary + #right-sidebar) > #primary,
body .site-content:has(> #secondary + #primary) > #primary,
body .site-content:has(> #right-sidebar + #primary) > #primary,
body .site-content:has(> #primary + #secondary) > #secondary,
body .site-content:has(> #primary + #right-sidebar) > #right-sidebar,
body .site-content:has(> #secondary + #primary) > #secondary,
body .site-content:has(> #right-sidebar + #primary) > #right-sidebar {
    float: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
}

/* The sidebar starts level with the first thing on the page (the
   breadcrumb). GeneratePress gives .inside-right-sidebar a 20px top margin
   in its "separate containers" layout; .site-content's padding-top is the
   only gap under the header. */
body .site-content > #secondary,
body .site-content > #right-sidebar {
    align-self: start;
    margin-top: 0;
    padding-top: 0;
}
body .site-content > #secondary .inside-right-sidebar,
body .site-content > #right-sidebar .inside-right-sidebar,
body .site-content > #secondary .inside-right-sidebar > .widget:first-child,
body .site-content > #right-sidebar .inside-right-sidebar > .widget:first-child {
    margin-top: 0;
}
body .site-content > #secondary .inside-right-sidebar,
body .site-content > #right-sidebar .inside-right-sidebar { padding-top: 0; }

/* Homepage, Reviews archive, single Review and every Page (Phone Finder and
   Compare included), search results and 404: state the same grid explicitly
   (by body class and by .content-area / .widget-area, not only by :has() and
   ids) so they always match every other page. The GeneratePress right
   sidebar is forced on site-wide in functions.php. */
@media (min-width: 1001px) {
    body.home .site-content,
    body.blog .site-content,
    body.post-type-archive-reviews .site-content,
    body.single-reviews .site-content,
    body.single-ls_camcmp .site-content,
    body.post-type-archive-ls_camcmp .site-content,
    body.page .site-content,
    body.search .site-content,
    body.tax-device_category .site-content,
    body.tax-ls_brand .site-content,
    body.error404 .site-content,
    body.ls-reader-page .site-content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(280px, var(--ls-sidebar-width));
        column-gap: var(--ls-column-gap);
        row-gap: 0;
        align-items: start;
    }
    body.home .site-content > .content-area,
    body.blog .site-content > .content-area,
    body.post-type-archive-reviews .site-content > .content-area,
    body.single-reviews .site-content > .content-area,
    body.single-ls_camcmp .site-content > .content-area,
    body.post-type-archive-ls_camcmp .site-content > .content-area,
    body.page .site-content > .content-area,
    body.search .site-content > .content-area,
    body.tax-device_category .site-content > .content-area,
    body.tax-ls_brand .site-content > .content-area,
    body.error404 .site-content > .content-area,
    body.ls-reader-page .site-content > .content-area,
    body.home .site-content > .widget-area,
    body.blog .site-content > .widget-area,
    body.post-type-archive-reviews .site-content > .widget-area,
    body.single-reviews .site-content > .widget-area,
    body.single-ls_camcmp .site-content > .widget-area,
    body.post-type-archive-ls_camcmp .site-content > .widget-area,
    body.page .site-content > .widget-area,
    body.search .site-content > .widget-area,
    body.tax-device_category .site-content > .widget-area,
    body.tax-ls_brand .site-content > .widget-area,
    body.error404 .site-content > .widget-area,
    body.ls-reader-page .site-content > .widget-area {
        float: none;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
    }
}

/* GeneratePress gives .site-main a 20px side margin in sidebar layouts. On the
   homepage and Reviews pages that made the main column 20px narrower (and the
   gap to the sidebar 20px wider) than every other page. .site-content owns the
   gutter, so .site-main must not add its own. */
body .site-content .site-main {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}

/* ---------------------------------------------------------
   3. CUSTOM INNER GRIDS
      News category   -> .ls-news-container (main + sidebar)
      Single News     -> .lc-news-layout    (inside .lc-news-container)
      Author archive  -> .lc-news-layout    (inside .lc-news-container)
      Single Device   -> .ls-device-layout
   --------------------------------------------------------- */
body.category .ls-news-page,
body.category .ls-news-container,
body.single-post .lc-news-container,
body.single-post .lc-news-layout,
body.author .lc-author-archive .lc-news-container,
body.author .lc-author-archive .lc-news-layout,
body.single-device .ls-device-layout {
    width: 100%;
    max-width: var(--ls-content-max);
    margin-left: auto;
    margin-right: auto;
    min-width: 0;
}

/* Wrappers that own vertical rhythm only: no horizontal padding, ever. */
body.category .ls-news-container,
body.author .lc-author-archive .lc-news-container,
body.single-post .lc-news-container,
body.single-device .ls-device-layout {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: var(--ls-pad-bottom);
}
body.single-post .lc-news-container { padding-bottom: 0; }
body.single-device .ls-device-layout { padding-bottom: 24px; } /* gap above the footer (was 56px + 24px) */
body.single-device .site-content > #primary,
body.single-device .site-main,
body.single-device .ls-device-page { margin-bottom: 0; padding-bottom: 0; }
body.single-device .ls-device-main > :last-child,
body.single-device .ls-device-layout > article > :last-child { margin-bottom: 0; }
@media (max-width: 768px) { body.single-device .ls-device-layout { padding-bottom: 16px; } }

/* The grids themselves. */
body.category .ls-news-container,
body.single-post .lc-news-layout,
body.author .lc-author-archive .lc-news-layout,
body.single-device .ls-device-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
    column-gap: 0;
    align-items: start;
}
@media (min-width: 1001px) {
    body.category .ls-news-container,
    body.single-post .lc-news-layout,
    body.author .lc-author-archive .lc-news-layout,
    body.single-device .ls-device-layout {
        grid-template-columns: minmax(0, 1fr) minmax(280px, var(--ls-sidebar-width));
        column-gap: var(--ls-column-gap);
        row-gap: 0;
    }
}

/* Column children. */
body.category .ls-news-main,
body.single-post .lc-news-article,
body.author .lc-author-main,
body.single-device .ls-device-main,
body.category .ls-news-container > #secondary,
body.category .ls-news-container > #right-sidebar,
body.single-post .lc-news-layout > #secondary,
body.single-post .lc-news-layout > #right-sidebar,
body.author .lc-author-archive .lc-news-layout > #secondary,
body.author .lc-author-archive .lc-news-layout > #right-sidebar,
body.single-device .ls-device-sidebar,
body.single-device .ls-device-layout > #secondary,
body.single-device .ls-device-layout > #right-sidebar {
    float: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
}

/* Sidebars sit flush with the top of the main column. */
body.category .ls-news-container > #secondary,
body.category .ls-news-container > #right-sidebar,
body.single-post .lc-news-layout > #secondary,
body.single-post .lc-news-layout > #right-sidebar,
body.author .lc-author-archive .lc-news-layout > #secondary,
body.author .lc-author-archive .lc-news-layout > #right-sidebar,
body.single-device .ls-device-layout > #secondary,
body.single-device .ls-device-layout > #right-sidebar {
    align-self: start;
    padding-top: 0;
}
body.category .ls-news-container > #secondary .inside-right-sidebar,
body.category .ls-news-container > #right-sidebar .inside-right-sidebar,
body.single-post .lc-news-layout > #secondary .inside-right-sidebar,
body.single-post .lc-news-layout > #right-sidebar .inside-right-sidebar,
body.author .lc-author-archive .lc-news-layout > #secondary .inside-right-sidebar,
body.author .lc-author-archive .lc-news-layout > #right-sidebar .inside-right-sidebar,
body.single-device .ls-device-layout > #secondary .inside-right-sidebar,
body.single-device .ls-device-layout > #right-sidebar .inside-right-sidebar {
    margin-top: 0;
    padding-top: 0;
}

/* Remove any GeneratePress top spacing above the custom templates. */
body.category .content-area,
body.category .ls-news-page,
body.single-post .content-area,
body.single-post .lc-news-single,
body.author .content-area,
body.author .lc-author-archive {
    margin-top: 0;
    padding-top: 0;
}
/* Breadcrumb box: only its outer top margin is cleared; it keeps its inner
   padding (zeroing it pushed the links against the top edge of the box). */
body.single-post .ls-crumbs { margin-top: 0; }
/* The author card keeps its own inner padding; only its outer top margin is
   cleared. (The old shared rule also zeroed padding-top, which pushed the
   avatar right up against the card's top border.) */
body.author .lc-author-archive .lc-author-header { margin-top: 0; }

/* ---------------------------------------------------------
   4. SIDEBAR / WIDGET DEFAULTS
      Plain WordPress widgets only. LumiSchema's own widgets are styled in
      sidebar-widgets.css, so they are excluded here to avoid two card
      styles fighting over padding, radius and shadow.
   --------------------------------------------------------- */
body #secondary,
body #right-sidebar,
body .widget-area {
    min-width: 0;
    overflow-wrap: anywhere;
}
body #secondary .widget:not(:has(> .ls-sidebar-heading)),
body #right-sidebar .widget:not(:has(> .ls-sidebar-heading)),
body .lumischema-website-widget:not(:has(> .ls-sidebar-heading)) {
    min-width: 0;
    max-width: 100%;
    margin-bottom: 20px;
    padding: 12px;
    border: 1px solid #dce6f2;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(7, 29, 51, .035);
}
body #secondary .widget-title,
body #right-sidebar .widget-title,
body .lumischema-website-widget .widget-title {
    margin: 0 0 12px;
    color: #071d33;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 800;
}
body #secondary .widget ul,
body #right-sidebar .widget ul,
body .lumischema-website-widget ul:not(.ls-best-reviewed-list) {
    margin: 0;
    padding: 0;
    list-style: none;
}
body #secondary .widget li:not(.ls-best-reviewed-item):not(.ls-quick-tools-item),
body #right-sidebar .widget li:not(.ls-best-reviewed-item):not(.ls-quick-tools-item),
body .lumischema-website-widget li:not(.ls-best-reviewed-item):not(.ls-quick-tools-item) {
    margin: 0;
    padding: 8px 0;
    border-bottom: 1px solid #e6edf5;
}
body #secondary .widget li:not(.ls-best-reviewed-item):not(.ls-quick-tools-item):last-child,
body #right-sidebar .widget li:not(.ls-best-reviewed-item):not(.ls-quick-tools-item):last-child,
body .lumischema-website-widget li:not(.ls-best-reviewed-item):not(.ls-quick-tools-item):last-child { border-bottom: 0; }
body #secondary .widget a,
body #right-sidebar .widget a,
body .lumischema-website-widget a { overflow-wrap: anywhere; }
body #secondary img,
body #right-sidebar img,
body #secondary iframe,
body #right-sidebar iframe,
body #secondary video,
body #right-sidebar video { max-width: 100%; height: auto; }

/* ---------------------------------------------------------
   5. MOBILE (<=768px): the .site-content frame owns the 6px gutter.
      Nested GeneratePress wrappers must not add a second one.
   --------------------------------------------------------- */
@media (max-width: 768px) {
    body .site-content .inside-article,
    body .site-content .inside-page-header {
        padding-left: 0;
        padding-right: 0;
    }
    body .site-content .site-main,
    body .site-content > #primary,
    body .site-content > #secondary,
    body .site-content > #right-sidebar {
        min-width: 0;
        max-width: 100%;
    }
    body #secondary .widget:not(:has(> .ls-sidebar-heading)),
    body #right-sidebar .widget:not(:has(> .ls-sidebar-heading)),
    body .lumischema-website-widget:not(:has(> .ls-sidebar-heading)) { padding: 10px; }
}

/* ---------------------------------------------------------
   6. STICKY SIDEBAR (desktop, >1000px), on every page
      The GeneratePress sidebar (#right-sidebar / #secondary, also inside the
      category, post and author grids) and the device page sidebar.
      It scrolls up with the page like normal content. When its last widget
      comes into view it stops there, and stays in view beside the content
      until the content ends. A sidebar shorter than the screen stays in view
      from the start. js/sticky-sidebar.js sets --ls-sticky-top for this:
      top gap for a short sidebar, (screen height - sidebar height - gap)
      for a tall one, so it sticks by its bottom edge.
      No inner scrollbar: the sidebar is never cut off.
   --------------------------------------------------------- */
@media (min-width: 1001px) {
    /* Sticky from the first paint (even before any script runs), so a page
       reloaded part-way down keeps the sidebar where it belongs. The script
       then only fine-tunes the stick height for tall sidebars. */
    body #right-sidebar,
    body #secondary,
    body .ls-device-sidebar {
        position: sticky;
        top: var(--ls-sticky-top, 24px);
        align-self: start;
    }
    /* Sticky needs every wrapper above the sidebar to be overflow-visible.
       Themes, plugins and Customizer CSS often put overflow-x:hidden on
       html/body or the page wrappers (to stop sideways scrolling), which
       silently turns sticky off until a script steps in. "clip" gives the
       same no-sideways-scroll result without breaking sticky. */
    html, body { overflow-x: clip !important; }
    body .site, body #page, body .site-content, body .content-area,
    body .grid-container, body .inside-site-container, body .site-main,
    body .lc-news-container, body .lc-news-layout, body .ls-news-container,
    body .ls-device-layout, body .lc-author-archive, body .lumicrib-review-single {
        overflow-x: clip !important;
        overflow-y: visible !important;
    }
    /* Sticky blocked by an overflow wrapper: js/sticky-sidebar.js pins it with a transform. */
    body .ls-sticky-js {
        position: relative;
        top: auto;
        will-change: transform;
    }
}