/* ==========================================================================
   PODUL — BASE LAYER

   Global typography, colour and the design's shared primitives, built on the
   tokens. This file styles the page and reusable helpers only.

   It contains NO !important and no long specificity chains — anything that has
   to beat Jannah's generated inline CSS belongs in podul-overrides.css instead.
   Keeping that separation is what stops this from becoming unmaintainable.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Document
   -------------------------------------------------------------------------- */

body,
#tie-body {
  font-family: var(--podul-font-body);
  font-weight: var(--podul-weight-normal);
  color: var(--podul-ink);
  background-color: var(--podul-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background-color: var(--podul-ink);
  color: var(--podul-yellow);
}

::-moz-selection {
  background-color: var(--podul-ink);
  color: var(--podul-yellow);
}


/* --------------------------------------------------------------------------
   2. Headings

   Two distinct roles in the design, easy to conflate:

     display-bold   Archivo 900, tracking -0.02em, leading 0.9
                    UI voice — logo, section titles, block headings

     headline-sans  Archivo 800, tracking -0.015em, leading 1.15
                    editorial voice — every article title, everywhere

   Everything that is a post title gets the headline treatment; everything that
   labels the interface gets the display treatment.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--podul-font-display);
  color: var(--podul-ink);
  /*text-wrap: balance;*/
}


.podul-display {
  font-family: var(--podul-font-display);
  font-weight: var(--podul-weight-black);
  letter-spacing: var(--podul-track-tighter);
  line-height: var(--podul-leading-display);
  text-transform: uppercase;
}

.podul-headline {
  font-family: var(--podul-font-display);
  font-weight: var(--podul-weight-headline);
  letter-spacing: var(--podul-track-tight);
  line-height: var(--podul-leading-tight);
  text-transform: none;
}

.podul-serif-italic {
  font-family: var(--podul-font-serif);
  font-style: italic;
}


/* --------------------------------------------------------------------------
   3. Micro-labels

   9–11px, weight 900, uppercase, very wide tracking. Used for category labels,
   nav items, buttons, section eyebrows and footer headings — this is the most
   repeated element in the design.
   -------------------------------------------------------------------------- */

.podul-label {
  font-family: var(--podul-font-body);
  font-size: var(--podul-text-xs);
  font-weight: var(--podul-weight-black);
  letter-spacing: var(--podul-track-label);
  text-transform: uppercase;
  line-height: 1;
}

.podul-label--tight  { letter-spacing: var(--podul-track-label); }
.podul-label--wide   { letter-spacing: var(--podul-track-wide); }
.podul-label--wider  { letter-spacing: var(--podul-track-wider); }
.podul-label--widest { letter-spacing: var(--podul-track-widest); }

.podul-label--xs { font-size: var(--podul-text-2xs); }
.podul-label--sm { font-size: var(--podul-text-sm); }

/* Category label — colour comes from the term's cat_color via --podul-accent */
.podul-cat-label {
  font-size: var(--podul-text-2xs);
  font-weight: var(--podul-weight-bold);
  letter-spacing: var(--podul-track-label);
  text-transform: uppercase;
  color: var(--podul-accent);
}


/* --------------------------------------------------------------------------
   4. The hard-shadow surface

   The design's core object: white box, black border, hard offset shadow. On
   hover the shadow grows by 4px and turns the accent colour. On press it
   collapses and the element shifts into the space it occupied.
   -------------------------------------------------------------------------- */

.podul-surface {
  background-color: var(--podul-white);
  border: var(--podul-border-thin) solid var(--podul-black);
  border-radius: var(--podul-radius);
  box-shadow: var(--podul-shadow-md);
  transition: var(--podul-transition);
}

.podul-surface:hover {
  box-shadow: var(--podul-shadow-md-hover);
}

.podul-surface--lg {
  border-width: var(--podul-border-thick);
  box-shadow: var(--podul-shadow-lg);
}

.podul-surface--lg:hover {
  box-shadow: var(--podul-shadow-lg-hover);
}

.podul-surface--card {
  border-width: var(--podul-border-card);
  box-shadow: var(--podul-shadow-lg);
}

/* Accent-tinted hover, set per element: style="--podul-accent:#005DBA" */
.podul-surface--accent:hover {
  box-shadow: 12px 12px 0 0 var(--podul-accent);
}


/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.podul-btn {
  display: inline-block;
  width: 100%;
  padding: 1rem 1.25rem;
  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;
  text-decoration: none;
  cursor: pointer;
  border: var(--podul-border-thin) solid transparent;
  border-radius: var(--podul-radius);
  background-color: var(--podul-accent);
  color: var(--podul-white);
  transition: var(--podul-transition);
}

.podul-btn:hover,
.podul-btn:focus {
  background-color: var(--podul-black);
  border-color: var(--podul-black);
  color: var(--podul-white);
}

.podul-btn:active {
  transform: translateY(2px);
}

/* Outlined variant — the "Vezi mai multe știri" hero button */
.podul-btn--outline {
  padding: 1.25rem;
  background-color: var(--podul-white);
  color: var(--podul-ink);
  border: var(--podul-border-thick) solid var(--podul-black);
  letter-spacing: var(--podul-track-wider);
  box-shadow: var(--podul-shadow-lg);
}

.podul-btn--outline:hover,
.podul-btn--outline:focus {
  background-color: var(--podul-white);
  color: var(--podul-ink);
  box-shadow: var(--podul-shadow-lg-hover);
}

.podul-btn--outline:active {
  box-shadow: none;
  transform: translate(4px, 4px);
}


/* --------------------------------------------------------------------------
   6. Links

   The design has no underlined body links — emphasis comes from the yellow
   highlight on hover. Headline links get the highlight; inline prose links
   keep an underline for readability.
   -------------------------------------------------------------------------- */

a {
  color: inherit;
  text-decoration: none;
  transition: var(--podul-transition);
}

.podul-highlight-hover {
  display: inline;
  padding: 2px;
  margin-left: -2px;
  transition: var(--podul-transition);
}

.podul-highlight-hover:hover {
  background-color: var(--podul-yellow);
  color: var(--podul-ink);
}


/* --------------------------------------------------------------------------
   7. The EXCLUSIV / VIDEO / FOTO keyword highlight

   Injected by inc/highlight-keywords.php in the child theme.
   -------------------------------------------------------------------------- */

.exclusiv {
  color: var(--podul-crimson);
  font-weight: var(--podul-weight-black);
}


/* --------------------------------------------------------------------------
   8. Images

   Every image in the design is 5:3 and cover-cropped, and zooms slightly when
   its card is hovered.
   -------------------------------------------------------------------------- */

.podul-media {
  position: relative;
  overflow: hidden;
  background-color: var(--podul-slate-100);
  aspect-ratio: var(--podul-ratio-card);
}

.podul-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: var(--podul-transition-slow);
}

.podul-media:hover img,
.podul-card:hover .podul-media img {
  transform: scale(1.05);
}


/* --------------------------------------------------------------------------
   9. Section heading — the border-b-4 rule above every content block
   -------------------------------------------------------------------------- */

.podul-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 2.5rem;
  border-bottom: var(--podul-border-thick) solid var(--podul-black);
}

.podul-section-head__title {
  font-family: var(--podul-font-display);
  font-weight: var(--podul-weight-black);
  letter-spacing: var(--podul-track-tighter);
  line-height: var(--podul-leading-display);
  text-transform: uppercase;
  font-size: var(--podul-text-3xl);
  margin: 0;
}

@media (min-width: 768px) {
  .podul-section-head__title { font-size: var(--podul-text-4xl); }
}


/* --------------------------------------------------------------------------
   10. Accessibility

   The design removes a lot of default affordances, so focus has to be loud and
   deliberate. Yellow-on-black at 3px, never suppressed.
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--podul-yellow);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--podul-black);
}

/* On yellow surfaces the ring above inverts to invisible-on-invisible: the
   yellow outline vanishes into the background and only the black halo shows,
   which reads as a heavy border rather than a focus state. Flip it. */
.podul-footer :focus-visible,
.side-aside :focus-visible,
.tie-popup-search-wrap :focus-visible,
.podul-promo__btn:focus-visible {
  outline: 3px solid var(--podul-black);
  outline-offset: 3px;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* --------------------------------------------------------------------------
   11. Utilities
   -------------------------------------------------------------------------- */

.podul-container {
  width: 100%;
  max-width: var(--podul-container);
  margin-inline: auto;
  padding-inline: var(--podul-gutter);
}

@media (min-width: 640px) {
  .podul-container { padding-inline: var(--podul-gutter-lg); }
}

.podul-no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.podul-no-scrollbar::-webkit-scrollbar {
  display: none;
}

.podul-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}