/* ==========================================================================
   Municipality of Cainta — Official Website
   Design system layered on top of Bootstrap 5.
   ========================================================================== */

:root {
  /* Brand */
  --cainta-primary:      #1113A2;
  --cainta-primary-dark: #0B0C63;
  --cainta-primary-soft: #E9EAF7;
  --cainta-primary-line: #C7C9EC;
  --cainta-gold:         #C9A227;
  --cainta-deep:         #06073A;
  --cainta-azure:        #2F5BD7;

  /* Cainta sits on the plain between the Sierra Madre foothills and the
     Manggahan floodway; the gradient runs deep navy (land) to azure (sky). */
  --grad-hero:   linear-gradient(128deg, rgba(6,7,58,.93) 0%, rgba(17,19,162,.86) 46%, rgba(47,91,215,.72) 100%);
  --grad-header: linear-gradient(122deg, #06073A 0%, #1113A2 58%, #2F5BD7 100%);

  /* Status */
  --cainta-danger:  #B3261E;
  --cainta-warning: #9A6700;
  --cainta-success: #14663F;

  /* Neutrals */
  --cainta-ink:     #16181F;
  --cainta-body:    #3B4051;
  --cainta-muted:   #667085;
  --cainta-line:    #DFE2EB;
  --cainta-surface: #FFFFFF;
  --cainta-canvas:  #F4F6FB;

  /* Type */
  --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Shape */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow:    0 6px 20px rgba(11, 12, 99, .10);
  --shadow-lg: 0 18px 44px rgba(6, 7, 58, .22);

  /* Fluid type scale — one source of truth for every breakpoint. */
  --step-display: clamp(2rem, 1.35rem + 2.9vw, 3.5rem);
  --step-h1:      clamp(1.6rem, 1.25rem + 1.6vw, 2.35rem);
  --step-h2:      clamp(1.3rem, 1.12rem + .8vw, 1.75rem);
  --step-lead:    clamp(1rem, .96rem + .28vw, 1.15rem);

  /* Fluid rhythm */
  --space-section: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html { scroll-behavior: smooth; }

/* Sticky-footer layout: main takes the slack so the footer sits after the
   content on short pages instead of riding up into it. */
html { min-height: 100%; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  color: var(--cainta-body);
  background: var(--cainta-canvas);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--cainta-ink);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

h1 { font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.35rem); }

main { flex: 1 0 auto; }

a { color: var(--cainta-primary); text-underline-offset: 2px; }
a:hover { color: var(--cainta-primary-dark); }

/* Accessibility: always-visible keyboard focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--cainta-gold);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--cainta-primary);
  color: #fff;
  padding: .75rem 1.25rem;
  font-weight: 600;
}
.skip-link:focus {
  left: .5rem;
  top: .5rem;
  color: #fff;
}

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

/* --------------------------------------------------------------------------
   Utility bar — Philippine Standard Time + quick links
   -------------------------------------------------------------------------- */

.utility-bar {
  background: var(--cainta-primary-dark);
  color: #D9DAF2;
  font-size: .8125rem;
  padding: .4rem 0;
}
.utility-bar a { color: #fff; text-decoration: none; }
.utility-bar a:hover { text-decoration: underline; color: #fff; }

.pst-clock {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #fff;
  letter-spacing: .02em;
}
.pst-label {
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .6875rem;
  color: #A6A8DE;
}

/* --------------------------------------------------------------------------
   Header + navigation
   -------------------------------------------------------------------------- */

.site-header {
  background: var(--cainta-surface);
  border-bottom: 1px solid var(--cainta-line);
}

.brand-lockup { text-decoration: none; display: flex; align-items: center; gap: .40rem; }
.brand-seal {
  width: clamp(42px, 6vw, 54px); height: auto; flex: none;
  border-radius: 50%;
  display: block;
  box-shadow: 0 0 0 2px var(--cainta-primary-soft);
}
.brand-seal2 {
  width: clamp(70px, 6vw, 78px); height: auto; flex: none;
  display: block;
}
.brand-name {
  font-size: 1.0625rem; font-weight: 700; color: var(--cainta-ink);
  line-height: 1.15; text-transform: uppercase; letter-spacing: .01em;
}
.brand-sub { font-size: .78rem; color: var(--cainta-muted); }

.main-nav { background: var(--cainta-primary); }
.main-nav .navbar-nav .nav-link {
  color: rgba(255, 255, 255, .92);
  font-weight: 600;
  font-size: .9rem;
  padding: .85rem 1rem;
  border-bottom: 3px solid transparent;
}
.main-nav .navbar-nav .nav-link:hover,
.main-nav .navbar-nav .nav-link:focus { color: #fff; background: rgba(255, 255, 255, .1); }
.main-nav .navbar-nav .nav-link.active {
  color: #fff;
  border-bottom-color: var(--cainta-gold);
  background: rgba(0, 0, 0, .15);
}
.main-nav .dropdown-menu {
  border: 1px solid var(--cainta-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .35rem;
  margin-top: 0;
}
.main-nav .dropdown-item {
  border-radius: var(--radius-sm);
  padding: .5rem .75rem;
  font-size: .9rem;
  color: var(--cainta-body);
}
.main-nav .dropdown-item:hover,
.main-nav .dropdown-item:focus { background: var(--cainta-primary-soft); color: var(--cainta-primary-dark); }
.main-nav .dropdown-item.active { background: var(--cainta-primary); color: #fff; }

/* E-Portal call to action — deliberately not styled like a nav item */
.btn-eportal {
  background: var(--cainta-gold);
  color: var(--cainta-canvas);
  font-weight: 700;
  border: none;
  border-radius: var(--radius-sm);
  padding: .55rem 1.1rem;
  white-space: nowrap;
}
.btn-eportal:hover, .btn-eportal:focus { background: var(--cainta-primary-dark); color: #fff;}

.btn-cainta {
  background: var(--cainta-primary);
  border: 1px solid var(--cainta-primary);
  color: #fff;
  font-weight: 600;
}
.btn-cainta:hover, .btn-cainta:focus { background: var(--cainta-primary-dark); border-color: var(--cainta-primary-dark); color: #fff; }

.btn-outline-cainta {
  border: 1px solid var(--cainta-primary);
  color: var(--cainta-primary);
  font-weight: 600;
  background: transparent;
}
.btn-outline-cainta:hover, .btn-outline-cainta:focus { background: var(--cainta-primary); color: #fff; }

/* --------------------------------------------------------------------------
   Alerts and advisories
   -------------------------------------------------------------------------- */

.alert-strip {
  background: #FFF4E5;
  border-bottom: 1px solid #F0D9B5;
  color: #5B3A00;
  font-size: .925rem;
}
.alert-strip .badge-level {
  background: var(--cainta-warning);
  color: #fff;
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.alert-strip.level-danger { background: #FDECEA; border-bottom-color: #F3C2BD; color: #6B1C16; }
.alert-strip.level-danger .badge-level { background: var(--cainta-danger); }
.alert-strip.level-info { background: var(--cainta-primary-soft); border-bottom-color: var(--cainta-primary-line); color: var(--cainta-primary-dark); }
.alert-strip.level-info .badge-level { background: var(--cainta-primary); }

.preview-banner {
  background: #201F1A;
  color: #F3EBD2;
  font-size: .8125rem;
  padding: .5rem 0;
  border-bottom: 2px solid var(--cainta-gold);
}

.badge-sample {
  background: #F3EBD2;
  color: #5B4A0F;
  border: 1px solid #D9C88A;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .2rem .45rem;
  border-radius: var(--radius-sm);
}

.placeholder-note {
  color: var(--cainta-muted);
  font-style: italic;
  font-size: .9em;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background-color: var(--cainta-deep);
  padding: clamp(2.75rem, 1.8rem + 4.4vw, 6rem) 0 clamp(2.5rem, 1.8rem + 3.2vw, 4.75rem);
}

/* Photograph layer. hero-cainta.jpg is layered ABOVE the SVG backdrop, so
   dropping a real photo of Cainta at that path replaces the fallback with no
   code change. A missing file simply renders nothing and the backdrop shows. */
.hero__bg {
  position: absolute; inset: 0; z-index: -3;
  background-image: url("../images/hero-cainta.jpg"), url("../images/hero-backdrop.svg");
  background-size: cover, cover;
  background-position: center 42%, center;
  background-repeat: no-repeat, no-repeat;
  transform: scale(1.03);
}

/* Blue overlay — keeps text legible over any photograph. */
.hero__veil { position: absolute; inset: 0; z-index: -2; background: var(--grad-hero); }

/* Oversized seal, bleeding off the right edge. */
.hero__seal {
  position: absolute; z-index: -1;
  right: -6%; top: 50%;
  width: min(48vw, 560px); height: auto;
  transform: translateY(-50%);
  opacity: .09;
  filter: brightness(0) invert(1);
  pointer-events: none;
  user-select: none;
}

.hero::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 4px;
  background: linear-gradient(90deg, var(--cainta-gold) 0%, #E7C766 45%, var(--cainta-gold) 100%);
}

.hero h1 {
  color: #fff;
  font-size: var(--step-display);
  line-height: 1.06;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.hero p { color: rgba(255, 255, 255, .9); max-width: 58ch; font-size: var(--step-lead); }

/* Visible crest beside the eyebrow */
.hero__crest {
  width: clamp(56px, 9vw, 84px);
  height: auto;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .22), 0 8px 22px rgba(4, 5, 42, .45);
  flex: 0 0 auto;
}
.hero__crest-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.15rem; }
.hero__eyebrow {
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .78); display: block; line-height: 1.5;
}

/* Search panel — frosted so the photograph stays visible behind it. */
.hero-panel {
  background: rgba(255, 255, 255, .97);
  border-radius: var(--radius-lg);
  padding: clamp(1.1rem, .8rem + 1vw, 1.75rem);
  box-shadow: var(--shadow-lg);
}
@supports (backdrop-filter: blur(8px)) {
  .hero-panel { background: rgba(255, 255, 255, .93); backdrop-filter: blur(10px); }
}

.hero-search .form-control {
  border: none;
  padding: .8rem 1rem;
  font-size: 1rem;
}
.hero-search .form-control:focus { box-shadow: none; }

.hero-search .form-control {
  border: none;
  padding: .8rem 1rem;
  font-size: 1rem;
}
.hero-search .form-control:focus { box-shadow: none; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section { padding: var(--space-section) 0; }
.section-tight { padding: calc(var(--space-section) * .62) 0; background: var(--grad-hero); }
.section-alt { background: var(--cainta-surface); }

.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--cainta-line);
}
.section-heading h2 { margin: 0; }
.section-eyebrow {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .75rem;
  font-weight: 700;
  color: var(--cainta-primary);
  margin-bottom: .35rem;
  display: block;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card-cainta {
  /* Required: .stretched-link inside a card anchors its invisible overlay to
     the nearest positioned ancestor. Without this the overlay escapes the card
     and covers the whole page, swallowing every click on it. */
  position: relative;
  background: var(--cainta-surface);
  border: 1px solid var(--cainta-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease;

  /* No height here on purpose. A grid column is a stretched flex item, which
     gives it a definite height, so height:100% made every card as tall as the
     whole row. Several stacked in one column then overflowed across the
     footer. Cards that need to match their neighbours carry .h-100 instead. */
}
.card-cainta:hover { border-color: var(--cainta-primary-line); box-shadow: var(--shadow); }

/* Service cards: the primary action of the whole site */
.service-card {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.25rem;
  text-decoration: none;
  border-left: 4px solid var(--cainta-primary);
}
.service-card .service-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: var(--cainta-primary-soft);
  color: var(--cainta-primary);
  display: grid; place-items: center;
  font-size: 1.25rem;
}
.service-card h3 { font-size: 1.05rem; margin: 0; }
.service-card p { margin: 0; font-size: .9rem; color: var(--cainta-muted); }

.channel-tag {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  padding: .2rem .5rem;
  border-radius: var(--radius-sm);
}
.channel-online { background: #E3F2EA; color: var(--cainta-success); border: 1px solid #B6DCC7; }
.channel-onsite { background: #EEF0F5; color: var(--cainta-body); border: 1px solid var(--cainta-line); }

/* Quick actions */
.quick-action {
  display: flex; align-items: center; gap: .75rem;
  padding: .9rem 1rem;
  background: var(--cainta-surface);
  border: 1px solid var(--cainta-line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--cainta-ink);
  font-weight: 600;
  font-size: .95rem;
  height: 100%;
}
.quick-action:hover { border-color: var(--cainta-primary); color: var(--cainta-primary); background: var(--cainta-primary-soft); }
.quick-action i { font-size: 1.35rem; color: var(--cainta-primary); flex: none; }

/* News + event cards */
.news-thumb {
  aspect-ratio: 16 / 9;
  background: var(--cainta-primary-soft);
  color: var(--cainta-primary-line);
  display: grid; place-items: center;
  font-size: 2rem;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}
.news-thumb img { width: 100%; height: 100%; object-fit: cover; }

.meta-line {
  font-size: .8rem;
  color: var(--cainta-muted);
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
}
.meta-line .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

.date-block {
  flex: none;
  width: 62px;
  text-align: center;
  border: 1px solid var(--cainta-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
}
.date-block .date-month {
  background: var(--cainta-primary);
  color: #fff;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  padding: .15rem 0;
}
.date-block .date-day { font-size: 1.35rem; font-weight: 700; color: var(--cainta-ink); line-height: 1.5; }

/* Official / department / barangay cards */
.person-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--cainta-primary-soft);
  color: var(--cainta-primary-line);
  display: grid; place-items: center;
  font-size: 3rem;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}
.person-photo img { width: 100%; height: 100%; object-fit: cover; }

.hotline-card {
  display: flex; align-items: flex-start; gap: .9rem;
  padding: 1rem;
  border: 1px solid #F3C2BD;
  border-left: 4px solid var(--cainta-danger);
  border-radius: var(--radius);
  background: #fff;
  height: 100%;
}
.hotline-card .hotline-icon i { font-size: inherit; color: inherit; flex: none; }
.hotline-number {
  font-size: 1.15rem; font-weight: 700; color: var(--cainta-ink);
  font-variant-numeric: tabular-nums; text-decoration: none;
}
.hotline-number:hover { color: var(--cainta-danger); }

/* Document rows */
.doc-row {
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem 1rem;
  border: 1px solid var(--cainta-line);
  border-radius: var(--radius);
  background: #fff;
  margin-bottom: .6rem;
}
.doc-row .doc-icon {
  width: 40px; height: 40px; flex: none;
  border-radius: var(--radius-sm);
  background: var(--cainta-primary-soft);
  color: var(--cainta-primary);
  display: grid; place-items: center;
  font-size: 1.1rem;
}

/* --------------------------------------------------------------------------
   Breadcrumbs + page header
   -------------------------------------------------------------------------- */

.page-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--grad-header);
  color: #fff;
  padding: clamp(1.6rem, 1.2rem + 1.9vw, 2.9rem) 0 clamp(1.5rem, 1.1rem + 1.7vw, 2.5rem);
}
.page-header::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background-image: url("../images/hero-cainta.jpg");
  background-size: cover;
  background-position: center 30%;
  opacity: .28;
}
.page-header::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 3px;
  background: var(--cainta-gold);
}
.page-header__seal {
  position: absolute; z-index: -1;
  right: -2.5%; top: 50%;
  width: min(30vw, 300px); height: auto;
  transform: translateY(-50%);
  opacity: .1;
  filter: brightness(0) invert(1);
  pointer-events: none;
}
.page-header h1 {
  color: #fff;
  margin-bottom: .35rem;
  font-size: var(--step-h1);
  letter-spacing: -.015em;
  text-wrap: balance;
}
.page-header .lead {
  color: rgba(255, 255, 255, .86);
  font-size: var(--step-lead);
  margin: 0;
  max-width: 68ch;
}

.breadcrumb { font-size: .825rem; margin-bottom: .5rem; }
.breadcrumb-item + .breadcrumb-item::before { content: "/"; color: var(--cainta-muted); }
.breadcrumb-item.active { color: var(--cainta-muted); }

/* Breadcrumbs sit on the gradient, so they invert inside the page header. */
.page-header .breadcrumb-item a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.page-header .breadcrumb-item a:hover { color: #fff; text-decoration: underline; }
.page-header .breadcrumb-item.active { color: rgba(255, 255, 255, .66); }
.page-header .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .45); }

/* --------------------------------------------------------------------------
   Filters, forms, tables
   -------------------------------------------------------------------------- */

.filter-bar {
  background: var(--cainta-surface);
  border: 1px solid var(--cainta-line);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.form-label { font-weight: 600; color: var(--cainta-ink); font-size: .9rem; }
.form-control, .form-select {
  border-color: var(--cainta-line);
  padding: .55rem .75rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--cainta-primary);
  box-shadow: 0 0 0 3px var(--cainta-primary-soft);
}
.form-text { font-size: .825rem; }
.required-mark { color: var(--cainta-danger); font-weight: 700; }

.table-cainta { background: #fff; }
.table-cainta thead th {
  background: var(--cainta-primary-soft);
  color: var(--cainta-primary-dark);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 2px solid var(--cainta-primary-line);
  white-space: nowrap;
}

/* Accordion */
.accordion-button:not(.collapsed) {
  background: var(--cainta-primary-soft);
  color: var(--cainta-primary-dark);
  box-shadow: none;
}
.accordion-button:focus { box-shadow: 0 0 0 3px var(--cainta-primary-soft); }

/* --------------------------------------------------------------------------
   Calendar
   -------------------------------------------------------------------------- */

.calendar-grid {
  display: grid;
  /* minmax(0, 1fr) rather than 1fr: a plain 1fr track will not shrink below
     its content's minimum width, so one long event title widened its column
     and pushed the other six out of alignment. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--cainta-line);
  border: 1px solid var(--cainta-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.calendar-head {
  background: var(--cainta-primary-soft);
  color: var(--cainta-primary-dark);
  font-weight: 700;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-align: center;
  padding: .5rem .25rem;
}
.calendar-cell {
  background: #fff;
  min-height: 92px;
  padding: .4rem;
  font-size: .8rem;
  min-width: 0; /* lets the cell shrink so the track stays even */
}
.calendar-cell.is-outside { background: #FAFBFD; color: #B9BECC; }
.calendar-cell.is-today { background: var(--cainta-primary-soft); }
.calendar-cell .cell-date { font-weight: 700; color: var(--cainta-ink); font-size: .8rem; }
.calendar-cell.is-today .cell-date { color: var(--cainta-primary); }
.calendar-event {
  display: block;
  margin-top: .25rem;
  padding: .2rem .35rem;
  background: var(--cainta-primary);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: .7rem;
  line-height: 1.3;
  text-decoration: none;
  /* Titles wrap inside the chip instead of being clipped. overflow-wrap
     handles a single long word, which would otherwise still force the
     column wider than its share. */
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.calendar-event:hover { background: var(--cainta-primary-dark); color: #fff; }

/* Holidays and deadlines read differently from events, so they are marked
   differently — gold with a dark label, never colour alone. */
.calendar-note {
  display: block;
  margin-top: .25rem;
  padding: .2rem .35rem;
  background: #FFF6E5;
  color: #7A5A00;
  border: 1px solid #EFD9A3;
  border-radius: var(--radius-sm);
  font-size: .7rem;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}
.calendar-note .calendar-note-type {
  display: block;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .8;
}

@media (max-width: 575.98px) {
  .calendar-cell { min-height: 62px; padding: .25rem; }
  .calendar-event, .calendar-note { font-size: 0; padding: .25rem; border-width: 0; }
  .calendar-event::before { content: "•"; font-size: .9rem; }
  .calendar-note::before { content: "★"; font-size: .8rem; color: #7A5A00; }
  .calendar-note .calendar-note-type { display: none; }
}

/* --------------------------------------------------------------------------
   Mayor's Corner (institutional, not campaign styling)
   -------------------------------------------------------------------------- */

.mayor-panel {
  background: var(--cainta-surface);
  border: 1px solid var(--cainta-line);
  border-top: 4px solid var(--cainta-primary);
  border-radius: var(--radius);
  padding: 1.75rem;
}
.mayor-portrait {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 3 / 4;
  background: var(--cainta-primary-soft);
  color: var(--cainta-primary-line);
  display: grid; place-items: center;
  font-size: 3.5rem;
  border-radius: var(--radius);
}
.mayor-quote {
  border-left: 3px solid var(--cainta-gold);
  padding-left: 1rem;
  color: var(--cainta-body);
  font-size: 1.02rem;
}

/* --------------------------------------------------------------------------
   Org chart
   -------------------------------------------------------------------------- */

.org-level { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-bottom: .75rem; }
.org-node {
  background: #fff;
  border: 1px solid var(--cainta-line);
  border-top: 3px solid var(--cainta-primary);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  min-width: 190px;
  text-align: center;
  font-size: .875rem;
}
.org-node strong { display: block; color: var(--cainta-ink); }
.org-connector { width: 2px; height: 20px; background: var(--cainta-primary-line); margin: 0 auto .75rem; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  background: var(--cainta-primary-dark);
  color: #C3C5E8;
  padding-top: 3rem;
  font-size: .9rem;
}
.site-footer h2, .site-footer h3 {
  color: #fff;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .85rem;
}
.site-footer a { color: #C3C5E8; text-decoration: none; }
.site-footer a:hover, .site-footer a:focus { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .45rem; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .15);
  margin-top: 2rem;
  padding: 1.25rem 0;
  font-size: .825rem;
}
.footer-emergency {
  background: rgba(0, 0, 0, .25);
  border: 1px solid rgba(255, 255, 255, .18);
  border-left: 4px solid var(--cainta-gold);
  border-radius: var(--radius);
  padding: 1rem;
}

/* The name sits above its numbers rather than beside them. A side-by-side row
   cannot hold two numbers without them running together, and the footer column
   is the narrowest on the page. */
.footer-hotline {
  padding: .45rem 0;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.footer-hotline:last-child { border-bottom: none; padding-bottom: 0; }
.footer-hotline:first-child { padding-top: 0; }

.footer-hotline-name {
  display: block;
  font-size: .8rem;
  color: #A9ACD8;
  letter-spacing: .02em;
}
.footer-hotline-number {
  display: block;
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.45;
  text-decoration: none;
  overflow-wrap: anywhere;
}
a.footer-hotline-number:hover,
a.footer-hotline-number:focus { color: var(--cainta-gold); text-decoration: underline; }
.footer-hotline-pending { font-weight: 500; font-size: .85rem; color: #A9ACD8; }

/* --------------------------------------------------------------------------
   Empty states, pagination, misc
   -------------------------------------------------------------------------- */

.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  background: var(--cainta-surface);
  border: 1px dashed var(--cainta-line);
  border-radius: var(--radius);
  color: var(--cainta-muted);
}
.empty-state i { font-size: 2rem; color: var(--cainta-primary-line); display: block; margin-bottom: .75rem; }

.pagination .page-link { color: var(--cainta-primary); border-color: var(--cainta-line); }
.pagination .page-item.active .page-link { background: var(--cainta-primary); border-color: var(--cainta-primary); color: #fff; }

.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li {
  display: flex; gap: .6rem; align-items: flex-start;
  /* Wrapping lets the value drop to its own line in a narrow sidebar rather
     than overflowing the card, which is what a long email address did. */
  flex-wrap: wrap;
  padding: .5rem 0;
  border-bottom: 1px solid var(--cainta-line);
  font-size: .925rem;
}
.info-list li:last-child { border-bottom: none; }
.info-list .info-key { font-weight: 600; color: var(--cainta-ink); flex: 0 0 8.5rem; }

/* min-width:0 lets a flex item shrink below its content; overflow-wrap gives
   an unbroken string somewhere to break. Both are needed — long addresses and
   URLs offer no natural break point. */
.info-list .info-value {
  flex: 1 1 11rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Multiple phone numbers or addresses stack, one actionable line each. */
.contact-list { display: flex; flex-direction: column; gap: .3rem; }
.contact-item {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  overflow-wrap: anywhere;
  text-decoration: none;
}
a.contact-item:hover { text-decoration: underline; }
.contact-item i { flex: none; font-size: .85em; opacity: .75; }

/* Addresses run longer than a number, so the pin stays at the top of the
   first line and the text wraps beneath it rather than beside it. */

.contact-address { align-items: flex-start; }
.contact-address i { position: relative; top: .25em; }
.contact-list .contact-address + .contact-address { margin-top: .15rem; }
/* Same protection inside tables, where emails share a cell with other text. */
.table-cainta td, .table-cainta th { overflow-wrap: anywhere; }

.step-list { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.step-list li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1rem 2.75rem;
  border-left: 2px solid var(--cainta-line);
  margin-left: .9rem;
}
.step-list li:last-child { border-left-color: transparent; padding-bottom: 0; }
.step-list li::before {
  content: counter(step);
  position: absolute; left: -.9rem; top: 0;
  width: 1.8rem; height: 1.8rem;
  background: var(--cainta-primary); color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 700;
}

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

@media (max-width: 991.98px) {

  /* Larger touch targets */
  .quick-action, .doc-row { padding: 1rem; }
}


/* --------------------------------------------------------------------------
   Modern polish and responsive behaviour
   -------------------------------------------------------------------------- */

/* Nothing overflows its container on a narrow screen. */
img, svg, video { max-width: 100%; height: auto; }

/* Fluid headings everywhere, not just in the banners. */
h1 { font-size: var(--step-h1); letter-spacing: -.015em; }
h2 { font-size: var(--step-h2); letter-spacing: -.01em; }
.section-heading h2 { text-wrap: balance; }

/* Cards lift slightly on pointer devices only — no jitter on touch. */
@media (hover: hover) and (pointer: fine) {
  .card-cainta { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
  .card-cainta:hover { transform: translateY(-2px); }
  .quick-action { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
  .quick-action:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
}

/* Tablet and below: the seal stops competing with the headline. */
@media (max-width: 991.98px) {
  .hero__seal { right: -18%; width: 62vw; opacity: .07; }
  .hero__bg { background-position: center 38%, center; }
  .page-header__seal { right: -8%; width: 42vw; opacity: .08; }
}

/* Phones: keep the banner tight and the crest inline with the eyebrow. */
@media (max-width: 575.98px) {
  .hero { padding-top: 2.25rem; padding-bottom: 2rem; }
  .hero__crest-row { gap: .75rem; margin-bottom: .9rem; }
  .hero__eyebrow { font-size: .68rem; letter-spacing: .12em; }
  .hero .btn-lg { width: 100%; }
  .hero__seal { display: none; }
  .page-header__seal { display: none; }
  .page-header::before { opacity: .2; }
}

/* Very small phones: prevent the two hero buttons from crowding. */
@media (max-width: 359.98px) {
  .hero__crest { width: 48px; }
}

/* Users who ask for less motion get no transforms at all. */
@media (prefers-reduced-motion: reduce) {
  .card-cainta:hover, .quick-action:hover { transform: none; }
  .hero__bg { transform: none; }
}




/* --------------------------------------------------------------------------
   Entity emblems: offices, barangays, hotlines
   -------------------------------------------------------------------------- */

.entity-logo {
  --entity-hue: 236;
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--radius);
  background: hsl(var(--entity-hue) 72% 96%);
  color: hsl(var(--entity-hue) 68% 34%);
  border: 1px solid hsl(var(--entity-hue) 55% 88%);
  font-size: 1.2rem;
  line-height: 1;
}
.entity-logo-text {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.entity-logo-sm { width: 34px; height: 34px; font-size: 1rem; border-radius: var(--radius-sm); }
.entity-logo-sm.entity-logo-text { font-size: .66rem; }
.entity-logo-lg { width: 64px; height: 64px; font-size: 1.7rem; }
.entity-logo-lg.entity-logo-text { font-size: 1.05rem; }

/* Real artwork sits edge to edge, without the tinted tile behind it. */
.entity-logo-image { background: #fff; border-color: var(--cainta-line); padding: 4px; }
.entity-logo-image img { width: 100%; height: 100%; object-fit: contain; }

/* Emergency hotlines are colour-coded by the kind of help they provide, so the
   right number is found by shape and colour before the label is read. */
.hotline-icon {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--radius);
  font-size: 1.35rem;
  border: 1px solid transparent;
}
.tone-critical { background: #FDECEB; color: #A5171B; border-color: #F3C4C2; }
.tone-police   { background: #E8EDFB; color: #1F3C88; border-color: #C6D2F2; }
.tone-fire     { background: #FDEEE6; color: #B4460E; border-color: #F5CDB6; }
.tone-rescue   { background: #FFF6E5; color: #8A6100; border-color: #EFD9A3; }
.tone-medical  { background: #E6F4EC; color: #12693B; border-color: #BEDFCC; }
.tone-civic    { background: #EEF0F5; color: var(--cainta-primary); border-color: var(--cainta-line); }

/* An agency logo replaces the tinted glyph when one is supplied. */
.hotline-icon-image { background: #fff; border-color: var(--cainta-line); padding: 4px; }
.hotline-icon-image img { width: 100%; height: 100%; object-fit: contain; }

/* Several numbers stack, each one its own tap target. */
.hotline-body { min-width: 0; }
.hotline-body .hotline-number { display: block; }
.hotline-body .hotline-number + .hotline-number { margin-top: .1rem; }

/* Org chart nodes stack vertically, so the emblem centres above the label. */
.org-node .entity-logo { margin: 0 auto .5rem; }

/* Header rows that pair an emblem with a heading. */
.entity-head { display: flex; align-items: flex-start; gap: .85rem; }
.entity-head .entity-head-body { min-width: 0; flex: 1 1 auto; }

@media print {
  .entity-logo { border-color: #999; color: #000; background: none; }
}

/* --------------------------------------------------------------------------
   Public activities (Mayor's Corner)
   -------------------------------------------------------------------------- */

.activity-card { display: flex; flex-direction: column; overflow: hidden; }

.activity-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--cainta-primary-soft);
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}
.activity-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.activity-media-fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 2rem;
  color: var(--cainta-primary-line);
}

/* Small mark so the origin of the item is clear before it is read. */
.activity-source {
  position: absolute; left: .6rem; bottom: .6rem;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: #1877F2;
  font-size: .95rem;
  box-shadow: 0 2px 6px rgba(6, 7, 58, .25);
}

.activity-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: .9rem 1rem 1rem; }
.activity-caption { font-size: .925rem; line-height: 1.55; margin-bottom: .9rem; }

.activity-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .85rem; font-weight: 600;
  text-decoration: none;
}
.activity-link:hover { text-decoration: underline; }

/* Embedded posts arrive at whatever height Facebook decides, so a normal grid
   would leave ragged gaps. Columns let each one flow to its natural height. */
.activity-embeds { column-gap: 1rem; }
.activity-embed {
  break-inside: avoid;
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
}
/* The plugin sizes to its container, which must never exceed the viewport. */
.activity-embed .fb-post,
.activity-embed .fb-post span,
.activity-embed .fb-post iframe { max-width: 100% !important; }

/* A readable fallback if Facebook's script never runs. */
.activity-embed blockquote {
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--cainta-line);
  border-left: 3px solid #1877F2;
  border-radius: var(--radius);
  background: var(--cainta-surface);
  font-size: .925rem;
}

@media (min-width: 768px)  { .activity-embeds { column-count: 2; } }
@media (min-width: 1200px) { .activity-embeds { column-count: 3; } }

.activity-more {
  font-size: .925rem;
  color: var(--cainta-muted);
  padding-top: .25rem;
}
.activity-more a { font-weight: 600; }

/* Facebook's timeline plugin. The frame is ours; the contents are not and
   cannot be styled, so the surround does the work of fitting in. */
.fb-frame {
  border: 1px solid var(--cainta-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--cainta-surface);
}
.fb-frame-head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .7rem 1rem;
  background: var(--cainta-primary-soft);
  border-bottom: 1px solid var(--cainta-line);
  font-size: .875rem; font-weight: 600;
}
.fb-frame-head a { font-weight: 500; }
.fb-frame-body { padding: 1rem; display: flex; justify-content: center; }

/* The plugin sizes itself to its container, so the container must not exceed
   the viewport on a phone. */
.fb-frame-body .fb-page,
.fb-frame-body .fb-page span,
.fb-frame-body .fb-page iframe { max-width: 100% !important; }

.fb-frame-note {
  margin: 0;
  padding: .6rem 1rem .8rem;
  font-size: .78rem;
  color: var(--cainta-muted);
  border-top: 1px solid var(--cainta-line);
}

/* --------------------------------------------------------------------------
   Apply online
   -------------------------------------------------------------------------- */

/* The primary action on an online service page. Gold on navy so it reads as
   the one thing to do here, matching the E-Portal button in the header. */
.apply-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--grad-header);
  color: #fff;
  box-shadow: var(--shadow);
}
.apply-panel-lg { padding: clamp(1.25rem, 1rem + 1vw, 1.85rem); }
.apply-panel h3 { color: #fff; margin: 0; }
.apply-panel p { color: rgba(255, 255, 255, .86); font-size: .92rem; }
.apply-panel-btn { flex: 0 0 auto; align-self: flex-start; white-space: nowrap; }

@media (min-width: 768px) {
  .apply-panel { flex-direction: row; align-items: center; }
  .apply-panel-body { flex: 1 1 auto; }
  .apply-panel-btn { align-self: center; }
}

/* Online service cards carry the accent through to the listing. */
.service-card-online { border-left-color: var(--cainta-primary-dark); }
.service-card h3 a { color: inherit; text-decoration: none; }
.service-card h3 a:hover { color: var(--cainta-primary); }

/* Sits above the stretched title link so it stays clickable. */
.card-action { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   Navigation: sidebar panel on mobile, horizontal bar on desktop
   -------------------------------------------------------------------------- */

/* The parent link and its chevron sit side by side and are separate targets. */
.nav-row { display: flex; align-items: center; }
.nav-row .nav-link { flex: 1 1 auto; }

.submenu-toggle {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, .82);
  font-size: 1rem;
  cursor: pointer;
  transition: transform .2s ease, background-color .15s ease;
}
.submenu-toggle:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.nav-item.is-open > .nav-row > .submenu-toggle { transform: rotate(180deg); }

/* One open state, shared by hover, the chevron and the mobile panel. */
.main-nav .nav-item.is-open > .dropdown-menu { display: block; }

@media (min-width: 992px) {
  /* Bootstrap gives a responsive offcanvas flex-grow:0 above its breakpoint,
     so the nav had no spare width and me-auto could not push the E-Portal
     button anywhere. Letting the panel grow sends it to the far right. */
  .nav-panel.offcanvas-lg { flex-grow: 1; }
  .nav-panel .offcanvas-body {
    flex-grow: 1;
    align-items: center;
    justify-content: space-between;
  }

  /* Submenus are shown by CSS/JS rather than Popper, so they anchor to the
     nav item themselves instead of relying on Bootstrap's positioning data. */
  .main-nav .nav-item.dropdown { position: relative; }
  .main-nav .dropdown-menu { top: 100%; left: 0; margin-top: 0; }

  /* Keyboard users get the submenu without needing a pointer. */
  .main-nav .nav-item.dropdown:focus-within > .dropdown-menu { display: block; }

  /* A small caret beside the label, sized for the bar rather than for thumbs. */
  .submenu-toggle {
    width: 24px;
    height: 24px;
    margin-left: -.4rem;
    font-size: .7rem;
    color: rgba(255, 255, 255, .72);
  }
  .nav-item.is-open > .nav-row > .submenu-toggle,
  .nav-row:hover > .submenu-toggle { color: #fff; }
}

@media (max-width: 991.98px) {
  .nav-panel {
    width: min(86vw, 340px);
    background: var(--cainta-primary-dark);
    color: #fff;
    border-left: 3px solid var(--cainta-gold);
  }
  .nav-panel .offcanvas-header {
    background: var(--cainta-deep);
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    padding: 1rem 1.15rem;
  }
  .nav-panel .offcanvas-title { color: #fff; letter-spacing: .06em; text-transform: uppercase; }
  .nav-panel .offcanvas-body { padding: .5rem .75rem 1.25rem; overflow-y: auto; }

  .main-nav .navbar-nav .nav-link {
    padding: .85rem .6rem;
    color: #fff;
  }
  /* The whole row is one tap target for expanding. */
  .nav-row { cursor: pointer; border-radius: var(--radius-sm); }
  .nav-row:hover { background: rgba(255, 255, 255, .08); }
  .nav-item.is-open > .nav-row { background: rgba(255, 255, 255, .1); }
  .nav-item.is-open > .nav-row > .nav-link { color: var(--cainta-gold); }
  .nav-item { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .main-nav .navbar-nav .nav-link.active { color: var(--cainta-gold); font-weight: 600; }

  /* Submenus are driven by a class, not by Bootstrap's dropdown JS. */
  .main-nav .dropdown-menu {
    display: none;
    position: static;
    float: none;
    width: auto;
    background: rgba(0, 0, 0, .22);
    border: none;
    box-shadow: none;
    border-radius: var(--radius-sm);
    margin: 0 0 .6rem;
    padding: .35rem 0;
  }
  .main-nav .dropdown-item {
    color: #E5E6F6;
    padding: .7rem .6rem .7rem 1.4rem;
    white-space: normal;
  }
  .main-nav .dropdown-item:hover, .main-nav .dropdown-item:focus {
    background: rgba(255, 255, 255, .12); color: #fff;
  }
  .main-nav .dropdown-item.active { background: transparent; color: var(--cainta-gold); font-weight: 600; }

  .nav-panel-foot {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
  }
  .nav-panel-emergency {
    display: block;
    margin-top: .75rem;
    padding: .75rem;
    text-align: center;
    border-radius: var(--radius-sm);
    background: rgba(179, 38, 30, .9);
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
  }
  .nav-panel-emergency:hover { background: var(--cainta-danger); color: #fff; }

  /* Scoped to the sidebar: the button next to the hamburger stays compact. */
  .nav-panel .btn-eportal { display: block; width: 100%; text-align: center; padding: .8rem 1rem; }
}

/* --------------------------------------------------------------------------
   Signed-in state and the apply readiness check
   -------------------------------------------------------------------------- */

/* The signed-in button reads as an account, not a call to action. */
.btn-eportal-signed-in {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
}
.btn-eportal-signed-in:hover, .btn-eportal-signed-in:focus {
  background: rgba(255, 255, 255, .24);
  color: #fff;
}
.eportal-name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }

.apply-check {
  position: fixed; inset: 0; z-index: 2400;
  display: grid; place-items: center;
  padding: 1rem;
  background: rgba(6, 7, 58, .7);
  overflow-y: auto;
}
.apply-check[hidden] { display: none; }

.apply-check-panel {
  width: min(560px, 100%);
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border-top: 4px solid var(--cainta-gold);
  overflow: hidden;
}
.apply-check-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.15rem;
  border-bottom: 1px solid var(--cainta-line);
  background: var(--cainta-surface);
}
.apply-check-body { padding: 1.15rem; }
.apply-check-foot {
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end;
  padding: .9rem 1.15rem;
  border-top: 1px solid var(--cainta-line);
  background: var(--cainta-surface);
}

.apply-check-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.apply-check-list li {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--cainta-line);
  font-size: .9rem;
}
.apply-check-list li:last-child { border-bottom: none; }
.apply-check-list i { flex: none; color: var(--cainta-primary); font-size: 1rem; line-height: 1.5; }

/* Stops the page behind scrolling while the dialog is open. */
.modal-open-plain { overflow: hidden; }

@media (max-width: 575.98px) {
  .apply-check { padding: 0; align-items: stretch; }
  .apply-check-panel { border-radius: 0; width: 100%; }
  .apply-check-foot { flex-direction: column-reverse; }
  .apply-check-foot .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Back to top
   -------------------------------------------------------------------------- */

.back-to-top {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 1030;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--cainta-primary);
  color: #fff;
  font-size: 1.25rem;
  box-shadow: 0 6px 18px rgba(6, 7, 58, .32);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--cainta-primary-dark); color: #fff; }
.back-to-top:focus-visible { outline: 3px solid var(--cainta-gold); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: none; transform: none; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  .back-to-top, .navbar-toggler { display: none !important; }
  .hero, .page-header { background: none !important; color: #000 !important; }
  .hero__bg, .hero__veil, .hero__seal, .page-header__seal { display: none !important; }
  .hero h1, .page-header h1, .hero p, .page-header .lead { color: #000 !important; }
  .utility-bar, .main-nav, .site-footer, .btn, .filter-bar, .skip-link, .preview-banner { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}

.hero__seal, .page-header__seal { filter: none; opacity: 0; mix-blend-mode: soft-light; }
/* ---------------------------------------------------------------------------
   CSP-safe helpers

   The Content-Security-Policy in /.htaccess sets style-src without
   'unsafe-inline', so a style="..." attribute is blocked outright and its
   declarations never reach the element. A CSP hash cannot whitelist a style
   *attribute* either - hashes only cover <style> elements - so every value
   that used to sit inline is defined here as a class instead.
   -------------------------------------------------------------------------- */

/* Entity tile hues. entity_hue() in includes/functions.php returns
   200 + (crc32(seed) % 60), so the range is exactly 200-259 and these sixty
   classes cover every value it can produce. */
.entity-hue-200 { --entity-hue: 200; }
.entity-hue-201 { --entity-hue: 201; }
.entity-hue-202 { --entity-hue: 202; }
.entity-hue-203 { --entity-hue: 203; }
.entity-hue-204 { --entity-hue: 204; }
.entity-hue-205 { --entity-hue: 205; }
.entity-hue-206 { --entity-hue: 206; }
.entity-hue-207 { --entity-hue: 207; }
.entity-hue-208 { --entity-hue: 208; }
.entity-hue-209 { --entity-hue: 209; }
.entity-hue-210 { --entity-hue: 210; }
.entity-hue-211 { --entity-hue: 211; }
.entity-hue-212 { --entity-hue: 212; }
.entity-hue-213 { --entity-hue: 213; }
.entity-hue-214 { --entity-hue: 214; }
.entity-hue-215 { --entity-hue: 215; }
.entity-hue-216 { --entity-hue: 216; }
.entity-hue-217 { --entity-hue: 217; }
.entity-hue-218 { --entity-hue: 218; }
.entity-hue-219 { --entity-hue: 219; }
.entity-hue-220 { --entity-hue: 220; }
.entity-hue-221 { --entity-hue: 221; }
.entity-hue-222 { --entity-hue: 222; }
.entity-hue-223 { --entity-hue: 223; }
.entity-hue-224 { --entity-hue: 224; }
.entity-hue-225 { --entity-hue: 225; }
.entity-hue-226 { --entity-hue: 226; }
.entity-hue-227 { --entity-hue: 227; }
.entity-hue-228 { --entity-hue: 228; }
.entity-hue-229 { --entity-hue: 229; }
.entity-hue-230 { --entity-hue: 230; }
.entity-hue-231 { --entity-hue: 231; }
.entity-hue-232 { --entity-hue: 232; }
.entity-hue-233 { --entity-hue: 233; }
.entity-hue-234 { --entity-hue: 234; }
.entity-hue-235 { --entity-hue: 235; }
.entity-hue-236 { --entity-hue: 236; }
.entity-hue-237 { --entity-hue: 237; }
.entity-hue-238 { --entity-hue: 238; }
.entity-hue-239 { --entity-hue: 239; }
.entity-hue-240 { --entity-hue: 240; }
.entity-hue-241 { --entity-hue: 241; }
.entity-hue-242 { --entity-hue: 242; }
.entity-hue-243 { --entity-hue: 243; }
.entity-hue-244 { --entity-hue: 244; }
.entity-hue-245 { --entity-hue: 245; }
.entity-hue-246 { --entity-hue: 246; }
.entity-hue-247 { --entity-hue: 247; }
.entity-hue-248 { --entity-hue: 248; }
.entity-hue-249 { --entity-hue: 249; }
.entity-hue-250 { --entity-hue: 250; }
.entity-hue-251 { --entity-hue: 251; }
.entity-hue-252 { --entity-hue: 252; }
.entity-hue-253 { --entity-hue: 253; }
.entity-hue-254 { --entity-hue: 254; }
.entity-hue-255 { --entity-hue: 255; }
.entity-hue-256 { --entity-hue: 256; }
.entity-hue-257 { --entity-hue: 257; }
.entity-hue-258 { --entity-hue: 258; }
.entity-hue-259 { --entity-hue: 259; }
/* Footer seal is a fixed 44px square; the header seal keeps the responsive
   clamp defined on .brand-seal above. */
.site-footer .brand-seal { width: 44px; height: 44px; }

/* Tracking for small uppercase headings. */
.tracking-wide { letter-spacing: .08em; }

/* Semantic text accents. */
.accent-primary { color: var(--cainta-primary); }
.accent-danger  { color: var(--cainta-danger); }
.accent-success { color: var(--cainta-success); }

/* Left-rule accents for Bootstrap border-start cards. */
.border-start-primary { border-left-color: var(--cainta-primary) !important; }
.border-start-success { border-left-color: var(--cainta-success) !important; }

/* Callout card with a heavy left rule of its own. */
.callout-danger { border-left: 4px solid var(--cainta-danger); }

/* Advisory levels - mirrors the three cases in pages/news/advisories.php. */
.advisory-danger        { border-left-color: var(--cainta-danger) !important; }
.advisory-warning       { border-left-color: var(--cainta-warning) !important; }
.advisory-info          { border-left-color: var(--cainta-primary) !important; }
.badge-advisory-danger  { background: var(--cainta-danger); }
.badge-advisory-warning { background: var(--cainta-warning); }
.badge-advisory-info    { background: var(--cainta-primary); }

/* Narrower date block for the Sangguniang Bayan session list. */
.date-block-sm { width: 56px; }

/* Standalone article thumbnail: rounded on all four corners, unlike the
   card-topped .news-thumb which is only rounded at the top. */
.news-thumb-rounded { border-radius: var(--radius); }