/*
 * Keep page width stable between short and long pages, on desktop only.
 * Forcing overflow-y on <html> on touch devices breaks the mobile browser's
 * address-bar collapse and makes sticky/fixed headers jump or show a gap.
 */
@media (hover: hover) and (pointer: fine) {
    html {
        overflow-y: scroll;
        scrollbar-gutter: stable;
    }
}



/* Site-wide tiered eye-icon view counter. */
.lumischema-views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 650;
    vertical-align: middle;
}
.lumischema-views-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.lumischema-views-count { display: inline-block; }
/* =========================================================
   VIEW-COUNT COLOURS (lumicrib_views_indicator)
   One colour per popularity level, used everywhere a view count shows:
     under 500  green   ·  500–999  yellow  ·  1K–4.9K  orange  ·  5K+  red
   Each level sets --ls-v (solid), --ls-v-ink (text on light) and
   --ls-v-tint (pale background). Counts in text become a tinted pill;
   counts on a photo (cards) become a solid chip.
   ========================================================= */
.lumischema-views { --ls-v: #15803d; --ls-v-ink: #15803d; --ls-v-tint: #e7f6ec; --ls-v-on: #fff; }
.lumischema-views.tier-low    { --ls-v: #16a34a; --ls-v-ink: #15803d; --ls-v-tint: #e7f6ec; --ls-v-on: #fff; }
.lumischema-views.tier-medium { --ls-v: #f5b800; --ls-v-ink: #8a6100; --ls-v-tint: #fff5d1; --ls-v-on: #3d2c00; }
.lumischema-views.tier-high   { --ls-v: #f97316; --ls-v-ink: #c2410c; --ls-v-tint: #ffedde; --ls-v-on: #fff; }
.lumischema-views.tier-higher { --ls-v: #e53935; --ls-v-ink: #c62828; --ls-v-tint: #fdeaea; --ls-v-on: #fff; }
.lumischema-views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ls-v-tint) !important;
    color: var(--ls-v-ink) !important;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}
.lumischema-views .lumischema-views-icon { stroke: currentColor; stroke-width: 2.2; }
.lumicrib-review-card-views { margin-left: auto; }

/* =========================================================
   BREADCRUMB: one design on every page (lumischema_breadcrumb()).
   Pale-blue box, blue left edge, bold text, home icon, chevrons.
   ========================================================= */
.ls-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 22px;
    padding: 10px 14px 10px 16px;
    background: #edf4ff;
    border: 1px solid #d6e4fb;
    border-left: 4px solid #0b5fd8;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(11, 42, 82, .06);
    color: #0b2a52;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}
.ls-crumbs a,
.ls-crumbs a:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0b5fd8;
    font-weight: 700;
    text-decoration: none;
}
.ls-crumbs a:hover,
.ls-crumbs a:focus-visible { color: #0849a8; text-decoration: none; }
.ls-crumbs svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ls-crumbs-sep { display: inline-flex; color: #7f97bd; }
.ls-crumbs-sep svg { width: 14px; height: 14px; flex-basis: 14px; stroke-width: 2.6; }
.ls-crumbs [aria-current="page"] { min-width: 0; color: #0b2a52; font-weight: 800; overflow-wrap: anywhere; }
@media (max-width: 520px) {
    .ls-crumbs { font-size: 13px; padding: 9px 12px 9px 13px; }
}

/* =========================================================
   MULTICOLOUR ICONS (inc/icons.php → lumischema_icon())
   The colours live inside each icon. These rules stop older
   one-colour icon styles (fill:none; stroke:currentColor …) from
   painting outlines over them, wherever the icon is placed.
   ========================================================= */
svg.ls-ico {
    display: inline-block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    overflow: visible;
    vertical-align: middle;
    fill: none !important;
    stroke: none !important;
    color: inherit;
}
svg.ls-ico * { vector-effect: none; }
/* Breadcrumb home + view counts. */
.ls-crumbs svg.ls-ico { width: 17px; height: 17px; flex-basis: 17px; }
.lumischema-views svg.ls-ico { width: 15px; height: 15px; }
/* On solid blue/navy buttons and pills the icon gets a small white tile so its
   navy parts stay visible. */
/* On solid blue/navy buttons and dark photo tiles there is no background
   behind the icon; a soft light halo keeps its navy parts readable. */
.ls-cmp-eyebrow svg.ls-ico,
.ls-sr-btn.is-primary svg.ls-ico,
.ls-pf-btn.ls-pf-search svg.ls-ico,
.ls-home-cat-icon svg.ls-ico,
.lumischema-mobile-search-button svg.ls-ico {
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, .95)) drop-shadow(0 0 2px rgba(255, 255, 255, .6));
}


/* "Make us your preferred source on Google" button (device, review and news pages).
   Animated: the Google-coloured border keeps turning, a light sweep passes every few seconds and the
   logo gives a small bounce. Hover: lifts, glows, shows a "+" and a short tip above. Calm when the
   visitor has "reduce motion" switched on. */
@property --ls-gsrc-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.ls-gsrc { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border: 2px solid transparent; border-radius: 999px;
    background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--ls-gsrc-a), #ea4335, #fbbc05, #34a853, #4285f4, #ea4335) border-box;
    color: #1f2937; font-size: 12px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(7, 29, 51, .06); overflow: visible;
    animation: ls-gsrc-spin 4s linear infinite, ls-gsrc-glow 3.2s ease-in-out infinite;
    transition: transform .2s ease, box-shadow .2s ease, color .2s ease; }
/* Light sweep across the button. */
.ls-gsrc::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; overflow: hidden;
    background: linear-gradient(110deg, transparent 0%, transparent 38%, rgba(66, 133, 244, .16) 50%, transparent 62%, transparent 100%) no-repeat;
    background-size: 250% 100%; background-position: 140% 0; animation: ls-gsrc-sweep 4.5s ease-in-out infinite; }
.ls-gsrc-logo { flex: 0 0 18px; transform-origin: 50% 60%; animation: ls-gsrc-bounce 4.5s ease-in-out infinite; }
.ls-gsrc-plus { display: inline-flex; align-items: center; justify-content: center; width: 0; height: 18px; margin-left: -8px; overflow: hidden; border-radius: 50%;
    background: #4285f4; color: #fff; font-size: 14px; font-weight: 700; line-height: 1; opacity: 0; transition: width .2s ease, margin .2s ease, opacity .2s ease; }
/* Tip above the button on hover / keyboard focus. */
.ls-gsrc::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 5; padding: 6px 10px; border-radius: 8px;
    background: #0b1f3a; color: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap; pointer-events: none;
    box-shadow: 0 6px 18px rgba(7, 29, 51, .22); opacity: 0; transform: translate(-50%, 4px); transition: opacity .18s ease, transform .18s ease; }
.ls-gsrc:hover, .ls-gsrc:focus-visible { color: #0b5fd8; text-decoration: none; transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(66, 133, 244, .28), 0 0 0 4px rgba(66, 133, 244, .10); animation-duration: 1.6s, 3.2s; }
.ls-gsrc:hover .ls-gsrc-plus, .ls-gsrc:focus-visible .ls-gsrc-plus { width: 18px; margin-left: 0; opacity: 1; }
.ls-gsrc:hover::after, .ls-gsrc:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.ls-gsrc:active { transform: translateY(0) scale(.98); }
@keyframes ls-gsrc-spin { to { --ls-gsrc-a: 360deg; } }
@keyframes ls-gsrc-glow { 0%, 100% { box-shadow: 0 1px 2px rgba(7, 29, 51, .06); } 50% { box-shadow: 0 0 0 4px rgba(66, 133, 244, .10), 0 4px 14px rgba(66, 133, 244, .18); } }
@keyframes ls-gsrc-sweep { 0%, 55% { background-position: 140% 0; } 85%, 100% { background-position: -40% 0; } }
@keyframes ls-gsrc-bounce { 0%, 70%, 100% { transform: none; } 76% { transform: translateY(-2px) rotate(-8deg); } 82% { transform: translateY(0) rotate(6deg); } 88% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) {
    .ls-gsrc, .ls-gsrc::before, .ls-gsrc-logo { animation: none; }
}
.ls-gsrc-row { margin-top: 12px; }
.ls-gsrc-short { display: none; }
/* In a news story's author/date line the button is compact; its tip shows the full wording. */
@media (min-width: 761px) {
    .ls-nhero-meta .ls-gsrc, .ls-rhero-meta .ls-gsrc { padding: 4px 11px 4px 8px; font-size: 11.5px; }
    .ls-nhero-meta .ls-gnews, .ls-rhero-meta .ls-gnews { padding: 4px 11px 4px 8px; font-size: 11.5px; }
}
.ls-rhero-meta .ls-gbtns { display: inline-flex; width: auto; }
@media (max-width: 760px) { .ls-rhero-meta .ls-gbtns { display: flex; flex-basis: 100%; } }
/* On the dark news header the tip is light so it stands out. */
.ls-nhero .ls-gsrc::after { background: #fff; color: #0b1f3a; }
@media (max-width: 760px) {
    .ls-gsrc { width: 100%; justify-content: center; white-space: normal; }
    .ls-gsrc::after { display: none; } /* no hover on phones */
}


/* Google buttons together: preferred source + "Follow us on Google News". */
.ls-gbtns { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ls-gnews { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 10px; border: 2px solid #dbe4f0; border-radius: 999px; background: #fff;
    color: #1f2937; font-size: 12px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(7, 29, 51, .06); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease; }
.ls-gnews:hover, .ls-gnews:focus-visible { color: #1a73e8; border-color: #4285f4; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(66, 133, 244, .22); text-decoration: none; }
.ls-gnews-ico { flex: 0 0 18px; }
@media (max-width: 760px) {
    .ls-gbtns { display: flex; width: 100%; }
    .ls-gnews { width: 100%; justify-content: center; }
}

/* =========================================================
   LINKS: no underline when hovered, focused or tapped (anywhere on the site).
   Links that are underlined at rest (inside articles) keep that underline;
   hover never adds one.
   ========================================================= */
a:hover, a:focus, a:active,
a:hover *, a:focus *, a:active * { text-decoration: none !important; }

/* =========================================================
   SIDEWAYS ROWS (draggable / swipeable): no scrollbar line under them,
   on computers and phones. They still scroll by dragging, swiping, arrows or Shift + wheel.
   ========================================================= */
.ls-drag, .ls-mu-grid, .ls-cmp-pick-grid, .ls-arch-chips, .ls-brands-track, .ls-msub-track, .ls-live-tabs,
.ls-fhero-tabs, .ls-news-category-scroll, .ls-na-just-track, .ls-ra-chipset, .ls-ra-top-list, .ls-sr-tabs,
.ls-acct-tabs, .ls-author-chips, .lc-author-type-pills, .ls-recent-track, .ls-panel-tabs, .ls-share-list,
[data-ls-drag] {
    scrollbar-width: none !important;
    -ms-overflow-style: none;
}
.ls-drag::-webkit-scrollbar, .ls-mu-grid::-webkit-scrollbar, .ls-cmp-pick-grid::-webkit-scrollbar, .ls-arch-chips::-webkit-scrollbar,
.ls-brands-track::-webkit-scrollbar, .ls-msub-track::-webkit-scrollbar, .ls-live-tabs::-webkit-scrollbar, .ls-fhero-tabs::-webkit-scrollbar,
.ls-news-category-scroll::-webkit-scrollbar, .ls-na-just-track::-webkit-scrollbar, .ls-ra-chipset::-webkit-scrollbar,
.ls-ra-top-list::-webkit-scrollbar, .ls-sr-tabs::-webkit-scrollbar, .ls-acct-tabs::-webkit-scrollbar, .ls-author-chips::-webkit-scrollbar,
.lc-author-type-pills::-webkit-scrollbar, .ls-recent-track::-webkit-scrollbar, .ls-panel-tabs::-webkit-scrollbar, .ls-share-list::-webkit-scrollbar,
[data-ls-drag]::-webkit-scrollbar {
    display: none !important; width: 0 !important; height: 0 !important; background: transparent !important;
}