/*
 * site.css — custom styles for the Embedded Analytics Demo.
 *
 * Covers:
 *   - selected/active top-level menu styling (accent + underline)
 *   - multilevel dropdown submenu positioning + reveal
 *   - hero (aligned title + lead)
 *   - home page category card styling (professional, image header + overlay)
 *   - general modern polish (typography, spacing)
 *   - responsive iframe container
 *
 * Font sizes are expressed in px (per project preference); spacing/radii may
 * still use rem/em.
 *
 * Requirements: 3.2, 3.4, 13.1, 13.2, 13.3.
 */

:root {
    --srm-ink: #0f172a;
    --srm-ink-soft: #475569;
    --srm-accent: #ffc107;
    --srm-accent-strong: #ffca2c;
    --srm-primary: #1d4ed8;
    --srm-border: #e2e8f0;
    --srm-radius: 14px;
    --srm-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    --srm-shadow-hover: 0 18px 40px rgba(15, 23, 42, 0.16);
}

/* ---------- General polish ---------- */

body {
    font-family: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    color: var(--srm-ink);
    background-color: #f4f6fb;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-content {
    flex: 1 0 auto;
}

.site-navbar {
    /* Same dark tone as the top of the hero header so the navbar and hero read
       as one continuous banner (no seam, no divider line). */
    background: #0b1220 !important;
    /* Extra space above the links so the bar sits roughly centered between the
       top of the page and the hero title below. */
    padding-top: 34px;
    padding-bottom: 22px;
}

/* ---------- Anti-flicker: reveal the nav list only when complete ----------
   The navbar markup is large (each Reports/Charts/Pivot Tables dropdown embeds
   its full nested category -> title submenus), so the LAST top-level items sit
   tens of kilobytes into the response. With output buffering off, the browser
   paints the half-parsed list and the trailing items appear to "pop in" a moment
   later (looked like 8 -> 5 -> 8 items while navigating between resources).

   `nav-pending` hides the list with opacity, so its box still reserves the same
   height and nothing shifts. The inline script right after the </ul> in
   views/partials/menu.php removes the class the instant every item is parsed.
   The animation below is a no-JS safety net: it forces the menu visible after a
   short delay even if that script never runs. */
.site-navbar .navbar-nav.nav-pending {
    opacity: 0;
    animation: srm-nav-reveal 0s linear 1.2s forwards;
}

@keyframes srm-nav-reveal {
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .site-navbar .navbar-nav.nav-pending {
        /* No fade involved, but honor the preference by revealing sooner. */
        animation-delay: 0.3s;
    }
}

.site-navbar .navbar-nav .nav-link {
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #e2e8f0 !important;
    margin: 0 4px;
    padding: 8px 16px !important;
    border-radius: 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.site-navbar .navbar-nav .nav-link:hover,
.site-navbar .navbar-nav .nav-link:focus {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.10);
}

.site-navbar .navbar-nav .nav-link i {
    color: var(--srm-accent);
}

/* ---------- Selected / active top-level menu item ---------- */

.site-navbar .nav-link.selected,
.site-navbar .nav-link.active {
    color: var(--srm-ink) !important;
    background-color: var(--srm-accent) !important;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.35);
}

.site-navbar .nav-link.selected i,
.site-navbar .nav-link.active i {
    color: var(--srm-ink) !important;
}

.site-navbar .nav-link.selected:hover,
.site-navbar .nav-link.active:hover {
    color: var(--srm-ink) !important;
    background-color: var(--srm-accent-strong) !important;
}

/* ---------- Multilevel dropdown submenu ---------- */

.dropdown-menu {
    font-size: 14px;
}

.dropdown-menu .dropdown-submenu {
    position: relative;
}

/* Submenu opens to the side, aligned with its parent item. */
.dropdown-menu .dropdown-submenu > .dropdown-menu.submenu {
    top: 0;
    left: 100%;
    margin-top: -0.35rem;
    margin-left: 0.1rem;
    display: none;
}

/* Reveal submenu on hover (desktop). */
.dropdown-menu .dropdown-submenu:hover > .dropdown-menu.submenu {
    display: block;
}

/* Reveal submenu when opened via click/touch (site.js toggles this). */
.dropdown-menu .dropdown-submenu.show > .dropdown-menu.submenu {
    display: block;
}

/* Parent-item caret pointing to the side. */
.dropdown-menu .dropdown-submenu > .dropdown-toggle::after {
    border-top: 0.3em solid transparent;
    border-bottom: 0.3em solid transparent;
    border-left: 0.3em solid;
    border-right: 0;
    float: right;
    margin-top: 0.55em;
    margin-left: 0.5em;
}

/* If a submenu would overflow the right edge, flip it to the left. */
.dropdown-menu .dropdown-submenu.submenu-left > .dropdown-menu.submenu {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 0.1rem;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--srm-accent);
    color: var(--srm-ink);
}

/* On small screens, stack submenus inline rather than to the side. */
@media (max-width: 991.98px) {
    .dropdown-menu .dropdown-submenu > .dropdown-menu.submenu {
        position: static;
        left: 0;
        margin-left: 1rem;
        border: 0;
        box-shadow: none;
    }
    .dropdown-menu .dropdown-submenu > .dropdown-menu.submenu {
        display: none;
    }
    .dropdown-menu .dropdown-submenu.show > .dropdown-menu.submenu {
        display: block;
    }
}

/* ---------- Hero ---------- */

.home-hero {
    background: linear-gradient(135deg, #0b1220 0%, #12203b 55%, #1d3a6e 100%);
}

/* The hero content spans the full container width so its left/right edges
   align with the category cards area in the body below. */
.hero-inner {
    max-width: 100%;
}

.hero-title {
    font-size: 40px;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.hero-lead {
    font-size: 17px;
    line-height: 1.6;
    color: #cbd5e1;
}

/* Entrance animation for the hero title + lead (fast, staggered). */
@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-animate {
    opacity: 0;
    animation: heroFadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-animate-1 {
    animation-delay: 0.05s;
}

.hero-animate-2 {
    animation-delay: 0.18s;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .hero-animate {
        opacity: 1;
        animation: none;
    }
}

@media (max-width: 575.98px) {
    .hero-title {
        font-size: 30px;
    }
    .hero-lead {
        font-size: 15px;
    }
}

/* ---------- Section title (matches the header style) ---------- */

.section-title {
    font-size: 26px;
    letter-spacing: -0.01em;
    color: var(--srm-ink);
    position: relative;
    padding-bottom: 10px;
}

.section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 4px;
    border-radius: 4px;
    background: var(--srm-accent);
}

/* ---------- Home page category cards (professional) ---------- */

.category-card {
    border: 1px solid var(--srm-border);
    border-radius: var(--srm-radius);
    overflow: hidden;
    box-shadow: var(--srm-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background-color: #fff;
    height: 100%;
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--srm-shadow-hover);
}

/* Image header with a title overlay for a formal, dashboard-like look. */
.category-media {
    position: relative;
    height: 150px;
    overflow: hidden;
}

.category-media .category-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.category-card:hover .category-media .category-image {
    transform: scale(1.05);
}

.category-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.15) 0%, rgba(15, 23, 42, 0.78) 100%);
}

.category-name {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 14px;
    margin: 0;
    color: #fff;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.category-card .card-body {
    padding: 18px 20px 22px;
}

.resource-group + .resource-group {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--srm-border);
}

.resource-group-label {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--srm-primary);
    margin-bottom: 8px;
}

.resource-list li + li {
    margin-top: 2px;
}

.resource-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    color: var(--srm-ink-soft);
    text-decoration: none;
    padding: 4px 6px;
    border-radius: 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.resource-link:hover {
    background-color: #f1f5ff;
    color: var(--srm-primary);
}

.resource-bullet {
    font-size: 11px;
    color: #94a3b8;
    transition: color 0.15s ease, transform 0.15s ease;
}

.resource-link:hover .resource-bullet {
    color: var(--srm-primary);
    transform: translateX(2px);
}

/* ---------- Resource page heading ---------- */

/* Resource pages (the embed files) use a plain white body background. */
body.resource-page {
    background-color: #ffffff;
}

/* The report renders inside a cross-origin iframe that has its own internal
   left padding, so its content starts slightly inset from the iframe edge.
   Indent the heading by the same amount so the title lines up with the report
   content. Adjust --resource-inset if your report uses a different gutter. */
:root {
    --resource-inset: 45px;
}

.resource-header {
    padding-left: var(--resource-inset);
    padding-right: var(--resource-inset);
}

.resource-title {
    font-size: 26px;
    letter-spacing: -0.01em;
    color: var(--srm-ink);
}

/* The title doubles as a "back to the parent view" control: clicking it
   reloads the page, resetting the embedded report/dashboard after a drill-down.
   Style it so it clearly reads as a clickable link (accent color, pointer,
   underline-on-hover) with a small refresh icon hint. */
.resource-title-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--srm-primary);
    text-decoration: none;
    cursor: pointer;
    border-radius: 8px;
    padding: 2px 6px;
    margin-left: -6px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.resource-title-link .resource-title-text {
    text-decoration: underline;
    text-decoration-color: rgba(29, 78, 216, 0.35);
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}

.resource-title-link:hover,
.resource-title-link:focus {
    color: var(--srm-accent-strong);
    background-color: #f1f5ff;
    outline: none;
}

.resource-title-link:hover .resource-title-text,
.resource-title-link:focus .resource-title-text {
    text-decoration-color: currentColor;
}

.resource-title-refresh {
    font-size: 17px;
    color: var(--srm-primary);
    opacity: 0.75;
    transition: transform 0.4s ease, opacity 0.15s ease, color 0.15s ease;
}

.resource-title-link:hover .resource-title-refresh,
.resource-title-link:focus .resource-title-refresh {
    color: var(--srm-accent-strong);
    opacity: 1;
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .resource-title-refresh {
        transition: opacity 0.15s ease, color 0.15s ease;
    }
    .resource-title-link:hover .resource-title-refresh,
    .resource-title-link:focus .resource-title-refresh {
        transform: none;
    }
}

.resource-category {
    font-size: 14px;
}

/* ---------- Chart Refresh button ----------
   Charts render their own title inside the SRM iframe, so rather than repeat it
   as an on-page heading we give chart pages a "Refresh" button. The bar spans
   the full width of the .resource-container (the same 80%-wide, centered column
   that holds the iframe), and right-aligns its content, so the button's right
   edge lines up with the iframe's right edge. Clicking it reloads the page,
   resetting the chart to its original view after a drill-down. */
.chart-refresh-bar {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    margin-bottom: 12px;
}

.chart-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
}

.chart-refresh-btn i {
    transition: transform 0.4s ease;
}

.chart-refresh-btn:hover i,
.chart-refresh-btn:focus i {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .chart-refresh-btn i {
        transition: none;
    }
    .chart-refresh-btn:hover i,
    .chart-refresh-btn:focus i {
        transform: none;
    }
}

/* ---------- Responsive iframe container ---------- */

/* Resource page wrapper: an 80%-of-viewport column, centered so the space to
   its left always equals the space to its right, on any desktop screen.
   Both the title header and the embedded iframe live inside this wrapper, so
   they share the same 80% width and centering; the title keeps its per-resource
   left/right padding (from the config's `title_padding`), so its alignment
   relative to the iframe is preserved exactly. Using a viewport-relative width
   (instead of a fixed 1500px cap) also lets the column keep growing as the
   layout viewport widens when the browser is zoomed out, which stops the
   embedded report's text from shrinking below a readable size at low zoom. */
.resource-container {
    width: 80%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

.embed-responsive {
    position: relative;
    width: 100%;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--srm-radius);
    overflow: hidden;
    box-shadow: var(--srm-shadow);
    background-color: #fff;
}

.embed-responsive > iframe {
    display: block;
    width: 100%;
    /* Initial height before the auto-resize script measures the real content
       height (site.js grows this to fit, removing the inner scrollbar when the
       embed is same-origin). */
    height: 80vh;
    border: 0;
}

/* ---------- Embed loading state ----------
   SRM resources are fetched live inside a cross-origin iframe, which can take a
   few seconds. resource_header.php prints a placeholder card (spinner +
   skeleton) and marks <body> with `srm-embed-pending`; that class parks the
   iframe out of the document flow so it keeps loading eagerly while staying
   invisible. resource_footer.php removes the class on the iframe's `load`
   event, which swaps the placeholder for the real report in one step. */

body.resource-page .resource-container {
    position: relative;
}

/* Keep the embed loading, but out of flow and invisible, until it is ready.
   (display:none is avoided on purpose — it can defer or discard the fetch.) */
body.srm-embed-pending .resource-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
}

.srm-embed-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 24px;
    text-align: center;
    background: #fff;
    border-radius: var(--srm-radius);
    box-shadow: var(--srm-shadow);
    transition: opacity 0.3s ease;
}

.srm-embed-loading.is-hidden {
    display: none;
}

.srm-embed-loading-text {
    margin: 18px 0 4px;
    font-size: 17px;
    font-weight: 700;
    color: var(--srm-ink);
}

.srm-embed-loading-hint {
    margin: 0;
    font-size: 14.5px;
    color: var(--srm-ink-soft);
}

/* Shared spinner used by the embed overlay and the navigation overlay. */
.srm-spinner {
    display: inline-block;
    width: 46px;
    height: 46px;
    border: 4px solid rgba(29, 78, 216, 0.15);
    border-top-color: var(--srm-primary);
    border-right-color: var(--srm-accent);
    border-radius: 50%;
    animation: srm-spin 0.8s linear infinite;
}

@keyframes srm-spin {
    to { transform: rotate(360deg); }
}

/* Skeleton bars under the spinner hint that a table/report is on its way. */
.srm-embed-skeleton {
    width: min(520px, 80%);
    margin: 22px auto 0;
}

.srm-embed-skeleton span {
    display: block;
    height: 12px;
    margin-bottom: 10px;
    border-radius: 6px;
    background: linear-gradient(90deg, #eef1f7 25%, #e2e8f0 37%, #eef1f7 63%);
    background-size: 400% 100%;
    animation: srm-shimmer 1.4s ease infinite;
}

.srm-embed-skeleton span:nth-child(2) { width: 88%; }
.srm-embed-skeleton span:nth-child(3) { width: 72%; }
.srm-embed-skeleton span:nth-child(4) { width: 80%; margin-bottom: 0; }

@keyframes srm-shimmer {
    from { background-position: 100% 0; }
    to   { background-position: 0 0; }
}

/* ---------- Navigation loading overlay ----------
   Injected by site.js when a visitor clicks an internal resource link. Some
   resource pages exchange an access key for an embed token server-side before
   any HTML is sent, so the browser can sit on a white page for a moment. */

.srm-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(244, 246, 251, 0.88);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.srm-nav-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.srm-nav-overlay-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 30px 38px;
    background: #fff;
    border-radius: var(--srm-radius);
    box-shadow: var(--srm-shadow-hover);
    max-width: 90vw;
}

.srm-nav-overlay-text {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--srm-ink);
    max-width: 32ch;
    text-align: center;
    overflow-wrap: anywhere;
}

/* Thin progress bar pinned to the top of the viewport during navigation. */
.srm-nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 2001;
    background: linear-gradient(90deg, var(--srm-primary), var(--srm-accent));
    box-shadow: 0 0 8px rgba(29, 78, 216, 0.5);
    transition: width 0.35s ease, opacity 0.2s ease;
    opacity: 0;
}

.srm-nav-progress.is-visible {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .srm-spinner {
        animation-duration: 1.6s;
    }

    .srm-embed-skeleton span {
        animation: none;
    }

    .srm-embed-loading,
    .srm-nav-overlay,
    .srm-nav-progress {
        transition: none;
    }
}

/* ---------- Footer ---------- */

.site-footer {
    flex-shrink: 0;
}

.footer-attribution {
    font-size: 15px;
}

.footer-link {
    font-size: 15px;
    text-decoration: none;
    font-weight: 500;
}

.footer-link:hover {
    text-decoration: underline;
}