/* ==========================================================================
   PODUL — FOOTER

   The design's footer is a yellow band, black top rule, three columns
   (brand+quote / Secțiuni / Social) over a thin bottom bar.

   inc/footer.php strips Jannah's `dark-skin dark-widgetized-area` classes from
   #footer and replaces them with .podul-footer, so most of the parent's dark
   footer styling never applies and this file stays mostly !important-free.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Band
   -------------------------------------------------------------------------- */

html body .podul-footer,
html body #footer.podul-footer {
  background-color: var(--podul-yellow) !important;  /* beats the generated footer bg */
  color: var(--podul-ink);
  border-top: var(--podul-border-thick) solid var(--podul-black);
  padding-block: 3rem;
}

@media (min-width: 992px) {
  html body .podul-footer {
    padding-block: 4rem;
  }
}

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

html body .podul-footer a {
  color: var(--podul-ink);
}


/* --------------------------------------------------------------------------
   2. Columns

   The brand block is injected before the widget sections, so the widgets
   container becomes a flex row with the brand taking half the width.
   -------------------------------------------------------------------------- */

html body .podul-footer #footer-widgets-container {
  padding: 0;
  border: 0;
}

html body .podul-footer #footer-widgets-container .container {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  align-items: flex-start;
}

@media (min-width: 992px) {
  html body .podul-footer #footer-widgets-container .container {
    gap: 4rem;
    flex-wrap: nowrap;
  }
}

.podul-footer-brand {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* 50% + 21% + 21% = 92%, but the row also has two 64px gaps, so the widths
   overflow their container by ~20px. Shrink is allowed rather than the
   percentages retuned: the proportions stay as designed at full width and the
   row simply compresses as the viewport narrows toward the container width,
   where the social column used to hang off the right edge. */
@media (min-width: 992px) {
  .podul-footer-brand {
    flex: 0 1 50%;
    max-width: 50%;
  }
}

.podul-footer-brand__logo {
  margin-bottom: 2rem;
}

.podul-footer-brand__logo img {
  display: block;
  height: 50px;
  width: auto;
  object-fit: contain;
}

@media (min-width: 992px) {
  .podul-footer-brand__logo img { height: 60px; }
}

.podul-footer-brand__quote {
  max-width: 32rem;
  margin: 0;
  font-family: var(--podul-font-body);
  font-size: var(--podul-text-lg);
  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);
}

@media (min-width: 992px) {
  .podul-footer-brand__quote { font-size: var(--podul-text-xl); }
}

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

/* The old logo, under the quote. 944×570 at natural size, which would dwarf the
   wordmark above it, so it is capped by width and left to keep its ratio; the
   height attribute in the markup means no reflow while it loads.
   Its background is opaque black, so what lands on the yellow band is a black
   plate — the file was handed over that way. */
.podul-footer-brand__mark {
  margin-top: 2rem;
}

.podul-footer-brand__mark img {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
}


/* --------------------------------------------------------------------------
   3. Widget columns
   -------------------------------------------------------------------------- */

html body .podul-footer .footer-widget-area,
html body .podul-footer .widget-area-wrapper,
html body .podul-footer .podul-footer-col {
  flex: 1 1 auto;
  padding: 0;
  background: none;
}

@media (min-width: 992px) {
  html body .podul-footer .podul-footer-col,
  html body .podul-footer .footer-widget-area {
    flex: 0 1 21%;
    max-width: 21%;
  }
}

/* The "Secțiuni" column is a Navigation Menu widget in First Footer → 1st
   Column, so what lands in the row is Jannah's own widget-area markup:
   .footer-widget-area > .tie-row > .tie-col-sm-* > .widget. Those are grid
   columns of a 12-column row that assumes it owns the full width — inside a 21%
   flex column they made the links a third of a third. Flattened here: the area
   is the column, the row and its single cell just pass through. */
html body .podul-footer .footer-widget-area .tie-row {
  display: block;
  margin: 0;
}

html body .podul-footer .footer-widget-area [class*="tie-col"] {
  float: none;
  width: 100%;
  max-width: 100%;
  padding: 0;
}

html body .podul-footer .widget {
  background: none !important;
  border: 0;
  padding: 0;
  margin-bottom: 2rem;
}

/* .the-subtitle is where Jannah actually puts a widget's title text
   (.widget-title.the-global-title > .the-subtitle) — the same trap the slide
   panel hit, see claude/slide-panel-menu.md. Styling only .widget-title would
   leave the real title at the parent theme's size and colour. */
html body .podul-footer .widget-title,
html body .podul-footer .widget-title h2,
html body .podul-footer .widget-title h4,
html body .podul-footer .widget-title .the-subtitle,
html body .podul-footer .widget .wp-block-heading {
  margin-bottom: 1.5rem;
  padding-bottom: .25rem;
  border-bottom: var(--podul-border-thin) solid var(--podul-rule-light);
  background: none !important;
  font-family: var(--podul-font-body) !important;
  font-size: var(--podul-text-xs) !important;
  font-weight: var(--podul-weight-black) !important;
  letter-spacing: var(--podul-track-wider) !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  color: rgba(0, 0, 0, .4) !important;
}

/* No rule under a widget title, asked for on 1 September 2026 — neither on the
   wrapper nor on .the-subtitle inside it, which is where the shared rule above
   would have put it.

   Worth knowing why this is not a contradiction: the border-bottom above never
   reached any footer widget title anyway. Jannah's `.block-head-1 #footer
   .widget-title { border: 0 }` carries an ID, so it outranks `html body
   .podul-footer .widget-title` however many classes that has — the hardcoded
   "Social" title has never had a line. Only .the-subtitle escaped that rule,
   because Jannah targets the title element and not the span inside it, so the
   line appeared on exactly one title the moment this file started styling
   .the-subtitle. These two selectors make all of them agree.

   Jannah's decorative title glyph has no place in a footer column either. */
html body .podul-footer .widget-title.the-global-title {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

html body .podul-footer .widget-title .the-subtitle {
  border-bottom: 0;
}

/* And the segment Jannah draws under a block head: an absolutely positioned
   40x2px bar on .the-global-title::after (plus a 5px dot on ::before, already
   display:none in this skin). With the border gone it was the only line left
   under "Secțiuni", which is the line that was asked to go. */
html body .podul-footer .widget-title.the-global-title::after,
html body .podul-footer .widget-title.the-global-title::before {
  display: none;
}

html body .podul-footer .widget-title .widget-title-icon {
  display: none;
}

/* Jannah hangs a chevron on every link in a Navigation Menu widget
   (.widget_nav_menu li a:before, in tiefonticon). The hardcoded list this
   column replaced had none — it carried .widget but not .widget_nav_menu — and
   the design's footer links are plain words. */
html body .podul-footer .widget_nav_menu ul li a::before {
  content: none;
  display: none;
}

html body .podul-footer .widget ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

html body .podul-footer .widget ul li {
  margin-bottom: .625rem;
  padding: 0;
  border: 0;
}

html body .podul-footer .widget ul li a {
  display: inline-block;
  padding: .125rem .375rem;
  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);
  transition: var(--podul-transition);
}

html body .podul-footer .widget ul li a:hover {
  background-color: var(--podul-black);
  color: var(--podul-yellow);
}


/* --------------------------------------------------------------------------
   4. Social icons

   Jannah floats these to the right of the column and draws them at 24px. The
   design wants them plain and large, reading from the left edge like the rest
   of the column — so the list becomes a flex row and the boxes lose their
   border and shadow.
   -------------------------------------------------------------------------- */

html body .podul-footer .social-icons {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

html body .podul-footer .social-icons li,
html body .podul-footer .social-icons-item {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  list-style: none;
}

html body .podul-footer .social-icons li a,
html body .podul-footer .social-icons-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  /* !important throughout: Jannah's generated inline CSS (inc/custom-styles.php)
     sizes these at 24px/11px and wins on source order. */
  width: 2.75rem !important;
  height: 2.75rem !important;
  background: none !important;
  border: 0 !important;
  border-radius: var(--podul-radius) !important;
  box-shadow: none !important;
  font-size: 1.5rem !important;
  line-height: 1 !important;
  color: var(--podul-ink) !important;
  transition: var(--podul-transition);
}

/* Hover: the glyph darkens, no black plate behind it (asked 2 September 2026).
 *
 * The plate was the text-link hover borrowed for an icon, and it did not
 * survive contact with Jannah: the glyph span carries its own brand colour per
 * network from the theme's generated CSS (#4080ff for Facebook), so setting
 * `color` on the <a> never reached it. The result was a black square with a
 * blue glyph sitting in it.
 *
 * So the plate goes and the glyph itself answers the pointer, which is also
 * quieter on a yellow band. The span has to be named explicitly for the same
 * reason the old rule failed. If the plate is ever wanted back, the missing
 * half is `.social-icons li a:hover .tie-social-icon { color: var(--podul-yellow) }`.
 */
html body .podul-footer .social-icons li a:hover,
html body .podul-footer .social-icons-item a:hover {
  background: none !important;
  color: var(--podul-ink) !important;
}

html body .podul-footer .social-icons li a:hover .tie-social-icon,
html body .podul-footer .social-icons-item a:hover .tie-social-icon {
  color: var(--podul-ink) !important;
}


/* --------------------------------------------------------------------------
   5. Bottom bar
   -------------------------------------------------------------------------- */

html body .podul-footer #site-info {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: var(--podul-border-thin) solid var(--podul-rule-light);
  background: none !important;
  color: rgba(0, 0, 0, .5);
}

html body .podul-footer #site-info .tie-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  align-items: center;
}

html body .podul-footer #site-info,
html body .podul-footer #site-info .copyright-text {
  font-size: var(--podul-text-2xs);
  font-weight: var(--podul-weight-black);
  letter-spacing: var(--podul-track-label);
  line-height: 1.6;
  text-transform: uppercase;
}

html body .podul-footer #site-info a {
  color: rgba(0, 0, 0, .5);
  border-bottom: 1px solid transparent;
  transition: var(--podul-transition);
}

html body .podul-footer #site-info a:hover {
  color: var(--podul-ink);
  border-bottom-color: var(--podul-black);
}

html body .podul-footer .footer-menu ul {
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}


/* --------------------------------------------------------------------------
   6. Back-to-top button — square, bordered, matching the design
   -------------------------------------------------------------------------- */

/* Same treatment as the homepage row arrows, so every square control on the
   site behaves identically. */
html body #go-to-top {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 3rem !important;
  height: 3rem !important;
  background-color: var(--podul-yellow) !important;
  color: var(--podul-ink) !important;
  border: var(--podul-border-thin) solid var(--podul-black) !important;
  border-radius: var(--podul-radius) !important;
  box-shadow: var(--podul-shadow-md);
  transition: var(--podul-transition);
}

html body #go-to-top:hover {
  background-color: var(--podul-black) !important;
  color: var(--podul-yellow) !important;
  box-shadow: var(--podul-shadow-lg);
}

html body #go-to-top:active {
  box-shadow: none;
  transform: translate(4px, 4px);
}


/* --------------------------------------------------------------------------
   Mobile

   The columns row is `display: flex; flex-wrap: wrap` with `flex: 1 1 auto` on
   each column, so below the desktop breakpoint the two widget columns share a
   line and size themselves off their content — 256px of links beside 117px of
   social icons. Full width each is the readable arrangement on a phone.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  html body .podul-footer .footer-widget-area,
  html body .podul-footer .widget-area-wrapper,
  html body .podul-footer .podul-footer-col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  html body .podul-footer .container {
    gap: 2rem;
  }
}
#footer .container-wrapper{
	padding: 0!important;
}