/* corpusalut.pt — restoration UI layer.
   The archived theme drove every interactive element through jQuery + owl.carousel +
   bootstrap.js. jQuery itself was NEVER archived (no capture of wp-includes/js/jquery/jquery.min.js),
   so on the restored site that whole stack threw "jQuery is not defined" and nothing initialised:
   43 carousels rendered as vertically stacked slides, the nav dropdowns never opened and the
   burger did nothing.

   This file rebuilds the carousels in pure CSS (flex + scroll-snap), so they are working,
   swipeable, keyboard-scrollable carousels even with JavaScript disabled. cs-ui.js then adds
   the arrows, dots and autoplay on top. Item counts per breakpoint are copied exactly from the
   theme's own owlCarousel() options in custom-theme/js/plugins.js. */

/* ---------- carousels ---------- */
.owl-slider, .owl-thumbnail, .owl-footer, .owl-blog {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--cs-gap, 15px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
  margin-bottom: 0;
  /* Do NOT stretch the slides. Stretching gives each slide a *definite* height, and the cards
     nest a height:100%-style image block plus a float:left text block: with a definite parent
     height the float is pushed past the bottom edge and the title + excerpt disappear under
     overflow. owl's own .owl-item was auto-height, so flex-start reproduces the original box. */
  align-items: flex-start;
}
.owl-slider::-webkit-scrollbar,
.owl-thumbnail::-webkit-scrollbar,
.owl-footer::-webkit-scrollbar,
.owl-blog::-webkit-scrollbar { display: none; height: 0; }

.owl-slider > *, .owl-thumbnail > *, .owl-footer > *, .owl-blog > * {
  flex: 0 0 calc((100% - (var(--cs-n, 1) - 1) * var(--cs-gap, 15px)) / var(--cs-n, 1));
  max-width: calc((100% - (var(--cs-n, 1) - 1) * var(--cs-gap, 15px)) / var(--cs-n, 1));
  scroll-snap-align: start;
  position: relative;   /* hero slides contain .position-absolute-b children */
  min-width: 0;
  float: none;
  /* The blog/thumbnail cards nest bootstrap .col-xs-12 children, which are float:left. owl used
     to wrap each slide in .owl-item and the theme relied on that for float containment; without
     it the slide collapsed to the height of its image and the title + excerpt spilled out below,
     invisible. flow-root establishes a block formatting context, so the slide contains them. */
  display: flow-root;
}

/* .owl-slider — plugins.js: items 1, nav true, dots false, autoplay 4000 */
.owl-slider { --cs-n: 1; --cs-gap: 0px; }

/* .owl-thumbnail — plugins.js: 3 / 4 (480) / 5 (768) / 6 (992) / 7 (1280), margin 15 */
.owl-thumbnail { --cs-n: 3; --cs-gap: 15px; }
@media (min-width: 480px)  { .owl-thumbnail { --cs-n: 4; } }
@media (min-width: 768px)  { .owl-thumbnail { --cs-n: 5; } }
@media (min-width: 992px)  { .owl-thumbnail { --cs-n: 6; } }
@media (min-width: 1280px) { .owl-thumbnail { --cs-n: 7; } }

/* .owl-footer — plugins.js: items 2, margin 15 */
.owl-footer { --cs-n: 2; --cs-gap: 15px; }

/* .owl-blog — plugins.js: 2 / 3 (480) / 3 (768) / 3 (992) / 4 (1280), margin 15 */
.owl-blog { --cs-n: 2; --cs-gap: 15px; }
@media (min-width: 480px)  { .owl-blog { --cs-n: 3; } }
@media (min-width: 1280px) { .owl-blog { --cs-n: 4; } }

/* the hero slider is full-bleed: its slides must not inherit bootstrap gutters */
.owl-slider > .item { padding: 0; }

/* ---------- carousel controls (added by cs-ui.js) ---------- */
.cs-car-wrap { position: relative; }
.cs-car-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 20; border: 0; cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .85); color: #17538f;
  font-size: 20px; line-height: 44px; text-align: center; padding: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  transition: background .2s ease, opacity .2s ease;
}
.cs-car-btn:hover, .cs-car-btn:focus { background: #fff; outline: 2px solid #17538f; outline-offset: 2px; }
.cs-car-btn[disabled] { opacity: .25; cursor: default; }
.cs-car-prev { left: 10px; }
.cs-car-next { right: 10px; }
.cs-car-wrap--slider .cs-car-btn { width: 52px; height: 52px; line-height: 52px; font-size: 24px; }
.cs-car-wrap--slider .cs-car-prev { left: 24px; }
.cs-car-wrap--slider .cs-car-next { right: 24px; }

/* Blog cards are image-on-top, title + excerpt below. Centring the arrows on the whole card put
   them squarely over the headline; sit them on the image band instead, where they cover artwork
   rather than words. */
.cs-car-wrap--blog .cs-car-btn { top: 28%; transform: none; }

/* On a phone there is no artwork to spare: the band shows two cards across a 360px row, so both
   round buttons landed squarely on the two article photographs and each picture carried a white
   disc. Same remedy as the Acordos strip below - a real gutter on the wrap, so the track clips
   short of the buttons and they sit beside the cards instead of on them. */
@media (max-width: 767px) {
  .cs-car-wrap--blog { padding-left: 40px; padding-right: 40px; }
  .cs-car-wrap--blog .cs-car-prev { left: 2px; }
  .cs-car-wrap--blog .cs-car-next { right: 2px; }
}

.cs-car-dots {
  position: absolute; left: 0; right: 0; bottom: 18px;
  text-align: center; z-index: 20; line-height: 0;
}
.cs-car-dot {
  display: inline-block; width: 12px; height: 12px; margin: 0 5px; padding: 0;
  border: 2px solid #fff; border-radius: 50%; background: transparent;
  cursor: pointer; transition: background .2s ease;
}
.cs-car-dot[aria-current="true"], .cs-car-dot:hover { background: #fff; }
.cs-car-dot:focus { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 767px) {
  .cs-car-btn { width: 36px; height: 36px; line-height: 36px; font-size: 17px; }
  .cs-car-wrap--slider .cs-car-btn { width: 40px; height: 40px; line-height: 40px; font-size: 19px; }
  .cs-car-wrap--slider .cs-car-prev { left: 8px; }
  .cs-car-wrap--slider .cs-car-next { right: 8px; }
}

/* ---------- navigation: burger + dropdowns (bootstrap 3 markup, no bootstrap.js) ---------- */

/* The header has to be ABOVE the document, and on 21 of 38 pages it was not.
   The theme overrides bootstrap's own `.navbar-fixed-top{z-index:1030}` down to `z-index:2`, while
   every inner-page content band carries the theme utility `.z-2` (`position:relative;z-index:2`) or
   `.z-3`. Equal z-index, later in the DOM: on the service/article template - all 15 fisioterapia
   leaves, the 5 especialidades-complementares leaves and a-corpus-salut/corpo-clinico - the
   content section painted over the fixed header.
   At rest nothing showed, because the header sits above the section's top edge. It showed the
   moment a menu opened: at 1440 the blue `.cs-aside-contact` card was drawn on top of the open
   'A Corpus Salut' dropdown, and at 390 the whole burger panel went behind the banner and the card.
   elementFromPoint at the centre of every menu item returned the page, not the link - a visitor
   clicking 'Parceiros' hit the aside's `tel:918 508 105` and DIALLED the clinic.
   Restore bootstrap's own value so the fixed bar and its panels outrank all page content.
   The selector has to be the theme's own `nav.navbar.navbar-fixed-top` - a bare `.navbar-fixed-top`
   loses on specificity even though this file loads last. */
nav.navbar.navbar-fixed-top { z-index: 1030; }

.navbar-collapse.collapse:not(.in) { display: none; }
@media (min-width: 768px) {
  .navbar-collapse.collapse:not(.in) { display: block !important; }
  .navbar-collapse { height: auto !important; overflow: visible !important; }
}
@media (max-width: 767px) {
  .navbar-collapse.collapse.in { display: block !important; height: auto !important; overflow: visible; }
  .navbar-ex1-collapse { clear: both; float: none; width: 100%; max-height: 80vh; overflow-y: auto; }
  .navbar-ex1-collapse .nav { float: none; margin: 0; }
  .navbar-ex1-collapse .nav > li { float: none; }
  .navbar-ex1-collapse .nav > li > a { padding: 12px 15px; }
  /* an open submenu must push the list, not overlay it, on a phone */
  .navbar-ex1-collapse .dropdown-menu {
    position: static; float: none; width: auto; margin: 0;
    background: rgba(0, 0, 0, .04); border: 0; box-shadow: none;
  }
  .navbar-ex1-collapse .dropdown-menu > li > a { padding: 10px 15px 10px 30px; }
  .navbar-toggle { display: block; }
}

/* dropdowns: click-driven via cs-ui.js, hover as a desktop convenience */
.dropdown-menu { display: none; }
.open > .dropdown-menu, .dropdown.cs-open > .dropdown-menu { display: block; }
@media (min-width: 768px) {
  .navbar-nav > li.dropdown:hover > .dropdown-menu { display: block; }
}
.dropdown-toggle .caret { transition: transform .2s ease; }
.dropdown.cs-open > .dropdown-toggle .caret { transform: rotate(180deg); }

/* ---------- contact form ---------- */
.cs-form-note { margin: 12px 0 0; padding: 10px 14px; border-radius: 3px; font-size: 15px; }
.cs-form-note:empty { display: none; }
.cs-form-ok { background: #e8f1fa; color: #0e3a66; border-left: 4px solid #00539f; }
.cs-form-err { background: #fdecea; color: #8a1c13; border-left: 4px solid #c0392b; }

/* The full-bleed map band. The theme fixes it at 450px, and it must actually contain something.
   It held an openstreetmap.org/export/embed.html IFRAME until 2026-08-18; that was a live
   third-party request fired on the HOMEPAGE of a site whose own policy page says none is made, so
   it is now a picture this site hosts. Height stays exactly 450px - the credit line sits INSIDE
   the band, bottom-left, rather than under it, so nothing below the map moves. object-fit:cover
   crops the 2016x630 image to whatever the viewport is wide, always about the centre, so the
   clinic's pin stays on the middle pixel from 390px to 1920px.
   The `#map #mymap img` specificity is deliberate: autoptimize_*.css carries `#map img
   {width:auto;display:initial}`, which would otherwise win on a tie and collapse the picture. */
#map, #mymap { min-height: 450px; }
#mymap { height: 450px; position: relative; overflow: hidden; }
#map #mymap .cs-map-link { display: block; width: 100%; height: 100%; }
#map #mymap img { width: 100%; max-width: 100%; height: 100%; object-fit: cover; display: block; }
#map #mymap .cs-map-credit { position: absolute; left: 0; bottom: 0; margin: 0;
  padding: 4px 12px; font-size: 12px; line-height: 1.5;
  background: rgba(255, 255, 255, .88); color: #333; }
#map #mymap .cs-map-credit a { color: #00539f; }

/* ---------- misc restoration ---------- */
/* anchors whose href was removed (commercial outbound) must not look clickable */
a:not([href]) { cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .owl-slider, .owl-thumbnail, .owl-footer, .owl-blog { scroll-behavior: auto; }
}

/* ============================================================================
   Visual review pass — defects found by looking at the rendered pages, not by
   any automated check. Every rule below names the thing that looked wrong.
   ============================================================================ */

/* ---------- 1. the blue veil: a hover state frozen on ---------- */
/* The archived stylesheet ships `.overlay{opacity:1}` together with
   `a:hover .overlay{opacity:1}` and a .3s opacity transition between them — a
   transition from 1 to 1, which is the fingerprint of a hover reveal that has
   lost its resting value. On the restored site the consequence was that every
   photograph inside a card, and every inner-page banner, sat under a blue
   gradient that is fully opaque at the bottom-left corner: fifteen images on
   the homepage alone read as washed out and dead next to the vivid hero.
   Two overlays are genuinely part of the design and must keep opacity 1:
   the home slider's, which is the scrim under its white caption, and the one
   on the fixed full-page background, which is the scrim under the
   "Espaço Fisioterapia…" band. Everything else rests transparent and reveals
   on hover, which is what the transition was written for. */
.overlay { opacity: 0; }
.owl-slider .overlay,
.position-fixed-full .overlay { opacity: 1; }
a:hover .overlay, a:focus .overlay, a:active .overlay { opacity: 1; }
/* the hover icon inside those overlays was never archived, so it is an empty
   box; without a background it must not draw anything of its own */
.icon.icon-overlay { background-image: none; border: 0; }

/* ---------- 2. card text ran under the round "+" button ---------- */
/* .custom-btn is absolutely positioned over the card's bottom-right corner and
   the excerpt is clamped to a box exactly 44px tall at a 15px line-height —
   three lines need 45, so the last line was shaved along its baseline AND ran
   underneath the button, with no ellipsis to show it had been cut. */
/* The extra 17px the card body gains here also moves the button clear of the last line, so the
   excerpt keeps the full width of the card - reserving a column for the button instead squeezed
   the text into a ragged 130px strip on a 176px card. */
.txt-limit-3 p:first-child { height: 45px; }
.txt-limit-2 p:first-child { height: 30px; }
.bg-gray-light-2 .text-left.mt-10 { padding-bottom: 16px; }
/* On a phone the cards are ~168px wide and the two-line title clamp cut both
   "Fisioterapia em Reabilitação Cardíaca" and "…Vestibular" to the same
   "Fisioterapia em Reabilitação…", so two neighbouring cards were indistinguishable.
   The same clamp cut one card at desktop width too: on the Fisioterapia hub
   "Fisioterapia em Disfunção Temporomandibular" - the longest of the 15, and the only one cut -
   read "Fisioterapia em Disfunção…", so the card never named the condition. Measured at 1440 it is
   the single truncated title on the whole site, and a phone already shows it in full, which proves
   the clamp rather than the copy is the limit. The box is a fixed height on purpose (the cards are
   floated columns and a card that grows breaks its row), so the third line is granted to every
   card at every width: uniform, and no title is cut anywhere. */
h4.txt-limit-2 { -webkit-line-clamp: 3; height: 54px; }

/* ---------- 3. the blog meta strip was sliced along its baseline ---------- */
/* .caption-meta is 25px tall with a 25px line-height, but its list items are
   pinned to height:15px — every descender in "Corpus Salut" and in the date
   was cut off, and on a phone the tag list ran into the "+" button. */
.caption-meta { display: block; height: auto; min-height: 25px; padding-right: 56px; }
.caption-meta ul li { height: auto; line-height: 20px; }
.caption-meta ul li:empty { display: none; }

/* ---------- 4. Livro de Reclamações was an invisible box ---------- */
/* Portuguese businesses are expected to carry this link. The theme drew it with
   a sprite that no capture preserved, so the stylesheet now points at a 1×1
   transparent GIF and the anchor rendered as a 120×45 hole in the footer of
   every page. Draw it as a labelled button in the site's own idiom rather than
   imitate the official artwork. */
.btn-lre {
  width: auto; height: auto; background-image: none;
  padding: 7px 15px; border: 1px solid #00539f; border-radius: 18px;
  color: #00539f; font-size: 13px; line-height: 1.2; text-decoration: none;
}
.btn-lre:hover, .btn-lre:focus, .btn-lre:active {
  background-image: none; background-color: #00539f; color: #fff; text-decoration: none;
}

/* ---------- 5. partner tiles that were bordered empty rectangles ---------- */
/* Six "logos" are stand-ins generated during the restore: a white square with a
   thin border, a blue bar and the partner's name in small type. Greyscaled by
   .filter they read exactly like slots nobody had filled. A partner whose logo
   we do not have is better shown as its name set as type — honest, and it looks
   deliberate next to the real marks. */
.f-1by1 > .cs-logo-word {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 6px; margin: 0;
  font-size: 11px; line-height: 1.25; letter-spacing: .04em;
  text-align: center; text-transform: uppercase; color: #7a7a7a;
  /* A stand-in tile is ~105px wide at 1440 and ~81px at 390, and three of these partner names
     contain a single word longer than that box: TRABALHADORES needs 110px, ADMINISTRACAO 90px,
     ECONOMISTAS 84px. With nothing to break on, the word simply drew past the tile's own border -
     under the carousel's round next-arrow on the homepage and the A Corpus Salut page. Measured
     with _scripts/_fix5_cs_wordtile.js: 8 tiles of 30 overflowed, only one of which was reachable
     in a screenshot (the review found that one, after five clicks of the carousel).
     The page is lang="pt-PT", so hyphens:auto breaks these at a real Portuguese syllable and
     marks the break; overflow-wrap is the fallback for a name hyphenation cannot help. */
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
}
@media (min-width: 992px) { .owl-thumbnail .f-1by1 > .cs-logo-word { font-size: 12px; } }
/* Hyphenating the longest name costs it a fifth line, and on a 390 phone the carousel tile is
   81x79 - two pixels short of holding it. Two pixels come back from the tile's own padding
   rather than from the type, so the strip's word tiles stay the same size as each other. */
@media (max-width: 767px) { .owl-thumbnail .f-1by1 > .cs-logo-word { padding: 4px; } }
.cs-partner-grid .f-1by1 > .cs-logo-word { font-size: 14px; }

/* de-linked partner cards keep the layout their <a> had */
span.a-card { display: block; width: 100%; }
/* the theme only ever revealed a logo's colour on link hover; these are no
   longer links, so hang the reveal on the tile itself */
.f-1by1.filter:hover > img { -webkit-filter: grayscale(0%); filter: grayscale(0%); }

/* ---------- 6. carousel arrows sat on top of the first and last logo ---------- */
/* The Acordos strip is a real carousel — 12 marks in 7 slots — but the round
   arrows were centred on the track, so ACP on the left and the Liga dos Amigos
   on the right were permanently half covered. Inset the track instead. */
/* The inset has to be on the WRAP, not on the track.
   Padding on a scroll container lives INSIDE the scrollport, so the strip still painted through it:
   at rest the 8th mark ("Medicare") ran from x=906 to the clipping edge at 940 and the round next
   arrow (894-938) sat on the word, the prev arrow sat on the ACP logo, and after one click the tail
   of the previous tile showed as a sliced "...TUGAL" behind it. scroll-padding only moved the snap
   position; it could not stop the overflow from being drawn under the buttons.
   Putting the 52px on the wrap makes it a real gutter: the track is 52px narrower, clips its own
   overflow at its edge, and the buttons sit in space no tile can reach. Snapping then aligns a tile
   to the track edge with no inset, so a click - one tile plus one gap, 122px at 1440 - lands on a
   tile boundary. */
.cs-car-wrap--thumbnail { padding-left: 52px; padding-right: 52px; }
/* the heading moved into the logo section sits one bootstrap column deeper than the text above it */
.cs-acordos-title { margin: 0 0 20px; }
.cs-car-wrap--thumbnail .cs-car-prev { left: 2px; }
.cs-car-wrap--thumbnail .cs-car-next { right: 2px; }
@media (max-width: 767px) {
  .cs-car-wrap--thumbnail { padding-left: 40px; padding-right: 40px; }
}

/* ---------- 7. sidebar widgets read as three orphan headings ---------- */
.widget_recent_entries li { margin-bottom: 12px; line-height: 1.35; }
.widget_recent_entries .post-date { display: block; font-size: 12px; color: #8b8b8b; }
.widget .widget-title h5 {
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid #e2e2e2;
  font-size: 15px;
}

/* ---------- 8. the footer read as three bands that happened to stack ---------- */
footer .container > [class*="col-sm-4"] { padding-top: 6px; }
/* The theme indents every footer list by 77.5px, so each column's content started at a different
   place from its own heading and from the next column - which is most of why the footer read as
   three unrelated blocks rather than one band. */
footer .container ul.list-unstyled { margin-left: 0; }
footer h6 {
  margin: 0 0 14px; font-size: 13px; line-height: 1.2;
  letter-spacing: .08em; text-transform: uppercase; color: #7a7a7a; text-align: left;
}
footer #menu-rodape li { margin-bottom: 7px; }
footer #menu-rodape a { text-decoration: none; }
footer #menu-rodape a:hover, footer #menu-rodape a:focus { text-decoration: underline; }
/* the partner strip is nested one bootstrap column deeper than its own heading, which put the
   logos 25px to the right of the word "Parceiros" above them */
footer li > .col-xs-12 { padding-left: 0; padding-right: 0; }
footer .owl-footer { max-width: 190px; }
@media (min-width: 768px) {
  footer .col-sm-4.article-img { padding-top: 0; }
  footer .col-sm-4.article-img img { max-width: 230px; }
}

/* ---------- 9. pages whose grid had no sidebar to sit beside ---------- */
/* The gallery is a 3-up grid of 16:9 tiles that was laid out inside a two-thirds
   column with nothing in the remaining third: the tiles came out at 209px and a
   third of the page was blank. It has no sidebar, so give it the full measure. */
.cs-full-width { width: 100%; }
/* The gutters were 0 across and 30px down, so the tiles butted into one another in a mosaic band;
   the tile carrying a diagram on a white ground then had no edge of its own at all and read as a
   graphic floating between photographs rather than as one of nine tiles. The gutters come back by
   dropping pad-00 in the markup (it is !important); the hairline gives every tile the same edge. */
.cs-galeria-grid .f-16by9 {
  background: #eef1f5;
  outline: 1px solid rgba(0, 0, 0, .07); outline-offset: -1px;
}
.cs-galeria-grid .wp-caption-text { margin-top: 10px; }

/* ---------- 11. the contact card, now that it is no longer hidden on phones ---------- */
/* It used to carry hidden-xs, which took the clinic's address and both telephone numbers off
   every phone. Unhidden it stacks under the content; give it the same 30px separation the rest of
   the page uses so it does not butt against the block above. */
/* On the service/article template the card is `position-absolute` so it can float over the banner
   at desktop width. Unhidden on a phone it stayed absolute and landed straight across the page
   title and the opening paragraph. It has to become part of the flow at phone width.
   The column is floated too, so its own bottom margin does not push the next <section>; the gap
   has to come from the card itself or the blue block butts straight into the map. */
@media (max-width: 767px) {
  .cs-aside-contact { margin-top: 30px; }
  .cs-aside-contact .position-absolute { position: static; }
  .cs-aside-contact > .bg-color,
  .cs-aside-contact > .position-absolute { margin-bottom: 40px; }
}

/* ---------- 11b. the blog sidebar was still hidden on phones ---------- */
/* Same defect as 11, one template further on. The seven article pages (blog index, the three
   posts, and the four information pages) carry their whole widget column inside
   `.hidden-xs`, which the theme declares `display:none !important` under 767px. The column is no
   longer the archive's three orphan headings: it now holds "Artigos recentes", the
   "Areas de intervencao" index and the "Marcar consulta" card with the clinic's telephone,
   mobile, e-mail and address. Measured at 390 that content computed 0x0, so every phone visitor
   lost it - and phones are most of a local clinic's traffic.
   Decided the same way as the contact card above: content the visitor needs is not hidden by
   width. The panel is `col-xs-12`, so unhidden it simply stacks full-width under the article.
   The second selector is the blog index only, where the widget panel sits inside a second
   hidden column. */
@media (max-width: 767px) {
  .col-xs-12.pad-00.bg-white.t-color.a-color.td-none.hidden-xs,
  .col-md-3.col-sm-4.hidden-xs.mb-30 { display: block !important; }
}

/* ---------- 12. Corpo Clínico: names sat at the top of a 120px avatar ---------- */
/* Each person is a round monogram beside a name and a role. The text was flush with the top of the
   circle, so a one-line name left half the row empty beside it and a two-line name did not - eight
   rows that never lined up with each other. */
@media (min-width: 992px) {
  .cs-team-row { display: flex; align-items: center; }
  .cs-team-row > .col-md-6 { float: none; }
}
.cs-team-note {
  margin-top: 10px; padding-top: 18px; border-top: 1px solid #e6e6e6;
}
.cs-team-note p { margin: 0 0 6px; }

/* ---------- 13. the client note block had no native shape to take on the homepage ---------- */
/* This homepage is a hero carousel and three card grids; it carries no running prose for the
   block to continue, so dropped in as a bare paragraph it would have read as an inserted advert
   (that shape was rejected on the fmas sites). It is built instead as one more component of the
   "Fisioterapia" section, and every value below is copied from that section's own cards rather
   than chosen: the ground is .bg-gray-light-2 (#f7f7f7); the corners are square because the cards
   are; the panel sits in a col-xs-12 so its grey edges line up with the outermost cards' grey; the
   inner inset is the same 15px column gutter the card bodies use and the same 16px foot they were
   given in rule 2. Colour is deliberately left to inherit - the section is .t-color and its card
   titles and excerpts are that same blue, so an explicit colour would be the one thing on the
   panel that no sibling does. 18px at weight 400 is the theme's own h4 size at the theme's own
   heading weight: below the section h2, above the 13px card titles, which is where a component
   that closes the grid belongs. clear:both because the cards are floated columns. */
.cs-note-col { clear: both; }
.content-wraparea { background-color: #f7f7f7; padding: 16px 15px; }
.content-wraparea h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.3; font-weight: 400; }
.content-wraparea p { margin: 0; font-size: 14px; line-height: 1.6; }

/* ---------- 14. the "Informações" menu item needed a destination that matches its label -------- */
/* The original WordPress menu pointed this item at /category/informacoes/, the category archive
   that listed the three institutional posts (ERS registration, quality-of-care suppliers, COVID
   contingency plan). Category archives are not restored, and the item had been repointed at the
   blog listing - which already has its own top-level "Blog" item and does not show those three
   posts, so two adjacent menu entries led to the same page and neither delivered what the label
   promised. It now points at the homepage's own "Informações" section, which IS those three
   items. The header is fixed (45px utility bar + ~82px navbar), so without scroll-margin-top the
   browser parks the section's top edge at y=0 and the heading lands UNDERNEATH the header: the
   cards show, the title does not, and a screenshot of it looks like a working anchor. */
#informacoes { scroll-margin-top: 140px; }

/* ===== round 11 = what the client found by opening the site =====================
   Every rule below names the defect it closes. Measured at 1440 and 390 with
   _scripts/_csL_measure.js and node _scripts/qa_legibility.js.
   ============================================================================ */

/* ---------- A. THE FIXED MENU LEFT A 45px HOLE ABOVE ITSELF ----------
   The theme sits the fixed navbar under the utility bar with
   `nav.navbar.navbar-fixed-top{margin-top:45px}` while the utility bar itself is
   position:relative and scrolls away. Result, on every one of the 67 pages: scroll
   the page and a 45px band of the document - a headline sliced along its middle, a
   photograph, whatever happens to be there - is painted ABOVE the white sticky
   header. elementFromPoint at y=0..30 while scrolled returned page content, not
   chrome, at 1440 and at 390.
   The fix is CSS only on purpose. Adding `.cs-scrolled` from a scroll listener works
   in a browser and leaves the hole for anyone with JavaScript off, which is one of
   the conditions qa_invariance renders the site under. Fixing the utility bar takes
   its 45px height + its 80px `mb-80` out of the flow, so exactly that 125px moves
   onto body padding and nothing below the header shifts by a pixel. */
nav.navbar.transition.z-3.bg-color {
  position: fixed; top: 0; left: 0; right: 0;
  margin-bottom: 0 !important;
  z-index: 1031;              /* one above the navbar's own 1030, restored in rule 0 above */
}
body { padding-top: 125px; }
/* An open burger panel must still be able to grow past the header's own height. */
@media (max-width: 767px) { .navbar-ex1-collapse { max-height: calc(100vh - 170px); } }

/* ---------- B. THE PAGE TITLE FLOATED IN AN EMPTY WHITE BAND ----------
   The blog posts, the legal pages and the information pages opened with an <h1>
   alone on white, 80px below the header, with no chrome of any kind - which is most
   of what "styled like text was just dumped there" describes. The service pages
   already open on a photograph with a title block over it; these have no
   photograph, and inventing one for a legal page would be inventing a picture of
   this clinic. They get the site's other chrome instead: its own blue (#00539f, the
   .bg-color the homepage bands use) with the title and a breadcrumb on it. */
.cs-page-head { padding: 40px 0 34px; }
.cs-page-head h1 { margin: 0; font-size: 34px; line-height: 1.2; color: #fff; }
@media (max-width: 767px) { .cs-page-head { padding: 26px 0 24px; } .cs-page-head h1 { font-size: 26px; } }
.cs-crumbs { margin: 0 0 12px; font-size: 13px; line-height: 1.4; }
.cs-crumbs a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.cs-crumbs [aria-current] { color: rgba(255, 255, 255, .82); }
.cs-crumb-sep { padding: 0 8px; color: rgba(255, 255, 255, .55); }
/* the same trail over the service pages' photograph, where the ground is white */
.cs-crumbs-dark a { color: #00539f; }
.cs-crumbs-dark [aria-current] { color: #5a6673; }
.cs-crumbs-dark .cs-crumb-sep { color: #9aa7b4; }
/* A breadcrumb hop is a standalone link, so it is a tap target and not prose: the
   26px line box is what keeps it off the "under 24px" list. */
.cs-crumbs a { display: inline-block; min-height: 26px; line-height: 26px; }

/* ---------- C. THE ARTICLE BODY HAD NO TYPOGRAPHY AT ALL ----------
   14px/1.43 inherited from bootstrap, no measure, headings at the theme's default
   spacing so an <h2> sat as close to the paragraph above it as to the one below,
   and lists at the browser default. On the legal pages, which are 1,600px of solid
   <p>, that is exactly the "text was just dumped there" the client describes. */
/* THE SIZES HAVE TO BE SET ON THE ELEMENTS, NOT ON THE WRAPPER. This theme runs on a 10px
   root with em-based type: `p{font-size:1.4em}` and `li{font-size:1.35em}`. Setting
   `.cs-article{font-size:16px}` therefore did not give 16px paragraphs - it gave 22.4px
   paragraphs (1.4 x 16) sitting next to 13.5px list items, measured with _csL_type.js. That
   mismatch is itself most of what an unstyled page looks like. */
.cs-article { color: #3b4551; }
.cs-article p, .cs-article li { font-size: 16px; }
.cs-article > p, .cs-article > ul, .cs-article > ol { margin: 0 0 22px; }
.cs-article > p { line-height: 1.75; }
.cs-article p.cs-lead { font-size: 19px; line-height: 1.6; color: #2b3540; margin-bottom: 26px; }
.cs-article h2 {
  margin: 40px 0 14px; font-size: 25px; line-height: 1.25; color: #00539f;
  padding-top: 18px; border-top: 1px solid #e6eaee;
}
.cs-article h2:first-child, .cs-article > *:first-child + h2 { border-top: 0; padding-top: 0; margin-top: 0; }
.cs-article h3 { margin: 30px 0 10px; font-size: 20px; line-height: 1.3; color: #22405e; }
/* The two legal pages jump h2 -> h4 -> h5 -> h6 inside one document, because that is how the
   client's own published text is marked up. Rewriting their heading levels would be rewriting
   their legal text, so the three deeper levels are drawn as one sub-head instead. */
.cs-article h4, .cs-article h5, .cs-article h6 {
  margin: 28px 0 10px; font-size: 18px; line-height: 1.35; color: #22405e; font-weight: 600;
}
.cs-article ul, .cs-article ol { padding-left: 22px; }
.cs-article li { margin-bottom: 9px; line-height: 1.65; }
.cs-article a { color: #00539f; text-decoration: underline; text-underline-offset: 2px; }
.cs-article img { max-width: 100%; height: auto; }
.cs-article p > img { margin-bottom: 6px; }
/* An empty paragraph is what a stripped lazyload <img> or a WordPress &nbsp; leaves
   behind; at 22px each they were opening ragged holes down the legal pages. */
.cs-article p:empty { display: none; margin: 0; }
@media (max-width: 767px) {
  .cs-article p.cs-lead { font-size: 17px; }
  .cs-article h2 { font-size: 21px; margin-top: 30px; }
  .cs-article h3 { font-size: 18px; }
}

/* the author / date / tags line, now under the title instead of adrift in the aside */
.cs-article-meta { margin: 0 0 22px; padding-bottom: 14px; border-bottom: 1px solid #e6eaee; }
.cs-article-meta ul { margin: 0; padding-left: 0; list-style: none; }
/* Font Awesome's .fa-ul puts .fa-li at `left:-2em` of the nearest POSITIONED ancestor. Laying the
   items out inline-block without giving each one its own positioning context stacked all three
   icons at the same x, so the calendar and the tag glyphs landed jammed against the text of the
   item before them. Each li becomes the containing block for its own icon. */
.cs-article-meta li {
  display: inline-block; position: relative;
  margin: 0 24px 0 0; padding-left: 22px; font-size: 13px; line-height: 22px; color: #5a6673;
}
.cs-article-meta li .fa-li {
  position: absolute; left: 0; top: 0; width: 16px; line-height: 22px;
  text-align: left; color: #9aa7b4;
}

/* ---------- D. A THIRD OF THE PAGE WAS EMPTY, WHICH READ AS A PHONE LAYOUT ----------
   /especialidades-complementares/fisiatria/ at 1440: a 587px column of prose with
   570px of white beside it, because the body section is `col-md-8` and the theme
   never put anything in the remaining `col-md-4`. All 21 pages on that template and
   both legal pages have it. The column is filled with the widget stack the blog
   listing already ships - no new component - and only needs its own spacing. */
.cs-side { margin-top: 6px; }
.cs-side .cs-aside-block:first-child { margin-top: 0; }
@media (max-width: 767px) { .cs-side { margin-top: 34px; } }
/* Sidebar links are lists of links, so an underline on every line tells you nothing;
   they are told apart by COLOUR instead. That only works if the list itself is not
   already that colour - and it was: the archived widget panel is `.t-color`, i.e.
   exactly the #00539f the links use, which is why the gate reported eighteen links
   "visually identical to the text around them" on the listing. Neutral items, blue
   links, and a 26px line box so each one is also a finger-sized target. */
.cs-aside-block li, .widget_recent_entries li, .cs-aside-cta li,
.cs-side-legacy li, .cs-side-legacy h3, .cs-side-legacy h5 { color: #5a6673; }
.cs-aside-block li a, .widget_recent_entries li a, .cs-aside-cta li a,
.cs-side-legacy li a, .cs-side-legacy h3 a {
  color: #00539f; display: inline-block; min-height: 26px; line-height: 26px;
}
.cs-aside-block li a:hover, .widget_recent_entries li a:hover { text-decoration: underline; }
/* 3.41:1 for a date nobody can read is not a saving. */
.widget_recent_entries .post-date { color: #5a6673; }
/* The sidebar's own strapline inherited the theme's .small, which computes 10.8px -
   the same defect the client measured in the footer, one component further on. */
.cs-aside-cta p.small { font-size: 13px; line-height: 1.55; }

/* ---------- E. THE BLOG LISTING ----------
   32 posts as full-width cards is a 10,000px page. The theme's own col-sm-6 makes
   it two-up from 768 up; the cards are floated columns, so every second one has to
   start a new row or a one-pixel height difference cascades into a staircase. */
@media (min-width: 768px) { .cs-blog-grid > .col-sm-6:nth-child(odd) { clear: left; } }

/* ---------- F. THE CLIENT'S OWN MEASUREMENTS ----------
   (i) "11 links in prose are visually identical to the text around them". Ten of the
   eleven are the white-on-blue contact card (256 508 181, 918 508 105,
   info@corpusalut.pt, Ver no mapa) and the footer's Informação menu: same colour as
   the line they sit in, no underline, same weight. On a blue card there is no second
   colour to reach for, so they are underlined. */
.cs-aside-contact li a, footer #menu-rodape a {
  text-decoration: underline; text-underline-offset: 2px;
}
/* (ii) "28-32 tap targets under 40px, including 32x37 social icons". The blocking
   ones are the standalone links that computed 19px tall and the 12x12 carousel dots.
   Anything already 32-37px is reported and does not block; it is the theme's own icon
   size and enlarging it would redraw the header. */
.cs-aside-contact li a, footer #menu-rodape a, footer .list-unstyled > li > a,
.cs-article-meta li a, .cs-side li a {
  display: inline-block; min-height: 26px; line-height: 26px;
}
/* The carousel dot was a 12px circle and a 12px hit area. Keep the circle, give the
   finger a 26px box around it - it is drawn by ::before so the dot does not grow. */
.cs-car-dot {
  width: 26px; height: 26px; margin: 0 2px; border: 0; background: transparent;
  position: relative;
}
.cs-car-dot::before {
  content: ''; position: absolute; top: 7px; left: 7px; width: 12px; height: 12px;
  border: 2px solid #fff; border-radius: 50%; background: transparent;
  transition: background .2s ease;
}
.cs-car-dot[aria-current="true"]::before, .cs-car-dot:hover::before { background: #fff; }
.cs-car-dot[aria-current="true"], .cs-car-dot:hover { background: transparent; }
/* Two more standalone links the archived widget panel ships at 24px: its "Blog"
   heading link and the "Novidades" item. */
h3.mb-15 > a, li.mb-15 > a { display: inline-block; min-height: 26px; line-height: 26px; }
/* (iii) "the footer copyright renders at 10.8px". It is the theme's .small inside the
   copyright strip; 10.8px is below every legibility floor there is. */
footer + section p.small { font-size: 13px; line-height: 1.6; margin-bottom: 0; }
footer + section .x-small { font-size: 12px; line-height: 1.6; }
/* Livro de Reclamações was drawn grey-on-white inside a grey-on-white list, because
   `footer .a-gray a{color:gray}` outranks the .btn-lre rule that meant it to be blue.
   It is a legally-required control on a Portuguese business site; it should read as one. */
/* `:link` is a pseudo-CLASS, so `.a-gray a:link` scores 0,2,1 and beat the first attempt at this
   rule (`footer .btn-lre`, 0,1,1). It has to be matched hop for hop. */
footer .btn-lre, footer .btn-lre:link, footer .btn-lre:visited { color: #00539f; }
footer .btn-lre:hover, footer .btn-lre:focus, footer .btn-lre:active { color: #fff; }
/* The footer column headings, the footer's own legal menu and the Acordos band's heading were
   all painted in grey on white - 4.29:1 and 3.95:1, both short of AA at their sizes. The menu
   needs `:link`/`:visited` spelled out because `.a-gray a:link` scores 0,2,1. */
footer h6 { color: #666; }
footer #menu-rodape a, footer #menu-rodape a:link, footer #menu-rodape a:visited { color: #5c5c5c; }
/* `.t-gray{color:gray !important}` is the theme's own utility, so the two bands that use it -
   the Acordos heading and the copyright strip - need !important back to clear 4.5:1. Grey stays
   grey; it just stops being 3.4:1 grey. */
section.t-gray h2, footer + section.t-gray p.small,
footer + section.t-gray .x-small, footer + section.t-gray .cs-year,
footer + section.t-gray .cs-credit { color: #5c5c5c !important; }

/* The hero caption is white type laid straight on a photograph, and the photograph is pale where
   the small "Corpus Salut" kicker sits: measured with the gate's camera it is 2.93:1 at 1440 and
   2.15:1 at 390. The theme's scrim is a corner gradient and does not reach it. A shadow is the
   smallest change that puts a dark ground under the glyphs themselves without laying a panel over
   the picture - and it is a real fix, not a way to move a number: the same pixels the camera
   measures are the pixels a reader's eye uses. */
header .v-align h4, header .v-align h2, header .v-align .btn {
  text-shadow: 0 1px 4px rgba(0, 0, 0, .65);
}
/* At 390 the same photograph is cropped to its palest region and one shadow was not enough
   (3.34:1 for the kicker after the first pass), so the phone gets a second, wider one. */
@media (max-width: 767px) {
  header .v-align h4, header .v-align h2, header .v-align .btn {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 16px rgba(0, 0, 0, .75);
  }
}
/* The archived widget markup nests one level deeper than the block widgets beside it, so
   `.widget ul li a{color:#787878}` outranked the rule that meant these to be blue - which left
   the Artigos recentes list grey at 4.42:1 while the list above it was blue at 7.5:1. */
.widget.widget_recent_entries ul li a { color: #00539f; }

/* ---------- G. THE HERO CAPTION COULD NOT BE MEASURED AT ALL ----------
   qa_legibility photographs text that sits on a photograph, because arithmetic cannot
   answer for a picture. It reported the second hero slide's caption as NOT MEASURED -
   which the gate treats as blocking, and rightly: unknown is not clean.
   The cause is here, not in the gate. The carousel track declares
   `scroll-behavior: smooth`, so the gate's `scrollIntoView()` starts an ANIMATED scroll
   and the synchronous hit-test that follows still finds the slide off-screen. Nothing
   on this site needs the declaration: cs-ui.js passes `behavior` explicitly on every
   scrollTo it makes (and already honours prefers-reduced-motion there), and touch and
   keyboard scrolling are not affected by it at all. Dropping it makes programmatic
   scrolls land immediately - which is also what a browser's "skip to section" does. */
.owl-slider, .owl-thumbnail, .owl-footer, .owl-blog { scroll-behavior: auto; }