/*
Theme Name: Santeri Leinonen
Theme URI: https://ratko.ai
Author: Santeri Leinonen
Author URI: https://ratko.ai
Description: Custom theme for ratko.ai — animated hero with three.js globe, multilingual via Polylang, content via Gutenberg blocks.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 8.1
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: santeri-leinonen
*/

/* ============================================================
   Theme stylesheet — global resets and base typography only.
   Hero-specific styles live in assets/landing.css and load
   conditionally on the front page (see functions.php).
   ============================================================ */

html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
    color: #f5f5f7;
    background: #050814;
}

a { color: inherit; }

/* Text for screen readers only — used to warn that a link opens in a
   new tab, which sighted users infer from context but assistive tech
   otherwise gets no signal about. Clipped rather than display:none so
   it stays in the accessibility tree. */
.sl-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

img, video, canvas, svg {
    max-width: 100%;
    height: auto;
}

/* ============================================================
   Site header — fixed nav bar over hero / above page content.
   Logo on the left; primary menu + language switcher on the right.
   ============================================================ */

.sl-site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    /* Default state: see-through "shadow" over the hero — a soft
       top-edge gradient gives just enough darkening for the white
       text to stay legible against the brightest nebula areas, but
       stars and globe glow are still visible behind. */
    background-color: rgba(5, 8, 20, 0);
    background-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.18) 100%
    );
    box-shadow: none;
    transition: background-color 0.3s ease,
                backdrop-filter 0.3s ease,
                -webkit-backdrop-filter 0.3s ease,
                box-shadow 0.3s ease;
}

/* Scrolled-past-hero state, mobile-menu-open state, and every
   non-front-page template: solid dark blue with the blur and
   shadow. Background-color animates smoothly on top of the always-
   present gradient (the gradient is mostly hidden once the solid
   colour fades in, which is fine). */
.sl-site-header.is-scrolled,
.sl-site-header.is-menu-open,
body:not(.sl-front-page) .sl-site-header {
    background-color: rgba(5, 8, 20, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04),
                0 6px 24px rgba(0, 0, 0, 0.4);
}

.sl-nav-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.sl-logo {
    color: #f5f5f7;
    text-decoration: none;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Divider between the two halves of the wordmark ("Santeri Leinonen"
   and "Ratko oy"). Dimmed so the pipe reads as punctuation rather
   than a third word, and spaced with margins instead of literal
   spaces so the gap doesn't grow with the font. */
.sl-logo-sep {
    margin: 0 9px;
    opacity: 0.45;
}

/* Right-hand nav group: primary menu + language switcher + logo mark
   (+ the hamburger below the breakpoint). Grouped so `space-between`
   on .sl-nav-inner keeps the wordmark hard left and everything else
   hard right — without the wrapper, three top-level children would
   get spread evenly across the bar instead. */
.sl-nav-right {
    display: flex;
    align-items: center;
    gap: 28px;
}

.sl-primary-nav {
    display: flex;
    align-items: center;
    gap: 32px;
}

.sl-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 28px;
}

.sl-menu a {
    color: #f5f5f7;
    text-decoration: none;
    font-size: 15px;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.sl-menu a:hover,
.sl-menu .current-menu-item a {
    opacity: 1;
}

/* ---- Dropdown submenu ----
   Class names are WP core's own (`menu-item-has-children`, `sub-menu`),
   so this styles both the theme's fallback menu and any real menu an
   admin builds in Appearance → Menus.

   Mobile is the base case: inside the hamburger drawer the children
   are simply always visible, indented under their parent. No tap-to-
   expand state to get stuck, and no hover — which touch devices don't
   really have. The floating dropdown is layered on at the desktop
   breakpoint only. */

.sl-menu .sub-menu {
    list-style: none;
    margin: 14px 0 0;
    padding: 0 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.sl-menu .sub-menu a {
    font-size: 14px;
    opacity: 0.75;
    transition: color 0.15s ease, opacity 0.15s ease;
}

/* Hover/focus turns the label orange rather than filling the row.
   Same accent as body links elsewhere on the site, so the dropdown
   reads as part of the same system. */
.sl-menu .sub-menu a:hover,
.sl-menu .sub-menu a:focus-visible,
.sl-menu .sub-menu .current-menu-item > a {
    opacity: 1;
    color: #ffb86b;
}

/* Dropdown parent that isn't a link ("Palveluni" has no page of its
   own). A button rather than a span so it stays keyboard-reachable;
   styled to be indistinguishable from the sibling menu links. */
.sl-menu-parent {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    font-size: 15px;
    line-height: inherit;
    color: #f5f5f7;
    opacity: 0.85;
    /* Arrow, not a hand: this opens on hover and leads nowhere, so a
       pointer cursor would promise a navigation that never happens.
       It's still a <button> underneath — the click handler is what
       makes it work on touch, where there's no hover and no cursor
       to mislead anyone. */
    cursor: default;
    display: inline-flex;
    align-items: center;
    transition: opacity 0.2s ease;
}

.sl-menu-parent:hover,
.sl-menu-parent[aria-expanded="true"] {
    opacity: 1;
}

/* Caret on the parent item. Drawn with borders rather than a "▾"
   glyph, which renders at wildly different sizes across fonts. */
.sl-menu .menu-item-has-children > a::after,
.sl-menu-parent::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 7px;
    vertical-align: 2px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

/* Caret flips while the panel is open, so the control reads as a
   toggle rather than as decoration. */
.sl-menu-parent[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

@media (min-width: 721px) {
    .sl-menu > li {
        position: relative;
    }

    .sl-menu .sub-menu {
        position: absolute;
        top: 100%;
        left: -18px;
        /* Clears the nav bar's own bottom padding. */
        margin-top: 26px;
        min-width: 230px;
        padding: 8px 0;
        gap: 0;
        border-left: 0;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        /* Fully opaque, and deliberately NOT backdrop-filtered. A
           backdrop-filter here forces the browser to snapshot and
           re-rasterise everything behind the panel; over the hero
           that flattens the compositing the globe's spark glow
           relies on (a 6px dot animating transform: scale() under
           four stacked box-shadows), and the glow visibly dies while
           the menu is open. The nav bar's own blur is safe because
           it only switches on once the hero has scrolled past. */
        background: #0a0e1e;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-4px);
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
        z-index: 10;
    }

    /* Opens on hover, on keyboard focus anywhere inside the item, and
       on an explicit click of the parent button (which is what makes
       it work on touch, where hover doesn't exist). */
    .sl-menu > .menu-item-has-children:hover > .sub-menu,
    .sl-menu > .menu-item-has-children:focus-within > .sub-menu,
    .sl-menu-parent[aria-expanded="true"] + .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Invisible bridge across the gap between the nav item and the
       panel, so the submenu doesn't vanish mid-travel as the pointer
       crosses it. Sits inside the header's own padding, so it can't
       cover anything clickable. */
    .sl-menu > .menu-item-has-children::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 28px;
    }

    .sl-menu .sub-menu a {
        display: block;
        padding: 10px 20px;
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sl-menu .sub-menu {
        transition: none;
        transform: none;
    }
}

.sl-lang-switcher {
    list-style: none;
    margin: 0;
    padding: 0 0 0 24px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    gap: 14px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sl-lang-switcher a {
    color: #f5f5f7;
    text-decoration: none;
    opacity: 0.65;
    transition: opacity 0.2s ease;
}

.sl-lang-switcher a:hover,
.sl-lang-switcher .current-lang a {
    opacity: 1;
}

/* ---- Company logo mark (far right of the nav bar) ----
   Source is WP core's custom-logo feature — uploaded in Appearance →
   Customize → Site Identity, declared in functions.php, rendered by
   `the_custom_logo()` in header.php. Core wraps the <img> in
   `.custom-logo-link`: an <a> on inner pages, a <span> on the homepage
   (because the theme declares 'unlink-homepage-logo'), so both are
   styled here. The explicit height beats the global `img { height: auto }`
   rule on selector specificity. */
.sl-brand-mark {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.sl-brand-mark .custom-logo-link {
    display: block;
    line-height: 0;
}

.sl-brand-mark img {
    display: block;
    height: 32px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
}

/* Lockup at the foot of the open mobile menu. Desktop nav is a single
   bar with no room for it, so it only appears below the breakpoint. */
.sl-nav-lockup {
    display: none;
}

/* Hamburger button — hidden on desktop, shown below the breakpoint. */
.sl-nav-toggle {
    display: none;
    background: transparent;
    border: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    cursor: pointer;
    color: inherit;
    align-items: center;
    justify-content: center;
}

.sl-hamburger {
    position: relative;
    display: block;
    width: 22px;
    height: 2px;
    background: #f5f5f7;
}

/* Explicit colour, NOT `inherit`. These two bars become the X, and the
   open state hides the middle bar by setting the parent's background to
   transparent — inheriting would drain these at the same moment and
   leave a working but invisible close button. */
.sl-hamburger::before,
.sl-hamburger::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #f5f5f7;
    transition: transform 0.25s ease, top 0.25s ease, bottom 0.25s ease;
}

.sl-hamburger::before { top: -7px; }
.sl-hamburger::after  { top:  7px; }

.sl-nav-toggle[aria-expanded="true"] .sl-hamburger {
    background: transparent;
}

.sl-nav-toggle[aria-expanded="true"] .sl-hamburger::before {
    top: 0;
    transform: rotate(45deg);
}

.sl-nav-toggle[aria-expanded="true"] .sl-hamburger::after {
    top: 0;
    transform: rotate(-45deg);
}

/* Push non-front-page content below the fixed header. The front page
   hero is full-bleed and sits behind the nav by design — its first
   line of text is positioned with this in mind. */
.sl-main {
    min-height: 100vh;
}

body:not(.sl-front-page) .sl-main {
    padding-top: 80px;
}

/* ---- Mobile / narrow-viewport ---- */
@media (max-width: 720px) {
    .sl-nav-inner {
        padding: 14px 20px;
        position: relative;
    }

    /* No backdrop blur on the bar below the breakpoint.
       backdrop-filter makes an element the containing block for its
       position:fixed descendants, and the full-screen menu is a fixed
       child of this header — so with the blur on, `bottom: 0` resolved
       to the bottom of the 68px bar and the menu collapsed to a sliver
       showing one item. Solid colour instead; the blur was barely
       perceptible on a bar this short anyway.

       Same selectors as the rules above so equal specificity is broken
       by source order — this block sits later in the file. */
    .sl-site-header,
    .sl-site-header.is-scrolled,
    .sl-site-header.is-menu-open,
    body:not(.sl-front-page) .sl-site-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .sl-site-header.is-scrolled,
    .sl-site-header.is-menu-open,
    body:not(.sl-front-page) .sl-site-header {
        background-color: #050814;
    }

    /* The wordmark is now two names long, so it has to give ground to
       the logo mark and hamburger sharing the right edge. */
    .sl-logo {
        font-size: 15px;
    }

    .sl-logo-sep {
        margin: 0 6px;
    }

    .sl-nav-right {
        gap: 14px;
    }

    /* Logo mark sits just left of the hamburger at the right edge.
       DOM order keeps the toggle ahead of the drawer it controls (so
       keyboard focus reaches the button first); `order` does the
       visual swap. The drawer itself is position:absolute against
       .sl-nav-inner, so it's out of this flex flow entirely. */
    .sl-brand-mark { order: 1; }
    .sl-nav-toggle { order: 2; }

    .sl-brand-mark img {
        height: 24px;
        max-width: 80px;
    }

    .sl-nav-toggle {
        display: inline-flex;
        /* The open menu is a positioned element later in the DOM, so it
           would otherwise paint over this button. It sits above the
           panel geometrically, but don't leave the close control
           depending on that. */
        position: relative;
        z-index: 2;
    }

    /* Full-screen menu: a fixed panel filling everything below the bar,
       so the bar itself (wordmark, logo, close button) stays visible and
       tappable while it's open.

       Closed state is visibility + opacity rather than the old
       max-height: 0. Height animation can't work against a viewport-sized
       panel, and a zero-height overflow-hidden drawer keeps its links in
       the tab order — you could tab into an invisible menu. `visibility`
       removes them properly. */
    .sl-primary-nav {
        position: fixed;
        top: var(--sl-nav-h, 64px);
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));
        background: #050814;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    }

    .sl-primary-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    /* Locks the page behind the overlay. */
    body.sl-menu-open {
        overflow: hidden;
    }

    .sl-menu a,
    .sl-menu-parent {
        font-size: 19px;
    }

    /* The lockup closes off the panel instead of leaving dead space at
       the bottom. margin-top:auto pins it to the foot of the column
       however few menu items there are. */
    .sl-nav-lockup {
        display: block;
        margin-top: auto;
        padding-top: 40px;
    }

    .sl-nav-lockup img {
        display: block;
        width: 100%;
        max-width: 220px;
        height: auto;
        opacity: 0.85;
    }

    .sl-menu {
        flex-direction: column;
        gap: 18px;
    }

    .sl-lang-switcher {
        padding: 18px 0 0;
        margin-top: 4px;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }

    body:not(.sl-front-page) .sl-main {
        padding-top: 64px;
    }
}

/* Narrow phones — "Santeri Leinonen | Ratko oy" plus the logo mark
   plus the hamburger is a lot for a 360 px bar. Step both down once
   more so the wordmark never has to wrap (it's `white-space: nowrap`,
   so without this it would overflow instead). */
@media (max-width: 400px) {
    .sl-logo {
        font-size: 13px;
    }

    .sl-logo-sep {
        margin: 0 5px;
    }

    .sl-brand-mark img {
        height: 21px;
        max-width: 68px;
    }
}

/* ============================================================
   Page content — Gutenberg blocks rendered below the hero on
   the front page, and as the body of regular pages (page.php).
   Kept deliberately simple: a centered reading column, sensible
   block spacing, basic heading + link styles. Editors handle
   richer layouts via core blocks (columns, group, etc.).
   ============================================================ */

.sl-page,
.sl-page-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px;
}

/* No top/bottom padding on the article itself — the
   .sl-page-wrap wrapper handles vertical spacing now so
   stars start at the top edge of the viewport. */

.sl-front-page .sl-page-content {
    padding-top: 96px;
    padding-bottom: 96px;
}

.sl-page-header {
    margin-bottom: 48px;
}

.sl-page-title {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #f5f5f7;
}

/* Block defaults — apply to both the front-page content area and
   page.php's content area. */
.sl-page-content > * + *,
.sl-page > * + * {
    margin-top: 1.4em;
}

.sl-page-content h2,
.sl-page h2 {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 400;
    line-height: 1.2;
    margin-top: 2em;
    /* These headings carry a service name and its price on one line,
       so they wrap often — balancing stops a long one breaking to a
       single orphaned word. */
    text-wrap: balance;
}

/* ---- Section dividers in editor-written content ----
   Every h2 starts a new section, so the rule belongs above the
   heading rather than at the end of the previous block: that way it
   travels with the heading and no separator has to be inserted by
   hand. Direct children only, so headings nested inside a group or
   columns block don't pick up a rule mid-layout. */
.sl-page-content > h2 {
    margin-top: 3em;
    padding-top: 1.5em;
    border-top: 1px solid rgba(255, 122, 26, 0.55);
}

/* The page title already separates the first section from the top of
   the page; a rule immediately under it would read as a double line. */
.sl-page-content > h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* An empty heading block is easy to leave behind in the editor (there
   is one on Puhujakeikat) and would otherwise draw a divider with no
   section under it. */
.sl-page-content > h2:empty {
    display: none;
}

/* Separator blocks inserted by hand get the same treatment, so the two
   ways of dividing a page look identical. */
.sl-page-content hr,
.sl-page-content .wp-block-separator {
    height: 0;
    border: 0;
    border-top: 1px solid rgba(255, 122, 26, 0.55);
    margin: 2.6em 0;
}

.sl-page-content h3,
.sl-page h3 {
    font-size: clamp(20px, 2.4vw, 24px);
    font-weight: 400;
    line-height: 1.3;
    margin-top: 1.6em;
}

.sl-page-content p,
.sl-page p {
    font-size: 17px;
    line-height: 1.65;
    color: rgba(245, 245, 247, 0.88);
}

.sl-page-content a,
.sl-page a {
    color: #ffb86b;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.sl-page-content a:hover,
.sl-page a:hover {
    text-decoration-thickness: 2px;
}

/* Bold inside editor-written copy.
   600 is pinned explicitly because that is the cut actually loaded
   (see the Google Fonts request in functions.php). Left at the
   browser default of 700 there would be no matching face, and it
   would synthesise one by smearing the regular weight — which on a
   dark ground reads as a blurred patch rather than emphasis.
   Colour and weight together: same accent as links in this copy, but
   links are underlined and these aren't, which keeps the two apart. */
.sl-page-content strong,
.sl-page strong,
.sl-page-content b,
.sl-page b {
    color: #ffb86b;
    font-weight: 600;
}

.sl-page-content ul,
.sl-page ul,
.sl-page-content ol,
.sl-page ol {
    padding-left: 1.5em;
}

.sl-page-content li + li,
.sl-page li + li {
    margin-top: 0.4em;
}

.sl-page-content blockquote,
.sl-page blockquote {
    margin: 2em 0;
    padding: 0 0 0 24px;
    border-left: 2px solid rgba(255, 184, 107, 0.6);
    font-style: italic;
    color: rgba(245, 245, 247, 0.95);
}

/* ============================================================
   Site footer — four columns over a meta row.

   Left: the RATKO lockup with its slogan. Then personal contact
   details, company and invoicing details, and the site structure
   as a nested list rather than a single wrapped line.

   The Solar System Scope texture is CC-BY 4.0, which requires
   visible credit on every page that uses the asset.
   ============================================================ */

.sl-site-footer {
    max-width: 1400px;
    margin: 0 auto;
    padding: 64px 32px 40px;
    color: rgba(245, 245, 247, 0.55);
    font-size: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sl-footer-inner {
    display: grid;
    /* Logo column is widest; the three text columns share the rest
       evenly so their headings line up. */
    grid-template-columns: 1.5fr 1fr 1.15fr 1fr;
    gap: 48px;
    align-items: start;
    margin-bottom: 56px;
}

.sl-site-footer a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    padding-bottom: 1px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.sl-site-footer a:hover {
    color: rgba(255, 255, 255, 0.95);
    border-bottom-color: rgba(255, 255, 255, 0.55);
}

/* ---- Logo ---- */

.sl-footer-logo {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
}

/* ---- Text columns ---- */

.sl-footer-heading {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
    color: #f5f5f7;
    margin: 0 0 16px;
}

.sl-footer-subheading {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    color: rgba(245, 245, 247, 0.85);
    margin: 24px 0 12px;
}

.sl-footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(245, 245, 247, 0.75);
}

.sl-footer-list li + li {
    margin-top: 9px;
}

.sl-footer-list a {
    color: rgba(245, 245, 247, 0.75);
    border-bottom: 0;
    padding-bottom: 0;
}

.sl-footer-list a:hover {
    color: #ffffff;
    border-bottom: 0;
}

/* Invoicing rows are label + value stacked, so a long OVT code never
   has to share a line with its label. */
.sl-footer-label {
    display: block;
    font-size: 12px;
    color: rgba(245, 245, 247, 0.45);
}

.sl-footer-value {
    display: block;
    color: rgba(245, 245, 247, 0.85);
}

.sl-footer-pending {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(245, 245, 247, 0.45);
}

/* ---- Site structure ---- */

.sl-footer-tree .sl-footer-group {
    color: rgba(245, 245, 247, 0.9);
}

.sl-footer-subtree {
    list-style: none;
    margin: 9px 0 0;
    padding: 0 0 0 14px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.sl-footer-subtree li + li {
    margin-top: 8px;
}

/* ---- Meta row ---- */

.sl-footer-meta {
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
}

.sl-footer-meta p {
    margin: 0 0 6px;
    line-height: 1.6;
}

.sl-footer-meta p:last-child {
    margin-bottom: 0;
}

.sl-footer-sep {
    margin: 0 10px;
    opacity: 0.55;
}

.sl-footer-credits {
    font-size: 12px;
    opacity: 0.85;
}

@media (max-width: 1024px) {
    .sl-footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .sl-footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .sl-site-footer {
        padding: 44px 20px 32px;
    }
    .sl-footer-inner {
        grid-template-columns: 1fr;
        gap: 36px;
        margin-bottom: 40px;
    }
    .sl-footer-logo {
        max-width: 240px;
    }
    .sl-footer-line {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .sl-footer-sep {
        display: none;
    }
}

/* ============================================================
   Reusable buttons. Currently used by the about-section CTA;
   safe to reuse anywhere outside the hero (the hero has its
   own .cta classes inside .sl-hero scope).
   ============================================================ */

.sl-button {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease,
                transform 0.18s ease, box-shadow 0.18s ease;
}

/* Matches the hero's primary CTA orange (#ff7a1a) so the two
   buttons read as the same call-to-action treatment. No glow at
   rest — the glow only appears on hover for emphasis. */
.sl-button-primary {
    background: #ff7a1a;
    color: #ffffff;
    border-color: #ff7a1a;
}

.sl-button-primary:hover {
    background: #ff8a30;
    border-color: #ff8a30;
    transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(255, 122, 26, 0.35);
}

/* Anchor-target offset so a "Palveluni" / "Minusta" link doesn't
   tuck the section under the fixed nav. */
.sl-services,
.sl-about {
    scroll-margin-top: 80px;
}

/* ============================================================
   Shared "space" wrapper — holds services, about, and the
   editable content area, with one continuous starfield behind
   them. Each inner section is transparent so the stars and
   background show through everywhere.
   ============================================================ */

.sl-after-hero {
    position: relative;
    background: #050814;
    overflow: hidden;
}

.sl-after-hero-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.sl-after-hero-stars .sl-light-star {
    position: absolute;
    border-radius: 50%;
    background: #ffffff;
    opacity: var(--base-opacity, 0.4);
    animation: sl-light-twinkle var(--duration, 5s) ease-in-out var(--delay, 0s) infinite;
}

.sl-after-hero > *:not(.sl-after-hero-stars) {
    position: relative;
    z-index: 1;
}

/* On page templates the .sl-after-hero wrapper IS the content
   container — let it own the top spacing (so the dark backdrop
   + stars extend all the way up to the fixed nav, instead of
   starting ~80px below it). The body class is set in the body
   class filter in functions.php. */
body.sl-page-template .sl-main {
    padding-top: 0;
}

.sl-page-wrap {
    padding-top: 120px;
    padding-bottom: 96px;
    min-height: 60vh;
}

@media (max-width: 720px) {
    .sl-page-wrap {
        padding-top: 96px;
        padding-bottom: 64px;
    }
}

/* ============================================================
   Update banner — short notice above the services cards. Just
   centered Inter-regular white text floating over the starfield;
   no box, no background. Generous symmetrical breathing room
   above and below. .sl-services drops its top padding so the
   banner's bottom padding owns the gap to the cards.
   ============================================================ */

.sl-update-banner {
    padding: 80px 32px;
    text-align: center;
}

.sl-update-banner p {
    margin: 0 auto;
    max-width: 720px;
    font-family: inherit; /* Inter from the global body font */
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 400;
    line-height: 1.4;
    color: #f5f5f7;
}

@media (max-width: 600px) {
    .sl-update-banner {
        padding: 56px 20px;
    }
}

/* ============================================================
   Services section — four cards with the consulting offerings.
   Lives between the hero and the editable Gutenberg area.
   ============================================================ */

.sl-services {
    background: transparent;
    /* No top padding — the .sl-update-banner above provides the
       breathing room down to the cards. */
    padding: 0 0 96px;
}

/* …unless the banner has been switched off in the admin, in which
   case the cards have to supply that gap themselves or they collide
   with the bottom of the hero. */
.sl-services-no-banner {
    padding-top: 96px;
}

.sl-services-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

.sl-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.sl-service-card {
    /* Cards are <a> elements (each card links to /palveluni/),
       so reset link colour + underline so the styling reads as
       a card, not a hyperlink. */
    display: block;
    text-decoration: none;
    color: inherit;

    position: relative;
    background: linear-gradient(
        135deg,
        rgba(80, 130, 220, 0.10) 0%,
        rgba(40, 80, 160, 0.18) 100%
    );
    border: 1px solid rgba(120, 180, 255, 0.20);
    border-radius: 14px;
    padding: 32px 26px;
    overflow: hidden;
    transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

/* Top-edge cyan accent — like a status bar / data port indicator
   on a control panel. Brightens on hover. */
.sl-service-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(140, 210, 255, 0.45) 30%,
        rgba(180, 230, 255, 0.65) 50%,
        rgba(140, 210, 255, 0.45) 70%,
        transparent 100%
    );
    opacity: 0.6;
    transition: opacity 0.25s ease;
}

.sl-service-card:hover {
    border-color: rgba(160, 210, 255, 0.55);
    background: linear-gradient(
        135deg,
        rgba(80, 130, 220, 0.18) 0%,
        rgba(40, 80, 160, 0.26) 100%
    );
    transform: translateY(-3px);
    box-shadow:
        0 12px 36px rgba(50, 100, 200, 0.22),
        0 0 24px rgba(120, 200, 255, 0.18);
}

.sl-service-card:hover::before {
    opacity: 1;
}

/* Numbered prefix — monospace, dim cyan with a tiny glow.
   Reads as a technical reference (sequence id) rather than
   a list bullet. */
.sl-service-num {
    display: block;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: rgba(140, 200, 255, 0.65);
    text-shadow: 0 0 10px rgba(120, 200, 255, 0.30);
    margin-bottom: 22px;
    transition: color 0.25s ease;
}

.sl-service-card:hover .sl-service-num {
    color: rgba(180, 220, 255, 0.95);
}

.sl-service-title {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.25;
    color: #f5f5f7;
    margin: 0 0 14px;
}

.sl-service-body {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(245, 245, 247, 0.78);
    margin: 0;
}

@media (max-width: 1024px) {
    .sl-services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .sl-services-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .sl-services {
        padding: 96px 0 64px;
    }
    .sl-services-inner {
        padding: 0 20px;
    }
}

/* ============================================================
   Feature rows — wide image + text sections between the service
   cards and the about block. Sides alternate down the page.

   Markup order is always media-then-text, and the swap is done
   with `order` on the wider layout only. That way the mobile
   stack stays image-above-text on every row, instead of one row
   silently inverting when the grid collapses.
   ============================================================ */

.sl-features {
    background: transparent;
    padding: 0 0 96px;
}

.sl-feature {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    scroll-margin-top: 96px;
}

.sl-feature + .sl-feature {
    margin-top: 96px;
}

.sl-feature-flip .sl-feature-media {
    order: 2;
}

.sl-feature-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Stand-in for an image that hasn't been supplied yet. Same
   gradient and cyan top-edge accent as the service cards, so an
   unfilled slot reads as part of the design rather than as a
   missing asset. */
.sl-feature-placeholder {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    border: 1px solid rgba(120, 180, 255, 0.20);
    background: linear-gradient(
        135deg,
        rgba(80, 130, 220, 0.10) 0%,
        rgba(40, 80, 160, 0.18) 100%
    );
    overflow: hidden;
}

.sl-feature-placeholder::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(140, 210, 255, 0.45) 30%,
        rgba(180, 230, 255, 0.65) 50%,
        rgba(140, 210, 255, 0.45) 70%,
        transparent 100%
    );
    opacity: 0.6;
}

.sl-feature-title {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #f5f5f7;
    margin: 0 0 20px;
}

.sl-feature-body {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(245, 245, 247, 0.85);
    margin: 0 0 16px;
}

.sl-feature-body:last-child {
    margin-bottom: 0;
}

/* Button and example link share a row, the link to the right of the
   button. The wrapper owns the spacing — both children zero their own
   margins, so `gap` is the only thing setting the distance between
   them and there's no margin quietly adding to it.

   align-items:center rather than baseline: the link runs to two lines
   and the button to one, and baseline alignment would hang the link's
   second line below the button.

   flex-wrap so the link drops under the button rather than overflowing
   when the column gets narrow. */
.sl-feature-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 30px;
    margin-top: 30px;
}

.sl-feature-cta {
    margin-top: 0;
}

/* Secondary link, sitting beside the button. Spacing comes from the
   wrapper's gap. The label carries its own <br>, so the box sizes to
   the longer of its two lines and the underline stops at the words. */
.sl-feature-link {
    margin-top: 0;
    font-size: 15px;
    line-height: 1.45;
}

/* ---- Case sections (template-esimerkit.php) ----
   A case is a .sl-feature row plus an optional full-width video, so
   the vertical rhythm moves from the row to this wrapper. */

.sl-case {
    scroll-margin-top: 96px;
}

.sl-case + .sl-case {
    margin-top: 96px;
}

/* Orange underlined text link, shared by the case pages and the
   front-page feature rows.

   APPEARANCE ONLY — no display, margin or size here. This rule sits
   later in the file than .sl-feature-link's own block, so any layout
   property declared here silently overrode that block at equal
   specificity; `display: inline-block` did exactly that and kept the
   feature link glued to the same row as its button. Each user sets
   its own layout below. */
.sl-case-link,
.sl-feature-link {
    color: #ff7a1a;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    transition: color 0.2s ease, text-decoration-thickness 0.2s ease;
}

/* On the case pages the link follows body copy directly, so
   inline-block keeps the hit area to the words rather than the full
   column width. */
.sl-case-link {
    display: inline-block;
    margin-top: 22px;
    font-size: 16px;
}

.sl-case-link:hover,
.sl-feature-link:hover {
    color: #ff8a30;
    text-decoration-thickness: 2px;
}

/* No report URL entered yet: non-clickable, but at full strength.
   Fading it read as a muddy brown rather than as "not ready" —
   #ff7a1a at 55% over the near-black background loses its
   saturation before it loses its presence. */
.sl-case-link-pending {
    cursor: default;
}

/* Matches .sl-feature's container so the player lines up with the row
   above it rather than floating in its own width. */
.sl-case-video {
    max-width: 1100px;
    margin: 36px auto 0;
    padding: 0 32px;
}

@media (max-width: 860px) {
    .sl-case + .sl-case {
        margin-top: 64px;
    }
    .sl-case-video {
        margin-top: 24px;
        padding: 0 20px;
    }
}

@media (max-width: 860px) {
    .sl-feature {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 0 20px;
    }
    /* Collapse the flip too — otherwise the second row would put its
       image below the text while the first puts it above. */
    .sl-feature-flip .sl-feature-media {
        order: 0;
    }
    .sl-feature + .sl-feature {
        margin-top: 64px;
    }
    .sl-features {
        padding-bottom: 64px;
    }
    .sl-feature-media img,
    .sl-feature-placeholder {
        max-width: 520px;
    }
}

/* ============================================================
   Contact strip — short, low-furniture nudge to email Santeri.
   Front-page only; lives between the about section and the
   editable Gutenberg content area.
   ============================================================ */

.sl-contact {
    background: transparent;
    padding: 64px 0 96px;
    text-align: center;
    scroll-margin-top: 80px;
}

.sl-contact-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 32px;
}

.sl-contact-heading {
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 400;
    line-height: 1.2;
    color: #f5f5f7;
    margin: 0 0 12px;
}

.sl-contact-email,
.sl-contact-phone {
    font-size: clamp(18px, 2vw, 22px);
    margin: 0;
}

/* Phone sits under the e-mail as a second line of the same block, so
   it gets the same treatment at a slightly quieter size — e-mail is
   still the primary channel. */
.sl-contact-phone {
    font-size: clamp(16px, 1.7vw, 19px);
    margin-top: 10px;
}

.sl-contact-email a,
.sl-contact-phone a {
    color: #ff7a1a;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 122, 26, 0.40);
    padding-bottom: 2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.sl-contact-email a:hover,
.sl-contact-phone a:hover {
    color: #ff8a30;
    border-bottom-color: #ff8a30;
}

/* ============================================================
   About section — portrait + name + lede + bullets + CTA.
   ============================================================ */

.sl-about {
    background: transparent;
    padding: 96px 0;
}

@keyframes sl-light-twinkle {
    0%, 100% { opacity: var(--base-opacity, 0.4); }
    50%      { opacity: var(--peak-opacity, 0.7); }
}

@media (prefers-reduced-motion: reduce) {
    .sl-after-hero-stars .sl-light-star { animation: none; }
}

.sl-about-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 56px;
    align-items: start;
}

.sl-about-photo {
    /* Frame matches the supplied portrait's native aspect ratio
       (1059 × 1639) so the image fills it with no cropping or
       zoom — what the user pre-cropped is what shows. */
    aspect-ratio: 1059 / 1639;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow: hidden;
}

.sl-about-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.sl-about-name {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 18px;
    color: #f5f5f7;
}

.sl-about-lede {
    font-size: 16px;
    line-height: 1.65;
    color: rgba(245, 245, 247, 0.85);
    margin: 0 0 28px;
}

.sl-about-bullets {
    list-style: none;
    margin: 0 0 36px;
    padding: 0;
}

.sl-about-bullets li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 12px;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(245, 245, 247, 0.85);
}

.sl-about-bullets li::before {
    content: "→";
    position: absolute;
    left: 0;
    top: 0;
    color: #ffb86b;
    font-weight: 500;
}

@media (max-width: 768px) {
    .sl-about-inner {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 0 20px;
    }
    .sl-about-photo {
        max-width: 280px;
    }
    .sl-about {
        padding: 64px 0;
    }
}

/* ============================================================
   Sub-page building blocks — shared by template-palvelut.php
   (service detail rows) and template-linkit.php (link cards and
   embeds). Both sit inside the same .sl-after-hero starfield
   wrapper as the front page, so everything here is transparent
   and lets the stars through.

   Container is wider than the 800px .sl-page reading column:
   these sections are two-column at desktop width, and cramming
   them into a prose measure makes the columns unusably narrow.
   ============================================================ */

.sl-detail-wrap {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Lede paragraph under a page title — one step up from body copy,
   one step down from the title. */
.sl-page-lede {
    max-width: 640px;
    margin: 20px 0 0;
    font-size: clamp(17px, 1.9vw, 20px);
    line-height: 1.6;
    color: rgba(245, 245, 247, 0.82);
}

/* ---- Jump links to the sections further down the page ---- */

.sl-detail-jump ul {
    list-style: none;
    margin: 0 0 64px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sl-detail-jump a {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid rgba(120, 180, 255, 0.22);
    border-radius: 100px;
    font-size: 14px;
    color: rgba(245, 245, 247, 0.85);
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.sl-detail-jump a:hover {
    border-color: rgba(160, 210, 255, 0.55);
    background-color: rgba(80, 130, 220, 0.12);
    color: #ffffff;
}

/* ---- One expanded service block ---- */

.sl-detail {
    padding: 0 0 56px;
    margin-bottom: 56px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    /* Same offset as the front-page sections so a jump link doesn't
       tuck the heading under the fixed nav. */
    scroll-margin-top: 96px;
}

.sl-detail:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}

/* Matches .sl-service-num on the front-page cards so a visitor
   recognises card 02 and section 02 as the same thing. */
.sl-detail-num {
    display: block;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: rgba(140, 200, 255, 0.65);
    text-shadow: 0 0 10px rgba(120, 200, 255, 0.30);
    margin-bottom: 14px;
}

.sl-detail-title {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #f5f5f7;
    margin: 0 0 18px;
}

.sl-detail-body {
    max-width: 680px;
    font-size: 17px;
    line-height: 1.65;
    color: rgba(245, 245, 247, 0.85);
    margin: 0 0 36px;
}

.sl-detail-cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.sl-detail-col-title {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(140, 200, 255, 0.75);
    margin: 0 0 14px;
}

.sl-detail-points {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sl-detail-points li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(245, 245, 247, 0.85);
}

/* Same arrow marker as the front page's about bullets. */
.sl-detail-points li::before {
    content: "→";
    position: absolute;
    left: 0;
    top: 0;
    color: #ffb86b;
    font-weight: 500;
}

@media (max-width: 700px) {
    .sl-detail-cols {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .sl-detail {
        padding-bottom: 40px;
        margin-bottom: 40px;
    }
    .sl-detail-jump ul {
        margin-bottom: 44px;
    }
}

/* ============================================================
   Link sections — curated lists of writing, video and audio
   published elsewhere (template-linkit.php).
   ============================================================ */

.sl-links {
    margin-bottom: 72px;
    scroll-margin-top: 96px;
}

.sl-links:last-child {
    margin-bottom: 0;
}

.sl-links-heading {
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 400;
    line-height: 1.2;
    color: #f5f5f7;
    margin: 0 0 12px;
}

.sl-links-intro {
    max-width: 640px;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(245, 245, 247, 0.78);
    margin: 0 0 28px;
}

.sl-link-grid {
    display: grid;
    /* auto-fit rather than a fixed column count: these lists grow by
       one line of text in the admin, so the grid has to cope with
       any number of items without a code change. */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

/* Same visual treatment as the front page's service cards, so
   "clickable card" reads consistently across the site. */
.sl-link-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    color: inherit;

    background: linear-gradient(
        135deg,
        rgba(80, 130, 220, 0.10) 0%,
        rgba(40, 80, 160, 0.18) 100%
    );
    border: 1px solid rgba(120, 180, 255, 0.20);
    border-radius: 14px;
    padding: 24px 22px;
    transition: border-color 0.25s ease, transform 0.25s ease,
                background 0.25s ease, box-shadow 0.25s ease;
}

.sl-link-card:hover {
    border-color: rgba(160, 210, 255, 0.55);
    background: linear-gradient(
        135deg,
        rgba(80, 130, 220, 0.18) 0%,
        rgba(40, 80, 160, 0.26) 100%
    );
    transform: translateY(-3px);
    box-shadow:
        0 12px 36px rgba(50, 100, 200, 0.22),
        0 0 24px rgba(120, 200, 255, 0.18);
}

.sl-link-card-title {
    font-size: 17px;
    line-height: 1.35;
    color: #f5f5f7;
}

.sl-link-card-desc {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(245, 245, 247, 0.72);
}

/* Host name as a quiet provenance line — tells you you're leaving
   the site, and where to, without an explicit "external link" icon.
   margin-top:auto pins it to the bottom so cards of differing text
   length still line their hosts up. */
.sl-link-card-host {
    margin-top: auto;
    padding-top: 10px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: rgba(140, 200, 255, 0.65);
}

/* ---- Embedded players ---- */

.sl-embed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
}

.sl-embed {
    margin: 0;
}

/* oEmbed hands back a provider iframe with its own fixed width and
   height attributes, which don't survive a fluid grid. Forcing the
   frame to 16:9 and stretching the iframe into it makes every video
   responsive without touching the provider markup. Audio embeds
   (Spotify and friends) are much shorter than 16:9 and get
   letterboxed here — that's why the podcast section defaults to
   link cards rather than embeds. */
.sl-embed-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(10, 16, 34, 0.85);
    border: 1px solid rgba(120, 180, 255, 0.18);
}

.sl-embed-frame iframe,
.sl-embed-frame video,
.sl-embed-frame object,
.sl-embed-frame embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.sl-embed-caption {
    display: block;
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.45;
    color: rgba(245, 245, 247, 0.85);
}

.sl-embed-desc {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    color: rgba(245, 245, 247, 0.65);
}

/* ============================================================
   Closing call-to-action strip at the foot of a sub-page.
   ============================================================ */

.sl-page-cta {
    margin-top: 88px;
    padding: 0 24px;
    text-align: center;
}

.sl-page-cta-inner {
    max-width: 620px;
    margin: 0 auto;
    padding: 48px 32px;
    border: 1px solid rgba(120, 180, 255, 0.20);
    border-radius: 16px;
    background: linear-gradient(
        135deg,
        rgba(80, 130, 220, 0.10) 0%,
        rgba(40, 80, 160, 0.18) 100%
    );
}

.sl-page-cta-heading {
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 400;
    line-height: 1.2;
    color: #f5f5f7;
    margin: 0 0 12px;
}

.sl-page-cta-text {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(245, 245, 247, 0.82);
    margin: 0 0 28px;
}

@media (max-width: 700px) {
    .sl-page-cta {
        margin-top: 64px;
        padding: 0 20px;
    }
    .sl-page-cta-inner {
        padding: 36px 24px;
    }
    .sl-links {
        margin-bottom: 56px;
    }
    .sl-detail-wrap {
        padding: 0 20px;
    }
}