/*
 * Rules the Next.js build never needed.
 *
 * The other six stylesheets are copied verbatim from frontend/styles/ and must
 * stay that way. Everything here covers markup that has no counterpart in the
 * React app:
 *
 *   .page-shell   React set this container with an inline style on every page
 *                 (maxWidth: var(--max-w); margin: 0 auto; padding: 0 32px 72px).
 *                 A template can't carry an inline style per page sensibly, so
 *                 it becomes a class.
 *   .doc-group    Year-grouped <details> sections. New in the PHP version — the
 *                 React list was flat, which is what made the 648-document page
 *                 unusable.
 *   nav fallback  wp_nav_menu()/wp_list_pages() emit ul>li>a, which the existing
 *                 .nav-item rules expect but the fallback markup doesn't match.
 *
 * Loaded last, so it can also patch the copied sheets without editing them.
 */

/* ── Sticky footer ───────────────────────────────────────────────────────── */

/*
 * Short pages — a person, a small committee list, an empty gallery — left the
 * footer floating mid-screen with blank page beneath it. Next.js never showed
 * this because its pages carried more chrome.
 */
html { min-height: 100%; }

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body > #main {
    flex: 1 0 auto;
}

body > .footer {
    flex-shrink: 0;
}

/* ── Page container ──────────────────────────────────────────────────────── */

.page-shell {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 32px 72px;
}

/* Pages with no hero above them need breathing room at the top. */
.page-type-documents .page-shell,
.page-type-hub .page-shell,
.page-type-prose .page-shell,
.page-type-generic .page-shell,
.page-type-gallery .page-shell,
.page-type-person .page-shell,
.page-type-contact .page-shell,
.page-type-consilieri .page-shell,
.page-type-comisii .page-shell,
body:not(.page-type-turism) .page-shell {
    padding-top: 24px;
}

/* The Contact page keeps ContactPage()'s 32px on every side at every width:
   32px under its hero, and 32px gutters on phones too, where other pages
   narrow theirs to 18px. */
body .page-shell.contact-shell { padding: 32px 32px 72px; }

/* ── Site title ──────────────────────────────────────────────────────────── */

/*
 * The site name is an <h1> only on the front page (one <h1> per document); on
 * inner pages it is a <span>, which is inline — so the tagline ran alongside it
 * instead of sitting underneath. layout.css only styles `.logo-text h1`.
 */
.logo-text .site-title {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--blue-900);
    line-height: 1.15;
    transition: color 0.2s var(--ease);
}

.logo-area:hover .logo-text .site-title { color: var(--blue-600); }

/* ── Navigation ──────────────────────────────────────────────────────────── */

/*
 * layout.css already styles .navbar / .nav-inner / .nav-item / .dropdown.
 * inc/nav.php makes wp_nav_menu() emit exactly those class names, so nothing
 * needs restyling here — an earlier attempt to style the menu from scratch is
 * what produced dark-grey links on the dark navy bar.
 *
 * Only the two things the React markup did inline remain.
 */

/* Opt-in highlight: add the class "nav-item-highlight" to a menu item in
   Aspect → Meniuri (Clase CSS). Nothing gets it automatically. */
.nav-item-highlight > a { color: var(--danger); font-weight: 700; }
.nav-item-highlight > a:hover { color: var(--danger); opacity: 0.85; }

/* Homepage hero: a YouTube video in place of the announcement card. */
.hero-feature.hero-video { aspect-ratio: 16 / 9; background: #000; }
.hero-feature.hero-video:hover { transform: none; }
.hero-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* wp_nav_menu wraps each entry in an <li>; the design had no bullets. */
.nav-inner, .nav-inner li, .dropdown, .dropdown li { list-style: none; }
.dropdown li { margin: 0; }

/*
 * Dividers and section labels are direct children of .dropdown in the design,
 * but WordPress can only emit them inside an <li>. `display: contents` lifts
 * the wrapper out of the box tree so the existing .divider / .section-label
 * rules apply exactly as written.
 */
.dropdown li.menu-separator { display: contents; }

/*
 * The APL flyout has to escape the dropdown's scroll box.
 *
 * layout.css caps .dropdown at the room left below the navbar and gives it
 * overflow-y: auto — without which "Primaria" ran off the bottom of a laptop
 * screen. But an overflow container clips absolutely-positioned descendants,
 * and the flyout opens at left: 100%, i.e. entirely outside it. React never hit
 * this because its dropdown had no cap and no overflow.
 *
 * position: fixed leaves the clip behind, at the cost of needing real
 * coordinates — nav.js measures the row and writes them here, then adds
 * .is-fixed. With JavaScript off the rule never applies and the flyout keeps
 * its original (clipped, but correctly anchored) absolute position.
 */
@media (min-width: 1024px) {  /* the desktop bar; below it, the hamburger menu */
    /*
     * position: fixed only escapes an overflow ancestor when that ancestor is
     * not in its containing-block chain — and a transform puts it there. The
     * open dropdown carries transform: translateY(0), which was enough to pull
     * the flyout back inside the scroll box and clip it away entirely.
     *
     * translateY(0) and none paint identically, and the closed state keeps its
     * translateY(-4px), so the slide-in animation is unaffected.
     *
     * The :focus-within twin is the same panel opened from the keyboard
     * (layout.css), and needs the same exemption or Tab into APL shows nothing.
     */
    .nav-item:hover > .dropdown,
    .nav-item:focus-within:not(.is-collapsed) > .dropdown { transform: none; }

    .dropdown .dd-submenu > .submenu.is-fixed {
        position: fixed;
        top: var(--tch-flyout-top);
        left: var(--tch-flyout-left);
    }
}

/* ── Year-grouped document lists ─────────────────────────────────────────── */

/*
 * .doc-list wraps the search controls and the list. It carries the top margin
 * .article-attachments used to own, so the divider that rule draws now falls
 * between the search and the documents instead of above the search.
 */
.doc-list { margin-top: 40px; }

.doc-list .article-attachments.searchable {
    margin-top: 0;
    padding-top: 24px;
}

.doc-group {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    background: #fff;
    margin-bottom: 10px;
    overflow: hidden;
}

.doc-group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    font-weight: 700;
    color: var(--gray-800);
    list-style: none;
    user-select: none;
}

.doc-group > summary::-webkit-details-marker { display: none; }

.doc-group > summary::before {
    content: '';
    width: 8px;
    height: 8px;
    flex: none;
    border-right: 2px solid var(--gray-400);
    border-bottom: 2px solid var(--gray-400);
    transform: rotate(-45deg);
    transition: transform 0.15s;
}

.doc-group[open] > summary::before { transform: rotate(45deg); }
.doc-group > summary:hover { background: var(--gray-50); }
.doc-group-label { flex: 1; }

.doc-group-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-500);
    background: var(--gray-100);
    border-radius: 999px;
    padding: 2px 10px;
}

.doc-group-body { padding: 4px 10px 10px; }

/*
 * .list-item is `justify-content: space-between`. React's DocumentList set the
 * inline textAlign:'left' because its row was a <button>; ours is an <a>, which
 * inherits alignment anyway. flex/min-width keep long titles truncating inside
 * the row instead of pushing the badge off the right edge.
 */
.list-item .item-info {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.doc-count {
    font-size: 13px;
    color: var(--gray-500);
    white-space: nowrap;
}

.doc-empty {
    padding: 24px 0;
    color: var(--gray-500);
    text-align: center;
}

/* ── Pagination ──────────────────────────────────────────────────────────── */

.pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-700);
    text-decoration: none;
}

.pagination a:hover { border-color: var(--blue-600); color: var(--blue-700); }
.pagination .current { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }

/* ── Form filling ────────────────────────────────────────────────────────── */

/*
 * inner-pages.css already carries every class the fill flow uses — it is the
 * React build's own stylesheet, copied byte-identical. What follows is only
 * what differs because this is server-rendered markup, not React.
 *
 * FormDetail.tsx made the fork choices <button>s driven by useState. Here they
 * are real links, so the view survives a page load and works without
 * JavaScript. Links come with underlines and a link colour the button versions
 * never had, so undo that and nothing else.
 */
a.form-fork-card,
a.form-fork-card:hover {
    text-decoration: none;
    color: inherit;
}

a.btn-text,
a.btn-primary {
    display: inline-block;
    text-decoration: none;
}

a.btn-primary:hover { color: #fff; }

/* Every panel is in the DOM so the view can be swapped without a fetch; only
   one is ever visible. Explicit because a stray `display` rule elsewhere would
   otherwise beat the `hidden` attribute. */
[data-view-panel][hidden] { display: none; }

/*
 * Date field — a zz.ll.aaaa text box plus a button onto the native calendar.
 *
 * `<input type="date">` orders its segments by the browser's locale, which the
 * page cannot override, so on an en-US browser it reads mm/dd/yyyy. See the
 * comment in form-filler.js. The text box is ours; the calendar is still the
 * browser's.
 */
.form-date {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-date input[type="text"] { flex: 1; min-width: 0; }

/* Exists only as the anchor showPicker() needs; never seen. Positioned under
   the text box so the popup opens beneath the field rather than the button. */
.form-date .form-date-native {
    position: absolute;
    left: 12px;
    bottom: 0;
    width: 1px;
    height: 1px;
    min-width: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.form-date-pick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 48px;
    align-self: stretch;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--gray-600);
    cursor: pointer;
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.form-date-pick:hover { border-color: var(--blue-500); color: var(--blue-700); }
.form-date-pick:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }

/* Says which document the citizen is about to get, when it is the model cerere
   rather than this form's own tipizat. Deliberately quieter than the warning
   banner it replaced: this is an explanation, not a problem. */
.form-model-note {
    padding: 12px 16px;
    /* Same 20px gap .form-privacy leaves. The note outlives the privacy notice —
       it is a sibling of the filler, not part of it — so on step 2 it is the only
       thing between the back link and the step label. */
    margin: 14px 0 20px;
    background: var(--gray-50, #f9fafb);
    border-left: 3px solid var(--blue-600, #2563eb);
    border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
    color: var(--gray-700);
    font-size: 14px;
    line-height: 1.55;
}

/* ── Turism sidebar built from a WP menu ─────────────────────────────────── */

.turism-nav-list { list-style: none; margin: 0; padding: 0; }
.turism-nav-list li { margin: 0; }

.turism-nav-list a {
    display: block;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    color: var(--gray-700);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.turism-nav-list a:hover { background: var(--gray-50); color: var(--blue-700); }
.turism-nav-link.is-current { background: var(--gray-100); color: var(--blue-700); }

/*
 * The sibling-page fallback (no menu assigned): pages.css pads its links
 * 8px 0, so the current page's highlight ran flush against the text on both
 * sides. 8px all round, pulled out by the same 8px so the text still lines up
 * with the card's heading and every divider stays the same length.
 */
.turism-nav-card > .turism-nav-link {
    padding: 8px;
    margin: 0 -8px;
    border-radius: var(--radius-md);
}

/* The menu version marks the current page the same way. */
.turism-nav-list .current-menu-item > a { background: var(--gray-100); color: var(--blue-700); }

/* ── Misc ────────────────────────────────────────────────────────────────── */

.article-intro { margin-bottom: 20px; }
.section-subtitle { margin: 30px 0 12px; font-size: 18px; }
.source-note { margin-top: 26px; color: var(--gray-500); font-size: 14px; }
.badge-anexa {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 11px;
    font-weight: 600;
}

.btn-filter,
.btn-reset {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.btn-filter { background: var(--blue-600); border: 1px solid var(--blue-600); color: #fff; }
.btn-filter:hover { background: var(--blue-700); }
.btn-reset { background: #fff; border: 1px solid var(--gray-200); color: var(--gray-700); }
.btn-reset:hover { border-color: var(--gray-400); }

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 768px) {
    .page-shell { padding-left: 18px; padding-right: 18px; }

    /*
     * The nav is deliberately NOT touched here. responsive.css already resets
     * .nav-inner to `padding: 0` below 1024px so the stacked menu runs full
     * bleed; this file loads last, so an override here silently put the inset
     * back and left every mobile menu item indented by 18px.
     */
}

/*
 * .list-count — the "1.161 hotărâri" line above a generated list.
 *
 * The count used to be baked into the archive's hardcoded subtitle. Now that
 * the heading and subtitle belong to the page, the count belongs to the list,
 * and it needed a class of its own. Matches .page-subtitle deliberately: it
 * sits in the same visual slot, just under editor-owned prose rather than
 * instead of it.
 */
.list-count {
    font-size: 14px;
    color: var(--gray-500);
    margin: 0 0 16px;
}

/*
 * .related-item as a link.
 *
 * The React build made these <div>s with a click handler (the copied CSS still
 * says `cursor: pointer`). single.php emits real anchors instead, so a reader
 * can middle-click a related announcement and the crawler can follow it — but
 * an <a> is inline by default, and the copied rule puts vertical padding and a
 * bottom border on it, which an inline box renders wrong.
 */
a.related-item { display: block; }

/*
 * .card-badges — the tag row on an announcement card.
 *
 * The card carried a single .tag; it can now also carry a file badge when the
 * announcement names a document. Wrapping them keeps the two on one line and
 * aligned, which a bare sibling pair did not.
 */
.card-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/*
 * .tch-edit-link — the "Editează pagina" button, bottom-right of every screen.
 *
 * Fixed rather than placed in the flow because it belongs to eleven different
 * templates, several of which (404, search, the three archives) share no
 * wrapper at all. Bottom-RIGHT specifically: the admin bar owns the top, and
 * the footer's social links own the bottom-left corner on narrow screens.
 *
 * z-index sits below the admin bar's 99999 on purpose — when both are on
 * screen the admin bar's menus must still open over this.
 */
.tch-edit-link {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9000;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 100px;
    background: var(--blue-700);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(12, 35, 64, .28);
    transition: background .15s ease, transform .15s ease;
}

.tch-edit-link:hover,
.tch-edit-link:focus {
    background: var(--blue-800);
    color: #fff;
    transform: translateY(-1px);
}

/* The default focus ring disappears against a dark pill. */
.tch-edit-link:focus-visible {
    outline: 3px solid var(--gold-400);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    /* Icon only — at this width the label crowds whatever it sits over. */
    .tch-edit-link { right: 12px; bottom: 12px; padding: 11px; }
    .tch-edit-link span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tch-edit-link { transition: none; }
    .tch-edit-link:hover, .tch-edit-link:focus { transform: none; }
}

/* An editor's affordance, never part of the page. */
@media print {
    .tch-edit-link, .route-notice { display: none !important; }
}

/*
 * .route-notice — "this page comes from the theme", above a pages.php fallback.
 *
 * Full-bleed and amber so it reads as a state of the SITE rather than as
 * content of the page; every editor-only surface in wp-admin uses the same
 * colour for the same reason. Only editors ever see it — see
 * template-parts/route-notice.php.
 */
.route-notice {
    background: var(--warning-bg);
    border-bottom: 1px solid #fde68a;
    color: #78350f;
}

.route-notice-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 12px 32px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.route-notice svg { color: var(--warning); flex-shrink: 0; }

.route-notice p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    flex: 1 1 320px;
}

.route-notice code {
    background: rgba(120, 53, 15, .1);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 13px;
}

.route-notice-button {
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: 6px;
    background: var(--warning);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.route-notice-button:hover,
.route-notice-button:focus { background: #b45309; color: #fff; }

@media (max-width: 640px) {
    .route-notice-inner { padding: 12px 16px; }
}