/* ==========================================================================
   PODUL — HEADER

   Restyles Jannah's header-layout-3 into the design's two-row masthead:

     row 1  branding — logo, Paul Goma quote, Romanian flag. Collapses on scroll.
     row 2  nav — compact logo (fades in), bordered menu cells, tools.

   Loaded after podul-overrides.css, so it wins on equal specificity. !important
   appears only where Jannah's own header CSS or its generated inline CSS would
   otherwise win — each of those is commented.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Shell
   -------------------------------------------------------------------------- */

/* position:sticky only works if no ancestor is a scroll container. Jannah sets
   overflow:hidden on #tie-container (to contain floats and kill horizontal
   overflow), which silently breaks it.

   overflow-x:clip still clips horizontally but — unlike hidden — does NOT
   create a scroll container, so sticky survives. Pairing clip on one axis with
   visible on the other is legal; hidden + visible would be coerced to auto. */
html body #tie-container {
  overflow: visible !important;
  overflow-x: clip !important;
}

html body #theme-header {
  position: sticky;
  top: 0;
  z-index: var(--podul-z-header);
  background-color: var(--podul-white) !important;  /* beats .main-nav-dark */
  border-bottom: var(--podul-border-thick) solid var(--podul-black);
  transition: var(--podul-transition);
}

/* Logged-in users get the WP admin bar, which is fixed over the top 32px of the
   viewport. Sticking at top:0 parks the header underneath it — the pinned bar
   was left about 15px tall for anyone logged in. Only from 783px up: below that
   WordPress switches the admin bar to position:absolute and it scrolls away, so
   no offset is wanted. */
@media screen and (min-width: 783px) {
  html body.admin-bar #theme-header {
    top: 32px;
  }
}

/* The design has no top bar. Breaking news and the date strip are not part of
   it — turn the Top Navigation off in Theme Options to stop rendering it at all;
   this only hides it. */
html body #theme-header #top-nav {
  display: none !important;
}

/* Jannah adds a spacer when its own sticky nav engages. We do our own sticky,
   so the spacer would leave a gap. */
html body .is-sticky-header-space,
html body #tie-wrapper .fixed-nav-space {
  display: none !important;
}


/* --------------------------------------------------------------------------
   2. Branding row
   -------------------------------------------------------------------------- */

/* The branding row collapses on scroll.
 *
 * Animated with grid-template-rows 1fr → 0fr rather than max-height. The old
 * approach could not animate at all: the expanded state had no max-height, and
 * a transition from `none` to `0` has no interpolable start value, so the row
 * snapped shut in one frame. The grid technique also needs no magic pixel
 * height, so it stays correct if the logo or quote ever change size. */
html body #theme-header .header-container {
  display: grid;
  grid-template-rows: 1fr;
  width: 100%;
  max-width: var(--podul-container);
  margin-inline: auto;
  padding-inline: var(--podul-gutter-lg);
  transition: grid-template-rows .45s cubic-bezier(.4, 0, .2, 1),
              opacity .3s ease;
}

/* The grid item has to be allowed to shrink below its content height. */
html body #theme-header .header-container > * {
  min-height: 0;
  overflow: hidden;
}

html body #theme-header .logo-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.5rem;
  padding-block: 1.5rem 1.75rem;
  margin: 0;
  transition: var(--podul-transition);
}

/* The row carries Jannah's clearfix, and `content: ""; display: table` becomes
   a third flex item — zero-width, but the 2.5rem gap is still reserved *before*
   it, so the branding block stopped 40px short of the right edge. The clearfix
   has no job in a flex container. */
html body #theme-header .logo-row::before,
html body #theme-header .logo-row::after {
  display: none !important;
}

/* Jannah's grid classes would otherwise constrain the logo to 4 columns. */
html body #theme-header .logo-wrapper,
html body #theme-header .logo-container {
  width: auto !important;
  max-width: none !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto;
  text-align: left;
}

html body #theme-header .logo-container .image-logo img,
html body #theme-header .logo-container .logo img {
  height: 88px !important;   /* beats the inline max-height tie_logo() prints */
  max-height: 88px !important;
  width: auto !important;
  object-fit: contain;
}

/* Collapse the branding row once scrolled — the design's signature move. */
html body #theme-header.podul-scrolled .header-container {
  grid-template-rows: 0fr;
  opacity: 0;
}

html body #theme-header.podul-scrolled .logo-row {
  padding-block: 0;
}

/* Scroll anchoring has to be off while that collapse animates.
 *
 * The header is in normal flow, so shrinking the branding row makes the
 * document ~220px shorter. Chrome reacts by moving the scroll position to keep
 * the content visually still — measured here as the position walking backwards
 * 143 → 134 → 105 → 84 during a single collapse. That moved the page back below
 * the re-expand threshold, which re-expanded the header, which moved the page
 * again: scrolling slowly through the trip point put it in an endless
 * open/shut loop.
 *
 * The class is added by podul-header.js only for the length of the transition,
 * so anchoring still does its normal job everywhere else — notably keeping the
 * page steady when a lazy-loaded image above the viewport finally arrives. */
html.podul-header-animating body,
html.podul-header-animating #tie-wrapper,
html.podul-header-animating #tie-container {
  overflow-anchor: none;
}


/* --------------------------------------------------------------------------
   3. Quote + flag
   -------------------------------------------------------------------------- */

.podul-brand-extra {
  display: flex;
  align-items: flex-end;
  gap: 2.5rem;
  margin-left: auto;
  padding-bottom: .25rem;
}

.podul-quote {
  margin: 0;
  max-width: 28rem;
  text-align: right;
}

.podul-quote__text {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  /* This is a real <blockquote>, so Jannah's single.css decorates it with a
     large quote glyph — but only on single posts, where that stylesheet is
     enqueued. Suppressed here so the masthead looks the same everywhere. */
  quotes: none;
  font-family: var(--podul-font-body);
  font-size: var(--podul-text-xl);
  font-style: italic;
  font-weight: var(--podul-weight-semibold);
  line-height: 1.1;
  letter-spacing: var(--podul-track-tighter);
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--podul-ink);
}

/* Same trap as in §3b: on articles, single.css re-adds a blockquote margin
   through a more specific selector than the plain class above. */
html body .podul-brand-extra .podul-quote .podul-quote__text {
  margin: 0;
}

.podul-quote__text::before,
.podul-quote__text::after,
html body .podul-quote__text::before,
html body .podul-quote__text::after {
  content: none !important;
  display: none !important;
}

.podul-quote__author {
  display: block;
  margin-top: .75rem;
  font-size: var(--podul-text-2xs);
  font-weight: var(--podul-weight-black);
  letter-spacing: var(--podul-track-wider);
  text-transform: uppercase;
  opacity: .6;
}

/* The row baselines its children (.podul-brand-extra is align-items: flex-end,
   so the quote's last line sits on the logo's baseline), but a single flag reads
   as stranded down there — asked for centred instead, 1 September 2026.
   align-self overrides the row for this column only, so the quote keeps its
   baseline. Centring happens inside the row's content box, i.e. above the
   .25rem padding-bottom: 2px off true centre, which is not visible.
   justify-content keeps a second flag centred as a pair. */
.podul-flags {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .5rem;
  flex-shrink: 0;
  align-self: center;
}

.podul-flag {
  display: block;
  width: 64px;
  height: 40px;
  overflow: hidden;
  border: var(--podul-border-thin) solid var(--podul-black);
  box-shadow: var(--podul-shadow-sm);
}

.podul-flag img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* --------------------------------------------------------------------------
   3b. The same quote and flag on mobile, in a band under the header

   Printed by podul_mobile_brand_band() on TieLabs/before_main_content — see
   inc/header.php for why it is a separate band and not the desktop row
   un-hidden.

   Layout choice: the quote keeps the reading order it has on desktop — text
   first, flag after it — but left-aligned instead of right, because a
   right-aligned two-line quote on a 390px screen reads as if it were pushed off
   the edge. The flag is pinned to the right of the row and centred against the
   two lines, the same relationship as the masthead. A thick black rule under it
   ties it to the nav bar above rather than letting it float over the content.
   -------------------------------------------------------------------------- */

html body .podul-brand-mobile {
  display: none;
}

@media (max-width: 991px) {

  html body .podul-brand-mobile {
    display: block;
    background-color: var(--podul-white);
    border-bottom: var(--podul-border-thick) solid var(--podul-black);
  }

  html body .podul-brand-mobile__inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-width: var(--podul-container);
    margin-inline: auto;
    padding: 1rem var(--podul-gutter);
  }

  /* .podul-quote is the masthead's own class, so the typography comes for free;
     only the alignment and the desktop width cap have to go. */
  html body .podul-brand-mobile .podul-quote {
    flex: 1 1 auto;
    max-width: none;
    text-align: left;
  }

  html body .podul-brand-mobile .podul-quote__text {
    /* 15px: the masthead's 20px is too loud under a 44px nav bar, 12px reads as
       fine print. */
    font-size: var(--podul-text-md);
    line-height: 1.15;
  }

  /* margin: 0 is already in §3, but only on `.podul-quote__text` — a single
     class. Jannah's single.css, which loads on articles only, carries
     `blockquote, q { margin: 20px 0 }` and then repeats it **with !important**
     under `@media (max-width: 767px)`. So on a phone the band was 132px tall on
     an article and 100px on the homepage — the inconsistent padding reported on
     2 September 2026 was exactly these two 20px margins.
     Hence !important here: no amount of specificity beats theirs. */
  html body .podul-brand-mobile .podul-quote .podul-quote__text {
    margin: 0 !important;
  }

  html body .podul-brand-mobile .podul-quote__author {
    margin-top: .5rem;
  }

  html body .podul-brand-mobile .podul-flags {
    flex: 0 0 auto;
    align-self: center;
  }

  html body .podul-brand-mobile .podul-flag {
    width: 48px;
    height: 30px;
  }
}

/* Very narrow phones: the quote needs the width more than the flag needs its
   own column, so the flag drops under the author. */
@media (max-width: 359px) {

  html body .podul-brand-mobile__inner {
    display: block;
  }

  html body .podul-brand-mobile .podul-flags {
    margin-top: .75rem;
  }
}


/* --------------------------------------------------------------------------
   4. Nav row
   -------------------------------------------------------------------------- */

html body #theme-header #main-nav,
html body #theme-header .main-nav-wrapper {
  background-color: var(--podul-white) !important;  /* beats .main-nav-dark */
  border: 0;
  box-shadow: none !important;
  min-height: 0;
}

/* Jannah runs its own sticky-nav script alongside ours. Once you scroll it puts
 * .fixed / .fixed-nav / .fixed-unpinned on #main-nav and pins the bar with
 * position:fixed (top:32px here — it offsets for the admin bar), which lifts
 * the menu clean out of our sticky header. Two visible symptoms: the header's
 * 4px bottom border was painted behind the pinned bar and vanished, and the bar
 * itself hung ~18px below the header box (measured: header 0→57, nav 32→75).
 *
 * The design has exactly one sticky element — #theme-header — so the nav is put
 * back inside it. position:relative and not static, because the live-search
 * popup and the drop-downs are absolutely positioned against #main-nav.
 *
 * Cleaner still: switch the sticky navigation off in Theme Options → Header, so
 * its script stops running at all. This rule makes the result correct either way. */
html body #theme-header #main-nav.fixed,
html body #theme-header #main-nav.fixed-nav,
html body #theme-header #main-nav.fixed-pinned,
html body #theme-header #main-nav.fixed-unpinned {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  transform: none !important;
  box-shadow: none !important;
}

/* The same script writes an inline height onto .main-nav-wrapper to reserve the
 * space its fixed bar would otherwise leave behind (measured: height:53px for a
 * 43px bar). With the nav kept in flow that reservation is dead space — it read
 * as a white strip between the menu and the header's bottom border. */
html body #theme-header .main-nav-wrapper {
  height: auto !important;
  min-height: 0 !important;
}

html body #theme-header #main-nav .container {
  width: 100%;
  max-width: var(--podul-container);
  padding-inline: 0;
}

html body #theme-header .main-menu-wrapper,
html body #theme-header #menu-components-wrap {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  min-height: 0;
}

/* .main-menu-wrapper is where Jannah actually paints the dark nav (#1f2024)
   and it is floated — both have to go or the row is dark and breaks out of the
   flex layout. */
html body #theme-header .main-menu-wrapper {
  width: 100%;
  float: none !important;
  background-color: transparent !important;
  border-top: var(--podul-border-thin) solid var(--podul-black);
}

html body #theme-header.podul-scrolled .main-menu-wrapper {
  border-top: 0;
}

html body #theme-header #menu-components-wrap {
  flex: 1 1 auto;
}

html body #theme-header .main-menu.main-menu-wrap {
  display: flex !important;   /* Jannah leaves this as a block, which forces the
                                 tools onto a second line */
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  float: none !important;
  background: none !important;
}

html body #theme-header .main-menu .menu,
html body #theme-header #main-nav-menu {
  display: flex;
  align-items: stretch;
  /* min-width:0 lets the row shrink below its content width so the tools cell
     is never overlapped; overflow-x then scrolls the surplus items. */
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html body #theme-header .main-menu .menu::-webkit-scrollbar {
  display: none;
}

/* Menu cells */
html body #theme-header .main-menu .menu > li {
  display: flex;
  float: none;
  border-right: var(--podul-border-thin) solid var(--podul-black);
}

html body #theme-header .main-menu .menu > li > a {
  display: flex;
  align-items: center;
  padding: 1.25rem 1.5rem !important;   /* beats Jannah's line-height sizing */
  font-family: var(--podul-font-body);
  font-size: var(--podul-text-sm);
  font-weight: var(--podul-weight-black);
  letter-spacing: var(--podul-track-label);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  color: var(--podul-ink) !important;    /* beats .main-nav-dark link colour */
  background: none;
  transition: var(--podul-transition);
}

html body #theme-header .main-menu .menu > li > a:hover,
html body #theme-header .main-menu .menu > li > a:focus,
html body #theme-header .main-menu .menu > li.current-menu-item > a,
html body #theme-header .main-menu .menu > li.tie-current-item > a {
  background-color: var(--podul-yellow) !important;
  color: var(--podul-ink) !important;
}

/* Jannah draws an accent bar under the active item — the design uses the
   yellow fill instead. */
html body #theme-header .main-menu .menu > li > a::before,
html body #theme-header .main-menu .menu > li > a::after {
  display: none !important;
}

html body #theme-header.podul-scrolled .main-menu .menu > li > a {
  padding-block: 1rem !important;
}


/* --------------------------------------------------------------------------
   5. Compact logo in the nav

   Hidden on desktop until scrolled; always visible on mobile. order:-1 pulls it
   to the front of #menu-components-wrap, which is where the design puts it.
   -------------------------------------------------------------------------- */

.podul-nav-logo {
  order: -1;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding-inline: 2rem;
  border-right: var(--podul-border-thin) solid var(--podul-black);
  overflow: hidden;
  transition: var(--podul-transition);
}

.podul-nav-logo img {
  display: block;
  height: 32px;
  width: auto;
  object-fit: contain;
}

@media (min-width: 992px) {
  /* Collapsed until the branding row goes away. */
  html body #theme-header:not(.podul-scrolled) .podul-nav-logo {
    width: 0;
    padding-inline: 0;
    opacity: 0;
    border-right-width: 0;
  }
}


/* --------------------------------------------------------------------------
   6. Tools — search and the rest of Jannah's component list
   -------------------------------------------------------------------------- */

html body #theme-header #menu-components-wrap > ul.components {
  display: flex !important;
  align-items: stretch;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
  flex: 0 0 auto;
  float: none !important;
  background: none !important;
  border-left: var(--podul-border-thin) solid var(--podul-black);
}

html body #theme-header ul.components > li {
  display: flex;
  align-items: stretch;
  border-right: var(--podul-border-thin) solid var(--podul-black);
}

html body #theme-header ul.components > li:last-child {
  border-right: 0;
}

html body #theme-header ul.components > li > a {
  display: flex;
  align-items: center;
  padding-inline: 1.5rem;
  color: var(--podul-ink) !important;
  transition: var(--podul-transition);
}

html body #theme-header ul.components > li > a:hover {
  background-color: var(--podul-yellow) !important;
  color: var(--podul-ink) !important;
}

/* The design has no open search field in the nav — just an icon. Jannah prints
   the form because the Main Nav search component's layout option is "Search
   Bar"; inc/header.php renders the compact icon regardless, so the form is
   hidden here rather than depending on that option being changed. */
html body #theme-header .search-bar {
  display: none !important;
}

/* Tools column — search icon + panel toggle. */
html body #theme-header .podul-tools {
  display: flex !important;
  align-items: stretch;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: var(--podul-border-thin) solid var(--podul-black);
}

html body #theme-header .podul-tools > li {
  display: flex;
  align-items: stretch;
  border-right: var(--podul-border-thin) solid var(--podul-black);
}

html body #theme-header .podul-tools > li:last-child {
  border-right: 0;
}

html body #theme-header .podul-tools > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3.5rem;
  padding-inline: 1.25rem;
  font-size: 1rem;
  color: var(--podul-ink) !important;
  transition: var(--podul-transition);
}

html body #theme-header .podul-tools > li > a:hover,
html body #theme-header .podul-tools > li > a:focus {
  background-color: var(--podul-yellow) !important;
  color: var(--podul-ink) !important;
}

/* The hamburger is mobile-only, asked for on 1 September 2026.

   On desktop the whole menu is already in the nav bar, so the panel duplicated
   it; on mobile the nav bar is the only header and the panel is the menu, so it
   stays. 992px is the theme's own breakpoint — the branding row disappears and
   Jannah's mobile header takes over at the same width (§9).

   CSS rather than a `tie_is_mobile()` check in inc/header.php: this is about the
   viewport, not the device, and the markup has to stay in the page so the panel
   still works when a phone-width window is resized. The trigger's cell is also
   the last one, and :last-child still matches a display:none element — so the
   search icon has to be told it is now the visual end of the row, or its right
   border draws a stray line against the container edge. */
@media (min-width: 992px) {

  html body #theme-header .podul-tools > li.side-aside-nav-icon {
    display: none;
  }

  html body #theme-header .podul-tools > li:nth-last-child(2) {
    border-right: 0;
  }
}


/* --------------------------------------------------------------------------
   6a. Language cell

   The markup inside is GTranslate's — a <select> listing whatever languages are
   enabled in its settings. podul-lang.js replaces it with .podul-lang__trigger
   and .podul-lang__menu; until (or unless) that happens the select itself is the
   visible control, so it is styled too rather than hidden outright.
   -------------------------------------------------------------------------- */

html body #theme-header .podul-lang {
  position: relative;
}

/* Fallback state: GTranslate's own select, dressed as a cell. */
html body #theme-header .podul-lang__native select {
  height: 100%;
  min-width: 3.5rem;
  padding-inline: 1rem;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: var(--podul-font-body);
  font-size: var(--podul-text-sm);
  font-weight: var(--podul-weight-black);
  letter-spacing: var(--podul-track-label);
  text-transform: uppercase;
  color: var(--podul-ink) !important;
  cursor: pointer;
}

/* Enhanced state: the select stays in the DOM and stays functional — the JS
   drives it — but it no longer takes up space or tab focus. */
html body #theme-header .podul-lang--enhanced .podul-lang__native {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

html body #theme-header .podul-lang__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-width: 3.5rem;
  height: 100%;
  padding-inline: 1.25rem;
  background: none;
  border: 0;
  font-family: var(--podul-font-body);
  font-size: var(--podul-text-sm);   /* matches the menu cells beside it */
  font-weight: var(--podul-weight-black);
  letter-spacing: var(--podul-track-label);
  text-transform: uppercase;
  color: var(--podul-ink);
  cursor: pointer;
  transition: var(--podul-transition);
}

html body #theme-header .podul-lang__trigger:hover,
html body #theme-header .podul-lang__trigger:focus-visible,
html body #theme-header .podul-lang.is-open .podul-lang__trigger {
  background-color: var(--podul-yellow);
}

/* Caret drawn in CSS rather than an icon font — Jannah's icon set is not
   guaranteed to be loaded on every layout. */
html body #theme-header .podul-lang__caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .2s ease;
}

html body #theme-header .podul-lang.is-open .podul-lang__caret {
  transform: rotate(180deg);
}

html body #theme-header .podul-lang__menu {
  position: absolute;
  top: 100%;
  right: -2px;            /* line the panel's border up with the cell's own */
  z-index: 20;
  display: none;
  min-width: 13rem;
  max-height: 22rem;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  background-color: var(--podul-white);
  border: var(--podul-border-thin) solid var(--podul-black);
  box-shadow: var(--podul-shadow-md);
}

html body #theme-header .podul-lang.is-open .podul-lang__menu {
  display: block;
}

html body #theme-header .podul-lang__menu li {
  margin: 0;
  border-bottom: 1px solid var(--podul-rule-faint);
}

html body #theme-header .podul-lang__menu li:last-child {
  border-bottom: 0;
}

html body #theme-header .podul-lang__menu button {
  display: block;
  width: 100%;
  padding: .75rem 1rem;
  background: none;
  border: 0;
  font-family: var(--podul-font-body);
  font-size: var(--podul-text-xs);
  font-weight: var(--podul-weight-semibold);
  line-height: 1.2;
  text-align: left;
  color: var(--podul-ink);
  cursor: pointer;
  transition: var(--podul-transition);
}

html body #theme-header .podul-lang__menu button:hover,
html body #theme-header .podul-lang__menu button:focus-visible {
  background-color: var(--podul-yellow);
}

html body #theme-header .podul-lang__menu button.is-current {
  background-color: var(--podul-black);
  color: var(--podul-yellow);
}

/* GTranslate injects a Google branding bar and can shift the page down by its
   own toolbar; neither belongs in this design. */
html body .goog-te-banner-frame,
html body .skiptranslate iframe,
html body #goog-gt-tt {
  display: none !important;
}

html body {
  top: 0 !important;   /* the toolbar sets an inline top offset on <body> */
}


/* --------------------------------------------------------------------------
   6b. Full-screen search overlay
   -------------------------------------------------------------------------- */

html body .tie-popup-search-wrap,
html body #tie-popup-search-desktop {
  background-color: var(--podul-yellow) !important;
}

html body .tie-popup-search-wrap .popup-search-wrap-inner {
  max-width: var(--podul-container);
  margin-inline: auto;
  padding-inline: var(--podul-gutter-lg);
}

html body .tie-popup-search-wrap .tie-popup-search-input {
  width: 100%;
  padding: 1rem 0;
  background: none !important;
  border: 0 !important;
  border-bottom: var(--podul-border-thick) solid var(--podul-black) !important;
  border-radius: var(--podul-radius) !important;
  font-family: var(--podul-font-display) !important;
  font-size: clamp(1.5rem, 5vw, 3.5rem) !important;
  font-weight: var(--podul-weight-black) !important;
  letter-spacing: var(--podul-track-tighter);
  text-transform: uppercase;
  color: var(--podul-ink) !important;
}

html body .tie-popup-search-wrap .tie-popup-search-input::placeholder {
  color: rgba(0, 0, 0, .35);
}

html body .tie-popup-search-wrap .tie-popup-search-submit {
  background: none !important;
  border: 0 !important;
  color: var(--podul-ink) !important;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Close button. Jannah ships it at 25×25 with a 22px icon-font glyph in
   ::before; both the box and the glyph have to be scaled, and flex centring
   keeps the glyph optically centred at any size. */
html body .tie-popup-search-wrap .tie-btn-close,
html body .tie-popup .tie-btn-close {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 68px !important;
  height: 68px !important;
  font-size: 30px !important;
  line-height: 1 !important;
  background-color: var(--podul-black) !important;
  color: var(--podul-yellow) !important;
  border-radius: 50%;
  transition: var(--podul-transition);
}

html body .tie-popup .tie-btn-close:hover {
  background-color: var(--podul-yellow) !important;
  color: var(--podul-ink) !important;
}


/* --------------------------------------------------------------------------
   6c. Live-search suggestions

   Jannah's AJAX search appends its dropdown to <body> with the class taken from
   the field's data-skin — here .live-search-popup, for both the desktop and the
   mobile popup. Its background is rgba(0,0,0,.7), which over the yellow overlay
   renders as dark olive with white text. Rebuilt as the design's white card.

   Note the container is NOT .autocomplete-suggestions (that is the generic name
   in the autocomplete library); only the individual rows carry
   .autocomplete-suggestion.
   -------------------------------------------------------------------------- */

html body .live-search-popup {
  background-color: var(--podul-white) !important;
  border: var(--podul-border-thin) solid var(--podul-black) !important;
  border-radius: var(--podul-radius) !important;
  box-shadow: var(--podul-shadow-lg);
  padding: 0 !important;
  overflow-y: auto;
}

html body .live-search-popup .autocomplete-suggestion {
  padding: 1rem 1.25rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--podul-rule-faint) !important;
  background: none !important;
  transition: var(--podul-transition);
}

html body .live-search-popup .autocomplete-suggestion:last-of-type {
  border-bottom: 0 !important;
}

html body .live-search-popup .autocomplete-suggestion:hover,
html body .live-search-popup .autocomplete-selected {
  background-color: var(--podul-yellow) !important;
}

/* Result rows */
html body .live-search-popup .widget-post-list {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: none !important;
}

html body .live-search-popup .post-widget-thumbnail {
  flex: 0 0 5.5rem;
  width: 5.5rem;
}

html body .live-search-popup .post-widget-thumbnail .post-thumb {
  display: block;
  aspect-ratio: var(--podul-ratio-card);
  overflow: hidden;
  border: var(--podul-border-thin) solid var(--podul-black);
  border-radius: var(--podul-radius) !important;
}

html body .live-search-popup .post-widget-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

html body .live-search-popup .post-title,
html body .live-search-popup .post-title a {
  margin: 0 !important;
  font-family: var(--podul-font-display) !important;
  font-size: var(--podul-text-md) !important;
  font-weight: var(--podul-weight-headline) !important;
  letter-spacing: var(--podul-track-tight) !important;
  line-height: var(--podul-leading-tight) !important;
  text-transform: none !important;
  color: var(--podul-ink) !important;
}

html body .live-search-popup .post-meta,
html body .live-search-popup .post-meta a,
html body .live-search-popup .date {
  margin-top: .35rem;
  font-size: var(--podul-text-2xs) !important;
  font-weight: var(--podul-weight-black) !important;
  letter-spacing: var(--podul-track-label) !important;
  text-transform: uppercase !important;
  color: var(--podul-slate-400) !important;
}

/* "Vezi toate rezultatele" */
html body .live-search-popup a.button.fullwidth {
  display: block;
  margin: 0;
  padding: 1rem 1.25rem;
  background-color: var(--podul-black) !important;
  color: var(--podul-yellow) !important;
  border: 0 !important;
  border-radius: var(--podul-radius) !important;
  font-family: var(--podul-font-body);
  font-size: var(--podul-text-xs);
  font-weight: var(--podul-weight-black);
  letter-spacing: var(--podul-track-wide);
  text-transform: uppercase;
  text-align: center;
  transition: var(--podul-transition);
}

html body .live-search-popup a.button.fullwidth:hover {
  background-color: var(--podul-yellow) !important;
  color: var(--podul-ink) !important;
}

html body .live-search-popup .autocomplete-no-suggestion {
  padding: 1.25rem !important;
  font-size: var(--podul-text-xs);
  font-weight: var(--podul-weight-black);
  letter-spacing: var(--podul-track-label);
  text-transform: uppercase;
  color: var(--podul-slate-500) !important;
  background: none !important;
}


/* --------------------------------------------------------------------------
   7. Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {

  /* Jannah hides the whole nav row below 992px — `.header-layout-3
     .main-nav-wrapper { display: none }` in base.min.css — because it expects
     its own mobile header to take over inside .logo-container. This design
     hides that branding row instead and keeps the nav bar, so the rule has to
     be put back; without it the site had NO header at all under 992px: no
     logo, no menu, no way to open the panel. */
  html body #theme-header .main-nav-wrapper,
  html body #theme-header .main-nav {
    display: block !important;
  }

  /* The branding row is desktop-only in the design. */
  html body #theme-header .header-container {
    display: none;
  }

  html body #theme-header .main-menu-wrapper {
    border-top: 0;
  }

  /* !important because the desktop rule above (§5) sets this to
     `display: flex !important` outside any media query. */
  html body #theme-header .main-menu.main-menu-wrap {
    display: none !important;
  }

  /* The nav bar is the whole header on mobile, and with no vertical padding the
     logo filled it edge to edge — 32px of logo in a 32px bar. This gives it the
     same breathing room the sticky header has. */
  .podul-nav-logo {
    padding-inline: 1.5rem;
    padding-block: .875rem;
    border-right: 0;
  }

  /* The tools sit in the same row, so they follow the taller bar. */
  html body #theme-header ul.components,
  html body #theme-header ul.components > li,
  html body #theme-header ul.components > li > a {
    align-items: center;
  }

  html body #theme-header ul.components > li:first-child {
    border-left: var(--podul-border-thin) solid var(--podul-black);
  }

  html body #theme-header ul.components > li > a {
    padding-inline: 1.25rem;
  }
}


/* Small phones: the logo cell (185px) and the three tools (195px) come to
   380px, which is wider than a 371px viewport — the tools row hung off the
   right edge. Trimming the horizontal padding and capping the logo brings the
   row to ~311px, so it still fits at 320px. */
@media (max-width: 479px) {

  .podul-nav-logo {
    padding-inline: 1rem;
  }

  .podul-nav-logo img,
  html body #theme-header .podul-nav-logo img {
    max-width: 110px;
  }

  html body #theme-header ul.components > li > a {
    padding-inline: .875rem;
  }
}


/* --------------------------------------------------------------------------
   8. Full-screen yellow overlay menu

   Jannah renders the mobile menu inside #mobile-menu within .side-aside (see
   sidebar-slide.php). The design turns that into a full-bleed yellow panel with
   very large uppercase category links.
   -------------------------------------------------------------------------- */

html body .side-aside.side-aside-modern,
html body #mobile-menu,
html body .side-aside {
  background-color: var(--podul-yellow) !important;
}

/* Jannah ships this as a 350px drawer that slides in from the right. The design
   wants a full-bleed panel, so both the width and BOTH transform states have to
   be overridden — changing width alone would leave the closed panel partly
   on-screen, because Jannah's closed state is a fixed translateX(350px). */
html body .side-aside {
  width: 100% !important;
  max-width: 100% !important;
  z-index: var(--podul-z-overlay);
  transform: translateX(100%) !important;
}

/* Jannah puts .side-aside-open on <html>, not <body> — scoping this to
   body would silently never match. */
html.side-aside-open .side-aside,
.side-aside-open .side-aside {
  transform: translateX(0) !important;
  visibility: visible !important;
}

/* The dimming layer over the page is pointless when the panel covers it. */
.side-aside-open #tie-wrapper::after {
  display: none !important;
}

/* The design lays the panel out on the site's own container: logo at its left
   edge, close button at its right, the category list under the logo. Measured
   off the mockup — the inset is symmetric, which is what gives it away as the
   container rather than a viewport-edge padding. */
html body .side-aside .side-aside-wrapper {
  position: relative;
  width: 100%;
  max-width: var(--podul-container);
  margin: 0 auto;
  /* !important: Jannah sets `padding: 72px 0 0` on this below 992px, which
     flattened the side inset and pushed everything down. */
  padding: 2rem 1.5rem 4rem !important;
}

/* The panel carries Jannah's dark-skin styling, which paints all of its text
   white — invisible on yellow. Everything inside has to come back to ink. */
html body .side-aside,
html body .side-aside p,
html body .side-aside li,
html body .side-aside span,
html body .side-aside a,
html body .side-aside h1,
html body .side-aside h2,
html body .side-aside h3,
html body .side-aside h4,
html body .side-aside .widget-title,
html body .side-aside .widget-title h4,
html body .side-aside .post-title,
html body .side-aside .post-meta,
html body .side-aside .post-meta a {
  color: var(--podul-ink) !important;
}

html body .side-aside .widget,
html body .side-aside .widget-container,
html body #slide-sidebar-widgets .widget {
  background: none !important;
  border: 0 !important;
}

/* In the design a widget title in this panel is a quiet eyebrow above the
   list — „CATEGORII" — not a heading. Small, letterspaced, no rule under it:
   the links below carry all the weight. */
/* Jannah's real title markup is
   .widget-title.the-global-title > .the-subtitle — the underline and the type
   live on .the-subtitle, so styling .widget-title alone changes nothing. */
html body .side-aside .widget-title,
html body .side-aside .widget-title h4,
html body .side-aside .widget-title .the-subtitle,
html body .side-aside .widget .wp-block-heading {
  font-family: var(--podul-font-body) !important;
  font-size: var(--podul-text-2xs) !important;
  font-weight: var(--podul-weight-bold) !important;
  letter-spacing: var(--podul-track-label) !important;
  text-transform: uppercase !important;
  color: var(--podul-slate-400) !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 .75rem !important;
}

/* Jannah hangs a decorative glyph off the right of every widget title; in a
   full-bleed panel it floats alone in the middle of the page. */
html body .side-aside .widget-title-icon {
  display: none !important;
}

/* Search inside the panel */
html body .side-aside #mobile-search input[type="text"],
html body .side-aside #mobile-search input[type="search"],
html body .side-aside .search-field {
  background-color: var(--podul-white) !important;
  border: var(--podul-border-thin) solid var(--podul-black) !important;
  border-radius: var(--podul-radius) !important;
  padding: .75rem 1rem;
  font-size: var(--podul-text-xs);
  font-weight: var(--podul-weight-black);
  letter-spacing: var(--podul-track-label);
  text-transform: uppercase;
  color: var(--podul-ink) !important;
}

html body .side-aside #mobile-search input[type="submit"],
html body .side-aside #mobile-search button,
html body .side-aside .side-aside-wrapper button[type="submit"],
html body .side-aside .side-aside-wrapper input[type="submit"],
html body .side-aside #search-submit,
html body .side-aside .search-submit {
  background-color: var(--podul-black) !important;
  color: var(--podul-yellow) !important;
  border: var(--podul-border-thin) solid var(--podul-black) !important;
  border-radius: var(--podul-radius) !important;
  font-size: var(--podul-text-xs);
  font-weight: var(--podul-weight-black);
  letter-spacing: var(--podul-track-wide);
  text-transform: uppercase;
  padding: .75rem 1.25rem;
}

/* Social icons in the panel */
html body .side-aside .social-icons li a {
  background: none !important;
  border: var(--podul-border-thin) solid var(--podul-black) !important;
  border-radius: var(--podul-radius) !important;
  color: var(--podul-ink) !important;
}

html body .side-aside .social-icons li a:hover {
  background-color: var(--podul-black) !important;
  color: var(--podul-yellow) !important;
}

/* Two ways into this panel, one look.
   #mobile-menu is the list Jannah's JS clones out of the main nav, but only on
   mobile — on desktop it stays empty, which is why the panel was blank there.
   The Slide Widget Area fills it at every width: a Custom HTML widget for the
   logo and a Navigation Menu widget titled „Categorii". Both lists are styled
   here together so they cannot drift. */
html body #mobile-menu ul li a,
html body .side-aside .widget_nav_menu ul li a {
  font-family: var(--podul-font-display) !important;
  font-size: 2.25rem !important;
  font-weight: var(--podul-weight-black) !important;
  letter-spacing: var(--podul-track-tighter) !important;
  line-height: var(--podul-leading-display) !important;
  text-transform: uppercase !important;
  color: var(--podul-ink) !important;
  border-bottom: var(--podul-border-thick) solid var(--podul-black);
  padding: .25rem;
  transition: var(--podul-transition);
}

html body #mobile-menu ul li a:hover,
html body #mobile-menu ul li a:focus,
html body .side-aside .widget_nav_menu ul li a:hover,
html body .side-aside .widget_nav_menu ul li a:focus {
  background-color: var(--podul-black) !important;
  color: var(--podul-yellow) !important;
}

/* Close button — same 68×68 black disc as the search overlay's, so the two
   overlays close the same way. Jannah ships this one small too, and its glyph
   is an icon font, so the box and the glyph are scaled together. */
html body .side-aside .close-side-aside,
html body .side-aside a.close-side-aside.remove {
  display: flex !important;
  align-items: center;
  justify-content: center;
  /* Jannah centres this one with left:50% + translateX(-50%). The design puts
     it on the same row as the logo, at the right edge of the container — the
     mockup's insets are symmetric — so it is positioned against
     .side-aside-wrapper rather than the viewport. The search overlay keeps its
     own viewport-corner button; these two no longer match, by design. */
  position: absolute !important;
  top: 2rem !important;
  right: 1.5rem !important;
  left: auto !important;
  transform: none !important;
  width: 68px !important;
  height: 68px !important;
  font-size: 30px !important;
  line-height: 1 !important;
  background-color: var(--podul-black) !important;
  color: var(--podul-yellow) !important;
  border: 0 !important;
  border-radius: 50% !important;
  transition: var(--podul-transition);
}

html body .side-aside .close-side-aside:hover,
html body .side-aside a.close-side-aside.remove:hover {
  background-color: var(--podul-yellow) !important;
  color: var(--podul-ink) !important;
}


/* --------------------------------------------------------------------------
   8b. Slide panel — widget layout

   Content comes from Appearance → Widgets → "Slide Widget Area":
     1. Custom HTML  — the logo, wrapped in .podul-side-logo
     2. Navigation Menu, title "Categorii" — the primary menu

   Everything below is layout for those two. The link treatment itself is
   shared with #mobile-menu, above.
   -------------------------------------------------------------------------- */

html body .side-aside .widget {
  margin: 0 0 2.5rem !important;
  padding: 0 !important;
}

html body .side-aside .widget:last-child {
  margin-bottom: 0 !important;
}

/* The logo sits on the close button's row, so it keeps clear of it. */
html body .side-aside .podul-side-logo {
  display: inline-block;
  max-width: 300px;
  width: 22vw;
  min-width: 180px;
  margin-bottom: 1.5rem;
}

html body .side-aside .podul-side-logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Jannah decorates widget menus with a grey chevron from its icon font
   (`a:before`) and hangs a 40px white bar under every widget title
   (`.widget-title:after`). Both read as stray marks on a yellow full-bleed
   panel — the eyebrow and the underlined links carry it. */
html body .side-aside .widget_nav_menu li a:before,
html body .side-aside .widget_nav_menu li a:after,
html body .side-aside .widget-title:before,
html body .side-aside .widget-title:after {
  display: none !important;
  content: none !important;
}

html body .side-aside .widget_nav_menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

html body .side-aside .widget_nav_menu ul li {
  margin: 0 0 .4rem;
  padding: 0;
  border: 0;
  list-style: none;
}

/* inline-block so the rule under each item is exactly as wide as the word,
   which is what the design does — not a full-width divider. */
html body .side-aside .widget_nav_menu ul li a {
  display: inline-block !important;
  font-size: clamp(2rem, 3.2vw, 4.5rem) !important;
  padding: 0 !important;
  border-bottom-width: var(--podul-border-thick) !important;
}

/* Submenus, if the menu ever grows any, step down rather than shout. */
html body .side-aside .widget_nav_menu ul li ul {
  margin: .4rem 0 .8rem 1.5rem;
}

html body .side-aside .widget_nav_menu ul li ul li a {
  font-size: clamp(1.125rem, 1.4vw, 1.75rem) !important;
  border-bottom-width: var(--podul-border-thin) !important;
}

/* Jannah hides the slide widgets below 992px — `#slide-sidebar-widgets
   { display: none }` in base.min.css — because it expects #mobile-container to
   take over there. That container only carries the cloned menu, which this
   panel hides, so on a narrow desktop window the panel came up empty. (On a
   real phone `tie_is_mobile()` is true and sidebar-slide.php never prints the
   widgets at all, so Jannah's own mobile menu shows instead — which is why the
   clone is only suppressed while the widget is actually present.) */
@media (max-width: 991px) {

  html body .side-aside #slide-sidebar-widgets {
    display: block !important;
  }
}

/* The panel is fixed at top:0, so for a logged-in user the admin bar sits over
   the logo. WordPress's bar is 32px from 783px up and 46px below it. */
body.admin-bar .side-aside {
  top: 32px !important;
}

@media screen and (max-width: 782px) {

  body.admin-bar .side-aside {
    top: 46px !important;
  }
}

@media (max-width: 767px) {

  html body .side-aside .side-aside-wrapper {
    padding: 1.5rem 1.25rem 3rem !important;
  }

  html body .side-aside .close-side-aside,
  html body .side-aside a.close-side-aside.remove {
    top: 1.5rem !important;
    right: 1.25rem !important;
    width: 48px !important;
    height: 48px !important;
    font-size: 22px !important;
  }

  html body .side-aside .podul-side-logo {
    max-width: 180px;
    width: 45vw;
  }

  /* The clamp floors at 2rem, which puts „PODUL MINCIUNILOR" on two lines
     below ~420px. The design keeps every item on one line with the rule as
     wide as the words, so the floor drops a step on small phones. */
  html body .side-aside .widget_nav_menu ul li a {
    font-size: clamp(1.75rem, 7.5vw, 2rem) !important;
  }
}

/* Only one category list in the panel.

   Jannah's JS clones the main nav into #mobile-menu when the panel opens, but
   only reveals it under 992px. Now that the Slide Widget Area carries the menu
   at every width, that clone would show the same six links a second time on
   mobile. Suppressed only while a menu widget is actually present, so removing
   the widget restores Jannah's own behaviour rather than emptying the panel.

   The cleaner fix is Theme Options -> Mobile -> Mobile Menu, which stops the
   clone being built at all; left alone here because it is a theme option, not
   a theme file. */
html body .side-aside:has(.widget_nav_menu) #mobile-menu,
html body .side-aside:has(.widget_nav_menu) .mobile-menu-container {
  display: none !important;
}

/* Same condition for Jannah's mobile block as a whole: it carries the cloned
   menu and a search field, and it renders *above* the logo. The design has
   neither — the header keeps its own search icon at every width. When the
   widget is absent (a real phone, where sidebar-slide.php prints no widgets)
   this block is the panel's only content and stays. */
html body .side-aside:has(.widget_nav_menu) #mobile-container {
  display: none !important;
}


@media (max-width: 991px) {
    html body #theme-header #menu-components-wrap > ul.components {
        border-left: 0!important;
    }
}
#logo{
        margin-bottom: 20px;
}