/*
 * Homepage sections redesign — visual restyle to match the client-approved
 * Figma facelift ("ΔΗΜΟΣ ΛΕΥΚΑΔΑΣ PORTAL FACELIFT" + Frame 2.pdf).
 *
 * Scope: homepage SECTIONS only (front-page.php partials). The navbar is
 * explicitly out of scope (handled separately by nav-2026). Every section
 * below keeps its existing ACF fields / real data queries — this file only
 * changes appearance, plus the small structural additions noted inline in
 * each section-*.php file (4th hero card, calendar rebuild, video collage).
 *
 * Palette: the 7 real swatches from the FACELIFT export.
 */

:root {
  --hp-teal:       #0EA89A;
  --hp-navy:       #1E3A5F;
  --hp-near-white: #F7F9F9;
  --hp-olive:      #6B7355;
  --hp-gold:       #E8C468;
  /* Pixel-sampled from the real Figma "LEFKADA" wordmark + Δημοτικές
     Ενότητες pills (~#489ef7) — was #1BAAC2 (deep teal), a clearly
     different, wrong hue for this brand blue. */
  --hp-cyan:       #4A9DF7;
  --hp-deep-teal:  #0B5F6E;

  /* Sampled directly from Αρχικη.pdf (the authoritative full-page reference) —
     these are the pastel/tint variants actually used per-component in that
     design, distinct from the 7 base brand swatches above. */
  --hp-card-gold:   #FFD571;
  --hp-card-teal:   #2DDBC8;
  --hp-card-olive:  #B3B9A2;
  --hp-card-blue:   #54BDFE;
  --hp-services-grad-a: #4EADC0;
  --hp-services-grad-b: #51D3E7;
  --hp-services-badge-navy: #112F67;
  --hp-announce-gold: #E8C883;
  --hp-announce-date-green: #709049;
  --hp-announce-btn-brown: #644B16;
  --hp-dot-blue:  #95B8FB;
  --hp-dot-green: #A8E6A3;
  --hp-dot-red:   #FF5E2F;

  --hp-ink: #16232F;
  --hp-ink-2: #4A5568;
  --hp-ink-3: #7C8A9C;
  --hp-line: #E1E6EC;
  --hp-r-sm: 8px;
  --hp-r-md: 14px;
  --hp-r-lg: 20px;
  --hp-r-full: 999px;
  --hp-sh-1: 0 1px 2px rgba(11,30,58,.06), 0 1px 3px rgba(11,30,58,.08);
  --hp-sh-2: 0 8px 24px rgba(11,30,58,.10), 0 2px 6px rgba(11,30,58,.06);
}

/* ===================================================================
   HERO CARDS (section-buttons-overlay.php — .buttons .cta-boxes .box)

   main.css's legacy rules for this exact markup (section.buttons /
   .inner / .cta-boxes / .box) are written against `.inner` in the
   selector chain and use position:absolute + a fixed min-height on
   the parent — every property below is repeated with `.inner` in the
   selector (to at least match the legacy specificity) and `!important`
   (because main.css also re-declares several of these per legacy
   breakpoint — 1200/1050/1024/650/500px — that would otherwise still
   win at those widths). Without both, the old 3-column grid and the
   absolutely-positioned/fixed-height wrapper silently kept winning,
   which is what let a wrapped 4th card spill past the section box.
   =================================================================== */
section.buttons {
  position: relative;
  background: transparent !important;
  min-height: 0 !important;
  /* Pixel-measured directly from Αρχικη.pdf: the cards sit almost entirely
     ON the hero photo — about 83% of the card's own height overlaps the
     photo, only ~17% hangs below it. The previous -70px was closer to a
     20% overlap, nowhere near this ratio, which is the "position is off"
     the cards were flagged for. -130px approximates 83% of a ~156px-tall
     card; re-check after real content/breakpoint changes since this is a
     fixed px value, not a true percentage of the (dynamic) card height. */
  /* !important: a 3rd-party widget script (leukada-webchat) injects its own
     inline <style> with an unscoped `section.buttons { margin-top: -16px }`
     rule that collides with this real section — since it's injected after
     this stylesheet, it otherwise wins on source order at equal specificity. */
  /* -195px (measured to hit the pdf's ~83% overlap ratio on a narrow/tall
     mobile hero) turns out to be too aggressive on a wide/short desktop hero
     — at 1280px it pulled the cards up into the search bar itself (measured
     143px of actual overlap with it). The hero photo's own proportions
     change enough across widths that one fixed px value can't hit the exact
     pdf ratio everywhere without risking that collision — clearing the
     search bar safely takes priority over matching the ratio exactly at
     wide widths. */
  margin-top: -44px !important;
  /* Guaranteed clearance below the cards regardless of how many rows the grid
     wraps to — the negative margin above only pulls the block up to straddle
     the hero photo; it must never be relied on to also control spacing below. */
  margin-bottom: 2.5rem;
  z-index: 5;
}
@media (max-width: 700px) { section.buttons { margin-top: -142px !important; } }
@media (max-width: 480px) { section.buttons { margin-top: -160px !important; } }

section.buttons .inner {
  position: static !important;
  height: auto !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  color: inherit !important;
  max-width: 1220px;
  width: 100%;
  box-sizing: border-box;
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}
section.buttons .inner .cta-boxes {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1rem !important;
  bottom: auto !important;
  width: 100% !important;
  padding-top: 0 !important;
  justify-items: stretch !important;
  margin-bottom: 0 !important;
}
/* Stay 4-across down to a narrower width than before — the previous 900px
   cutoff was wrapping this exact card count into an awkward 2x2 shape. */
@media (max-width: 700px) { section.buttons .inner .cta-boxes { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px) { section.buttons .inner .cta-boxes { grid-template-columns: 1fr !important; } }

section.buttons .inner .cta-boxes .box {
  background: var(--hp-card-gold) !important;
  border-radius: var(--hp-r-md) !important;
  padding: 1.2rem 1.3rem 1.4rem !important;
  box-shadow: var(--hp-sh-2) !important;
  display: block !important;
  min-height: 0 !important;
  width: auto !important;
  box-sizing: border-box !important;
  text-decoration: none;
}
/* Per-card tint, in the exact order the pdf shows them */
section.buttons .inner .cta-boxes .box.hp-card-services { background: var(--hp-card-gold) !important; }
section.buttons .inner .cta-boxes .box.hp-card-report   { background: var(--hp-card-teal) !important; }
section.buttons .inner .cta-boxes .box.hp-card-culture  { background: var(--hp-card-olive) !important; }
section.buttons .inner .cta-boxes .box.hp-card-assistant{ background: var(--hp-card-blue) !important; }

section.buttons .inner .cta-boxes .box .icon {
  display: block;
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px;
  padding: 9px;
  box-sizing: border-box;
  margin: 0 0 .9rem !important;
  object-fit: contain;
}
/* Re-checked against Αρχικη.pdf directly (pixel-sampled): each icon badge is
   a DARK shade of its own card color, with a plain white icon on top — not a
   white badge with a dark icon like the previous pass had it backwards.
   The 3 real ACF button_icon assets (left/middle/right_button) already ship
   as white glyphs on transparent backgrounds, so on a dark badge they need
   no color filter at all — only the static 1st card (hand-drawn inline svg)
   needs its stroke set to white to match. */
section.buttons .inner .cta-boxes .box.hp-card-services .icon { background: #523A05; }
section.buttons .inner .cta-boxes .box.hp-card-report .icon   { background: #04524A; }
section.buttons .inner .cta-boxes .box.hp-card-culture .icon  { background: #232321; }
section.buttons .inner .cta-boxes .box.hp-card-assistant .icon { background: #1C3456; }
section.buttons .inner .cta-boxes .box .box-details { margin-top: .2rem; }
section.buttons .inner .cta-boxes .box .box-details .box-title,
section.buttons .inner .cta-boxes .box .box-title[style] {
  color: var(--hp-navy) !important;
  font-size: .95rem !important;
  font-weight: 800 !important;
  text-align: left !important;
  line-height: 1.3 !important;
}
section.buttons .inner .cta-boxes .box .box-details hr { display: none !important; }
section.buttons .inner .cta-boxes .box .box-details .box-text,
section.buttons .inner .cta-boxes .box .box-text[style] {
  color: var(--hp-ink) !important;
  opacity: .75;
  font-size: .8rem !important;
  line-height: 1.4 !important;
  text-align: left !important;
  margin-top: .3rem !important;
}

/* ===================================================================
   HERO SEARCH (section-hero.php — .hero-search-toggle / .hero-search)

   main.css positions #hero .hero-inner as an absolutely-positioned block
   pinned to left:20% (an older "title in the corner" layout) with a fixed
   4rem gap between its two <p> lines. The pdf headline is one continuous,
   centered, tightly-wrapped sentence — overriding position/width/alignment
   here rather than in main.css since this is a homepage-only appearance
   change, same scope as everything else in this file.
   =================================================================== */
section.hero #hero .hero-inner {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  width: min(90%, 900px);
  text-align: center;
}
/* The WordPress Customizer's own "Additional CSS" (#wp-custom-css, real admin
   content, loads AFTER this stylesheet so it wins any tie) sets the two <p>
   lines to DIFFERENT sizes (30px vs 3.6rem) tuned for the old design — and
   since this stylesheet added the search bar as new siblings after them,
   neither <p> is :last-child anymore, so both now land on the 30px rule
   instead of the intended matching pair. !important on both properties and
   both selector forms (bare + :not(:last-child), since that variant has
   higher specificity than the plain one in the Additional CSS) is needed to
   get a single consistent size regardless of which one wins the tie. */
section.hero #hero .hero-inner p,
section.hero #hero .hero-inner > p:not(:last-child) {
  text-align: center !important;
  font-size: clamp(1.4rem, 3vw, 2.1rem) !important;
  font-weight: 800 !important;
  margin-bottom: .3rem !important;
}
section.hero .hero-inner { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
section.hero .hero-search-toggle {
  display: inline-flex;
  background: #fff;
  border-radius: var(--hp-r-full);
  box-shadow: var(--hp-sh-2);
  padding: .3rem;
  gap: .2rem;
}
section.hero .hero-search-toggle span {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--hp-r-full);
  padding: .5rem 1.1rem;
  font-size: .82rem; font-weight: 700;
  color: var(--hp-ink-2);
}
section.hero .hero-search-toggle .toggle-ai {
  background: var(--hp-near-white);
  color: var(--hp-navy);
  font-weight: 800;
}
section.hero .hero-search {
  width: 100%;
  max-width: 640px;
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: var(--hp-r-full);
  box-shadow: var(--hp-sh-2);
  padding: .35rem .4rem .35rem 1.4rem;
}
section.hero .hero-search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: .92rem;
  color: var(--hp-ink);
  min-width: 0;
}
section.hero .hero-search input::placeholder { color: var(--hp-ink-3); }
section.hero .hero-search-mic {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--hp-olive);
  padding: 0 .6rem;
  flex: none;
}
section.hero .hero-search-submit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--hp-navy);
  border: 0;
  cursor: pointer;
  flex: none;
}
section.hero .hero-search-submit:hover { background: var(--hp-deep-teal); }
@media (max-width: 560px) {
  section.hero .hero-search-toggle { display: none; }
}

/* ===================================================================
   MAYOR GREETING (section-greetings.php — .greetings)
   =================================================================== */
section.greetings { background: var(--hp-near-white); padding-block: clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2rem); }
section.greetings .wrapper { width: 100%; max-width: 1220px; box-sizing: border-box; margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2rem); }
/* #wp-custom-css (real Customizer content, loads after this stylesheet) has
   a MORE SPECIFIC selector for this exact title (section.greetings .wrapper
   .section-title, one extra class vs. the rule below) tuned for the old
   design's color/size/padding — !important here is what actually wins. */
section.greetings .section-title {
  text-align: center !important;
  font-size: clamp(1.05rem, 2vw, 1.3rem) !important;
  color: var(--hp-navy) !important;
  font-weight: 800 !important;
  margin-bottom: 1.5rem !important;
  padding: 0 !important;
  line-height: 1.3;
}
/* main.css's legacy rules here (section.greetings .wrapper .inner[.text[.governor]])
   are 3-5 classes deep and were built for a completely different layout: the
   mayor photo absolutely positioned at left:-135px, sized 150x150 with a 20px
   white border, deliberately overlapping outside the card to the left, with
   .inner itself as `display:grid; justify-items:right` to leave room for it.
   That's exactly why the photo was overflowing the card — it never actually
   left that old layout. !important on every property that old design also
   touches is what actually forces the intended simple flex-row layout. */
section.greetings .inner {
  display: block !important;
  justify-items: unset !important;
  max-width: 1120px;
  margin-inline: auto;
  background: #fff;
  border-radius: var(--hp-r-lg);
  box-shadow: var(--hp-sh-1);
  padding: 2.25rem 2.75rem;
}
section.greetings .inner .text {
  display: flex !important;
  align-items: center !important;
  gap: 2.25rem !important;
  background: none !important;
  padding: 0 !important;
  width: auto !important;
  position: static !important;
}
section.greetings .governor {
  position: static !important;
  width: 128px !important;
  height: 128px !important;
  max-width: 128px !important;
  max-height: 128px !important;
  border-radius: 50% !important;
  border: 0 !important;
  object-fit: cover;
  flex: none;
}
section.greetings .text-content {
  color: var(--hp-ink-2);
  font-size: 1.05rem;
  line-height: 1.7;
}
section.greetings .text-content p { margin: 0; }
@media (max-width: 560px) {
  section.greetings .inner { padding: 1.5rem; }
  section.greetings .inner .text { gap: 1.25rem !important; }
  section.greetings .governor { width: 84px !important; height: 84px !important; max-width: 84px !important; max-height: 84px !important; }
  section.greetings .text-content { font-size: .92rem; line-height: 1.6; }
}

/* ===================================================================
   "ΓΝΩΡΙΣΤΕ ΤΟΝ ΔΗΜΟ ΜΑΣ" (section-municipality.php — .municipality)
   =================================================================== */
section.municipality {
  position: relative;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  background-size: cover;
  background-position: center;
}
section.municipality::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(247, 249, 249, .82);
}
section.municipality .inner {
  position: relative;
  width: 100%;
  max-width: 1220px;
  box-sizing: border-box;
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}
section.municipality .eyebrow {
  display: block;
  font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--hp-cyan);
  margin-bottom: .4rem;
}
section.municipality .title {
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  color: var(--hp-navy);
  font-weight: 800;
  margin-bottom: 1.75rem;
}
section.municipality .meet-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 800px) { section.municipality .meet-grid { grid-template-columns: 1fr; } }

section.municipality .photo-collage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  border-radius: var(--hp-r-lg);
  overflow: hidden;
  box-shadow: var(--hp-sh-2);
}
section.municipality .photo-collage div {
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  background-color: #7f97a8;
}
section.municipality .photo-collage .play-tile {
  background: var(--hp-navy);
  display: flex; align-items: center; justify-content: center;
}
section.municipality .photo-collage .play-tile a {
  width: 44px; height: 44px; border-radius: 50%;
  background: #E1372B;
  display: grid; place-items: center;
}
section.municipality .photo-collage .play-tile a::after {
  content: "";
  border-style: solid; border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #fff;
  margin-left: 3px;
}
section.municipality .collage-wordmark {
  margin-top: .6rem; text-align: center;
  font-weight: 800; font-size: 1.2rem; color: var(--hp-cyan);
}
section.municipality .collage-wordmark span {
  color: var(--hp-ink-3); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; margin-left: .4rem;
}

section.municipality .links {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
section.municipality .links::before {
  content: "Δημοτικές ενότητες";
  flex-basis: 100%;
  font-size: .78rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--hp-ink-3);
  margin-bottom: .4rem;
}
section.municipality .links .inner-link {
  background: var(--hp-cyan);
  color: #fff !important;
  border-radius: var(--hp-r-full);
  padding: .5rem 1.15rem;
  font-size: .88rem; font-weight: 700;
  text-decoration: none;
}
section.municipality .links .inner-link:hover { background: var(--hp-deep-teal); }

/* ===================================================================
   "ΕΠΙΚΑΙΡΟΤΗΤΑ" (section-announcements.php — .announcements)

   This is a real, fully-functional existing component (real WP posts via
   get_posts(), a working tab-switcher script, real Swiper carousels) — no
   PHP/markup changes, restyle only: horizontal tabs become a vertical list
   with an underline, default swiper arrows become circular gold buttons,
   and the card gets a gold photo header + a proper text layout.
   =================================================================== */
section.announcements { padding-block: clamp(2.5rem, 5vw, 4rem); background: #fff; }
section.announcements .announcements-inner { width: 100%; max-width: 1220px; box-sizing: border-box; margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2rem); }
section.announcements > .announcements-inner > h2,
section.announcements .tabs-buttons + h2 { text-align: center; }
/* The markup nests an outer `<div class="tabs">` (holding .tabs-buttons and
   .tabs-content as siblings) around an inner `<ul class="tabs" data-tab>`
   (the tab list itself) — both share the literal class "tabs". `div.tabs`
   unambiguously targets only the outer wrapper, which is what actually needs
   to be the flex row putting the tab list beside the cards; without the
   `div` qualifier this rule was ALSO matching (and losing precedence to a
   more specific selector on) the inner ul, leaving the outer wrapper stuck
   in block flow — that's what stacked the tabs above the cards instead of
   beside them. */
section.announcements div.tabs {
  display: flex !important;
  gap: 2.5rem;
  align-items: flex-start;
}
/* main.css's chain for this exact markup runs 4-6 classes deep
   (section.announcements .announcements-inner .tabs .tabs-buttons ...) —
   !important is needed on the layout-critical properties below, the same
   reason it was needed for the hero cards earlier. */
section.announcements .tabs-buttons {
  display: block !important;
  flex: 0 0 230px !important;
  width: 230px !important;
  margin-bottom: 0 !important;
}
section.announcements ul.tabs[data-tab] {
  list-style: none;
  margin: 0; padding: 0;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.4rem;
  flex: 0 0 230px !important;
  width: 230px !important;
  max-width: 230px !important;
}
section.announcements ul.tabs[data-tab] .active-line,
section.announcements ul.tabs[data-tab] .bg-line { display: none !important; }
section.announcements .btn-wrapper {
  display: block !important;
  width: auto !important;
  text-align: left !important;
  border-bottom: 2px solid var(--hp-line);
  padding-bottom: 1rem;
}
section.announcements .btn-wrapper.active { border-bottom-color: var(--hp-announce-btn-brown); }
section.announcements .btn-wrapper .tab-title {
  background: none !important; border: 0 !important; padding: 0 !important;
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  font-size: .92rem !important; font-weight: 800 !important;
  color: var(--hp-ink-3) !important;
  letter-spacing: normal !important;
  text-align: left !important;
  cursor: pointer;
}
section.announcements .btn-wrapper .tab-title:hover { background: none !important; color: var(--hp-announce-btn-brown) !important; }
section.announcements .btn-wrapper.active .tab-title,
section.announcements .btn-wrapper.active button { background: none !important; color: var(--hp-announce-btn-brown) !important; }
section.announcements .btn-wrapper .tab-title::after {
  content: "›";
  font-size: 1.2rem;
  line-height: 1;
  margin-left: .5rem;
}
section.announcements .tabs-content { flex: 1; min-width: 0; }
section.announcements .single-tab { padding: 0 !important; }

section.announcements .press-release-card {
  position: relative;
  background: #fff;
  border-radius: var(--hp-r-md);
  overflow: hidden;
  box-shadow: var(--hp-sh-2);
  height: 100%;
  display: flex;
  flex-direction: column;
}
section.announcements .press-release-card::after { content: none; }
section.announcements .press-release-card a { text-decoration: none; color: inherit; }
section.announcements .press-release-card a > img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
  background: var(--hp-announce-gold);
}
section.announcements .press-release-card .card-photo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 170px;
  background: var(--hp-announce-gold);
}
section.announcements .press-release-card .card-photo-fallback img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  /* The real logo is a detailed emblem (fine coin linework), not a simple
     flat icon — brightness(0)+invert(1) (used elsewhere for plain white
     glyphs) crushes all of that detail into a flat white blob, which is
     the "white instead of the logo" being seen here. The logo is already
     dark by design (it's legible on the white navbar), so it needs no
     color filter at all against this gold card background. */
  opacity: .85;
}
section.announcements .press-release-card .article-details { padding: 1.1rem 1.2rem 1.3rem; }
section.announcements .press-release-card .category { display: none; }
section.announcements .press-release-card .date {
  display: block;
  width: auto;
  text-align: left;
  color: var(--hp-announce-date-green);
  font-weight: 700;
  font-size: .82rem;
  margin-bottom: .5rem;
}
section.announcements .press-release-card .excerpt {
  color: var(--hp-ink);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.4;
  margin: 0;
}
section.announcements .press-release-card .meta {
  position: static;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.2rem 1.1rem;
}
section.announcements .press-release-card .social-sharing { display: none; }
section.announcements .press-release-card .read-more {
  width: auto;
  text-align: left;
  color: var(--hp-navy);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
}

/* The 3 tab panels (#notices/#announcements/#competitions) each carry their
   own !important-heavy, ID-qualified swiper chrome (fixed 400px height,
   decorative ::before stripes, custom arrow-image ::after). Matching each
   ID explicitly is the only way to reliably win against those. */
section.announcements .announcements-inner #notices .swiper-container,
section.announcements .announcements-inner #announcements .swiper-container,
section.announcements .announcements-inner #competitions .swiper-container {
  height: auto !important;
  padding: 0 3rem 2.5rem !important;
}
section.announcements .announcements-inner #notices .swiper-button-prev,
section.announcements .announcements-inner #notices .swiper-button-next,
section.announcements .announcements-inner #announcements .swiper-button-prev,
section.announcements .announcements-inner #announcements .swiper-button-next,
section.announcements .announcements-inner #competitions .swiper-button-prev,
section.announcements .announcements-inner #competitions .swiper-button-next {
  width: 42px !important; height: 42px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  background: var(--hp-announce-gold) !important;
  border: none !important;
  top: 40% !important;
  margin-top: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
section.announcements .announcements-inner #notices .swiper-button-prev::before,
section.announcements .announcements-inner #notices .swiper-button-next::before,
section.announcements .announcements-inner #announcements .swiper-button-prev::before,
section.announcements .announcements-inner #announcements .swiper-button-next::before,
section.announcements .announcements-inner #competitions .swiper-button-prev::before,
section.announcements .announcements-inner #competitions .swiper-button-next::before {
  content: none !important;
}
section.announcements .announcements-inner #notices .swiper-button-prev::after,
section.announcements .announcements-inner #announcements .swiper-button-prev::after,
section.announcements .announcements-inner #competitions .swiper-button-prev::after {
  content: "‹" !important;
  position: static !important;
  color: var(--hp-announce-btn-brown) !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
}
section.announcements .announcements-inner #notices .swiper-button-next::after,
section.announcements .announcements-inner #announcements .swiper-button-next::after,
section.announcements .announcements-inner #competitions .swiper-button-next::after {
  content: "›" !important;
  position: static !important;
  color: var(--hp-announce-btn-brown) !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
}
section.announcements .announcements-inner #notices .swiper-container .swiper-pagination-bullet,
section.announcements .announcements-inner #announcements .swiper-container .swiper-pagination-bullet,
section.announcements .announcements-inner #competitions .swiper-container .swiper-pagination-bullet {
  background: var(--hp-line) !important;
}
section.announcements .announcements-inner #notices .swiper-container .swiper-pagination-bullet-active,
section.announcements .announcements-inner #announcements .swiper-container .swiper-pagination-bullet-active,
section.announcements .announcements-inner #competitions .swiper-container .swiper-pagination-bullet-active {
  background: var(--hp-announce-btn-brown) !important;
}

section.announcements #cta-buttons-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}
section.announcements #cta-buttons-wrapper .cta a {
  display: inline-flex; align-items: center;
  background: var(--hp-announce-btn-brown);
  color: #fff;
  border-radius: var(--hp-r-full);
  padding: .8rem 1.8rem;
  font-size: .9rem; font-weight: 700;
  text-decoration: none;
}
section.announcements #cta-buttons-wrapper .cta a:hover { background: #4a3810; }

/* Below 780px the fixed 230px sidebar leaves too little room for the card
   content (measured as low as ~98px wide on a phone) — stack the tab list
   above the cards instead of squeezing them side by side. Every property
   that fights the base (!important) rules above needs !important here too,
   otherwise the base rule wins even inside this media query. */
@media (max-width: 780px) {
  section.announcements div.tabs { flex-direction: column !important; }
  section.announcements .tabs-buttons {
    flex: 0 0 auto !important;
    width: 100% !important;
    margin-bottom: 1.5rem !important;
  }
  section.announcements ul.tabs[data-tab] {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: none !important;
    flex-basis: auto !important;
    gap: 1rem !important;
  }
  section.announcements .btn-wrapper { padding-bottom: .6rem; flex: 1 1 auto; border-bottom-width: 2px; }
  section.announcements .tabs-content { width: 100%; }
}

/* ===================================================================
   CALENDAR / ΕΚΔΗΛΩΣΕΙΣ (section-calendar.php — .calendar)
   =================================================================== */
/* Rebuilt (5th pass). The main homepage frame in Figma turned out to embed
   a stale copy of this section — the up-to-date design lives in a separate,
   isolated "Προσεχείς εκδηλώσεις" component frame in the same file
   (get_screenshot on that region, pixel-sampled): purple-to-blue diagonal
   gradient with a wavy bottom edge + white eyebrow/heading, a white
   event-list card (indigo date badge + title + meta + orange "Δείτε το
   πρόγραμμα" link) next to a white mini-calendar card. Status-filter dot
   colors unchanged (#96B8FC/#A8E6A3/#FF5F2F — matched from the very first
   pass and confirmed again here). */
section.calendar {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(5rem, 9vw, 7rem);
  background: linear-gradient(120deg, #8285BE 0%, #6F93C9 100%);
  color: #fff;
  overflow: hidden;
}
section.calendar::before {
  /* soft wave dividing the gradient panel from the page below, matching the
     figma component's bottom edge — a simple 2-point curve, not hand-traced
     path data */
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 140px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C400,130 1040,0 1440,70 L1440,140 L0,140 Z' fill='%23F7F9F9'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
section.calendar::after {
  /* decorative translucent blob, bottom-right */
  content: "";
  position: absolute; right: 6%; bottom: 10%;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: rgba(94, 142, 194, .55);
  z-index: 0;
}
section.calendar .calendar-inner { position: relative; z-index: 1; width: 100%; max-width: 1220px; box-sizing: border-box; margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2rem); }

section.calendar .eyebrow {
  display: block;
  font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #fff;
  margin-bottom: .3rem;
}
/* main.css: section.calendar .calendar-inner .section-title (one extra
   class) forces text-align:center + margin-bottom:35px — same recurring
   collision as the other sections' titles. This uses .panel-heading instead
   of .section-title since the heading text changes with the active filter. */
section.calendar .panel-heading {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: #fff;
  font-weight: 800;
  margin: 0 0 1.75rem;
}

section.calendar .status-filter {
  list-style: none; margin: 0 0 .5rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 2rem;
}
section.calendar .status-filter-item {
  display: flex; align-items: center; gap: .55rem;
  font-size: .9rem; color: rgba(255,255,255,.8);
  padding-bottom: .5rem;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
section.calendar .status-filter-item.active {
  color: #fff; font-weight: 700;
  border-bottom-color: #fff;
}
section.calendar .status-filter-item .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
section.calendar .status-filter-item .dot-upcoming  { background: var(--hp-dot-blue); }
section.calendar .status-filter-item .dot-ongoing   { background: var(--hp-dot-green); }
section.calendar .status-filter-item .dot-completed { background: var(--hp-dot-red); }

section.calendar .calendar-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 800px) { section.calendar .calendar-layout { grid-template-columns: 1fr; } }

section.calendar .event-list {
  background: #fff;
  border-radius: var(--hp-r-lg);
  padding: .3rem 1.5rem;
  box-shadow: var(--hp-sh-2);
  color: var(--hp-ink);
}
section.calendar .event-list-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--hp-line);
}
section.calendar .event-list-row:last-child { border-bottom: 0; }
section.calendar .date-badge {
  flex: none;
  width: 48px; height: 48px;
  border-radius: var(--hp-r-sm);
  background: #3B419E;
  color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.1;
}
section.calendar .date-badge .day { font-size: 1.05rem; font-weight: 800; }
section.calendar .date-badge .month { font-size: .62rem; font-weight: 700; letter-spacing: .03em; }
section.calendar .row-text { min-width: 0; flex: 1 1 auto; }
section.calendar .row-title {
  display: block;
  font-size: .9rem; font-weight: 700; color: var(--hp-ink);
  line-height: 1.35;
}
section.calendar .row-meta {
  display: block;
  font-size: .78rem; color: var(--hp-ink-3);
  margin-top: .2rem;
}
section.calendar .row-link {
  display: inline-flex; align-items: center; gap: .3rem;
  flex: none;
  font-size: .78rem; font-weight: 700; color: var(--hp-dot-red);
  text-decoration: underline;
  white-space: nowrap;
}
section.calendar .row-link:hover { color: #3B419E; }
@media (max-width: 560px) {
  section.calendar .event-list-row { flex-wrap: wrap; }
  section.calendar .row-link { flex-basis: 100%; margin-left: calc(48px + 1rem); }
}

section.calendar .empty-state {
  padding: 2rem 0; text-align: center; color: var(--hp-ink-3); font-size: .9rem;
  background: #fff; border-radius: var(--hp-r-lg); box-shadow: var(--hp-sh-2);
}

section.calendar .mini-cal {
  background: #fff;
  border-radius: var(--hp-r-lg);
  padding: 1.25rem;
  box-shadow: var(--hp-sh-2);
  color: var(--hp-ink);
}
section.calendar .mini-cal__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; font-weight: 800; font-size: .92rem; color: var(--hp-navy);
}
section.calendar .mini-cal .nav-arrows { display: flex; gap: .5rem; }
section.calendar .mini-cal .nav-arrows a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: var(--hp-navy);
  text-decoration: none;
}
section.calendar table.cal { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
section.calendar table.cal th {
  font-size: .66rem; color: var(--hp-ink-3); font-weight: 700; padding-bottom: .5rem;
}
section.calendar table.cal td { text-align: center; font-size: .8rem; color: var(--hp-ink-2); padding: .3rem 0; }
section.calendar table.cal td.muted { color: var(--hp-ink-3); opacity: .4; }
section.calendar table.cal td span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
}
section.calendar table.cal td.has-event span { background: var(--hp-near-white); font-weight: 700; color: var(--hp-navy); }
section.calendar table.cal td.today span { border: 1.5px solid var(--hp-navy); font-weight: 800; color: var(--hp-navy); }
section.calendar .cal-legend {
  display: flex; align-items: center; gap: .5rem;
  font-size: .76rem; color: var(--hp-ink-3);
  margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--hp-line);
}
section.calendar .cal-legend .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--hp-near-white); flex: none; }

/* main.css: section.calendar .calendar-inner .cta (one extra class) forces
   text-align:center + margin:50px 0 — same recurring specificity collision. */
section.calendar .cta { margin: 2rem 0 0 !important; text-align: right !important; }
section.calendar .cta a {
  display: inline-flex !important; align-items: center; gap: .4rem;
  border-radius: var(--hp-r-full) !important;
  padding: .8rem 1.8rem !important;
  font-size: .86rem; font-weight: 700;
  background: var(--hp-navy) !important; color: #fff;
  text-decoration: none;
}
section.calendar .cta a:hover { background: #3B419E !important; }

/* ===================================================================
   ΚΕΝΤΡΟ ΥΠΗΡΕΣΙΩΝ (section-services.php — .services)
   Gradient + badge navy sampled directly from Αρχικη.pdf.
   =================================================================== */
section.services {
  background: linear-gradient(135deg, var(--hp-services-grad-a), var(--hp-services-grad-b));
  color: #fff;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
section.services .wrapper { width: 100%; max-width: 1220px; box-sizing: border-box; margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2rem); }
/* main.css: section.services .wrapper .section-title (one extra class)
   forces font-weight:lighter + margin-bottom:60px — same recurring collision. */
section.services .section-title {
  color: #fff !important;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem) !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
  margin: 0 0 1rem !important;
}
section.services .services-govgr-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--hp-services-badge-navy);
  color: #fff;
  border-radius: var(--hp-r-sm);
  padding: .6rem 1.1rem;
  font-size: .82rem;
  margin: 0 auto 2.5rem;
}
section.services .services-govgr-badge strong {
  font-weight: 800;
  letter-spacing: -.02em;
}
section.services .services-govgr-badge strong em {
  font-style: normal;
  color: var(--hp-dot-blue);
}
section.services .services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
@media (max-width: 760px) { section.services .services-grid { grid-template-columns: repeat(2, 1fr); } }
section.services .services-grid .box {
  text-align: center;
  background: #fff;
  border: 1.5px solid var(--hp-navy);
  border-radius: var(--hp-r-md);
  padding: 1.75rem 1rem;
}
section.services .services-grid .icon {
  position: relative;
  width: 44px; height: 44px;
  margin: 0 auto .9rem;
  display: grid; place-items: center;
  color: var(--hp-navy);
  font-size: 1.7rem;
}
/* decorative light-blue blob peeking behind the icon glyph, per the figma cards */
section.services .services-grid .icon::before {
  content: "";
  position: absolute;
  top: -6px; right: -10px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--hp-dot-blue);
  opacity: .5;
  z-index: -1;
}
section.services .services-grid .icon a { color: inherit; }
section.services .services-grid .title {
  display: block;
  color: var(--hp-navy) !important;
  font-size: .92rem; font-weight: 800;
  text-decoration: none;
}
section.services .services-grid .links { display: none; }
section.services .services-more-btn {
  display: inline-flex; align-items: center;
  margin-top: 2.5rem;
  background: var(--hp-navy);
  color: #fff;
  border-radius: var(--hp-r-full);
  padding: .7rem 1.6rem;
  font-size: .86rem; font-weight: 700;
  text-decoration: none;
}
section.services .services-more-btn:hover { background: var(--hp-services-badge-navy); }

/* ===================================================================
   MAP (section-map.php — .map-wrapper)

   The pdf floats the filters panel and the "Έργα σε χάρτη" CTA directly on
   top of the map instead of stacking them above/below it. Both elements are
   already present in the real markup (section-map.php) as siblings of #map
   inside .map-wrapper — this only repositions them with absolute placement;
   the real Google Maps script/markers are untouched.
   =================================================================== */
.map-wrapper {
  position: relative;
  max-width: 1220px;
  margin-inline: auto;
  padding: 0 clamp(1rem, 3vw, 2rem) clamp(2.5rem, 5vw, 4rem);
}
.map-wrapper .map-filters-wrapper {
  position: absolute;
  top: 1.5rem;
  left: calc(clamp(1rem, 3vw, 2rem) + 1.5rem);
  z-index: 3;
  max-width: 280px;
  /* main.css's own .map-wrapper .map-filters-wrapper rule sets
     top:50%/transform:translateY(-50%)/background/padding/color/width —
     same specificity, loaded earlier, so only properties we redeclare here
     get overridden; transform/background/etc are a different property and
     stay active unless reset explicitly, which is what pushed this card
     ~125px above the section (translateY(-50%) stacked on our top:1.5rem). */
  transform: none;
  background: transparent;
  color: inherit;
  padding: 0;
  width: auto;
}
.map-wrapper .map-filters {
  background: #fff;
  border-radius: var(--hp-r-md);
  box-shadow: var(--hp-sh-2);
  padding: 1.25rem 1.4rem;
}
.map-wrapper .map-filters h4 {
  font-size: .78rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--hp-ink-3);
  margin: 0 0 .3rem;
}
.map-wrapper .map-filters p {
  font-size: .8rem; color: var(--hp-ink-2); margin: 0 0 .8rem;
}
.map-wrapper .filters-wrapper {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .6rem;
}
.map-wrapper .filters-wrapper .custom-control-label {
  display: flex; align-items: center; gap: .5rem;
  font-size: .85rem; color: var(--hp-ink-2); cursor: pointer;
}
.map-wrapper #map {
  border-radius: var(--hp-r-lg);
  overflow: hidden;
  box-shadow: var(--hp-sh-1);
}
.map-wrapper .cta-btn {
  position: absolute;
  top: 1.5rem;
  right: calc(clamp(1rem, 3vw, 2rem) + 1.5rem);
  z-index: 3;
  display: flex; align-items: center; gap: .8rem;
  /* main.css's own .map-wrapper .cta-btn rule sets fixed width:150px/
     height:110px/text-align:center/color:darkgray at the same specificity —
     reset explicitly instead of relying on properties we don't redeclare. */
  width: auto;
  height: auto;
  max-width: 280px;
  text-align: left;
  background: #fff;
  border-radius: var(--hp-r-md);
  box-shadow: var(--hp-sh-2);
  padding: .9rem 1.2rem;
  text-decoration: none;
}
.map-wrapper .cta-btn img { height: 32px; width: auto; }
.map-wrapper .cta-btn p { margin: 0; font-size: .82rem; color: var(--hp-ink) !important; }
@media (max-width: 760px) {
  .map-wrapper .map-filters-wrapper,
  .map-wrapper .cta-btn {
    position: static;
    max-width: none;
    margin-bottom: 1rem;
  }
}

/* ===================================================================
   "ΕΠΙΚΟΙΝΩΝΙΑ ΜΕ ΤΟΝ ΔΗΜΟ" (section-contact.php — .contact)
   Retemplated to the pdf's light layout — see section-contact.php.
   =================================================================== */
section.contact {
  background: var(--hp-near-white);
  padding-block: clamp(3rem, 6vw, 5rem);
}
section.contact .inner { width: 100%; max-width: 1020px; box-sizing: border-box; margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2rem); }
/* main.css has a more specific selector for this exact title
   (section.contact .inner .section-title, one extra class) setting
   color:white/font-weight:lighter — tuned for the old dark photo-overlay
   design. Invisible white-on-near-white text is what that produced here;
   !important is what actually wins now, same fix as elsewhere in this file. */
section.contact .section-title {
  text-align: center !important;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem) !important;
  font-weight: 800 !important;
  color: var(--hp-ink) !important;
  margin: 0 0 2.5rem !important;
}
section.contact .contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 700px) { section.contact .contact-grid { grid-template-columns: 1fr; } }

section.contact .useful-heading {
  font-size: .8rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--hp-ink);
  margin: 0 0 1.1rem;
}
section.contact .useful-list { list-style: none; margin: 0; padding: 0; }
section.contact .useful-list li { border-bottom: 1px solid var(--hp-line); }
section.contact .useful-list a {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem;
  padding: .85rem 0;
  color: var(--hp-ink-2);
  font-size: .94rem;
  text-decoration: none;
}
section.contact .useful-list a:hover { color: var(--hp-navy); }
section.contact .useful-list a span { color: var(--hp-ink-3); }
section.contact .socials { display: flex; gap: 1rem; margin-top: 1.25rem; }
section.contact .socials a { color: var(--hp-navy); font-size: 1.1rem; }

section.contact .card-col {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: #fff;
  border-radius: var(--hp-r-lg);
  box-shadow: var(--hp-sh-1);
  padding: 1.5rem;
}
@media (max-width: 480px) { section.contact .card-col { flex-direction: column; text-align: center; } }
section.contact .circle {
  width: 96px; height: 96px; border-radius: 50%;
  object-fit: cover;
  flex: none;
}
section.contact .card-details h3 {
  font-size: 1.05rem; font-weight: 800; color: var(--hp-navy);
  margin: 0 0 .5rem;
}
section.contact .card-details p {
  font-size: .9rem; color: var(--hp-ink-2);
  margin: .3rem 0;
  display: flex; align-items: center; gap: .5rem;
}
section.contact .card-details p a { color: var(--hp-ink-2); text-decoration: none; }
section.contact .card-details p a:hover { color: var(--hp-navy); }
section.contact .contact-icon { display: inline-flex; flex: none; }

/* ===================================================================
   LINK CAROUSELS (section-useful-links.php / section-actions.php)
   =================================================================== */
section.useful-links, section.actions {
  background: #fff;
  padding-block: 2.5rem;
}
section.useful-links .wrapper, section.actions .wrapper {
  max-width: 1220px; margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2rem);
}
/* main.css: section.useful-links/.actions .wrapper .section-title (one
   extra class) forces text-align:center + margin-bottom:60px — same
   recurring collision as the other sections' titles. */
section.useful-links .section-title, section.actions .section-title {
  font-size: 1rem !important; text-align: center !important; margin-bottom: 1.5rem !important;
  color: var(--hp-navy) !important; letter-spacing: .02em;
}
section.useful-links .swiper-slide, section.actions .swiper-slide {
  height: 150px;
  border-radius: var(--hp-r-sm);
  background-color: var(--hp-near-white);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--hp-line);
}
section.useful-links .swiper-button-prev, section.useful-links .swiper-button-next,
section.actions .swiper-button-prev, section.actions .swiper-button-next {
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff; border: 1px solid var(--hp-line);
  color: var(--hp-ink-3);
}
section.useful-links .swiper-button-prev::after, section.useful-links .swiper-button-next::after,
section.actions .swiper-button-prev::after, section.actions .swiper-button-next::after {
  font-size: .9rem;
}
/* main.css has an ID-qualified, !important 50px side padding + fixed 200px
   height on these exact swiper containers (#useful-links / #actions), the
   same pattern already found in the Announcements section — on a narrow
   mobile width that padding eats most of the available space, which is what
   made this carousel look cramped and shifted. Needs an equally ID-qualified
   override to beat it. */
section.useful-links .wrapper #useful-links .swiper-container,
section.actions .wrapper #actions .swiper-container {
  height: auto !important;
  padding: 0 2.25rem 2.5rem !important;
}

/* ===================================================================
   FOOTER — copy alignment only (structure unchanged elsewhere)
   =================================================================== */