/* clinicadentariadoporto.pt - restoration additions (cdp_02_finish.py) */

/* The static OpenStreetMap picture that replaced the dead Divi/Google map module. It was briefly
   an openstreetmap.org/export/embed.html IFRAME; that is a live third-party request on a site whose
   own cookie policy says none is made, so it is now a picture we host. The box (280px desktop from
   Divi's .et_pb_column_1_2 .et_pb_map, 320px below 980px) is unchanged, and object-fit:cover crops
   the same centred image to both shapes so the clinic stays on the middle pixel. Divi's
   .et_pb_map_container img { max-width: inherit } is overridden here on purpose. */
.cdp-map .et_pb_map { overflow: hidden; }
.cdp-map .et_pb_map .cdp-map-link { display: block; width: 100%; height: 100%; }
.cdp-map .et_pb_map img { border: 0; width: 100%; height: 100%; max-width: 100%;
  object-fit: cover; display: block; }
.cdp-map .cdp-map-caption { margin: 8px 0 0; font-size: 13px; text-align: right; }
@media (max-width: 980px) {
  .cdp-map .et_pb_map { height: 320px; }
  .cdp-map .cdp-map-caption { text-align: left; }
}

/* tel:/mailto: on details that used to be flat text - they must not start looking like buttons */
a.cdp-tel, a.cdp-mail { color: inherit; text-decoration: none; }
a.cdp-tel:hover, a.cdp-mail:hover { text-decoration: underline; }
#footer-widgets .footer-widget a.cdp-tel, #footer-widgets .footer-widget a.cdp-mail { color: #fff; }

/* The copyright line (#text-6) is the site's only footer link row - sccss-custom.css pins it full
   width along the bottom of the footer - and it now carries the two legal pages. The Ping mark in
   the same paragraph is floated right, so once the line wraps the text runs under it: measured at
   320px the "Política de Cookies" link ends 24px INSIDE the logo. Below 480px the mark drops to its
   own right-aligned line instead; nothing changes at any width where the line fits.
   That line is also absolutely positioned (bottom:20px) inside #main-footer .container, so it grows
   UPWARDS into the "Horário" widget: measured at 320px it started 29px above the end of that text.
   The container gets the room back on the same breakpoint. */
@media (max-width: 479px) {
  #main-footer .container { padding-bottom: 90px; }
  #text-6 .textwidget img.alignright { float: none; display: block; margin: 10px 0 0 auto; }
}

/* the authored 404 */
.cdp-404 { padding: 90px 0 120px; }
/* every other page constrains the divider rule with a per-page builder rule
   (.et_pb_image_0{max-width:40%}); the 404 uses no numbered module classes, so it needs its own
   or the ornament ships three times the size it has everywhere else */
.cdp-404 .et_pb_image { max-width: 40%; margin: 0 auto; text-align: center; }
.cdp-404 h1 { margin-bottom: 18px; }
.cdp-404 .cdp-404-links { list-style: none; margin: 26px auto 0; padding: 0; max-width: 620px; text-align: left; }
.cdp-404 .cdp-404-links li { border-top: 1px solid #e6ebef; padding: 14px 4px; }
.cdp-404 .cdp-404-links li:last-child { border-bottom: 1px solid #e6ebef; }
.cdp-404 .cdp-404-links a { font-weight: 600; }
.cdp-404 .cdp-404-links span { display: block; font-size: 14px; color: #8b9aa6; }
.cdp-404 .cdp-404-help { margin-top: 34px; font-size: 15px; }


/* ===========================================================================
   VISUAL FINISH PASS — every rule below repairs something that was visible in
   a screenshot at 1440px or 390px. The reason is written down so a later
   reader can tell a deliberate choice from a leftover.
   =========================================================================== */

/* 1. HOMEPAGE HERO — the navy statement panel hung off the bottom of the photo.
   The builder shipped the caption as a separate row pulled up over the picture
   with margin-top:-257px. That pull-up is anchored to the BOTTOM of the photo,
   so the overhang is a constant (panel height + section padding - 257) no
   matter how tall the picture is: measured 172px of empty navy on white at
   1440px and 112px at 390px, where the panel also covered 84% of the photo.
   The row now sits inside the hero section (see the markup in index.html) and
   the photograph is painted on the section itself, so the panel is inset in
   the picture at every width and there is no arithmetic left to drift. */
.cdp-hero {
  background-image: url(/img/lesly-juarez-220845-unsplash2-08ddd241.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 90px 0 !important;
}
.cdp-hero .et_pb_fullwidth_header_0 { display: none; }
.cdp-hero .et_pb_row_0.et_pb_row { margin-top: 0 !important; }
@media only screen and (max-width: 980px) {
  .cdp-hero { padding: 60px 0 !important; }
}
/* The statement is 232 characters. Inset in the photo at phone width it would
   leave the picture as a 39px frame around a navy box, so below 768 the photo
   becomes its own band and the panel sits under it, edge to edge. */
@media only screen and (max-width: 767px) {
  .cdp-hero { padding: 0 !important; background-image: none; }
  .cdp-hero::before {
    content: "";
    display: block;
    height: 230px;
    background: url(/img/lesly-juarez-220845-unsplash2-08ddd241.jpg) center / cover no-repeat;
  }
  .cdp-hero .et_pb_row_0.et_pb_row {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 34px 26px !important;
  }
  .cdp-hero .et_pb_text_0 h1 { font-size: 19px; line-height: 1.55em; }
}

/* 2. SERVICE PAGES ON THE PHONE — the body copy ran in a 72px ribbon.
   The builder inset that paragraph by 120px left and right and wrote no mobile
   override, so at 390px a 312px column kept its 240px inset: 72px of text,
   with words broken in half ("Implantolo/gia", "substituiçã/o", "desconfort/o").
   Twelve of the thirteen service pages shipped like that. */
@media only screen and (min-width: 768px) and (max-width: 980px) {
  body.single-project .et_pb_text_1,
  body.single-project .et_pb_text_8 {
    padding-right: 40px !important;
    padding-left: 40px !important;
  }
}
@media only screen and (max-width: 767px) {
  body.single-project .et_pb_text_1,
  body.single-project .et_pb_text_8 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}

/* 3. IMPLANTES DENTÁRIOS — the before/after photographs were half size.
   The six case files are 510px wide, which is exactly the half column they sit
   in, but the builder capped them at 50%: each rendered at half its resolution
   with an equal area of white beside it, and an Antes/Depois pair no longer
   read as a pair. At full column width they line up across the gutter. */
body.single-project .et_pb_row_1 .et_pb_image { max-width: 100%; margin-left: 0; }

/* 3b. The same six photographs, on the phone. Divi stacks the two columns, so
   the page read Antes 01, Antes 02, Antes 03, Depois 01, Depois 02, Depois 03 —
   a before/after gallery in which you cannot see a pair without scrolling past
   two other cases. Flattening the two columns into one flex flow lets each
   Depois follow its own Antes. */
@media only screen and (max-width: 980px) {
  .cdp-cases { display: flex; flex-direction: column; }
  .cdp-cases::before, .cdp-cases::after { display: none; }
  .cdp-cases > .et_pb_column { display: contents; }
  .cdp-cases .et_pb_text_2  { order: 1; }
  .cdp-cases .et_pb_image_1 { order: 2; }
  .cdp-cases .et_pb_text_5  { order: 3; }
  .cdp-cases .et_pb_image_4 { order: 4; }
  .cdp-cases .et_pb_text_3  { order: 5; }
  .cdp-cases .et_pb_image_2 { order: 6; }
  .cdp-cases .et_pb_text_6  { order: 7; }
  .cdp-cases .et_pb_image_5 { order: 8; }
  .cdp-cases .et_pb_text_4  { order: 9; }
  .cdp-cases .et_pb_image_3 { order: 10; }
  .cdp-cases .et_pb_text_7  { order: 11; }
  .cdp-cases .et_pb_image_6 { order: 12; }
  /* Divi centres images once the columns stack. At tablet width the 510px case
     files then sat 46px in from a 614px column while their "Caso 01 | Antes"
     labels stayed flush left, so every photograph looked nudged. Let them fill
     the column the label is measured against. */
  .cdp-cases .et_pb_image,
  .cdp-cases .et_pb_image .et_pb_image_wrap { display: block; }
  /* et_always_center_on_mobile puts auto margins on the module; an auto cross-axis
     margin cancels align-self:stretch, so the flex item shrank to the file's
     natural 510px and centred itself. Take the auto margins off. */
  .cdp-cases .et_pb_image { width: 100%; margin-left: 0 !important; margin-right: 0 !important; }
  .cdp-cases .et_pb_image img { width: 100%; height: auto; }
}

/* 4. The engraved rule above every page title is 1296x75. Capped at 40% of a
   312px phone column it lands at 125px — a 1:10 reduction that renders as a
   grey smudge. The homepage's own mobile override for the second copy of the
   same ornament uses 90%; match it site-wide. */
@media only screen and (max-width: 767px) {
  .et_pb_module.et_pb_image_0,
  .cdp-404 .et_pb_image { max-width: 90%; }
}

/* 5. CONTACTOS — the e-mail address broke mid-token.
   The row uses Divi's widest gutter (gutters4: 19% columns, 8% gutters), which
   leaves the two info columns 205px wide. geral@clinicadentariadoporto.pt
   needs 211px, so it wrapped as "geral@clinicadentariadoporto." / "pt". Take
   the missing pixels out of the gutter: the map column keeps its 46% and does
   not move a pixel. */
@media only screen and (min-width: 981px) {
  body.page-id-107 .et_pb_row_1.et_pb_gutters4 .et_pb_column_1_4 {
    width: 21.5%;
    margin-right: 5.5%;
  }
}

/* 6. QUEM SOMOS — the portrait shrank to a thumbnail on the phone.
   sccss-custom.css caps the portrait at 40% of its module, and the page's own
   mobile rule then caps the module at 80% of the column: 40% of 80% of 312px
   is an 100px disc adrift in a full-width blue band. */
@media only screen and (max-width: 767px) {
  body.page-id-79 .et_pb_image_1 img { max-width: 58%; }
}
/* Same page, two more things visible in the picture at 1440px:
   — the blue band had 81px of blue above the portrait and 121px below the last
     line, so the panel looked as if it had been left open at the bottom. The
     40px the builder put under that text module is the whole difference.
   — the two headings underneath it sit side by side but "Estágios na área da
     reabilitação Oral e Implantes:" wraps to two lines and "Formação
     pós-graduada" to one, so the two bodies started 22px apart. Reserve two
     lines for both and they share a baseline. */
body.page-id-79 .et_pb_text_1 { padding-bottom: 0 !important; }
@media only screen and (min-width: 981px) {
  body.page-id-79 .et_pb_text_2 h2,
  body.page-id-79 .et_pb_text_3 h2 { min-height: 2.2em; }
}

/* 7. SERVICE PAGES — they were a heading and one paragraph.
   Twelve of them ended 440px down the page with the footer immediately under
   the text, and the photograph the visitor had just clicked in the services
   grid appeared nowhere on the page it opened. Each page now leads with its
   own listing photograph and closes with the invitation the homepage already
   makes, so the page has a next step instead of stopping dead. No new copy and
   no new pictures: both come from the site itself.
   The 520px measure is a cap, not a width. Nine of these thirteen photographs exist only as the
   400x284 derivative WordPress generated — the archive never captured anything larger, and three
   pages that DID have their full-size original in /img now point at it. Stretching a 400px file to
   520 bought nothing but a soft hero on nine pages, so the image is allowed to stop at its own
   width: big sources fill the 520, small ones sit centred at 400 and stay sharp.
   TRAP, cost one review round: this comment used to be closed off after "site itself." and the
   rest of the paragraph sat in open CSS. A stray prose run before a rule is not an error the
   parser reports — it becomes the PRELUDE of the next qualified rule, so the invalid selector
   took the whole .cdp-service-photo block down with it and the cap silently did not exist
   (measured max-width:none on all 13 service pages). Ozonoterapia only made it visible because
   it is the one hero with a 1600px source: uncapped, it filled the 1080px content column while
   its twelve siblings stopped at their own 400/510px width, so the same template rendered one
   photograph 2.7x the others. Never let a comment terminator land mid-paragraph, and never write
   one inside the prose either — doing exactly that while writing this note reproduced the bug. */
.cdp-service-photo {
  max-width: 520px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 34px;
  text-align: center;
}
.cdp-service-photo .et_pb_image_wrap { display: block; }
/* margin:auto rather than text-align, because Divi sets these images display:block
   and section 3 above pins margin-left:0 on every image inside a project row */
.cdp-service-photo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* the closing block carries the same 120px measure as the body copy above it, so
   its hairline starts and ends where the text does instead of overrunning it */
.cdp-service-foot {
  padding: 0 120px 10px !important;
  text-align: center;
}
.cdp-service-foot .cdp-service-cta {
  border-top: 1px solid #e6ebef;
  padding-top: 30px;
  margin-bottom: 8px;
}
.cdp-service-foot a { color: #6696b7; }
.cdp-service-foot .cdp-service-back { font-weight: 600; }
@media only screen and (min-width: 768px) and (max-width: 980px) {
  .cdp-service-foot { padding-left: 40px !important; padding-right: 40px !important; }
}
@media only screen and (max-width: 767px) {
  .cdp-service-photo { margin-bottom: 26px; }
  .cdp-service-foot { padding-left: 0 !important; padding-right: 0 !important; }
}

/* 8. GALLERY PAGINATION — "Nossas Instalações" on the homepage.
   Eight photographs of the clinic, shown four at a time; Divi's own pagination
   underneath does work (clicking "2" swaps the four), but it arrived as three
   grey 16px words hard against the right edge of the viewport, the current page
   marked only by a pale teal that reads as the same grey at a glance. It looked
   like text left behind rather than a control, and on a phone the digits were a
   16px tap target.
   Right alignment is the original layout and stays. What changes is legibility
   and affordance: the site's own body grey instead of #999, the current page in
   the footer navy with the accent rule under it, a real hit area, and the
   pagination aligned with the page. Colours are the ones already in this site:
   #77746e body grey, #192d41 footer navy, #6696b7 accent.
   Alignment, corrected: the gallery itself is full-bleed, so a right padding of
   any size still leaves the control hanging in the bleed with nothing above it
   to line up against. Every other block on this page sits in Divi's row measure
   — 80% of the viewport, capped at 1080px, centred, which is 180..1260 at 1440.
   The pagination now takes that same measure, so "Seguinte" ends exactly on the
   right edge of the content column instead of 108px outside it. */
.et_pb_gallery .et_pb_gallery_pagination {
  width: 80%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 0 26px;
}
.et_pb_gallery .et_pb_gallery_pagination ul {
  margin: 0;
  line-height: 1;
}
.et_pb_gallery .et_pb_gallery_pagination ul li {
  display: inline-block;
  margin: 0 2px;
  vertical-align: middle;
}
.et_pb_gallery .et_pb_gallery_pagination ul li a {
  display: inline-block;
  min-width: 34px;
  padding: 9px 6px;
  border-bottom: 2px solid transparent;
  color: #77746e;
  font-size: 15px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.et_pb_gallery .et_pb_gallery_pagination ul li a:hover,
.et_pb_gallery .et_pb_gallery_pagination ul li a:focus {
  color: #192d41;
  border-bottom-color: #c3d5e2;
}
.et_pb_gallery .et_pb_gallery_pagination ul li a:focus-visible {
  outline: 2px solid #6696b7;
  outline-offset: 2px;
}
/* the page you are looking at: navy text plus the accent rule, so the state is
   carried by weight and shape and not by a colour difference alone */
.et_pb_gallery .et_pb_gallery_pagination ul li a.active,
.et_pb_gallery .et_pb_gallery_pagination ul li a[aria-current="page"] {
  color: #192d41;
  font-weight: 600;
  border-bottom-color: #6696b7;
}
/* "Anterior" / "Seguinte" are words, not digits — they need the width */
.et_pb_gallery .et_pb_gallery_pagination ul li.prev a,
.et_pb_gallery .et_pb_gallery_pagination ul li.next a {
  min-width: 0;
  padding-left: 12px;
  padding-right: 12px;
}
@media only screen and (max-width: 980px) {
  .et_pb_gallery .et_pb_gallery_pagination { text-align: center; }
  .et_pb_gallery .et_pb_gallery_pagination ul { text-align: center; }
}
@media only screen and (max-width: 767px) {
  .et_pb_gallery .et_pb_gallery_pagination { width: 100%; padding: 14px 0 22px; }
  .et_pb_gallery .et_pb_gallery_pagination ul li a {
    min-width: 44px;
    padding-top: 13px;
    padding-bottom: 13px;
    font-size: 16px;
  }
}

/* 9. IMPLANTES DENTÁRIOS — the third before/after row did not line up.
   Caso 01 and Caso 02 were both photographed 1024x682 and render 510x340, so
   their bottom edges meet. Caso 03 was shot at two different crops — 1024x544
   for "Antes" and 1024x475 for "Depois" — so at the same 510 width the left
   half came out 271px tall and the right half 237px, and the two halves of a
   comparison whose entire point is comparability ended 34px apart.
   Both halves of that row are now held to the "Antes" frame, 1024x544, and the
   "Depois" fills it: the wider crop loses about 6% off each side, which is
   framing the comparison was supposed to share anyway, and nothing is stretched
   — a 1024px source covering a 510px box still has pixels to spare. Only the
   third row is touched; the first two already agree. */
body.single-project .cdp-cases .et_pb_image_3 img,
body.single-project .cdp-cases .et_pb_image_6 img {
  display: block;
  width: 100%;
  aspect-ratio: 1024 / 544;
  height: auto;
  object-fit: cover;
  object-position: center;
}

/* 10. QUEM SOMOS — the Director's CV, the longest text block on the site, sat as
   white 14px on the brand blue #6696b7: a contrast ratio of 3.18:1, under the
   4.5:1 WCAG AA asks for body text, and on a phone it runs to some thirty lines.
   The band keeps the brand hue (204°) and only goes darker, to #4a7ba1, which
   measures 4.52:1 against white. Nothing else on the site uses this band, so the
   blue everywhere else is untouched. The whole band is recoloured, not just the
   text module inside it — recolouring only the module leaves a darker rectangle
   floating on a lighter band, which looks like a mistake rather than a fix. */
body.page-id-79 .et_pb_section_1,
body.page-id-79 .et_pb_section_1 .et_pb_text_1 {
  background-color: #4a7ba1 !important;
}


/* 11. THE ORNAMENT ABOVE EVERY PAGE TITLE — moved out of <img> and into CSS.
   The same 1296x75 engraved flourish sat in an <img role="presentation"> on all twenty pages, and
   the client's image check reads that as one content photograph recycled twenty times. It is not a
   photograph, so the fix is not an exemption: a decoration belongs in a background, and an empty
   decorative <img> does not belong in the accessibility tree either.
   The span reproduces the image's box exactly rather than approximately. Measured before the swap,
   the <img> computed display:inline at 432x25 inside a wrap with line-height:0 — its own 1296px
   width capped by max-width:100% inside a module capped at 40%. A block span carrying that same
   1296px width, the same max-width and aspect-ratio 1296/75 therefore lands on the identical box
   wherever the module is capped differently: 648x38 for the homepage's second copy at 60%, and
   281x16 on the phone, where section 4 above raises the cap to 90%. Verified at 1440 and 390 on
   seven pages before and after; every box and every page height was unchanged. */
.cdp-rule {
  display: block;
  width: 1296px;
  max-width: 100%;
  aspect-ratio: 1296 / 75;
  background: url(/img/borda-364f6643.png) center / contain no-repeat;
}

/* 12. THE PAGES THAT SAID NOTHING — measure for the copy written into them.
   /nossos-servicos/ carried 315 characters of body text and /contactos/ 359: a heading over a grid
   of tiles, and an address. The new prose reuses the theme's own idiom rather than inventing a
   layout — Divi section > row > 4_4 column, the body measure the thirteen service pages already
   use (120px inset inside the 1080px row, 40px at tablet, flush at phone), and .cdp-service-photo
   for the recovered photograph, so the picture sits in the same 520px slot as every service hero.
   Left-aligned on purpose: the site centres a single paragraph under a title, and centring holds
   at that length, but the blocks below run to three and four paragraphs under their own <h2>s,
   where a centred ragged-both-edges column stops being readable. */
.cdp-hub-intro {
  padding: 0 120px;
  margin-top: 6px;
}
.cdp-hub-intro p:last-child {
  margin-bottom: 0;
}
/* The new block is its own Divi section, so it inherited a full section pad on top of the pad the
   section above it already ends with: measured 244px of white between the map and the photograph
   on /contactos/ and 255px between the last services tile and the photograph. One pad is a break,
   two is a hole — the section keeps its bottom pad and gives the top one back. */
.cdp-say-section {
  padding-top: 0 !important;
}
.cdp-hub-common {
  padding-top: 10px !important;
}
.cdp-hub-common-text {
  padding: 0 120px;
  text-align: left;
}
.cdp-hub-common-text h2 {
  margin-top: 30px;
  padding-bottom: 8px;
}
.cdp-hub-common-text h2:first-child {
  margin-top: 0;
}
.cdp-hub-common-text .cdp-service-cta {
  border-top: 1px solid #e6ebef;
  margin-top: 30px;
  padding-top: 30px;
  text-align: center;
}
.cdp-hub-common-text .cdp-service-cta a {
  color: #6696b7;
}
@media only screen and (min-width: 768px) and (max-width: 980px) {
  .cdp-hub-intro,
  .cdp-hub-common-text { padding-left: 40px; padding-right: 40px; }
}
@media only screen and (max-width: 767px) {
  .cdp-hub-intro,
  .cdp-hub-common-text { padding-left: 0; padding-right: 0; }
}

/* 13. SERVICE PAGES — the sections written into them were not headings.
   The seven pages that were taken from one paragraph to three sections marked each section title
   as <p><strong>Titulo</strong></p>. The words rendered bold, so the pass looked done, but the
   document outline of every one of those pages was h1 + the footer's four h4s and nothing else:
   zero h2. On the pages this restore exists to rank, the structure a reader can see must also be
   the structure the markup declares — a <strong> is emphasis inside a paragraph, not a section.
   The titles are now real <h2>s.
   The wrapper exists because of what the module around them does. The builder gives the whole body
   column .et_pb_text_align_center, which is right for the archive's single centred paragraph and
   wrong for 2700 characters in three sections: centred prose with two ragged edges has no left
   margin for the eye to return to, and the headings lose the alignment that makes them read as
   entry points. The same content pass already solved this on /contactos/ and /nossos-servicos/ —
   a centred lead paragraph, then the sections left-aligned inside .cdp-hub-common-text — so the
   heading rhythm here is deliberately identical to that block rather than a second invention.
   The archive's own opening paragraph keeps its centring: it is inherited text and it is short. */
.cdp-service-more {
  text-align: left;
}
.cdp-service-more h2 {
  margin-top: 30px;
  padding-bottom: 8px;
}

/* ------------------------------------------------------- legibility gate, 2026-08-18

   Finger-sized hit areas (WCAG 2.5.8: 24px in the smaller dimension). Measured with
   _scripts/_legib_targets.js at 1440 and 390.

   The logo link and every gallery thumbnail link are inline anchors wrapping a block image, so the
   box the browser hit-tests was the 19px line box next to a 518px-wide logo and a full-width photo
   - the picture looks tappable and the anchor under the finger is a sliver. inline-block makes the
   anchor wrap what it contains, which is what it always looked like it did. */
.logo_container > a,
.et_pb_gallery_image > a { display: inline-block; }

/* The service grid's titles are ordinary inline text links at 19px; vertical padding grows the hit
   rectangle without moving the line box, so nothing in the grid shifts. */
.et_pb_portfolio_grid_items h2.et_pb_module_header a,
.et_pb_portfolio_item h2 a,
a.cdp-mail,
#main-footer a { padding-top: 4px; padding-bottom: 4px; }