:root {
  --gov-navy: #002050;
  --gov-navy-dark: #013457;
  --gov-navy-light: #005EA4;
  --gov-light: #F8F9FA;
  --gov-border: #DDE1E6;
  --gov-success: #28A745;
  --gov-warning: #FFC107;
  --gov-text: #212529;
  --eu-yellow: #FFCC00;
  --accent-orange: #F0791C;
  --tricolor-blue: #0047AB;
  --tricolor-yellow: #FCD116;
  --tricolor-red: #CE1126;
  --a11y-font-scale: 1;
}
* { box-sizing: border-box; }
/* The accessibility text-size control scales the ROOT element's font-size, not the
   body's — nearly every font-size declaration across this site is in `rem` units,
   which are always relative to the root (html) element regardless of the body's own
   font-size. Setting this on `body` instead (as before) changed body's own size but
   had no visible effect on any rem-sized text, which is almost all of the site's text. */
/* Reserves the vertical scrollbar's width on every page, whether or not that specific
   page's content is actually tall enough to need scrolling. Without this, a short page
   (no scrollbar) gives position:fixed elements the FULL viewport width to align against,
   while a taller page (scrollbar present) has that same width reduced by the scrollbar's
   own footprint -- so anything pinned to the right edge (the footer's home/phone/lock
   icons) sits a scrollbar's-width further right on short pages than on tall ones. That
   inconsistency is exactly what reads as "the icons move" when navigating between pages
   of different lengths, even though every page uses the identical fixed footer markup. */
html { scroll-behavior: smooth; font-size: calc(16px * var(--a11y-font-scale)); scrollbar-gutter: stable; }
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Reserves room for the footer + the 6px tricolor band below it, both position:fixed
     to the viewport bottom on every page (see "Footer" below) -- otherwise the last bit
     of a page's content would scroll behind them instead of stopping above. 37px is the
     footer's own real measured height (~30.6px, itself just tall enough for its text/icon
     plus minimal padding) plus the band's 6px, rounded up a hair for safety. */
  padding-bottom: 37px;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #fff;
  background: var(--gov-navy);
  line-height: 1.5;
  /* Bumps the readable body/article text (card paragraphs, page-hero descriptions, any
     plain text that doesn't set its own font-size) up from the 16px browser default.
     Nav, footer and the brand text are unaffected -- they all set their own font-size in
     `rem`, which is anchored to the root element, not to body, so this change can't
     reach them. */
  font-size: 1.08rem;
}
a { color: #fff; }
img { max-width: 100%; }
.wrap { max-width: 1600px; margin: 0 auto; padding: 0 20px; }
/* `<main class="wrap">` is unique among .wrap usages: it's BOTH a direct flex item of
   body's column flex layout AND has auto left/right margins (from .wrap above) for
   centering. Per the flexbox spec, a flex item's default cross-axis `stretch` alignment
   is suppressed whenever ANY of its cross-axis margins are `auto` -- so instead of
   filling the available width up to max-width like it visually appears to on pages with
   wide content (e.g. the homepage's photo column), it actually shrinks to fit its own
   content on pages with little content, capped by max-width only as an upper bound it
   rarely reaches. Explicitly giving it width:100% (no longer `auto`) sidesteps that
   suppression rule entirely, so max-width + the auto margins center it exactly as they
   would in a normal (non-flex) block context, consistently regardless of content. */
main.wrap { width: 100%; }

/* Tricolor band */
.tricolor-band { display: flex; height: 6px; width: 100%; position: sticky; top: 0; z-index: 200; }
.tricolor-band span { flex: 1 1 33.33%; }
.tricolor-band .b1 { background: var(--tricolor-blue); }
.tricolor-band .b2 { background: var(--tricolor-yellow); }
.tricolor-band .b3 { background: var(--tricolor-red); }
.tricolor-band.bottom { position: fixed; left: 0; bottom: 0; top: auto; }

/* Header */
.header-actions { display: flex; align-items: stretch; gap: 16px; flex-shrink: 0; position: relative; }
.icon-btn { background: none; border: none; cursor: pointer; color: var(--gov-navy); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.85rem; font-weight: 600; }
.icon-btn:hover { color: var(--gov-navy-light); }
/* The icon sits in its own centered box (rather than relying on inline text flow) so the
   emoji's own glyph metrics (color emoji fonts often bake in uneven side-bearing) can't
   throw off how centered the icon+label pair looks — only the flex `gap` above controls
   the spacing between them, symmetrically. */
.icon-btn-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.icon-btn-icon svg { width: 24px; height: 24px; }
.icon-btn-label { line-height: 1; }
/* Search button is icon-only in the new header (no visible "Caută" label), but keeps
   its accessible name via aria-label — the label span stays in the DOM (hidden) so the
   reserved-width/cross-fade mechanism below is untouched. */
.search-inline .icon-btn-label { display: none; }
nav.main-nav .icon-btn {
  color: var(--gov-navy); border: 1px solid var(--gov-border); border-radius: 8px;
  padding: 11px 14px; font-size: 0.95rem; font-weight: 600; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
nav.main-nav .icon-btn:hover { background: #FFF6EC; border-color: var(--accent-orange); }

/* Search: the button's slot is reserved at its final width from the start (no
   width animation at all), so opening/closing never changes how much space this
   element takes in the nav row — nothing ever overlaps a neighboring tab, and the
   tabs never reflow. The input sits absolutely on top of the button, in the same
   box, and the two simply cross-fade via opacity. */
/* .search-inline's own width is CONSTANT — it never changes between the open and
   closed states. That's deliberate: it's a normal-flow flex item sized like every
   other nav box, and if opening search grew it, that growth would eat directly into
   the nav tabs' flex:1 space and could push tabs onto a new row — which is exactly
   what happened before this fix, and only at certain widths (it broke at very common
   ones like 1366px/1536px, not just narrow ones), because flex-wrap's decision of
   which tab lands on which row is a hard per-pixel threshold, not a gradual one.
   The input itself is position:absolute (out of flow), so IT can grow past the box's
   own edge to a comfortable typing width without that growth ever reaching the flex
   layout at all — guaranteeing zero row-reflow risk at any viewport width. */
/* .search-inline itself keeps its ORIGINAL width — that's the box flexbox uses to size
   .top-menu's flex:1 allocation, so keeping it unchanged guarantees the gap to the tab
   on the left stays exactly what it was, with no cascading recalculation. Only the
   visible bordered button inside it (#search-open-btn) is narrower and centered, so
   what you SEE shrinks without moving anything around it. (Narrowing the outer box
   directly was tried first — it hands the freed width to .top-menu's flex:1, which
   re-centers its tabs and shifts this gap too, and compensating with a negative
   margin just triggers a smaller version of the same shift again.) */
/* align-self:flex-start opts .header-actions out of nav-inner's align-items:stretch —
   without this, whenever .top-menu wraps its tabs onto 2 rows, nav-inner's row height
   grows to fit BOTH wrapped rows, and stretch made this box match that full height too
   (tall and narrow — nothing like the compact square nav boxes next to it). Its real
   height is set directly in JS instead (matching a single nav box's own height, the
   same number every nav item resolves to on its own row), so it stays the same compact
   shape as the tabs regardless of how many rows the tabs themselves wrap onto. */
.header-actions { align-self: flex-start; }
/* justify-content:flex-start (not center) lines the visible button's left edge up with
   this box's own left edge, which is what the gap-to-the-left-tab is measured against
   (see syncSearchGap in site.js) — centering it left a gap between the box edge and
   the button nobody could see, making the visible gap look bigger than the real one. */
.search-inline { position: relative; display: flex; align-items: center; justify-content: flex-start; width: 102px; flex-shrink: 0; }
.search-inline #search-open-btn { width: 72px; height: 100%; justify-content: center; }
.search-inline.open #search-open-btn { opacity: 0; pointer-events: none; }
#search-input {
  position: absolute; top: 0; left: 0; height: 100%; width: 72px;
  box-sizing: border-box; margin: 0; padding: 0 18px;
  background: #fff; color: var(--gov-text); border-radius: 8px; font-size: 0.95rem;
  border: 1px solid var(--gov-border);
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s ease, width 0.15s ease;
}
#search-input::placeholder { color: #888; }
.search-inline.open #search-input { width: 190px; opacity: 1; pointer-events: auto; }
#search-input:focus { outline: none; border-color: var(--accent-orange); }

/* Nav bar (logo left, tab grid + search on the right) */
nav.main-nav { background: #fff; position: sticky; top: 6px; z-index: 190; }
nav.main-nav > .wrap.nav-inner { display: flex; align-items: stretch; flex-wrap: wrap; gap: 10px 10px; position: relative; padding: 10px 14px; max-width: 1600px; }
.nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; flex-shrink: 0; order: 1; }
/* The crest stays at its original, undistorted size (scaleY made it visibly non-circular,
   which is worse than the size mismatch it was meant to fix) -- .nav-brand's own
   align-items:center already vertically centers it within the row's full stretched
   height (see nav-inner's align-items:stretch), matching the tabs' vertical centering,
   with no transform needed for that. */
.nav-brand img { height: 56px; width: auto; }
/* The brand text, on the other hand, gets taller on purpose: scaleY is a paint-time-only
   effect (it never touches layout/box sizing), so stretching just the text vertically
   makes it read as bigger/bolder without widening its box by even a pixel -- unlike
   raising font-size, which would grow both dimensions and could force the text to wrap
   differently or push .nav-brand wider. transform-origin defaults to center, so (like the
   crest) it stays vertically centered in the row while growing evenly up/down. */
.brand-text { font-weight: 800; text-transform: uppercase; color: var(--gov-navy); font-size: 1.1rem; line-height: 1.25; display: inline-block; transform: scaleY(1.3); }
.brand-text .brand-highlight { color: var(--accent-orange); }
.brand-text small { display: block; font-weight: 500; color: #6b7280; text-transform: none; font-size: 0.72rem; letter-spacing: 0; }
nav.main-nav ul.top-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; flex: 1; justify-content: center; gap: 8px; order: 2; }
nav.main-nav .header-actions { order: 3; }
/* `li` is itself a (single-child) flex container so its child <a>/<button> stretches to
   the li's full height. Without this, flexbox's align-items:stretch on the parent
   .top-menu only equalizes the height of the <li> boxes themselves — the clickable
   box inside each one stayed at its own content height regardless, which is why the
   visible squares looked uneven (a 1-line label like "Cariere" vs. a 2-3 line one like
   "Informații de interes public" produced visibly different box heights). */
.top-menu > li { position: relative; display: flex; }
.top-menu > li > a, .top-menu > li > button.menu-toggle {
  /* justify-content:flex-start (not center) anchors the icon at the same top offset in
     every box and starts every label on the same line right below it, regardless of
     how many lines that label wraps to — so icons line up across all boxes and labels
     all start at one shared level, instead of shifting per box based on its own text
     length (which is what centering the whole icon+label block would do). */
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px;
  width: 102px; min-height: 72px; height: 100%; padding: 10px 8px; color: var(--gov-navy); text-decoration: none;
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; text-align: center;
  background: #fff; border: 1px solid var(--gov-border); border-radius: 8px;
  cursor: pointer; font-family: inherit; white-space: normal; line-height: 1.2;
  transition: background 0.15s, border-color 0.15s;
  box-sizing: border-box;
}
.top-menu > li > a svg, .top-menu > li > button.menu-toggle svg { width: 24px; height: 24px; flex-shrink: 0; }
.top-menu > li > a:hover, .top-menu > li > button.menu-toggle:hover {
  background: #FFF6EC; border-color: var(--accent-orange);
}
.top-menu > li.active > a, .top-menu > li.active > button.menu-toggle {
  border-color: var(--accent-orange); border-bottom-width: 3px; background: #FFF6EC;
}
.submenu { list-style: none; margin: 0; padding: 8px 0; position: absolute; left: 0; top: 100%;
  background: #fff; min-width: 260px; box-shadow: 0 8px 20px rgba(0,0,0,0.15); border: 1px solid var(--gov-border);
  display: none; z-index: 150; margin-top: 6px; }
.top-menu > li.open .submenu { display: block; }
/* Scoped to desktop widths only -- a real tap on a touchscreen still fires a synthetic
   `mouseover` before its `click` (per every browser's touch-to-mouse compatibility
   events), which would make this :hover rule reveal the submenu right under the
   finger even on mobile, unconditionally, regardless of the width guard already added
   to the JS hover handlers in site.js (that guard only stops JS from setting `.open`;
   CSS :hover matches independently of any class/JS state). Below 961px, visibility is
   driven ONLY by the `.open` class above, toggled by the click handler in site.js. */
@media (min-width: 961px) {
  .top-menu > li:hover .submenu { display: block; }
}
.submenu li a { display: block; padding: 10px 18px; color: var(--gov-navy); text-decoration: none; font-size: 0.9rem; font-weight: 400; }
.submenu li a:hover { background: var(--gov-light); color: var(--gov-navy); }
.mobile-toggle { display: none; background: none; border: none; color: var(--gov-navy); font-size: 1.5rem; cursor: pointer; padding: 6px 10px; flex-shrink: 0; order: 4; }

/* Narrower desktop widths (laptops around 1200-1366px): reclaim a bit more
   lateral room for the tabs so the search slot doesn't push a long tab label
   onto its own row. */
@media (min-width: 961px) and (max-width: 1400px) {
  nav.main-nav > .wrap.nav-inner { gap: 6px 6px; }
  .top-menu > li > a, .top-menu > li > button.menu-toggle { width: 92px; min-height: 64px; padding: 8px 5px; font-size: 0.6rem; }
  .top-menu > li > a svg, .top-menu > li > button.menu-toggle svg { width: 20px; height: 20px; }
  .icon-btn-icon svg { width: 20px; height: 20px; }
  nav.main-nav ul.top-menu { gap: 6px; }
  .search-inline { width: 92px; }
  .search-inline.open #search-input { width: 150px; }
  .nav-brand { gap: 8px; }
  .nav-brand img { height: 46px; }
  .brand-text { font-size: 0.9rem; }
}

@media (max-width: 960px) {
  /* Without min-width:0, a flex item's default min-width:auto keeps it as wide as its
     longest unbroken line of text, forcing this whole block past the viewport edge
     instead of wrapping — this is what caused the brand text to overflow on narrow
     phones before this fix. */
  .nav-brand { flex-shrink: 1; min-width: 0; gap: 8px; }
  .brand-text { min-width: 0; font-size: 0.88rem; }
  .nav-brand img { height: 40px; }
  nav.main-nav ul.top-menu { display: none; flex-direction: column; flex-basis: 100%; justify-content: flex-start; order: 4; }
  nav.main-nav.mobile-open ul.top-menu { display: flex; }
  nav.main-nav .header-actions { order: 2; }
  .search-inline { width: 48px; }
  .search-inline #search-open-btn { width: 100%; }
  .search-inline.open #search-input { width: 160px; }
  nav.main-nav .icon-btn { padding: 8px 10px; font-size: 0.82rem; }
  #search-input { padding: 0 12px; font-size: 0.85rem; }
  .mobile-toggle { display: block; order: 3; }
  .top-menu > li > a, .top-menu > li > button.menu-toggle {
    width: 100%; flex-direction: row; justify-content: flex-start; text-align: left; min-height: auto;
  }
  .submenu { position: static; display: none; box-shadow: none; border: none; border-top: 1px solid var(--gov-border); background: var(--gov-light); margin-top: 0; }
  .top-menu > li.open .submenu { display: block; }
  .submenu li a { color: var(--gov-navy); padding-left: 32px; }
  .submenu li a:hover { background: #fff; }
}

/* Footer -- fixed to the bottom of the viewport on every page (sitting just above the
   6px fixed tricolor band below it), kept as thin as the text inside it allows: only
   the .footer-bottom padding and the intranet icon's own size were shrunk (see below);
   no font-size was touched anywhere here. body's padding-bottom (see the "Tricolor
   band" section above) is sized to match this footer's real height so page content
   never scrolls behind it. */
footer.site-footer {
  background: #fff; color: var(--gov-text); font-weight: 400;
  position: fixed; left: 0; right: 0; bottom: 6px; z-index: 199;
}
footer.site-footer a { color: var(--gov-navy); text-decoration: none; font-size: 0.9rem; font-weight: 400; }
footer.site-footer a:hover { color: var(--accent-orange); text-decoration: underline; }
.footer-bottom { padding: 4px 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.footer-bottom .wrap { padding: 0; display: flex; justify-content: space-between; align-items: center; width: 100%; flex-wrap: wrap; gap: 10px; }
.footer-bottom small { color: #6b7280; font-weight: 400; }
.footer-icons { display: flex; align-items: center; gap: 14px; }
.footer-icon-link { color: var(--gov-navy) !important; display: inline-flex; align-items: center; justify-content: center; }
.footer-icon-link:hover { color: var(--accent-orange) !important; }
.footer-icon-link svg { width: 20px; height: 20px; }

/* Page hero (used by content pages) */
.page-hero { background: var(--gov-navy); color: #fff; padding: 40px 0; }
.page-hero h1 { margin: 0 0 10px; font-size: 2rem; }
.page-hero p { margin: 0; color: rgba(255,255,255,0.75); max-width: 700px; text-indent: 2em; }
main { padding: 40px 0 60px; flex: 1 0 auto; }
.card { border: 1px solid rgba(255,255,255,0.25); border-radius: 4px; padding: 20px; margin-bottom: 16px; background: var(--gov-navy-dark); color: #fff; }
.placeholder-note { background: rgba(255,255,255,0.08); border: 1px dashed rgba(255,255,255,0.3); border-radius: 4px; padding: 16px; color: rgba(255,255,255,0.75); font-size: 1rem; }
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-list li { margin-bottom: 10px; }
.doc-list a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; color: #fff; }
.doc-list a:hover { text-decoration: underline; }
.breadcrumb-back { display: inline-block; margin-bottom: 16px; color: rgba(255,255,255,0.7); text-decoration: none; font-size: 0.9rem; }
.breadcrumb-back:hover { color: #fff; }
h2.section-title { font-size: 1.35rem; color: #fff; margin: 32px 0 12px; }
h2.section-title:first-child { margin-top: 0; }
.compartimente-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }

/* Content pages get an inverted look -- white page background, navy text -- instead of
   the navy-bg/white-text look used everywhere else by default. Scoped via the `data-page`
   value already set on every page's <body> to: the 8 sections reachable from the header's
   dropdown menus (matching the data-nav="..." buttons in HEADER_HTML in site.js), the 3
   homepage-teaser pages (anunturi, studii-impact, site-uri-utile), intranet (reachable
   from the footer's lock icon), and the search results page (cautare). The homepage
   itself (data-page="home") is deliberately NOT
   in this list -- it explicitly keeps the original navy look. (anunturi/index.html and
   studii-impact.html used to share data-page="home" with the real homepage, which would
   have wrongly flipped the homepage too if just added here as-is -- both were given their
   own distinct data-page values specifically so this list could target them without
   touching index.html. That also incidentally fixed those two pages wrongly highlighting
   "Pagina principală" as active in the nav, which they never should have done as-is.)
   Pages with no nav entry at all (servicii) are still NOT in this list, so they keep the
   default look, unless a future request says otherwise. */
body:is([data-page="despre"], [data-page="info-publice"], [data-page="compartimente"],
  [data-page="cariere"], [data-page="transparenta"], [data-page="gdpr"],
  [data-page="integritate"], [data-page="contact"], [data-page="anunturi"],
  [data-page="studii-impact"], [data-page="site-uri-utile"], [data-page="intranet"], [data-page="cautare"]) {
  background: #fff;
  color: var(--gov-navy);
}
body:is([data-page="despre"], [data-page="info-publice"], [data-page="compartimente"],
  [data-page="cariere"], [data-page="transparenta"], [data-page="gdpr"],
  [data-page="integritate"], [data-page="contact"], [data-page="anunturi"],
  [data-page="studii-impact"], [data-page="site-uri-utile"], [data-page="intranet"], [data-page="cautare"]) a {
  color: var(--gov-navy-light);
}
/* .placeholder-note's default (white-tinted, semi-transparent) styling assumes a dark
   page behind it -- on white it would render as near-invisible white-on-white text. */
body:is([data-page="despre"], [data-page="info-publice"], [data-page="compartimente"],
  [data-page="cariere"], [data-page="transparenta"], [data-page="gdpr"],
  [data-page="integritate"], [data-page="contact"], [data-page="anunturi"],
  [data-page="studii-impact"], [data-page="site-uri-utile"], [data-page="intranet"], [data-page="cautare"]) .placeholder-note {
  background: var(--gov-light);
  border: 1px dashed var(--gov-border);
  color: var(--gov-text);
}
/* .card's default navy-dark background is itself a leftover navy block once the page
   around it turns white (e.g. the "(Se completează de instituție)" box on Conducere) --
   inverted to match, with a solid border since its faint white-tinted one would
   otherwise vanish against white the same way .placeholder-note's did. */
body:is([data-page="despre"], [data-page="info-publice"], [data-page="compartimente"],
  [data-page="cariere"], [data-page="transparenta"], [data-page="gdpr"],
  [data-page="integritate"], [data-page="contact"], [data-page="anunturi"],
  [data-page="studii-impact"], [data-page="site-uri-utile"], [data-page="intranet"], [data-page="cautare"]) .card {
  background: var(--gov-light);
  border: 1px solid var(--gov-border);
  color: var(--gov-navy);
}
body:is([data-page="despre"], [data-page="info-publice"], [data-page="compartimente"],
  [data-page="cariere"], [data-page="transparenta"], [data-page="gdpr"],
  [data-page="integritate"], [data-page="contact"], [data-page="anunturi"],
  [data-page="studii-impact"], [data-page="site-uri-utile"], [data-page="intranet"], [data-page="cautare"]) h2.section-title {
  color: var(--gov-navy);
}
/* .page-hero (the title band at the top of every content page) also inverts here --
   navy-on-white, matching the rest of the now-white page, instead of staying a navy
   band with white text like it is on the pages that keep the default look. */
body:is([data-page="despre"], [data-page="info-publice"], [data-page="compartimente"],
  [data-page="cariere"], [data-page="transparenta"], [data-page="gdpr"],
  [data-page="integritate"], [data-page="contact"], [data-page="anunturi"],
  [data-page="studii-impact"], [data-page="site-uri-utile"], [data-page="intranet"], [data-page="cautare"]) .page-hero {
  background: #fff;
  color: var(--gov-navy);
}
body:is([data-page="despre"], [data-page="info-publice"], [data-page="compartimente"],
  [data-page="cariere"], [data-page="transparenta"], [data-page="gdpr"],
  [data-page="integritate"], [data-page="contact"], [data-page="anunturi"],
  [data-page="studii-impact"], [data-page="site-uri-utile"], [data-page="intranet"], [data-page="cautare"]) .page-hero p {
  color: rgba(0, 32, 80, 0.7);
  /* The base .page-hero p max-width:700px was sized for the old 1280px-capped column
     against a navy band -- now that these pages' content column runs up to 1600px wide
     (or fills the viewport minus 20px below that), 700px forces text to wrap onto 2-3
     short lines with lots of empty space beside it instead of using the room that's
     actually there. Letting it run the full width of its container removes that
     artificial wrap. */
  max-width: none;
}
/* .doc-list a's default white text is invisible on white -- only anunturi and
   site-uri-utile currently use .doc-list among the pages in this list. */
body:is([data-page="anunturi"], [data-page="site-uri-utile"], [data-page="cautare"]) .doc-list a {
  color: var(--gov-navy-light);
}
/* Body paragraph text on these content pages is justified (flush on both edges) rather
   than the default ragged-right left alignment. Scoped to `main p` (not headings, not
   the footer) -- justify only visibly changes multi-line paragraphs anyway, so applying
   it to single-line text (like .page-hero's tagline) has no effect either way. */
body:is([data-page="despre"], [data-page="info-publice"], [data-page="compartimente"],
  [data-page="cariere"], [data-page="transparenta"], [data-page="gdpr"],
  [data-page="integritate"], [data-page="contact"], [data-page="anunturi"],
  [data-page="studii-impact"], [data-page="site-uri-utile"], [data-page="intranet"], [data-page="cautare"]) main p {
  text-align: justify;
}

/* Every page now shares the same content column width -- .wrap's own max-width above
   (1600px) applies uniformly, with no page-type exceptions, so there's no risk of pages
   drifting out of sync again the way home vs. despre-institutie did. */
/* ...EXCEPT the footer's own .wrap, which must stay at the narrower 1280px on every
   single page regardless of content width. The footer is one shared, fixed-position
   component -- if its inner .wrap matched the wider 1600px content column, its
   home/phone/lock icons (anchored to that wrap's right edge) would sit closer to the
   true screen edge than they do today. Keeping the footer at its own fixed 1280px
   avoids changing that established position. Same specificity as .wrap above (0,1,0
   either way) -- this wins purely by coming later in the cascade, so it must stay below
   that rule in the file. */
footer.site-footer .wrap { max-width: 1280px; }

/* Toast banner: shown after a form submission (success or error) on any page.
   Fixed to the viewport top so it stays visible even if the user has scrolled
   past the form, independent of the form's own inline #form-message. */
#toast-banner {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%) translateY(-16px);
  z-index: 600; max-width: min(480px, 92vw); padding: 14px 18px; border-radius: 6px;
  font-size: 0.92rem; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease;
  display: flex; align-items: center; gap: 12px;
}
#toast-banner.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
#toast-banner.success { background: #e6f7ec; color: #1b5e2c; border: 1px solid var(--gov-success); }
#toast-banner.error { background: #fdecea; color: #7a1a1a; border: 1px solid #d6334a; }
#toast-banner .toast-close { margin-left: auto; background: none; border: none; cursor: pointer; font-size: 1.15rem; line-height: 1; color: inherit; opacity: 0.6; padding: 0; }
#toast-banner .toast-close:hover { opacity: 1; }

/* Accessibility widget */
/* U+FE0E after the symbol forces plain text-style rendering (instead of a full-color
   emoji glyph), so it respects the `color` property below. A solid navy background +
   thin white ring keeps the white icon visible regardless of what's behind the button
   (navy page content or the white footer), since it's fixed and can sit over either.
   `bottom` is set dynamically by JS to sit just above the footer's real height
   (see updateA11yPosition). */
#a11y-btn { position: fixed; bottom: 66px; right: 20px; width: 48px; height: 48px; border-radius: 50%;
  background: var(--gov-navy); color: #fff; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.25); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem; z-index: 300; }
#a11y-panel { position: fixed; bottom: 142px; right: 20px; width: min(300px, calc(100vw - 40px)); background: #fff; color: var(--gov-text); border: 1px solid var(--gov-border);
  border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.2); padding: 16px; z-index: 300; display: none; box-sizing: border-box; }
#a11y-panel.open { display: block; }
#a11y-panel h4 { margin: 0 0 12px; font-size: 0.95rem; }
.a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--gov-border); font-size: 0.85rem; }
.a11y-row:first-of-type { border-top: none; }
.a11y-row > span:first-child { min-width: 0; overflow-wrap: break-word; }
.a11y-fontsize-btn { border: 1px solid var(--gov-border); background: #fff; border-radius: 4px; width: 28px; height: 28px; cursor: pointer; flex-shrink: 0; }
.a11y-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0;
  border: 1px solid var(--gov-border); border-radius: 11px; background: #ddd; cursor: pointer; padding: 0; }
.a11y-switch::after { content: ''; position: absolute; top: 1px; left: 1px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.3); transition: transform 0.15s; }
.a11y-switch.active { background: var(--gov-navy); border-color: var(--gov-navy); }
.a11y-switch.active::after { transform: translateX(18px); }
#a11y-reset { width: 100%; margin-top: 4px; border: 1px solid var(--gov-border); background: #fff; border-radius: 4px; padding: 8px; cursor: pointer; font-size: 0.8rem; }
#a11y-reset:hover { background: var(--gov-light); }

/* High contrast mode */
html.a11y-high-contrast { filter: contrast(1.15); }
html.a11y-high-contrast body { background: #000 !important; color: #fff !important; }
html.a11y-high-contrast a { color: #ffd000 !important; }
html.a11y-high-contrast .card, html.a11y-high-contrast .placeholder-note { background: #111 !important; border-color: #444 !important; }
html.a11y-underline-links a { text-decoration: underline !important; }
html.a11y-dyslexia-font body { font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif !important; }
html.a11y-pause-animations * { animation: none !important; transition: none !important; }
/* Keep this white-background floating panel readable in high-contrast mode —
   otherwise its text inherits body's forced white color onto a white background. */
html.a11y-high-contrast #a11y-panel, html.a11y-high-contrast #a11y-panel * { color: var(--gov-text) !important; }