/* ============================================================
   STAT public site — minimal modern theme
   Blue #006EFF (primary) · Green #27E400 · Pink #FF009D
   Red #FF0000 · Black #000000 · White #FFFFFF (background)
   ============================================================ */
:root{
    /* brand palette */
    --blue: #006eff;
    --green: #27e400;
    --pink: #ff009d;
    --red: #ff0000;
    --black: #000000;
    --white: #ffffff;
    --yellow: #ffcc00;       /* rule between the STAT and Sint Maarten marks */

    /* semantic tokens (legacy names kept, remapped to the new scheme) */
    --pale-sky: #eaf1ff;     /* light blue tint (hovers / soft fills) */
    --sky: #006eff;          /* accent / focus → blue */
    --grape: #5b616e;        /* neutral gray (secondary) */
    --bone: #e7e8ea;         /* light gray */
    --fuchsia: #006eff;      /* primary accent (buttons, links) → blue */
    --vulpen: #08111a;

    /* sign colours for FILLED stat tiles (white text on top). Deeper shades of
       the --cpix-up/--cpix-down hues used as marks on the CPI topic page, which
       are too light to carry white text — these land ~5:1, like the blue they
       replace. */
    --up-solid: #067647;
    --down-solid: #d92d20;

    --ink: #0a0a0a;          /* primary text — near-black */
    --muted: #5b616e;        /* secondary text — neutral gray */
    --line: #e7e8ea;         /* hairline borders — light gray */
    --page: #ffffff;         /* background — white */
}

*{
    margin: 0;
    color: var(--ink);
    font-family: "Lato", sans-serif;
    box-sizing: border-box;
}

/* ApexCharts paints tooltip dots with fill="currentColor" off the marker's
   inline series color; the rule above would turn every one of them ink */
.apexcharts-tooltip-marker * { color: inherit; }

body{
    background-color: var(--page);
}

/*---------------------GENERAL------------------*/
h1{ font-size: 5rem; }

h2{
    font-size: 2.5rem;
}

h3{
    font-size: 1.2rem;
    font-weight: 300;
}

a{ color: inherit; }
input:focus{ outline: none; }

/*---------------------------------------------------HEADER----------------------------------------------------*/
/*header{ padding: 20px 0; }*/

/* every page except the homepage — index.html styles its own header inside the hero */
body:not(#homeP) header{ margin: 10px; }

body:not(#homeP) header nav .nav1{ padding: 12px 34px 20px 24px; }

header nav{
    display: flex;
    justify-content: space-between;
    width: 100%;
    /*margin: auto;*/
    align-items: center;
}

header nav .nav1 .logo{ display: inline-block; text-decoration: none; }

header nav .nav1 .logo img{ height: 72px; width: auto; display: block; }

/* the two marks sit either side of a yellow rule. the rule is align-self:
   stretch on purpose — it then tracks whatever height the logos are cut to,
   and the responsive tiers below only ever restate that one img height. */
header nav .nav1 .brand-pair{ display: flex; align-items: center; gap: 1rem; }

header nav .nav1 .brand-rule{
    width: 2.5px; height: 40px; align-self: stretch; margin: auto 0;
    background: var(--yellow); border-radius: 5px;
}

header nav .nav1 .logo h2{ color: var(--ink); }

header nav .nav1 .logo h3{ color: var(--fuchsia); }

/* the search box takes whatever the logo and the menu leave over */
header nav .nav2{ flex: 1 1 auto; margin: 0 clamp(16px, 2.5vw, 48px); }

header nav .nav2 search form{ position: relative; display: flex; align-items: center; }

header nav .nav2 search .search-ic{
    position: absolute;
    left: 16px;
    width: 18px;
    height: 18px;
    color: var(--muted);
    pointer-events: none;
    transition: color 0.2s ease;
}

header nav .nav2 search form input{
    width: 100%;
    padding: 11px 20px 11px 44px;   /* room for the magnifying glass */
    background: var(--white);
    border-radius: 24px;
    border: 1px solid var(--line);
    font-size: medium;
    color: var(--ink);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

header nav .nav2 search form input:focus{
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(0, 110, 255, 0.12);
}

header nav .nav2 search form:focus-within .search-ic{ color: var(--sky); }

/* the search form's submit button: present for Enter/keyboard, off-screen so the
   box keeps its icon-only look */
header nav .nav2 search form .search-go{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
/* on keyboard focus it becomes a real, visible button — laid over the right end
   of the pill rather than joining the flex row, so the input keeps its width */
header nav .nav2 search form .search-go:focus-visible{
    right: 6px;
    top: 50%;
    left: auto;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    margin: 0;
    padding: 7px 14px;
    clip-path: none;
    border-radius: 20px;
    background: var(--sky);
    color: var(--white);
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
}

header nav .nav2 search form input::placeholder{
    color: var(--muted);
    font-weight: 300;
}

/* ---- suggestion dropdown -------------------------------------------------
   Rendered by search.js under the box; the form is position:relative, so the
   panel hangs off it and never affects the header's own layout. */
header nav .nav2 search form .search-panel{
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    /* at least as wide as the box, but roomy enough for a document title —
       the header's own layout is untouched either way */
    width: max(100%, min(420px, 86vw));
    z-index: 60;
    max-height: min(70vh, 460px);
    overflow-y: auto;
    padding: 6px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(16, 24, 40, .14);
    text-align: left;
}
header nav .nav2 search form .search-panel[hidden]{ display: none; }

/* group heading: "Pages" / "Publications" */
header nav .nav2 search form .search-group{
    padding: 10px 12px 6px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

header nav .nav2 search form .search-row{
    display: block;
    padding: 9px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--ink);
}
/* one highlight for both hover and keyboard: search.js sets .is-active on
   mousemove too, so the pointer and the arrow keys can't disagree */
header nav .nav2 search form .search-row.is-active{ background: #f2f6fc; }

header nav .nav2 search form .search-row-title{
    display: block;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.3;
}
header nav .nav2 search form .search-row.is-active .search-row-title{ color: var(--sky); }

header nav .nav2 search form .search-row-meta{
    display: block;
    margin-top: 2px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sky);
}

/* the one-line description under a hit, clipped rather than wrapped so every
   row stays the same height and the list scans cleanly */
header nav .nav2 search form .search-row-sum{
    display: block;
    margin-top: 3px;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

header nav .nav2 search form .search-empty{
    padding: 18px 12px;
    font-size: .9rem;
    color: var(--muted);
    text-align: center;
}

header nav .nav3{
    /*background: var(--white);*/
    /*border: 1px solid var(--line);*/
    /*border-radius: 24px;*/
}

header nav .nav3 ul{
    display: flex;
    justify-content: space-between;
    padding: 0;
}

header nav .nav3 ul li{
    list-style: none;
    border-radius: 10px;
    /* scales down toward 1200px, where eight items plus the search have no slack */
    padding: 10px clamp(12px, 1.25vw, 20px);
}

header nav .nav3 ul li a{
    text-decoration: none;
    color: var(--ink);
    transition: color 0.2s ease;
}

header nav .nav3 ul li a.active{ color: var(--fuchsia); }

header nav .nav3 a:hover{ color: var(--fuchsia); }


/*--------------dropdown---------------*/
header nav .nav3 ul .dropdown .submenu{ display: none; }

header nav .nav3 ul .dropdown .lang_submenu{ display: none; }

header nav .nav3 ul .dropdown:hover .submenu{
    display: block;
    position: absolute;
    width: 15%;
    top: auto;
    left: auto;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 14px 30px rgb(17 24 39 / 0.14);
    z-index: 9;
}

/* the flag panel hangs off the switcher itself, centred under the button —
   without this it was placed against the viewport (left: 92%) and drifted
   away from the trigger as the width changed */
header nav .nav3 ul .dropdown.lang-switch{ position: relative; }

header nav .nav3 ul .dropdown:hover .lang_submenu{
    display: block;
    position: absolute;
    width: fit-content;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 14px 30px rgb(17 24 39 / 0.14);
    z-index: 9;
}

header nav .nav3 ul .dropdown:hover .submenu li{
    padding: 10px 16px;
    transition: background 0.15s ease;
}

header nav .nav3 ul .dropdown:hover .submenu li:hover{ background: var(--pale-sky); }


/*---------------------------------------------------HOMEPAGE----------------------------------------------------*/
.top{
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-image: url("../images/DSC_9640.jpg");
    background-size: cover;
    background-position: center -100px;
    margin: 10px auto 0;
    width: 99%;
    height: 98vh;
    border-radius: 20px;
}

.top::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(0, 0, 0, 0.58) 0%,
        rgba(0, 0, 0, 0.24) 58%,
        rgba(0, 110, 255, 0.14) 100%);
}

.hero-content{
    position: relative;
    top:200px;
    z-index: 1;
    max-width: 900px;
    padding: 0 7%;
}

.hero-content h1{
    color: var(--white);
    font-size: 3.4rem;
    line-height: 1.06;
}

.hero-content p{
    color: var(--pale-sky);
    font-size: 1.1rem;
    line-height: 1.65;
    margin-top: 16px;
    max-width: 30rem;
}

.hero-btn{
    display: inline-block;
    margin-top: 26px;
    padding: 13px 30px;
    /*background: var(--vulpen);*/
    border: 1px solid;
    color: var(--yellow);
    text-decoration: none;
    font-weight: 600;
    border-radius: 30px;
    transition: 0.2s;
}

.hero-btn:hover{
    /*transform: translateY(-2px);*/
    background: var(--yellow);
    color: var(--page);
    opacity: 0.92;
    border: 1px solid var(--yellow);
}


/*---------------------SECT1------------------*/
#homeP section{
    /*width: 92%;*/
    margin: auto;
    padding: 100px 4%;
}

.cpi-card{
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 30px 32px 34px;
    box-shadow: 0 10px 30px rgb(17 24 39 / 0.07);
}

.cpi-head{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 14px;
}

.cpi-head h2{
    font-size: 2rem;
    color: var(--ink);
    line-height: 1.1;
}

.cpi-head h3{
    color: var(--muted);
    margin-top: 2px;
    font-weight: 300;
}

.cpi-latest{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    background: var(--pale-sky);
    padding: 12px 18px;
    border-radius: 14px;
}

.cpi-latest-label{
    font-size: 0.78rem;
    color: var(--grape);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.cpi-latest-value{
    font-size: 2.1rem;
    color: var(--fuchsia);
    line-height: 1.1;
}

.cpi-latest-period{
    font-size: 0.85rem;
    color: var(--grape);
}

.cpi-filter{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0;
    flex-wrap: wrap;
}

.cpi-filter-label{
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.cpi-filter select{
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--white);
    font-size: 0.9rem;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.cpi-filter select:focus{ border-color: var(--sky); }

.cpi-filter-to{
    color: var(--muted);
    font-size: 0.85rem;
}

.cpi-filter-reset{
    font-size: 0.85rem;
    color: var(--sky);
    text-decoration: none;
    font-weight: 500;
}

.cpi-filter-reset:hover{ text-decoration: underline; }

/* Quarterly / Yearly switch for the CPI chart (JS swaps the series; the
   toggle sits at the far end of the filter row) */
.cpi-view{
    display: inline-flex;
    margin-left: auto;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--white);
}

.cpi-view-btn{
    padding: 6px 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.cpi-view-btn:hover{ color: var(--ink); }

.cpi-view-btn.is-active{
    background: var(--sky);
    color: var(--white);
}

.cpi-view-btn:focus-visible{ outline: 2px solid var(--sky); outline-offset: 2px; }

#cpiChart{ margin: 12px -8px 18px; }

/* ---- per-card download dropdown (Excel / CSV / SVG / PNG) ---- */
.dl-bar { display: flex; justify-content: flex-end; margin: 12px 0 2px; }
.dl { position: relative; display: inline-block; }
.dl-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px;
    background: transparent; color: var(--sky);
    border: 1.5px solid var(--sky); border-radius: 22px;
    font-size: 0.9rem; font-weight: 500;
    cursor: pointer; transition: background .15s ease, color .15s ease;
}
.dl-btn:hover, .dl-btn[aria-expanded="true"] { background: var(--sky); color: var(--white); }
.dl-btn svg { width: 16px; height: 16px; }
.dl-btn .dl-caret { transition: transform .15s ease; }
.dl-btn[aria-expanded="true"] .dl-caret { transform: rotate(180deg); }
.dl-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
    min-width: 186px; margin: 0; padding: 6px; list-style: none;
    background: var(--white); border: 1px solid var(--line);
    border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,.14);
}
.dl-menu[hidden] { display: none; }
.dl-menu li { list-style: none; }
.dl-menu button {
    display: flex; align-items: center; gap: 10px; width: 100%;
    text-align: left; padding: 9px 12px;
    background: transparent; border: 0; border-radius: 8px;
    font-size: 0.9rem; color: var(--ink);
    cursor: pointer;
}
.dl-menu button:hover { background: var(--pale-sky); color: var(--sky); }
.dl-menu .dl-ico {
    flex: 0 0 30px; text-align: center; padding: 2px 0;
    font-size: 0.62rem; font-weight: 700; letter-spacing: .03em;
    color: var(--muted); border: 1px solid var(--line); border-radius: 5px;
}
.dl-menu button:hover .dl-ico { color: var(--sky); border-color: var(--sky); }

.tqi-toggle{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 10px;
    padding: 9px 20px;
    background: transparent;
    color: var(--sky);
    border: 1.5px solid var(--sky);
    border-radius: 22px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.tqi-toggle:hover{
    background: var(--sky);
    color: var(--white);
}

.tqi-table[hidden]{ display: none; }

.tqi-table{
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.tqi-table thead th{
    text-align: left;
    padding: 12px 14px;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--line);
}

.tqi-table tbody td{
    padding: 12px 14px;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
}

.tqi-table tbody tr:last-child td{ border-bottom: none; }

.tqi-table tbody tr:hover{ background: rgb(0 110 255 / 0.06); }

.tqi-table tbody td:nth-child(3){
    font-weight: 600;
    color: var(--fuchsia);
}

.cpi-empty{
    color: var(--muted);
    padding: 20px 0;
}

/*---------------------KEY INDICATOR CARDS------------------*/
#homeP section.kpi{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

/* spans the whole row so the cards keep their own column rhythm underneath;
   matches the .pub-intro h2 further down the page */
.kpi-head{
    grid-column: 1 / -1;
    font-size: 2rem;
    color: var(--ink);
    line-height: 1.14;
    margin-bottom: 20px;
    text-align: center;
}

/* each card links to the topic page its figure comes from — it lifts on hover, and the arrow top-right marks it as a way through */
.kpi-card{
    position: relative;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 22px 24px;
    box-shadow: 0 10px 30px rgb(17 24 39 / 0.07);
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.kpi-card:hover{
    /*transform: translateY(-3px);*/
    border-color: var(--yellow);
    /*box-shadow: 0 16px 36px rgb(17 24 39 / 0.14);*/
}

.kpi-card:focus-visible{
    outline: 2px solid var(--sky);
    outline-offset: 3px;
}

.kpi-go{
    position: absolute;
    top: 22px;
    right: 24px;
    width: 20px;
    height: 20px;
    color: var(--muted);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.kpi-card:hover .kpi-go,
.kpi-card:focus-visible .kpi-go{
    opacity: 1;
    transform: none;
    color: var(--sky);
}

/* touch screens have no hover to reveal it, so the arrow just stays put */
@media (hover: none){
    .kpi-go{ opacity: 1; transform: none; }
}

.kpi-card-wide{ grid-column: span 2; }

.kpi-title{
    font-size: 1.1rem;
    color: var(--grape);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-right: 26px;        /* clears the .kpi-go arrow in the corner */
}

.kpi-value{
    font-size: 2.6rem;
    color: var(--red);
    line-height: 1.05;
}

.kpi-value.sm{ font-size: 1.9rem; }

.kpi-sub{ font-size: 0.95rem; color: var(--ink); }

.kpi-year{ font-size: 0.85rem; color: var(--muted); }

.kpi-empty{ color: var(--muted); padding: 6px 0; }

.kpi-split{ display: flex; gap: 24px; margin-top: 4px; }

.kpi-sub-metric{ display: flex; flex-direction: column; gap: 4px; flex: 1; }

.kpi-sublabel{
    font-size: 0.8rem;
    color: var(--grape);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (max-width: 820px){
    #homeP section.kpi{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px){
    #homeP section.kpi{ grid-template-columns: 1fr; }
    .kpi-card-wide{ grid-column: auto; }
    .kpi-split{ gap: 16px; }
}

/*---------------------LATEST PUBLICATIONS------------------*/
.pub-intro{ max-width: 760px; margin-bottom: 26px; }
.pub-intro h2{ font-size: 2rem; color: var(--ink); line-height: 1.14; }
.pub-intro p{ color: var(--muted); font-size: 1.02rem; line-height: 1.6; margin-top: 12px; }

.pub-empty{ color: var(--muted); padding: 10px 0 30px; }


/*---------------------PARTNERSHIPS------------------*/
/* Three marks in a row, no card around them — just the logos on the page. They
   are wildly different shapes (a tall crest, a square badge, a wide wordmark),
   so each is centred in an equal cell and capped by both dimensions instead of
   being scaled to a common width, which would size them by their whitespace
   rather than by the mark. */
.partner-head{
    font-size: 2rem;
    color: var(--ink);
    line-height: 1.14;
    margin-bottom: 26px;
    text-align: center;
}

.partner-grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 22px;
    list-style: none;
    padding: 0;
}

/* flex-basis rather than a width: the three share the row evenly, and any that
   no longer fit wrap onto the next one */
.partner-card{
    flex: 0 0 240px;
    min-height: 172px;
    padding: 28px 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* a linked logo keeps the card's centring */
.partner-card a{ display: flex; align-items: center; justify-content: center; }

.partner-card img{
    max-width: 100%;
    max-height: 116px;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 700px){ .partner-grid{ flex-direction: column; } }

/*-----------------------------------------PDF CARDS (shared)---------------------------------------------------*/
/* One PDF per card: cover image, kind badge, topic, title, summary, then the
   code/date and a download button. Rendered by the doc_card macro in
   templates/_doc_rows.html and used everywhere a document is listed — the
   Publications library, every topic page's publications panel, the homepage's
   latest publications, Classifications and the Statistical Acts — so a PDF
   reads the same wherever it appears.

   --pl-sec (set per card by the macro) tints the badge, topic and file icon by
   section; --pl-accent tints the title hover and the buttons. */
:root{
    --pl-accent: #006eff;
    --pl-economy: #1f9e00;
    --pl-social: #0057cc;
    --pl-environmental: #0f9bb0;
}

/* 5 across on wide screens, stepping down 4 → 3 → 2 → 1. Scripts that page
   through a grid read the live column count, so batches land on full rows. */
.pl-grid{
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 22px;
}
@media (max-width: 1280px){ .pl-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1024px){ .pl-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px){ .pl-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; } }
@media (max-width: 480px){ .pl-grid{ grid-template-columns: minmax(0, 1fr); gap: 36px; } }

/* a grid that shows cards in fours (topic pages, the homepage): 4 → 2 → 1
   across, so four always fill whole rows */
.pl-grid-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px){ .pl-grid-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px){ .pl-grid-4{ grid-template-columns: minmax(0, 1fr); } }

.pl-card{ --pl-sec: var(--pl-accent); display: flex; flex-direction: column; min-width: 0; }
.pl-card[hidden]{ display: none; }
.pl-cover{
    position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden;
    background: color-mix(in srgb, var(--pl-sec) 14%, #fff); text-decoration: none;
}
.pl-cover img{
    width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease;
}
.pl-card:hover .pl-cover img{ transform: scale(1.04); }
.pl-cover::after{
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 100%);
}
/* documents with no topic photo (reference standards): a tinted panel carrying
   the document's code in place of the image */
.pl-cover-plain{
    display: flex; align-items: center; justify-content: center; padding: 18px;
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--pl-sec) 30%, #fff) 0%, transparent 60%),
        color-mix(in srgb, var(--pl-sec) 10%, #fff);
}
.pl-cover-plain::after{ display: none; }
.pl-cover-plain strong{
    font-size: 1.5rem; font-weight: 900; letter-spacing: -.5px; text-align: center;
    color: var(--pl-sec); transition: transform .45s ease;
}
.pl-card:hover .pl-cover-plain strong{ transform: scale(1.04); }
.pl-badge{
    position: absolute; z-index: 1; top: 12px; left: 12px;
    padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.94);
    font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--pl-sec);
}
.pl-pdf{
    position: absolute; z-index: 1; right: 12px; bottom: 12px;
    padding: 4px 8px; border-radius: 6px; background: var(--pl-sec);
    font-size: .66rem; font-weight: 700; letter-spacing: .08em; color: #fff;
}
.pl-card-topic{
    margin-top: 18px; font-size: .78rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--pl-sec);
}
.pl-card h3{
    margin-top: 6px; font-size: 1.05rem; font-weight: 700; line-height: 1.32; letter-spacing: -.2px;
}
.pl-card h3 a{
    text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pl-card h3 a:hover{ color: var(--pl-accent); }
.pl-card-sum{
    margin-top: 8px; font-size: .9rem; line-height: 1.55; color: var(--muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pl-card-foot{ display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 16px; }
.pl-card-ico{
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
    background: color-mix(in srgb, var(--pl-sec) 12%, #fff); color: var(--pl-sec);
}
.pl-card-ico svg{ width: 15px; height: 15px; color: inherit; }
.pl-card-meta{
    flex: 1 1 auto; min-width: 0; font-size: .84rem; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-card-meta, .pl-card-meta *{ font-variant-numeric: tabular-nums; }
.pl-card-meta .pl-dot{ color: var(--muted); margin: 0 4px; }
.pl-dl{
    flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: 10px; color: var(--muted);
}
.pl-dl svg{ width: 16px; height: 16px; color: inherit; }
.pl-dl:hover, .pl-dl:hover svg{ color: var(--pl-accent); border-color: var(--pl-accent); }
@media (max-width: 480px){ .pl-card h3{ font-size: 1.15rem; } }

/* cards revealed by "Load more" fade up into place, one after another
   (fadeInCards in doc-rows.js sets the class and each card's delay) */
.pl-card.pl-fade-in{ animation: plFadeIn .5s ease both; }
@keyframes plFadeIn{
    from{ opacity: 0; transform: translateY(14px); }
    to{ opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){ .pl-card.pl-fade-in{ animation: none; } }

/* "Load more" under a grid that reveals its cards in batches */
.pl-more-wrap{ display: flex; justify-content: center; margin-top: 44px; }
.pl-more-wrap[hidden]{ display: none; }
.pl-more{
    padding: 12px 26px; border: 0; border-radius: 10px; background: var(--pl-accent);
    font: inherit; font-size: .92rem; font-weight: 700; color: #fff; cursor: pointer;
    box-shadow: 0 1px 2px rgba(16,24,40,.08);
}
.pl-more:hover{ background: #0057cc; }

/* A topic page's whole publications list — every kind together, each card
   labelled with its own, with Type + Year filters in the head. Sits straight on
   the page (no box). doc-rows.js shows the latest four, then eight per "Load
   more"; its grid is .pl-grid-4, so those always fill whole rows. */
.pl-panel{ margin-bottom: 30px; }
.pl-panel-head{
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 12px 0 14px; margin-bottom: 24px; border-bottom: 1px solid var(--line);
}
.pl-panel-count{ font-size: .85rem; color: var(--muted); }
.pl-panel-count strong{ color: var(--ink); font-weight: 600; }
/* Type + Year sit together at the right, wrapping under the count when narrow */
.pl-panel-filters{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pl-panel-filter{ display: inline-flex; align-items: center; gap: 8px; }
.pl-panel-filter span{ color: var(--muted); font-size: .85rem; font-weight: 500; }
.pl-panel-filter select{
    padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px;
    background: #fff; color: var(--ink); font: inherit; font-size: .9rem; cursor: pointer;
}
.pl-panel-filter select:focus{ outline: none; border-color: var(--pl-accent); }
.pl-panel .pl-more-wrap{ margin-top: 32px; }
.pl-panel-none{ padding: 26px 4px; color: var(--muted); }
.pl-panel-empty{ color: var(--muted); padding: 22px 0; }

/*---------------------------------------------------ABOUT PAGE----------------------------------------------------*/
/* shares the homepage layout, but the hero uses a topographic line pattern */
#aboutP .top{
    /*background: #ffffff url("../images/topo.svg") center / cover no-repeat;*/
    height: 50vh;
}

/* soft white fade on the left so the dark hero text stays legible over the lines */
#aboutP .top::before{
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.92) 0%,
        rgba(255, 255, 255, 0.5) 42%,
        rgba(255, 255, 255, 0) 72%);
}

/* the about hero is shorter than the homepage's, so the copy sits at the top */
#aboutP .hero-content{ top: 0px; }

/* dark text on the light pattern */
#aboutP .top .hero-content h1{ color: var(--ink); }
#aboutP .top .hero-content p{ color: var(--grape); }

/* the hero button: the shared .hero-btn is a yellow outline for the dark home
   hero; on this light photo it needs a solid fill, in the eyebrow's blue */
#aboutP .about-btn{
    display: inline-block;
    margin-top: 26px;
    padding: 13px 30px;
    /*background: var(--vulpen);*/
    border: 1px solid;
    color: var(--vulpen);
    text-decoration: none;
    font-weight: 600;
    border-radius: 30px;
    transition: 0.2s;
}
#aboutP .about-btn span{
    color: inherit;
    transition: transform .18s ease;
}
#aboutP .about-btn:hover,
#aboutP .about-btn:focus-visible{
    background: var(--vulpen);
    color: var(--page);
    opacity: 0.92;
    border: 1px solid var(--vulpen);
    /*transform: translateY(-2px);*/
    /*box-shadow: 0 14px 28px -10px rgba(0, 110, 255, 0.65);*/
}
#aboutP .about-btn:hover span{ transform: translateX(3px); }
#aboutP .about-btn:focus-visible{ outline: 3px solid var(--pale-sky); outline-offset: 2px; }

.about-eyebrow{
    display: inline-block;
    color: var(--fuchsia);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 14px;
}

/*--------------key facts---------------*/
.about-facts{
    padding: 100px 4%;
    display: flex;
    /*grid-template-columns: repeat(3, 1fr);*/
    gap: 20px;
    background: var(--line);
    justify-items: center;
    justify-content: center;
    /*border-radius: 20px;*/
}

.fact-card{
    position: relative;
    text-align: center;
    /*background: var(--white);*/
    /*border-radius: 18px;*/
    padding: 24px 26px;
    /*box-shadow: 0 10px 30px rgb(17 24 39 / 0.07);*/
    /*border: 1px solid var(--line);*/
    width: 400px;
}
/* a yellow rule between neighbouring facts, centred in the 20px gap */
.fact-card + .fact-card::before{
    content: "";
    position: absolute; left: -11px; top: 18px; bottom: 18px;
    width: 2px; border-radius: 2px;
    background: var(--yellow);
}


.fact-value{
    display: block;
    font-size: 2.4rem;
    color: var(--vulpen);
    line-height: 1.05;
}

.fact-label{
    display: block;
    margin-top: 8px;
    color: var(--vulpen);
    font-size: 0.94rem;
    line-height: 1.45;
}

/*--------------lead---------------*/
.about-lead{
    padding: 100px 4%;
    gap: 26px;
    /*background: var(--white);*/
    /*border: 1px solid var(--line);*/
    /*border-radius: 22px;*/
    /*padding: 34px 36px;*/
    /*box-shadow: 0 10px 30px rgb(17 24 39 / 0.07);*/
}

.about-lead-body h2{
    font-size: 2rem;
    color: var(--ink);
    line-height: 1.1;
    margin-bottom: 12px;
}

.about-lead-body p{
    color: var(--muted);
    font-size: 1.04rem;
    line-height: 1.7;
}

/*--------------value cards---------------*/
.about-grid{
    padding: 100px 4%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.about-card{
    text-align: center;
    background: var(--vulpen);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 28px 26px 30px;
    box-shadow: 0 10px 30px rgb(17 24 39 / 0.07);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/*.about-card:hover{*/
/*    transform: translateY(-3px);*/
/*    box-shadow: 0 16px 36px rgb(17 24 39 / 0.14);*/
/*}*/

.about-card h2{
    font-size: 1.4rem;
    color: var(--yellow);
    line-height: 1.15;
    margin-bottom: 10px;
}

.about-card p{
    color: var(--white);
    font-size: 0.97rem;
    line-height: 1.65;
}

@media (max-width: 900px){
    .about-facts{ grid-template-columns: 1fr; }
    .about-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 560px){
    .about-lead{ flex-direction: column; gap: 18px; padding: 28px 24px; }
}

/*---------------------------------------------------ECONOMY PAGE----------------------------------------------------*/
/* headline CPI tiles next to the chart title */
.cpi-stats{
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cpi-stat{
    min-width: 132px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    background: var(--pale-sky);
    border-radius: 14px;
}

.cpi-stat.is-primary{ background: var(--blue); }
/* the headline inflation tile tracks the sign of its figure: rising green,
   falling red — same rule as the .cpix-row bars on the CPI topic page */
.cpi-stat.is-primary.is-up{ background: var(--up-solid); }
.cpi-stat.is-primary.is-down{ background: var(--down-solid); }
.cpi-stat.is-primary .cpi-stat-label,
.cpi-stat.is-primary .cpi-stat-sub{ color: rgb(255 255 255 / 0.82); }
.cpi-stat.is-primary .cpi-stat-value{ color: var(--white); }

.cpi-stat-label{
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--grape);
}

.cpi-stat-value{
    font-size: 1.55rem;
    line-height: 1.1;
    color: var(--ink);
}

.cpi-stat-sub{ font-size: 0.8rem; color: var(--muted); }

/* establishments table: scroll if tall, right-aligned numeric columns */
.est-scroll{ margin-top: 6px; max-height: 560px; overflow-y: auto; }
.est-table .num{ text-align: right; white-space: nowrap; }
.est-table tbody td:nth-child(3){ color: var(--blue); font-weight: 600; }

@media (max-width: 720px){
    .cpi-stats{ justify-content: flex-start; }
    .cpi-stat{ flex: 1 1 132px; }
}

/*---------------------------------------------------CONTACT PAGE----------------------------------------------------*/
/* shares the 92%-wide section rhythm of the home/about pages */
.contact-intro{
    width: 92%;
    max-width: 760px;
    margin: 40px auto 30px;
    text-align: center;
}

.contact-eyebrow{
    display: inline-block;
    color: var(--fuchsia);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 12px;
}

.contact-intro h2{
    font-size: 2.4rem;
    color: var(--ink);
    line-height: 1.1;
}

.contact-intro p{
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.6;
    margin-top: 12px;
}

/*--------------detail cards---------------*/
.contact-info{
    width: 92%;
    margin: 26px auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.cinfo-card{
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 22px 24px;
    box-shadow: 0 10px 30px rgb(17 24 39 / 0.07);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cinfo-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgb(17 24 39 / 0.14);
}

.cinfo-icon{
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #dbe9ff, #eef5ff);
    color: var(--blue);
}

.cinfo-icon svg{ width: 24px; height: 24px; }

.cinfo-body h3{
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 4px;
}

.cinfo-body p{
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.cinfo-body a{
    color: var(--muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.cinfo-body a:hover{ color: var(--fuchsia); }

/*--------------form + map---------------*/
.contact-main{
    width: 92%;
    margin: 26px auto 64px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
}

.contact-form{
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 32px 32px 34px;
    box-shadow: 0 10px 30px rgb(17 24 39 / 0.07);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-form h2{
    font-size: 1.6rem;
    color: var(--ink);
    line-height: 1.15;
    margin-bottom: 4px;
}

.cf-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.contact-form input,
.contact-form textarea{
    width: 100%;
    padding: 13px 16px;
    background: var(--page);
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 0.98rem;
    color: var(--ink);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.contact-form textarea{ resize: vertical; min-height: 150px; }

.contact-form input::placeholder,
.contact-form textarea::placeholder{ color: var(--muted); }

.contact-form input:focus,
.contact-form textarea:focus{
    outline: none;
    background: var(--white);
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgb(0 110 255 / 0.18);
}

.contact-form .hero-btn{
    margin-top: 6px;
    align-self: flex-start;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.contact-map{
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgb(17 24 39 / 0.07);
    min-height: 420px;
}

.contact-map iframe{
    display: block;
    width: 100%;
    flex: 1;
    min-height: 380px;
    border: 0;
}

.contact-map-link{
    display: block;
    padding: 12px 18px;
    background: var(--white);
    border-top: 1px solid var(--line);
    color: var(--fuchsia);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.15s ease;
}

.contact-map-link:hover{ background: var(--pale-sky); }

@media (max-width: 900px){
    .contact-info{ grid-template-columns: 1fr; }
    .contact-main{ grid-template-columns: 1fr; }
    .contact-map{ min-height: 340px; }
}

@media (max-width: 560px){
    .cf-row{ grid-template-columns: 1fr; }
}

/*---------------------------------------------------FOOTER----------------------------------------------------*/
.site-footer{
    background: var(--ink);
    margin-top: 64px;
    padding: 50px 0 28px;
    border-top-right-radius: 50px;
    border-top-left-radius: 50px;
}

.site-footer *{ color: #d1d5db; }   /* light gray base text (overrides the global *) */

.footer-top{
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-between;
}

/*.footer-col{ flex: 1 1 220px; }*/
/*.footer-about{ flex: 1 1 320px; }*/

.site-footer h3{
    color: var(--white);
    font-size: 1.5rem;
    margin-bottom: 12px;
}

.site-footer h4{
    color: var(--white);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 14px;
}

/* the footer ground is --ink and the STAT mark is ~90% dark ink, so the pair
   needs a white plate to stay legible — the same trick .login-logo uses */
.footer-brand{
    display: inline-flex; align-items: center; gap: 16px;
    height: 76px; padding: 0 20px; margin-bottom: 18px;
    background: var(--white); border-radius: 16px;
}

.footer-brand img{ height: 52px; width: auto; display: block; }

.footer-brand .brand-rule{
    width: 2px; align-self: stretch; margin: 14px 0;
    background: var(--yellow); border-radius: 1px;
}

.footer-about p{ line-height: 1.7; opacity: 0.9; }
.footer-phone{ margin-top: 8px; }

.footer-col ul{
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-col ul a{
    text-decoration: none;
    opacity: 0.9;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.footer-col ul a:hover{ color: var(--yellow); opacity: 1; }

.footer-bottom{
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgb(255 255 255 / 0.12);
    display: flex;
    justify-content: center;
}

.footer-social{
    display: flex;
    gap: 16px;
    align-items: center;
}

.footer-social a{
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(255 255 255 / 0.08);
    transition: background 0.15s ease, transform 0.15s ease;
}

.footer-social a:hover{
    background: var(--fuchsia);
    transform: translateY(-2px);
}

.footer-social svg{ width: 19px; height: 19px; }

@media (max-width: 640px){
    .footer-top{ flex-direction: column; gap: 28px; }
}

/*--------------mission & vision---------------*/
.about-mv{
    padding: 100px 4%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.mv-card{
    position: relative;
    overflow: hidden;
    background: var(--white);
    border-radius: 22px;
    padding: 30px 32px 32px;
    box-shadow: 0 10px 30px rgb(17 24 39 / 0.07);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 1px solid var(--line);
}

.mv-card:hover{
    /*transform: translateY(-3px);*/
    box-shadow: 0 16px 36px rgb(17 24 39 / 0.14);
}


.mv-eyebrow{
    display: block;
    font-size: 1.2rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 10px;
    color: var(--yellow);
}

/*.mv-mission .mv-eyebrow{ color: #2f80ed; }*/
/*.mv-vision .mv-eyebrow{ color: #6a4bd0; }*/

.mv-card p{
    color: var(--ink);
    font-size: 1.12rem;
    line-height: 1.65;
    font-weight: 500;
}

/*--------------legal foundation list---------------*/
.about-laws{
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.about-laws li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 2px;
    border-bottom: 1px solid var(--yellow);
}

.about-laws li:last-child{ border-bottom: 0; }

.about-laws .law-name{
    color: var(--ink);
    font-size: 1rem;
    font-weight: 600;
}

/* the reference pill is the link to the act's PDF; on hover it fills blue */
.about-laws a.law-ref{
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.about-laws a.law-ref:hover,
.about-laws a.law-ref:focus-visible{
    background: var(--sky); border-color: var(--sky); color: var(--white);
}

/* the "Dutch only" footnote under the list */
.about-laws-note{
    display: flex; align-items: center; gap: 8px;
    margin-top: 14px; padding: 0 2px;
    color: var(--muted); font-size: .85rem;
}

/* the "!" marker: a small filled disc with a soft ring that swells and fades */
.note-mark{
    flex: none; width: 16px; height: 16px; border-radius: 50%;
    background: var(--sky); color: var(--white);
    font-size: .7rem; font-weight: 700; line-height: 16px; text-align: center;
    animation: note-pulse 2.2s ease-out infinite;
}
@keyframes note-pulse{
    0%   { box-shadow: 0 0 0 0 rgba(0, 110, 255, .45); }
    70%  { box-shadow: 0 0 0 7px rgba(0, 110, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 110, 255, 0); }
}
@media (prefers-reduced-motion: reduce){
    .note-mark{ animation: none; }
}

.about-laws .law-ref{
    color: var(--grape);
    background: var(--pale-sky, #eef4fc);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

/*--------------methods---------------*/
.about-methods .about-lead-body p + p{ margin-top: 14px; }

/* text and photo side by side: the body takes the remaining width, the photo
   keeps a fixed share and a portrait crop */
.about-lead.about-methods{
    display: flex;
    align-items: center;
    gap: 56px;
}
.about-methods .about-lead-body{ flex: 1 1 0; min-width: 0; }
.about-methods-media{
    flex: 0 0 36%;
    max-width: 460px;
    margin: 0;
}
.about-methods-media img{
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 45%;
    border-radius: 22px;
    box-shadow: 0 16px 40px rgb(17 24 39 / 0.14);
    border: 5px solid var(--yellow);
}

.method-chips{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.method-chip{
    color: #ffffff;
    background: var(--blue);
    /*border: 1px solid #006eff;*/
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 0.9rem;
    font-weight: 600;
}

@media (max-width: 900px){
    .about-mv{ grid-template-columns: 1fr; }
    .about-laws li{ align-items: flex-start; flex-direction: column; gap: 6px; }
}

/*--------------page transitions---------------*/
/* Fade every public page in on arrival. The class is set on <body> in base.html,
   so this never touches the admin shell (which loads adminstyle.css only).
   Only opacity is animated: a transform here would make <body> the containing
   block for the position:fixed mobile drawer and backdrop. */
/* `backwards`, not `both`: once the fade ends the opacity goes back to being an
   ordinary declared value, so the .is-leaving transition below has something to
   transition from — a finished animation holding opacity:1 would outrank it. */
.page-fade{
    animation: page-fade-in 260ms ease-out backwards;
}

/* page-transition.js sets this on an internal link click and navigates once the
   fade finishes, so the outgoing page dissolves into the incoming one. Without
   JS the class is never added and only the fade-in above runs. */
.page-fade.is-leaving{
    animation: none;
    opacity: 0;
    transition: opacity 160ms ease-in;
}

@keyframes page-fade-in{
    from{ opacity: 0; }
    to  { opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
    .page-fade,
    .page-fade.is-leaving{
        animation: none;
        transition: none;
        opacity: 1;
    }
}

/*---------------------------------------------------DATA EXPLORER BUTTON----------------------------------------------------*/
/* the round button in the bottom-right corner of every public page that opens
   the Data Explorer (/data). On hover the label slides out of the circle. */
.data-fab{
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 900;
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 58px;
    padding: 0 17px;
    border-radius: 999px;
    background: linear-gradient(135deg, #0a5fd6 0%, var(--blue) 60%, #3d8dff 100%);
    box-shadow: 0 12px 30px rgba(0, 110, 255, .38), 0 2px 6px rgba(6, 26, 58, .18);
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease, padding .25s ease;
}
.data-fab::before{
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    border: 2px solid rgba(0, 110, 255, .5);
    animation: data-fab-ring 2.6s ease-out 1.2s 2;
    opacity: 0;
    pointer-events: none;
}
.data-fab svg{ width: 24px; height: 24px; flex: 0 0 auto; }
.data-fab, .data-fab *{ color: var(--white); }
.data-fab-label{
    max-width: 0;
    opacity: 0;
    white-space: nowrap;
    font-weight: 600;
    font-size: .92rem;
    transition: max-width .25s ease, opacity .2s ease, margin .25s ease;
}
.data-fab:hover,
.data-fab:focus-visible{
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(0, 110, 255, .45), 0 3px 8px rgba(6, 26, 58, .2);
    outline: none;
}
.data-fab:hover .data-fab-label,
.data-fab:focus-visible .data-fab-label{
    max-width: 160px;
    opacity: 1;
    margin-left: 10px;
}
#explorerP .data-fab{ display: none; }

@keyframes data-fab-ring{
    0%  { transform: scale(1);   opacity: .8; }
    100%{ transform: scale(1.5); opacity: 0; }
}