/* Ferragudo, public site. The taste kit (assets/taste) sits in a low cascade layer, so Bootstrap and the
   legacy app.css keep every existing page working. Inside the new chrome and the homepage (.kit) the
   element rules of Bootstrap and app.css are reverted, so the kit draws them as it was built to.
   Deal: hero photo, nav-mega, close-photo, footer-visit, surface-pairs, buttons solid, the client's logo.
   Type: Red Hat Display / Red Hat Text. Palette: the client's own blue on warm white. */
@layer taste;
@import url('../assets/taste/system.css') layer(taste);
@import url('../assets/taste/ui/cards.css') layer(taste);
@import url('../assets/taste/layout/layout.css') layer(taste);

:root {
  --p-bg: #f7f6f2; --p-surface: #eaebe8; --p-ink: #14293a; --p-muted: #5c6a76;
  --p-accent: #095695; --p-accent-ink: #f7f6f2; --p-action: #095695; --p-action-ink: #f7f6f2;
  --p-inv-bg: #14293a; --p-inv-surface: #223546; --p-inv-ink: #f7f6f2; --p-inv-muted: #99a2a8;
  --p-inv-accent: #f7f6f2; --p-inv-accent-ink: #14293a; --p-inv-action: #f7f6f2; --p-inv-action-ink: #14293a;
  --font-display: "Red Hat Display", system-ui, sans-serif;
  --font-text: "Red Hat Text", system-ui, sans-serif;
  --display-weight: 400;
  --display-tracking: -0.025em;
  --display-tracking-xl: -0.035em;
  /* the legacy names app.css and the older page styles read */
  --blue: #095695; --gray: #5c6a76; --lightgold: #eaebe8; --white: #f7f6f2;
  color-scheme: only light;
}

/* The kit's grounds, restated outside its layer: a browser extension or a user style that sets a generic
   --bg (seen: --bg #111 under a dark system theme) must never repaint the nav, panels or menus. */
html:root, html .ground-base {
  --bg: var(--p-bg); --surface: var(--p-surface); --ink: var(--p-ink); --muted: var(--p-muted);
  --accent: var(--p-accent); --accent-ink: var(--p-accent-ink); --card: var(--p-surface);
  --action: var(--p-action); --action-ink: var(--p-action-ink);
}
html .ground-surface {
  --bg: var(--p-surface); --surface: var(--p-bg); --ink: var(--p-ink); --muted: var(--p-muted);
  --accent: var(--p-accent); --accent-ink: var(--p-accent-ink); --card: var(--p-bg);
  --action: var(--p-action); --action-ink: var(--p-action-ink);
}

/* ------------------------------------------------------------------ the kit's own ground */
.kit, .kit :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, a, img, picture, figure, figcaption,
  address, blockquote, small, strong, b, label, button, time, hr, section, header, footer, nav, main, svg),
.kit :is(.btn, .nav, .card) { all: revert-layer; }
.site-design footer.closing a, .site-design footer.closing a:hover { color: inherit; }

/* ------------------------------------------------------------------ every page */
:root, html { scroll-behavior: auto; scroll-padding-top: calc(var(--nav) + 16px); scroll-padding-bottom: 104px; }
body.site-design {
  margin: 0; background: var(--p-bg); color: var(--p-ink);
  font-family: var(--font-text); font-size: 17px; line-height: 1.65; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body.site-design:not(.page-home) { padding-top: var(--nav); }
.site-design :is(h1, h2, h3, h4, h5, h6):not(.kit *) { color: var(--p-ink); text-wrap: balance; }
.site-design :is(h1, h2, h3):not(.kit *) { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); }
.site-design :is(h4, h5, h6):not(.kit *) { font-family: var(--font-text); font-weight: 500; letter-spacing: -0.01em; }
.site-design :is(strong, b):not(.kit *) { color: inherit; font-weight: 600; }
.site-design :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--p-action); outline-offset: 3px; border-radius: 2px; }
.site-design ::selection { background: color-mix(in oklab, var(--p-accent) 22%, transparent); }

/* ------------------------------------------------------------------ nav (nav-mega) */
.site-design header.nav { display: block; }
.site-design .nav__logo img { height: 44px; width: auto; }
.site-design .nav__links { justify-content: flex-start; }
.site-design .nav__link { white-space: nowrap; }
.site-design .menu-col a { line-height: 1.35; }
.site-design .menu-card { align-content: start; align-self: start; }
@media (max-width: 1023px) {
  .site-design .menu-col > .t-label[aria-hidden="true"] { display: none; }
  .site-design .nav.is-open .menu-col { gap: 0; }
  body.nav-locked :is(#cookie-consent, #openChatBtn, #chatbox) { visibility: hidden; }
}
.site-design .menu-card .panel { --p-h: 168px; overflow: clip; border-radius: var(--r-md); }
.site-design .menu-card .frame__img { transition: transform 600ms var(--ease); }
.site-design .menu-card:hover .frame__img { transform: scale(1.03); }
@media (min-width: 1024px) and (max-width: 1239px) {
  .site-design .nav__bar { gap: var(--s-5); }
  .site-design .nav__link { padding-inline: 10px; font-size: 15px; }
  .site-design .nav__logo img { height: 38px; }
}

/* ------------------------------------------------------------------ avisos à população
   The most severe open alert as a bar in its own colour above the nav; the header and every --nav
   offset (hero, sticky chapters, inner pages, anchors) grow by the bar's height while it shows. */
:root { --alert-h: 0px; }
html.has-alert { --alert-h: 44px; --nav: calc(72px + var(--alert-h)); }
@media (max-width: 639px) { html.has-alert { --alert-h: 48px; --nav: calc(56px + var(--alert-h)); } }
.site-design header.nav { top: var(--alert-h); height: calc(var(--nav) - var(--alert-h)); }
.site-alert--vermelho, .alert-item--vermelho { --a-bg: #c92a2a; --a-ink: #ffffff; }
.site-alert--laranja, .alert-item--laranja { --a-bg: #fd7e14; --a-ink: #14293a; }
.site-alert--amarelo, .alert-item--amarelo { --a-bg: #fcc419; --a-ink: #14293a; }
.site-alert {
  position: fixed; inset: 0 0 auto 0; z-index: 51; height: var(--alert-h);
  background: var(--a-bg); color: var(--a-ink); font: 500 14px/1.3 var(--font-text);
}
.site-alert[hidden] { display: none !important; }
.site-alert__bar { display: flex; align-items: center; gap: var(--s-4); height: 100%; }
.site-alert__level { flex: none; padding: 3px 10px; border-radius: 999px; background: color-mix(in oklab, var(--a-ink) 16%, transparent); font-size: 13px; font-weight: 600; }
.site-alert__open {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-4); height: 100%; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.site-alert__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.site-alert__more { flex: none; text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--a-ink) 50%, transparent); text-underline-offset: 3px; }
.site-alert__open:hover .site-alert__more { text-decoration-color: currentColor; }
.site-alert :focus-visible { outline: 2px solid var(--a-ink) !important; outline-offset: 2px; }
.site-alert__close {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: 0 -8px 0 0; padding: 0;
  border: 0; border-radius: var(--r-btn); background: none; color: inherit; cursor: pointer;
}
.site-alert__close:hover { background: color-mix(in oklab, var(--a-ink) 14%, transparent); }
@media (max-width: 639px) {
  .site-alert__bar { gap: var(--s-3); }
  .site-alert__level { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .site-alert__more { font-size: 13px; }
}
/* the full text of each alert, in the modal the bar opens: the level as a filled tag in its own colour,
   then the title and the text set as paragraphs and a list; alerts parted by a hairline */
.alert-item + .alert-item { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid color-mix(in oklab, var(--p-ink) 12%, transparent); }
.site-design .alert-item__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); margin: 0 0 var(--s-3); font: 500 14px/1.4 var(--font-text); color: var(--p-muted); }
.site-design .alert-item__level { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--a-bg); color: var(--a-ink); font: 600 13px/1 var(--font-text); }
.site-design .alert-item h3 { margin: 0 0 var(--s-4); font: var(--display-weight) 26px/1.2 var(--font-display); letter-spacing: -0.015em; color: var(--p-ink); }
.site-design .alert-item__body { font-size: 16px; line-height: 1.65; color: var(--p-ink); overflow-wrap: anywhere; }
.site-design .alert-item__body > * { margin: 0 0 var(--s-4); }
.site-design .alert-item__body > :last-child { margin-bottom: 0; }
.site-design .alert-item__body ul { padding-left: 1.25em; list-style: disc; }
.site-design .alert-item__body li + li { margin-top: var(--s-2); }
.site-design .alert-item__body li::marker { color: var(--p-muted); }
.site-design #avisos .modal-body { padding-top: var(--s-5); }

/* ------------------------------------------------------------------ buttons outside the kit */
.site-design :is(.btn-primary, .former .btn, #memberships a.blue, #memberships a.gold) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 48px; padding: 0 var(--s-5); border-radius: var(--r-btn); border: 1px solid var(--p-action);
  background: var(--p-action); color: var(--p-action-ink); font: 500 16px/1.2 var(--font-text); text-decoration: none;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.site-design :is(.btn-primary, .former .btn):hover { background: color-mix(in oklab, var(--p-action) 86%, var(--p-ink)); color: var(--p-action-ink); }
.site-design :is(.btn-primary, .former .btn):active { transform: translateY(1px) scale(.985); }
.site-design :is(.btn-outline-primary, .btn-secondary, .btn-light) { border-radius: var(--r-btn); min-height: 44px; font-weight: 500; }
.site-design .btn-outline-primary { color: var(--p-action); border-color: var(--p-action); }
.site-design .btn-outline-primary:hover { background: var(--p-action); color: var(--p-action-ink); }

/* ------------------------------------------------------------------ the report modal */
.site-design .modal-content { border: 0; border-radius: var(--r-md); background: var(--p-bg); padding: var(--s-3); }
.site-design .modal-header { border: 0; padding: var(--s-5) var(--s-5) 0; align-items: flex-start; }
.site-design .modal-title { font: var(--display-weight) 28px/1.15 var(--font-display); letter-spacing: var(--display-tracking); margin: 0; }
.site-design .modal-body { padding: var(--s-4) var(--s-5) var(--s-5); }
.site-design .modal-body > p { color: var(--p-ink); margin-bottom: var(--s-5); }
.site-design .modal .former { padding: 0; background: transparent; }

/* ------------------------------------------------------------------ forms everywhere */
.site-design :is(.form-control, .form-select) {
  min-height: 48px; padding: 12px 16px; border: 1px solid color-mix(in oklab, var(--p-ink) 22%, transparent); border-radius: var(--r-sm);
  background: #fff; color: var(--p-ink); font: 400 16px/1.4 var(--font-text); box-shadow: none;
}
.site-design :is(.form-control, .form-select):focus { border-color: var(--p-action); box-shadow: 0 0 0 3px color-mix(in oklab, var(--p-action) 18%, transparent) !important; }
.site-design textarea.form-control { min-height: 140px; }
.site-design .former label, .site-design .form-label { display: block; margin-bottom: var(--s-2); font: 500 14px/1.4 var(--font-text); color: var(--p-ink); }
.site-design .former label span { color: var(--p-action); }
.site-design .former .form-group { margin-bottom: var(--s-5); }

/* ------------------------------------------------------------------ the homepage */
.page-home .hero--photo h1 { max-width: none; font-size: clamp(44px, 3vw + 21px, 64px); line-height: 1.02; }
.page-home .hero--photo .hero__lead { font-size: 18px; max-width: none; margin-top: var(--s-5); color: var(--p-ink); }
.page-home .hero__eyebrow { font: 500 var(--t-small)/1.4 var(--font-text); color: var(--p-ink); margin-bottom: var(--s-4); }
.page-home .hero--photo .btn-row { margin-top: var(--s-6); }

/* the words on a card of the page's own white, on the right half and centred in the hero (the kit's
   box mode), with the same padding on every side */
@media (min-width: 1024px) {
  .page-home .hero--photo { background: #011844; --hgap: var(--hpadb); }
  .page-home .hero--photo[data-calm] > .wrap > .hero-text { justify-content: center; }
  .page-home .hero--photo .hero__text { padding: 40px; background: var(--p-bg); color: var(--p-ink); border-radius: var(--r-lg); }
}

/* services: the list beside the Junta's sign */
#servicos .section-head { margin-bottom: var(--s-5); }
#servicos .rows--links > li { display: block; padding: 0; }
#servicos .rows--links a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); min-height: 44px; padding: 10px 0; color: var(--ink); }
#servicos .rows--links li:first-child a { padding-top: 0; }
#servicos .rows__name { font-weight: 500; font-size: 17px; line-height: 1.35; }
#servicos .rows__name small { display: block; margin-top: 2px; font: 400 var(--t-small)/1.4 var(--font-text); color: var(--muted); }
#servicos .rows__value { color: var(--action); transition: transform var(--dur) var(--ease); }
#servicos .rows--links a:hover .rows__name { color: var(--action); }
#servicos .rows--links a:hover .rows__value { transform: translateX(4px); }
#servicos .services__more { margin-top: var(--s-5); }
#servicos .services__photo { --ratio: 100%; align-self: start; }
#servicos .services__photo .frame__img { object-position: 30% 50%; }

/* the homepage's sections take the height of what they hold, one even gap between them (no screen-sized
   empty bands under a short list) */
.page-home main > section:not(.hero) { height: auto; min-height: 0; padding-block: var(--s-9); }
/* two sections on the same ground share one gap */
.page-home main > section:not(.hero):not(.ground-surface) + section:not(.ground-surface) { padding-top: 0; }
@media (max-width: 639px) { .page-home main > section:not(.hero) { padding-block: var(--s-8); } }

/* free parking in the centre: the count now, then every street with its free places */

/* Conheça Ferragudo: four tall photograph cards in a row, the page's name under each */
.discover { row-gap: var(--s-6); }
.discover__card { display: grid; gap: var(--s-4); color: var(--ink); }
.discover__media { display: block; aspect-ratio: 4 / 5; overflow: clip; border-radius: var(--r-lg); background: var(--surface); }
.discover__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.discover__title { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); font: var(--display-weight) 26px/1.15 var(--font-display); letter-spacing: -0.015em; }
.discover__title::after { content: "→"; font: 500 20px/1 var(--font-text); color: var(--action); transition: transform var(--dur) var(--ease); }
.discover__card:hover .discover__media img { transform: scale(1.03); }
.discover__card:hover .discover__title { color: var(--action); }
.discover__card:hover .discover__title::after { transform: translateX(4px); }
@media (max-width: 1023px) { .discover > .discover__card { grid-column: auto / span 6; } }
@media (max-width: 639px) { .discover__title { font-size: 20px; } .discover { row-gap: var(--s-5); } }

/* the parish fact sheet: its arms, the official facts as a list, the pages about the vila */
.parish { align-items: start; row-gap: var(--s-7); }
.parish__arms { display: block; max-width: 260px; }
.parish__arms img { width: 100%; height: auto; transition: transform 600ms var(--ease); }
.parish__arms:hover img { transform: scale(1.03); }
.parish__facts { margin: 0; border-top: 1px solid var(--line); }
.parish__facts > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.parish__facts dt { font: 500 var(--t-small)/1.6 var(--font-text); color: var(--muted); }
.parish__facts dd { margin: 0; font-size: 18px; line-height: 1.45; color: var(--ink); }
.parish__links { display: grid; border-top: 1px solid var(--line); }
.parish__links a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 48px; padding: 10px 0; border-bottom: 1px solid var(--line); font-weight: 500; color: var(--ink); line-height: 1.3; }
.parish__links a::after { content: "→"; color: var(--action); transition: transform var(--dur) var(--ease); }
.parish__links a:hover { color: var(--action); }
.parish__links a:hover::after { transform: translateX(4px); }
@media (max-width: 1023px) {
  .parish > .parish__arms { grid-column: 1 / span 4; max-width: 200px; }
  .parish > .parish__facts, .parish > .parish__links { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .parish > .parish__arms { max-width: 150px; }
  .parish__facts > div { grid-template-columns: 1fr; gap: 2px; }
}

/* news: the notice board */
.news-list > li { border-bottom: 1px solid var(--line); }
.news-list__link {
  display: grid; grid-template-columns: 200px minmax(0, 1fr) 160px; align-items: center; gap: var(--s-6);
  padding: var(--s-5) 0; color: var(--ink);
}
.news-list__date { font: 500 var(--t-small)/1.4 var(--font-text); color: var(--muted); font-variant-numeric: tabular-nums; }
.news-list__title { font: var(--display-weight) var(--t-h3)/1.2 var(--font-display); letter-spacing: -0.015em; text-wrap: balance; }
.news-list__thumb { display: block; aspect-ratio: 16 / 9; overflow: clip; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--line); }
.news-list__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.news-list__link:hover .news-list__title { color: var(--action); }
.news-list__link:hover .news-list__thumb img { transform: scale(1.03); }

/* events: four tiles */
.events-row { row-gap: var(--s-7); }
.event-tile { --tile-ratio: 1 / 1; gap: var(--s-3); }
.event-tile .tile__media { margin-bottom: var(--s-2); background: color-mix(in oklab, var(--p-ink) 6%, var(--bg)); }
.event-tile__when { font: 500 var(--t-small)/1.4 var(--font-text); color: var(--muted); }
.event-tile__title { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: -0.01em; color: var(--ink); }
.event-tile__place { font-size: var(--t-small); color: var(--muted); }
.event-tile:hover .event-tile__title { color: var(--action); }
.event-tile:hover .tile__media > img { transform: scale(1.03); }
/* an upload smaller than its frame is shown at its own size, never blown up */
.event-tile .tile__media--small { display: grid; place-items: center; }
.event-tile .tile__media--small > img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.home-empty { padding: var(--s-5) var(--s-6); border-radius: var(--r-md); background: var(--surface); max-width: 62ch; }

/* ------------------------------------------------------------------ the footer (close-photo, footer-visit) */
/* the footer takes its own height: the close, the panorama at its own shape, the contacts and the links */
.site-design footer.closing { height: auto; min-height: 0; background: var(--p-bg); color: var(--p-ink); padding-top: var(--s-8); }
.site-design footer.closing > .wrap { height: auto; grid-template-rows: auto auto; }
/* a phone: the kit gives the photo close a screen of its own (144px between it and the address); here the
   footer is one column that reads on, so the photo and the address sit a normal step apart */
@media (max-width: 639px) { .site-design footer.closing > .wrap { row-gap: var(--s-7); } }
.site-design .closing__cta > .close__media { flex: none; min-height: 0; aspect-ratio: 2400 / 877; }
.site-design .closing__cta .t-lead { color: var(--ink); max-width: 52ch; }
.site-design .close__media > img { object-position: 50% 60%; }
.site-design .footer__address { font-size: clamp(30px, 1.9vw + 18px, 44px); max-width: 18ch; }
.site-design .footer__detail { color: var(--muted); }
.site-design .footer__contacts { display: grid; gap: var(--s-3); margin: 0; }
.site-design .footer__contacts > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: var(--s-4); min-height: 44px; padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.site-design .footer__contacts dt { font: 500 var(--t-small)/1.6 var(--font-text); color: var(--muted); }
.site-design .footer__contacts dd { margin: 0; font-size: var(--t-lead); line-height: 1.4; }
.site-design .footer__contacts dd a { display: inline-flex; align-items: center; min-height: 44px; }
.site-design .footer__visit { align-items: start; }
.site-design .footer__contacts a { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.site-design .footer__contacts a:hover { text-decoration-color: currentColor; color: var(--action); }
.site-design .footer__dir { padding-top: var(--s-6); border-top: 1px solid var(--line); row-gap: var(--s-6); }
.site-design .footer__col h3 { font: 500 var(--t-small)/1.4 var(--font-text); letter-spacing: 0; color: var(--muted); margin-bottom: var(--s-4); }
.site-design .footer__col ul { display: grid; gap: var(--s-2); font-size: 15px; }
.site-design .footer__col a:hover { color: var(--action); }
.site-design .footer__legal { font-size: var(--t-small); color: var(--muted); }
.site-design .footer__legal a { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
@media (max-width: 1023px) {
  .site-design .footer__visit > * { grid-column: 1 / -1; }
  .site-design .footer__dir > .footer__col { grid-column: auto / span 6; }
}

/* ------------------------------------------------------------------ cookie notice and assistant
   Both are fixed at the foot; the footer pads its end so neither covers its last line. */
.site-design footer.closing { padding-bottom: calc(80px + var(--bar)); }
.site-design footer.closing:has(> #cookie-consent:not([hidden])) { padding-bottom: calc(128px + var(--bar)); }
#cookie-consent {
  position: fixed; left: 16px; bottom: 16px; z-index: 60; display: flex; align-items: center; gap: var(--s-4);
  width: min(560px, calc(100% - 32px)); padding: 12px 12px 12px 20px; background: var(--p-bg); color: var(--p-ink);
  border: 1px solid color-mix(in oklab, var(--p-ink) 16%, transparent); border-radius: var(--r-md); font: 400 14px/1.5 var(--font-text);
}
#cookie-consent[hidden] { display: none !important; }
#cookie-consent p { margin: 0; flex: 1; }
#cookie-consent a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
#cookie-consent button, #openChatBtn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px;
  border: 0; border-radius: var(--r-btn); background: var(--p-action); color: var(--p-action-ink); font: 500 15px/1 var(--font-text); cursor: pointer;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
:is(#cookie-consent button, #openChatBtn):hover { background: color-mix(in oklab, var(--p-action) 86%, var(--p-ink)); }
:is(#cookie-consent button, #openChatBtn):active { transform: translateY(1px) scale(.985); }
#openChatBtn { position: fixed; right: 16px; bottom: 16px; z-index: 55; }
#chatbox { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: min(360px, calc(100% - 32px)); border: 1px solid color-mix(in oklab, var(--p-ink) 12%, transparent); border-radius: var(--r-md); overflow: hidden; background: var(--p-bg); }
#chatbox .card-header { background: var(--p-surface); color: var(--p-ink); border-bottom: 1px solid color-mix(in oklab, var(--p-ink) 12%, transparent); font: 500 15px/1.3 var(--font-text); padding: 12px 16px; }
#chatbox .card-footer { background: var(--p-bg); }
#chatbox .btn-light { border-radius: var(--r-btn); min-height: 36px; }

/* ------------------------------------------------------------------ inner pages */
.site-design #inner-hero { padding: var(--s-5) 0 0; background: var(--p-bg); }
.site-design #inner-hero > .container { width: min(100% - 2 * var(--gut), var(--container)); max-width: none; }
.site-design #inner-hero .row { margin: 0; }
.site-design #inner-hero .row > * { padding: 0; }
.site-design #inner-hero img { display: block; width: 100%; height: clamp(200px, 22vw, 340px); object-fit: cover; object-position: 50% 72%; border-radius: var(--r-lg); }
.site-design #inner-hero .crumble {
  position: static; display: flex; flex-wrap: wrap; gap: 4px 8px; margin: var(--s-5) 0 0 !important; padding: 0; background: none; border-radius: 0;
  font: 400 var(--t-small)/1.5 var(--font-text); color: var(--p-muted);
}
.site-design #inner-hero .crumble a { color: var(--p-muted); text-decoration: none; }
.site-design #inner-hero .crumble a:hover { color: var(--p-action); text-decoration: underline; }
.site-design :is(#page-content, #page-content-even, #editorial-page, #events-page, #contacts_page, #page-news-inner) { padding-block: var(--s-8) var(--s-9); }
.site-design #inner-hero + :is(#page-content, #editorial-page, #events-page, #contacts_page, #page-news-inner) { padding-top: var(--s-7); }
.site-design :is(#page-content, #page-content-even, #editorial-page, #events-page, #contacts_page, #page-news-inner) > .container,
.site-design main#page-content > .container { width: min(100% - 2 * var(--gut), var(--container)); max-width: none; }
.site-design #page-content-even { background: var(--p-surface); }
.site-design :is(#page-content, #page-content-even, #editorial-page, #events-page, #contacts_page, #page-news-inner) h1 {
  font-size: clamp(36px, 2.6vw + 18px, 60px); line-height: 1.05; letter-spacing: var(--display-tracking-xl); margin: 0 0 var(--s-6); color: var(--p-ink); text-align: left;
}
.site-design :is(#page-content, #page-content-even, #editorial-page, #events-page, #contacts_page, #page-news-inner) h2 {
  font-size: clamp(26px, 1.2vw + 18px, 36px); line-height: 1.15; margin: var(--s-7) 0 var(--s-4); color: var(--p-ink); text-align: left;
}
.site-design :is(#page-content, #page-content-even, #editorial-page, #events-page, #contacts_page, #page-news-inner) h3 { font-size: clamp(21px, .6vw + 17px, 26px); line-height: 1.25; margin: var(--s-6) 0 var(--s-3); color: var(--p-ink); }
.site-design :is(#page-content, #page-content-even, #editorial-page, #events-page, #contacts_page, #page-news-inner) :is(h4, h5) { font-size: 19px; line-height: 1.35; margin: var(--s-5) 0 var(--s-2); color: var(--p-ink); }
.site-design :is(#page-content, #page-content-even, #page-news-inner, #contacts_page) :is(p, li) { font-size: 17px; line-height: 1.7; color: var(--p-ink); text-align: left; }
.site-design :is(#page-content, #page-content-even, #page-news-inner) p { max-width: 70ch; }
.site-design :is(#page-content, #page-content-even, #page-news-inner, #contacts_page, #editorial-page, #events-page) a:not(.btn, .documents-filter, .events-view-switch a, .documents-row, .doc-hub__card, .doc-hub a, .documents-back a, .info-links a, .agora-btn) { color: var(--p-action); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.site-design #page-content .public-page-heading { margin-bottom: var(--s-7); }
.site-design #page-content .public-page-heading h1 { margin-bottom: var(--s-4); }
.site-design #page-content .public-page-heading p { font-size: var(--t-lead); color: var(--p-muted); max-width: 60ch; }
.site-design #page-content img { border-radius: var(--r-md); }
.site-design .public-skip { display: none; }

/* lists of news and events on their own pages */
.site-design .editorial-card { margin-bottom: var(--s-7); background: transparent; border: 0; box-shadow: none; }
.site-design .editorial-card > a { display: block; color: var(--p-ink); text-decoration: none; }
.site-design .editorial-card img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-md); margin-bottom: var(--s-4); background: #fff; }
.site-design .editorial-card h4 { font: 500 20px/1.3 var(--font-text); color: var(--p-ink); margin: var(--s-2) 0 0; }
.site-design .editorial-card p { font-size: var(--t-small); color: var(--p-muted); margin: 0; }
.site-design .editorial-card > a:hover h4 { color: var(--p-action); }
@media (hover: hover) and (pointer: fine) {
  .site-design .editorial-card > a img { transition: transform 600ms var(--ease); }
  .site-design .editorial-card { transition: transform 180ms var(--ease); }
  .site-design .editorial-card:hover { transform: translateY(-2px); }
}

/* documents, accordions, tables */
.site-design .accordion-item { background: transparent; border: 0; border-bottom: 1px solid color-mix(in oklab, var(--p-ink) 12%, transparent); border-radius: 0 !important; }
.site-design .accordion-button { padding: var(--s-5) 0; background: transparent; color: var(--p-ink); font: 500 19px/1.35 var(--font-text); box-shadow: none !important; }
.site-design .accordion-button:not(.collapsed) { color: var(--p-action); background: transparent; }
.site-design .accordion-body { padding: 0 0 var(--s-5); }
/* light everywhere: the calendar's weekdays take the surface, not a solid fill (documents: css/document-pages.css) */
.site-design #events-page .events-calendar-weekdays { background: var(--p-surface); color: var(--p-ink); font-weight: 500; border-radius: var(--r-md) var(--r-md) 0 0; }
/* the events page's list / calendar switch: a segmented control, the current view raised in white */
.site-design #events-page .events-view-switch {
  display: inline-flex; flex-wrap: nowrap; gap: 4px; margin: 0 0 var(--s-6); padding: 4px;
  border-radius: 999px; background: var(--p-surface);
}
.site-design #events-page .events-view-switch a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 20px; border: 0;
  border-radius: 999px; background: transparent; color: var(--p-muted); font: 500 15px/1 var(--font-text); text-decoration: none;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.site-design #events-page .events-view-switch a:hover { background: transparent; color: var(--p-ink); text-decoration: none; }
.site-design #events-page .events-view-switch a[aria-current="page"] { background: #fff; color: var(--p-ink); box-shadow: 0 1px 2px color-mix(in oklab, var(--p-ink) 14%, transparent), 0 0 0 1px color-mix(in oklab, var(--p-ink) 6%, transparent); }
.site-design #events-page .events-view-switch a:focus-visible { outline: 2px solid var(--p-action); outline-offset: 2px; }
.site-design #events-page .events-calendar-event { border-left: 0; border-radius: var(--r-sm); background: color-mix(in oklab, var(--p-action) 9%, var(--p-bg)); color: var(--p-action); font-weight: 500; }
.site-design #events-page a.events-calendar-event:hover { background: color-mix(in oklab, var(--p-action) 16%, var(--p-bg)); }
.site-design .table { color: var(--p-ink); --bs-table-bg: transparent; }
.site-design .table > :not(caption) > * > * { padding: 14px 12px; border-bottom-color: color-mix(in oklab, var(--p-ink) 12%, transparent); }
.site-design :is(.document-card, .community-card, .transparency-minutes) { border-radius: var(--r-md); box-shadow: none; }
.site-design .contactslist li { padding-block: var(--s-4); border-bottom: 1px solid color-mix(in oklab, var(--p-ink) 12%, transparent); }
.site-design .contactslist a { overflow-wrap: anywhere; }
.site-design .former { background: var(--p-surface); padding: var(--s-6); border-radius: var(--r-md); }
.site-design .wow { visibility: visible !important; animation: none !important; }

/* ------------------------------------------------------------------ tablet and phone */
@media (max-width: 1023px) {
  .news-list__link { grid-template-columns: minmax(0, 1fr) 140px; gap: var(--s-2) var(--s-5); }
  .news-list__date { grid-column: 1; grid-row: 1; }
  .news-list__title { grid-column: 1; grid-row: 2; }
  .news-list__thumb { grid-column: 2; grid-row: 1 / span 2; }
  .events-row > .event-tile { grid-column: auto / span 6; }
  #servicos .services__photo { --ratio: 62%; }
}
@media (max-width: 639px) {
  body.site-design { font-size: 16px; }
  .site-design .nav__logo img { height: 36px; }
  .site-design .nav__bar { gap: var(--s-4); }
  /* the hero is as tall as its photo and words: the kit's full-screen minimum left an empty band on tall phones */
  .page-home main > .hero--photo { --photo: 42svh; min-height: 0; }
  .page-home .hero--photo h1 { font-size: clamp(34px, 9.6vw, 42px); }
  .page-home .hero--photo .hero__lead { font-size: 17px; margin-top: var(--s-4); }
  .page-home .hero--photo .btn-row { margin-top: var(--s-5); }
  .page-home .hero__eyebrow { margin-bottom: var(--s-3); }
  .news-list__link { grid-template-columns: minmax(0, 1fr) 96px; padding: var(--s-4) 0; }
  .news-list__title { font-size: 20px; }
  .events-row { row-gap: var(--s-6); }
  .events-row > .event-tile { grid-column: auto / span 6; }
  .event-tile__title { font-size: 17px; }
  #servicos .services__photo { --ratio: 70%; }
  .site-design .footer__dir > .footer__col { grid-column: auto / span 6; }
  .site-design .closing__cta > .close__media { flex: none; aspect-ratio: 4 / 3; }
  .site-design .footer__col ul { gap: 0; }
  .site-design .footer__col li a { min-height: 44px; display: flex; align-items: center; line-height: 1.3; }
  .site-design .footer__dir { row-gap: var(--s-5); }
  .site-design footer.closing:has(> #cookie-consent:not([hidden])) { padding-bottom: calc(176px + var(--bar)); }
  .site-design .close__media > img { object-position: 22% 55%; }
  .site-design .footer__contacts > div { grid-template-columns: 1fr; gap: 2px; }
  .site-design .footer__legal { flex-direction: column; align-items: flex-start; }
  #cookie-consent { left: 12px; right: 12px; bottom: 12px; width: auto; flex-wrap: wrap; }
  #openChatBtn { bottom: 12px; right: 12px; }
  .site-design #inner-hero img { height: 200px; border-radius: var(--r-md); }
}
@media (max-width: 479px) { .site-design .nav:not(.is-open) .nav__actions { display: none; } .site-design .nav:not(.is-open) .nav__toggle { margin-left: auto; } }
@media (prefers-reduced-motion: reduce) {
  .site-design *, .site-design *::before, .site-design *::after { transition: none !important; }
}
@media print {
  .site-design > :is(header.nav, footer.closing, #cookie-consent, #chat-container) { display: none !important; }
  body.site-design { padding-top: 0; background: #fff; }
}

/* Qualidade do ar: index levels of the QualAr scale, Muito bom to Mau (homepage summary, Ferragudo agora) */
.air-level-1 { --air: #2f9e44; } .air-level-2 { --air: #74b816; } .air-level-3 { --air: #f08c00; } .air-level-4 { --air: #e8590c; } .air-level-5 { --air: #c92a2a; }
.page-home main > section.ground-surface + section.ground-surface { padding-top: 0; }

/* Informações e Regulamentos: service tiles and the useful phone numbers */
.site-design #page-content .info-block + .info-block { margin-top: var(--s-8); }
.site-design #page-content .info-block h2 { margin: 0 0 var(--s-5); }
.site-design #page-content .info-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.site-design #page-content .info-links li { margin: 0; }
.site-design #page-content .info-links a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); height: 100%; min-height: 72px; padding: 16px 20px 16px 24px;
  border-radius: var(--r-md); background: color-mix(in oklab, var(--p-surface) 55%, var(--p-bg));
  color: var(--p-ink); font: 500 16px/1.35 var(--font-text); text-decoration: none; transition: background .2s ease;
}
.site-design #page-content .info-links a svg { width: 18px; height: 18px; flex: none; color: var(--p-muted); transition: transform .2s ease, color .2s ease; }
.site-design #page-content .info-links a:hover { background: var(--p-surface); }
.site-design #page-content .info-links a:hover svg { color: var(--p-ink); transform: translateX(3px); }
.site-design #page-content .info-phones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s-6); margin: 0; padding: 0; list-style: none; }
.site-design #page-content .info-phones li { display: grid; gap: 4px; align-content: start; margin: 0; padding: 16px 0; border-top: 1px solid color-mix(in oklab, var(--p-ink) 12%, transparent); font-size: 15px; line-height: 1.4; color: var(--p-ink); }
.site-design #page-content .info-phones a { justify-self: start; color: var(--p-action); font-variant-numeric: tabular-nums; }
@media (max-width: 1023px) { .site-design #page-content .info-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-design #page-content .info-phones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .site-design #page-content .info-links, .site-design #page-content .info-phones { grid-template-columns: 1fr; } }

/* News and event articles: a reading title, not a display headline */
body.site-design #page-news-inner h1 { font-size: clamp(28px, 1vw + 20px, 38px); line-height: 1.18; letter-spacing: -0.02em; margin: 0 0 var(--s-5); text-wrap: balance; }
body.site-design #page-news-inner .article-date { margin: 0 0 var(--s-3); font-size: 15px; color: var(--p-muted); }
body.site-design #page-news-inner .article-facts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 var(--s-6); padding: 0; list-style: none; }
body.site-design #page-news-inner .article-facts li { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; line-height: 1.4; color: var(--p-ink); }
body.site-design #page-news-inner .article-facts img { display: block; width: 18px; height: 18px; border-radius: 0; }
body.site-design #page-news-inner .article-facts i { font-size: 18px; line-height: 1; color: var(--p-ink); }
body.site-design #page-news-inner .article-facts i::before { margin: 0; font-size: 18px; }

/* Sections focused by the skip link or a #fragment are landing points, not controls: no ring around the whole page */
.site-design :is(main, section, article, div)[tabindex="-1"]:focus { outline: none; }
/* a region swapping in place (js/swap-region.js) dims while the next view loads */
.site-design [data-swap] { transition: opacity .15s ease; }
.site-design [data-swap][aria-busy="true"] { opacity: .5; }
/* calendar month steps: the same neutral pills as the rest of the site */
.site-design #events-page .events-month-navigation a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px;
  border: 1px solid color-mix(in oklab, var(--p-ink) 18%, transparent); border-radius: 999px;
  background: var(--p-bg); color: var(--p-ink); font: 500 15px/1 var(--font-text); text-decoration: none;
}
.site-design #events-page .events-month-navigation a:hover { border-color: var(--p-ink); text-decoration: none; }

/* Reportar ocorrência: optional photo, a dashed drop zone that turns into a preview */
.site-design .former .form-optional { color: var(--p-muted); font-weight: 400; }
.site-design .former .form-hint { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--p-muted); }
.site-design #ocorrencias textarea.form-control { min-height: 120px; }
.site-design .photo-field {
  position: relative; display: flex; align-items: center; min-height: 88px; padding: 14px 16px;
  border: 1.5px dashed color-mix(in oklab, var(--p-ink) 24%, transparent); border-radius: var(--r-md);
  background: #fff; color: var(--p-ink); transition: border-color .15s ease, background .15s ease;
}
.site-design .photo-field:hover, .site-design .photo-field.is-over { border-color: var(--p-action); background: color-mix(in oklab, var(--p-action) 5%, #fff); }
.site-design .photo-field:focus-within { border-color: var(--p-action); box-shadow: 0 0 0 3px color-mix(in oklab, var(--p-action) 18%, transparent); }
.site-design .photo-field.has-file { border-style: solid; border-color: color-mix(in oklab, var(--p-ink) 14%, transparent); }
/* the real input covers the zone while it is empty, so a click or tap anywhere opens the camera or gallery */
.site-design .photo-field__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.site-design .photo-field.has-file .photo-field__input { pointer-events: none; }
.site-design .photo-field__empty { display: flex; align-items: center; gap: 14px; pointer-events: none; }
.site-design .photo-field__empty svg { width: 28px; height: 28px; flex: none; color: var(--p-action); }
.site-design .photo-field__empty > span { display: grid; gap: 2px; }
.site-design .photo-field__empty strong { font: 500 15px/1.3 var(--font-text); color: var(--p-ink); }
.site-design .photo-field__empty span span { font-size: 13px; line-height: 1.35; color: var(--p-muted); }
.site-design .photo-field__chosen { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; width: 100%; min-width: 0; }
.site-design .photo-field__chosen[hidden], .site-design .photo-field__empty[hidden] { display: none; }
.site-design .photo-field__thumb { width: 60px; height: 60px; flex: none; object-fit: cover; border-radius: var(--r-sm); background: var(--p-surface); }
.site-design .photo-field__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--p-ink); }
.site-design .photo-field__remove {
  flex: none; min-height: 36px; padding: 0 14px; border: 1px solid color-mix(in oklab, var(--p-ink) 18%, transparent); border-radius: 999px;
  background: var(--p-bg); color: var(--p-ink); font: 500 14px/1 var(--font-text); cursor: pointer;
}
.site-design .photo-field__remove:hover { border-color: var(--p-ink); }

/* Heráldica: the two dates as facts under the title, the three emblems on even tiles */
.site-design #page-content .heraldry-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-6); max-width: 960px; margin: 0; }
.site-design #page-content .heraldry-facts > div { padding: var(--s-4) 0; border-top: 1px solid color-mix(in oklab, var(--p-ink) 12%, transparent); }
.site-design #page-content .heraldry-facts dt { margin: 0 0 4px; font: 400 14px/1.4 var(--font-text); color: var(--p-muted); }
.site-design #page-content .heraldry-facts dd { margin: 0; font: 500 18px/1.4 var(--font-text); color: var(--p-ink); }
.site-design #page-content .heraldry-items { margin-top: var(--s-8); row-gap: var(--s-7); }
.site-design #page-content .heraldry-items .col-md-4 > .row { margin: 0 0 var(--s-5); padding: var(--s-6) 0; border-radius: var(--r-md); background: color-mix(in oklab, var(--p-surface) 55%, var(--p-bg)); }
.site-design #page-content .heraldry-items .col-md-4 > .row img { display: block; height: 200px; width: 100%; object-fit: contain; border-radius: 0; }
.site-design #page-content .heraldry-items h4 { margin: 0 0 var(--s-3); }
@media (max-width: 767px) { .site-design #page-content .heraldry-facts { grid-template-columns: 1fr; } }

/* Homepage: Ferragudo agora, four tall photo cards with the reading over the picture */
.agora-home { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.agora-home li { margin: 0; }
.agora-card {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 3 / 4; min-height: 340px; padding: 22px; overflow: hidden; border-radius: 20px;
  background: #1d2b3a; color: #fff; text-decoration: none;
}
.agora-card__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.agora-card .sky-canvas { z-index: 0; }   /* the rain falls over the scrim, the words over the rain */
.agora-card__label, .agora-card__body { position: relative; z-index: 1; }
/* the scrim: dark at the foot where the reading sits, clear at the top */
.agora-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgb(9 20 33 / .88) 0%, rgb(9 20 33 / .55) 38%, rgb(9 20 33 / .08) 70%, rgb(9 20 33 / .28) 100%);
}
.agora-card:hover .agora-card__img { transform: scale(1.05); }
.agora-card:focus-visible { outline: 3px solid var(--p-action); outline-offset: 3px; }
.agora-card__label {
  align-self: flex-start; padding: 7px 12px; border-radius: 999px; background: rgb(255 255 255 / .16);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font: 500 13px/1 var(--font-text); letter-spacing: .01em;
}
.agora-card__body { display: grid; gap: 8px; }
.agora-card__value { display: flex; align-items: center; gap: 12px; font: 300 56px/1 var(--font-display); letter-spacing: -0.04em; color: #fff; font-variant-numeric: tabular-nums; }
.agora-card__value--text { font-size: 40px; font-weight: 400; letter-spacing: -0.025em; }
.agora-card__value--free { color: #8ce99a; }
.agora-card__icon { width: 46px; height: 46px; flex: none; color: #fff; stroke-width: 1.4; }
.agora-card__dot { width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--air); box-shadow: 0 0 0 6px color-mix(in oklab, var(--air) 35%, transparent); }
.agora-card__sub { font-size: 15px; line-height: 1.4; color: rgb(255 255 255 / .82); }
.agora-card__pill { justify-self: start; padding: 7px 12px; border-radius: 999px; background: var(--lv); color: var(--lv-ink); font: 600 12px/1 var(--font-text); letter-spacing: .04em; text-transform: uppercase; }
.agora-card--warn { --lv: #f2c94c; --lv-ink: var(--p-ink); }
.agora-card--laranja { --lv: #f08c00; }
.agora-card--vermelho { --lv: #e03131; --lv-ink: #fff; }
/* a warning tints its picture with its colour */
.agora-card--warn::after { background: linear-gradient(to top, color-mix(in oklab, var(--lv) 45%, rgb(9 20 33)) 0%, color-mix(in oklab, var(--lv) 30%, rgb(9 20 33 / .5)) 42%, rgb(9 20 33 / .1) 75%, rgb(9 20 33 / .3) 100%); }
@media (max-width: 1023px) { .agora-home { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* phones: the cards slide sideways, one and a bit in view */
@media (max-width: 639px) {
  .agora-home {
    display: flex; gap: 12px; margin-inline: calc(-1 * var(--gut)); padding: 0 var(--gut) 4px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none;
  }
  .agora-home::-webkit-scrollbar { display: none; }
  .agora-home li { flex: none; width: 72%; scroll-snap-align: start; }
  .agora-card { min-height: 0; }
  .agora-card__value { font-size: 48px; }
  .agora-card__value--text { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) { .agora-card__img { transition: none; } .agora-card:hover .agora-card__img { transform: none; } }

/* the animated sky behind a weather card (js/weather-sky.js) */
.sky-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }