/* restore extras — generated by restore_04_polish.py */

/* Consent overlays: the restore ships no analytics or third-party tracking at all, so there
   is nothing to consent to. Their scripts are gone too, meaning the banner can never be
   dismissed and would cover the top of every page. Removing the markup is unreliable when a
   JS bundle re-renders it, so it is hidden here as well. */
.cookies-banner, .cookies-banner-content, .cookie-banner, .cookie-consent, .cookie-notice,
.cc-window, .cc-banner, #cookie-law-info-bar, #cookieChoiceInfo, .gdpr-banner,
#tarteaucitronRoot, .consent-overlay, .cookiebar {
  display: none !important;
}
body.cookie-banner-open, body.has-cookie-banner, html.cookies-open {
  overflow: auto !important;
}

/* Dead account/login modals left by the CMS (no backend on a static host) */
.modal-login, #loginModal, .login-modal { display: none !important; }

/* Carousel slots the platform's JS bundles would have filled at runtime: without a working
   bundle they stay as <img> elements with no src and render as broken-image icons. Nothing is
   lost by hiding them — they never had content in the restore. */
img:not([src]), img[src=""], img[src="#"] { display: none !important; }

/* The client's backlink block must read as the page's own copy. Where a theme only colours
   links inside specific containers, the anchor would otherwise look like plain text — inherit
   the surrounding colour but keep an underline so it is still visibly a link. */
.content-wraparea a { color: inherit; text-decoration: underline; }

/* A few px of horizontal overflow on phones (an absolutely-positioned login list, a wide footer
   logo) makes the whole page pannable sideways, which reads as broken.
   NB: use `clip`, never `hidden`, and never on html together with height:100%. `overflow:hidden`
   turns the element into a scroll container: on themes that set html{height:100%} it stops body's
   overflow propagating to the viewport, the window stops scrolling entirely and every
   scroll-driven behaviour (sticky nav, back-to-top, in-page anchors, PageDown/End) dies.
   `clip` suppresses the sideways pan without creating a scroll container. */
body { overflow-x: clip; }
/* ---- end generated block; anything below is preserved across re-runs ---- */

/* =====================================================================
   MediCenter behaviours restored by /js/restore-interactions.js
   ---------------------------------------------------------------------
   The theme hides every carousel until its jQuery plugin measures and reveals it:

       .horizontal-carousel, .image-carousel, ... { display: none; }

   That plugin did not survive the archive, so the rule never lifted and three
   populated homepage sections — SPECIALTIES, "Meet our Doctors", testimonials —
   rendered as tall empty gaps. The rule is undone here and the strips are laid
   out as the flex track the replacement script drives. Metrics (285px tiles,
   30px gutters) are the theme's own; nothing new is introduced.
   ===================================================================== */
.horizontal-carousel, .image-carousel { display: block; }
.image-carousel img, .post-content a.post-image img, .services-list a > img { display: block; }

/* NB: no carousel, lightbox or detail-panel styling belongs here. The theme's own carouFredSel,
   prettyPhoto and gallery scripts were recovered from the vendor and drive those again natively;
   a second set of rules would fight the inline styles those plugins write while they animate. */

/* =====================================================================
   Homepage hero, rebuilt from the Revolution Slider markup by
   /js/restore-interactions.js. Type, colours and the 1590x670 frame are
   the slider's own; only the per-layer animation is not reproduced.
   ===================================================================== */
.restore-hero-wrapper { position: relative; overflow: hidden; background: #fff1dc; }
.rev_slider.restore-hero { position: relative; margin: 0; padding: 0; list-style: none; }
.rev_slider.restore-hero > ul { margin: 0; padding: 0; list-style: none; position: relative; }
.restore-hero-slide {
  display: none;
  position: relative;
  width: 100%;
  min-height: 380px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  list-style: none;
  margin: 0;
}
.restore-hero-slide.is-active { display: block; animation: restoreHeroIn .6s ease both; }
@keyframes restoreHeroIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .restore-hero-slide.is-active { animation: none; }
}
.restore-hero-copy {
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  padding: 0 8%;
  text-align: center;
}
.restore-hero-copy p {
  margin: 0 0 8px;
  color: #002d81;
  font-family: 'Yanone Kaffeesatz', 'Source Sans Pro', 'Open Sans', Arial, sans-serif;
  font-size: 40px;
  line-height: 1.18;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
.restore-hero-copy p + p { font-size: 26px; font-weight: 400; color: #967d5d; }

.restore-hero-nav {
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  display: flex;
  justify-content: center;
  gap: 9px;
  z-index: 3;
}
.restore-hero-nav button {
  width: 11px; height: 11px;
  padding: 0;
  border: 1px solid #002d81;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.restore-hero-nav button.is-active { background: #002d81; }
.restore-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  font-size: 28px;
  line-height: 1;
  color: #002d81;
  background: rgba(255, 241, 220, .8);
  border: 1px solid #eac696;
  cursor: pointer;
  z-index: 3;
}
.restore-hero-arrow:hover { background: #fff1dc; }
.restore-hero-prev { left: 14px; }
.restore-hero-next { right: 14px; }

@media screen and (max-width: 767px) {
  .restore-hero-slide { min-height: 260px; }
  .restore-hero-copy p { font-size: 25px; }
  .restore-hero-copy p + p { font-size: 17px; }
  .restore-hero-arrow { width: 36px; height: 36px; font-size: 22px; }
}

/* The gallery caption is positioned over the tile; where a tile is short the two long lines of a
   specialty name were spilling past it onto the block below. Let the caption size to its text. */
.gallery-box .description { position: relative; overflow: hidden; }
.gallery-box .description h4, .gallery-box .description h5 { overflow-wrap: break-word; }

/* The mobile nav the burger now opens. */
.restore-nav-open { display: block !important; }

/* A handful of menu entries lost their <a> at build time because the pages behind them were never
   archived (PROGRAM BUSINESSMAN, NATURAL PROGRAMS OBJECTIVES, DEPENDENCE & MOTIVATION TEST). They
   survive as bare text nodes inside <li>, which meant they missed the theme's link padding
   entirely and sat unaligned in the bar. TIMETABLE was the only one of them at the top level and
   now has a real page and a real link again; the rest sit inside the TOURISTIC PROGRAMS dropdown,
   where they read as section labels. This gives them their siblings' metrics so the row is even,
   and a plain cursor so nothing invites a click that cannot go anywhere. */
.sf-menu li > a { cursor: pointer; }
/* The metrics belong on the <span>, exactly where the missing <a> would have carried them. Put
   them on the <li> and they stack on the theme's own padding. Every top-level <li> in this bar is painted white and its <a> paints the cream tab on top; with
   no <a> the white showed through full height and read as a dropdown frozen open below the strip.
   These are the sibling <a>'s own metrics and colour, measured off the rendered bar. */
.sf-menu > li.menu-item:not(:has(> a)) > span,
#navigation .menu-item:not(:has(> a)) > span {
  display: block;
  padding: 11px 16px 11px 15px;
  line-height: 24px;
  background-color: #fff1dc;
  color: #967d5d;
  cursor: default;
  white-space: nowrap;
}
.sf-menu > li.menu-item:not(:has(> a)),
#navigation .menu-item:not(:has(> a)) { color: #967d5d; cursor: default; }
.sf-menu ul li.menu-item:not(:has(> a)) {
  padding: 11px 20px;
  font-style: italic;
  opacity: .85;
}

/* Inside a plain text column the theme's .mc-button has no background rule of its own — it relies
   on a coloured section behind it — so the button on the authored pages came out white on white
   and read as an empty outline. Give it the clinic's own button colours, the same pair the
   customiser sets for the contact form's submit. */
.wpb_text_column a.mc-button,
.wpb_text_column a.mc-button.more {
  display: inline-block;
  padding: 11px 22px;
  color: #002d81;
  background-color: #eac696;
  border: 1px solid #eac696;
  text-decoration: none;
}
.wpb_text_column a.mc-button:hover,
.wpb_text_column a.mc-button.more:hover {
  color: #fff1dc;
  background-color: #002d81;
  border-color: #002d81;
}

/* The language switcher is a plain <ul>; without the theme's list reset it showed a bullet
   beside the flag. */
#lang_sel, #lang_sel ul, #lang_sel li,
.wpml-ls-legacy-dropdown ul, .wpml-ls-legacy-dropdown li { list-style: none; }

/* Placeholder tiles carry their caption inside the image; keep them from being upscaled past
   their real pixel size, which would blur that caption. */
.gallery-box img { image-rendering: auto; }

/* =====================================================================
   Second review pass — defects the independent reviewer located.
   ===================================================================== */

/* Staff portraits. The theme keeps every .mc-gallery thumbnail hidden until its isotope grid
   plugin measures the tiles and reveals them; that plugin did not survive the archive, so all
   eleven team cards and every doctor detail panel rendered as an empty box with the theme's
   loading spinner frozen on top of it. Reveal the images and retire the spinner, which can
   never stop spinning now that nothing is loading behind it. */
.mc-gallery .gallery-box > img,
.gallery-item-details .gallery-box > img,
.gallery-box > img.mc-preload { display: block; width: 100%; height: auto; }
.mc-preloader { display: none !important; }

/* Hero caption on phones. The theme's responsive sheet sets display:none on <p> inside the
   slider band (its own captions were absolutely-positioned layers), which silenced the rebuilt
   hero copy below 768px and left the most valuable screen on the site as a bare gradient. */
@media screen and (max-width: 767px) {
  .restore-hero-copy p {
    display: block !important;
    position: static !important;
    float: none !important;
    width: auto !important;
    font-size: 21px !important;
    /* the theme pulls slider paragraphs up by 112px on phones — it expected absolutely
       positioned caption layers, and here it collapsed the caption box to zero height */
    margin: 0 0 6px !important;
  }
  .restore-hero-copy p + p { font-size: 17px !important; }
}

/* The announcement block is the only section the theme styles by <h2> alone, so the heading and
   its prose fell back to the browser's default face and read as pasted-in foreign matter beside
   the rest of the page. These are the site's own two families, taken from its own stylesheet. */
.announcement h1, .announcement h2 {
  font-family: 'Source Sans Pro', 'Arial', sans-serif;
  font-size: 30px;
  line-height: 1.4;
}
.announcement, .announcement p, .announcement span, .announcement a, .announcement li {
  font-family: 'Open Sans', 'Arial', sans-serif;
}

/* =====================================================================
   Pricing comparison tables — the css3_web_pricing_tables_grids plugin.
   ---------------------------------------------------------------------
   FIVE pages carry one of these widgets: /pricing-plans/ (#medicenter_blue),
   /program-peace-of-mind/ (#medicenter_green), /stop-smoking-drugs-alchool/
   (#medicenter_orange), /detoxicationbody-energetic-harmonization/
   (#harmonization) and /stop-pain/, whose id the plugin emitted as
   "Stop Pain" — a value with a space in it, so every selector the plugin
   generated for that table ("div.p_table_responsive#Stop Pain li…") parses
   as "#Stop  Pain" and matches nothing at all. Its whole responsive
   ruleset is therefore dead.

   Everything below is scoped by the widget's own CLASSES, never by id, so
   one rule covers all five tables. Where a table still has working
   id-scoped rules of its own, those keep winning on specificity and only
   /stop-pain/ falls through to the generic values — which are the ones the
   plugin itself writes for a four-column table.
   ===================================================================== */

/* The raised "featured plan" column. The plugin lifts div.active_column by
   left:-5px / top:-15px and pads its rows 12px instead of 9px, permanently —
   it is the same treatment a column gets on :hover. On this table it means the
   featured column's four marks land at y=256/300/350/407 while every other
   column's land at 256/300/344/388, so a visitor reading across "Ceramic crown
   € 435" cannot tell which mark belongs to it, the card overhangs its
   neighbours' edges, and it trails a stray white band under "Learn more".
   Restore the base metrics — height/padding straight out of the plugin's own
   common-styles block — and keep the drop shadow and the column's own header
   colour, which are what actually mark the plan as featured. Applies at every
   width: the theme's responsive sheet already does the left/top half of this
   below 479px, so this is that decision carried up to the desktop.
   NB the `body` prefix is load-bearing: the plugin's stylesheet is linked from
   the page BODY, long after this file, so an equally specific selector would
   lose on source order. */
body div.p_table_1 div.active_column {
  left: 0;
  top: 0;
  z-index: 2;
}
body div.p_table_1 div.active_column li.row_style_1,
body div.p_table_1 div.active_column li.row_style_2,
body div.p_table_1 div.active_column li.row_style_3,
body div.p_table_1 div.active_column li.row_style_4 {
  height: 19px;
  padding: 9px 0 !important;
}
body div.p_table_1 div.active_column li.header_row_1 { padding: 0 !important; }
body div.p_table_1 div.active_column li.header_row_2 { padding: 0 0 14px !important; }
body div.p_table_1 div.active_column li.footer_row { padding: 10px 0 !important; }

/* Phones. The plugin's responsive script (which stacked the plans) did not
   survive, so four columns stayed crammed into 390px: prices overflowed into
   their neighbours and the row labels were clipped mid-word. The columns keep a
   readable width and the table scrolls sideways inside its own box — the page
   itself never pans. */
@media screen and (max-width: 767px) {
  body div.p_table_responsive {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  body div.p_table_responsive > div {
    flex: 0 0 auto;
    float: none !important;
    width: 42vw !important;
    min-width: 150px;
    transform: none !important;
    margin: 0 !important;
  }
  body div.p_table_responsive .p_table_column_price,
  body div.p_table_responsive .price { white-space: nowrap; }
  /* the plugin's own phone type sizes for a four-column table */
  body div.p_table_1 h1, body div.p_table_1 h1 span { font-size: 42px !important; }
  body div.p_table_1 h2, body div.p_table_1 h2 span { font-size: 18px !important; }
}

/* Below 479px the theme hides the caption column and repeats each row's label
   inside every column instead. Those labels are two and three words long and
   the fixed 41px row the theme then imposes cut them off mid-word. Let the row
   grow to its text: the label is identical in every column, so the rows still
   line up across the table. */
@media screen and (max-width: 479px) {
  body div.p_table_1.p_table_responsive.p_table_hide_caption_column li.row_style_1,
  body div.p_table_1.p_table_responsive.p_table_hide_caption_column li.row_style_2,
  body div.p_table_1.p_table_responsive.p_table_hide_caption_column li.row_style_3,
  body div.p_table_1.p_table_responsive.p_table_hide_caption_column li.row_style_4 {
    height: auto !important;
    min-height: 41px;
  }
  /* THE 12px FLOOR. The plugin's own phone size for these row labels was 10px — that is what the
     archive shipped, and the same 10px is written into the inline <style> block the shortcode
     emits on each of the seven pages that carry a table (raised there too, for the same reason).
     10px is the "hold a magnifying glass to the screen" complaint and it is the site's PRICES that
     were set in it: 128 elements across those seven pages at 390. Raised to 12px, which is the
     floor a legibility gate will accept and the smallest change that clears it — not to a size
     somebody thought looked better. The rows above are already height:auto/min-height so the extra
     2px lets the label grow rather than clip. */
  body div.p_table_1 li.row_style_1 span,
  body div.p_table_1 li.row_style_2 span,
  body div.p_table_1 li.row_style_3 span,
  body div.p_table_1 li.row_style_4 span { font-size: 12px !important; }
}

/* The five insurer logos in "Agreements" are real artwork at five different aspect ratios; sized
   to a common box they line up as a set instead of as five ragged tiles. */
.wpb_raw_code .wpb_wrapper > img {
  display: block;
  width: 100% !important;
  max-width: 300px;
  height: 78px !important;
  object-fit: contain;
  object-position: left center;
}

/* The "Leave a reply" fields on the two blog posts. The theme paints a form field #F0F0F0 with
   #000 text; the site's customiser then repaints .comment-form input / .comment-form textarea with
   the brand navy #002d81 and leaves the text colour alone, so YOUR NAME, YOUR EMAIL and YOUR
   COMMENT rendered as three solid navy blocks in which anything typed is black on navy — invisible.
   They are given the same field colour the site's own appointment form uses (#e0e0e0, set by
   #contact_form's rule three lines further down the same customiser block), so both forms on the
   site now look like forms. The navy search box in the header is a different rule and is left as
   the site drew it.
   The `body` prefix is load-bearing: that customiser <style> sits in the page BODY, after this
   file, so an equally specific selector would lose on source order. */
body .comment-form input[type="text"],
body .comment-form input[type="email"],
body .comment-form input:not([type]),
body .comment-form textarea {
  background-color: #e0e0e0;
  color: #000;
}
body .comment-form input::placeholder,
body .comment-form textarea::placeholder { color: #6b6b6b; }

/* The appointment form's own confirmation line, shown by /js/restore-interactions.js once the
   visitor's mail client has been handed the message. */
.restore-form-note {
  margin-top: 12px;
  color: #002d81;
  font-family: 'Open Sans', 'Arial', sans-serif;
}
.restore-form-fallback { margin-top: 10px; color: #967d5d; }

/* =====================================================================
   Round-3 review — the remaining located defects.
   ===================================================================== */

/* TOURISTIC PROGRAMS in the main bar. It is a real menu entry with a real dropdown; only its own
   page was never archived, so it has no <a> and picked up the muted brown this file gives the
   label-only entries INSIDE that dropdown. At top level, beside six navy siblings, that reads as a
   disabled or broken tab. Same navy as its siblings; the cursor stays default because the item
   itself still goes nowhere — it opens the submenu. */
.sf-menu > li.menu-item:not(:has(> a)) > span,
#navigation > ul > li.menu-item:not(:has(> a)) > span { color: #002d81; }

/* The language strip. It is printed after </div> of the footer container, so it sat on the page's
   own pale ground below the black copyright bar, detached — and on the doctor profiles its white
   panel stopped after "Français", leaving "Português" stranded. Give it the copyright bar's own
   colours across the full width and it reads as the last line of the footer, which is where the
   theme meant to put it. */
.wpml-ls-statics-footer {
  background: #151515;
  color: #bac0c5;
  margin-bottom: 0 !important;
  padding: 0 0 24px;
  border: 0;              /* WPML's own 1px transparent border let the page ground through */
}
.wpml-ls-statics-footer > ul { text-align: center; }
/* WPML's dropdown skin paints each item white — it was written for the header's popup panel, where
   white is the panel. Down here that put a white tile behind "English", printed "Français" white on
   white so it vanished, and left "Português" outside the tile: the reviewer's "its white background
   covers only English and Français". Nothing in this strip is a panel, so nothing is painted. */
.wpml-ls-statics-footer li,
.wpml-ls-statics-footer a,
.wpml-ls-statics-footer span { background: transparent !important; }
.wpml-ls-statics-footer a, .wpml-ls-statics-footer a span { color: #fff !important; }
.wpml-ls-statics-footer .wpml-ls-current-language a,
.wpml-ls-statics-footer .wpml-ls-current-language a span { color: #bac0c5 !important; }

/* The contact page map on phones. The panel is a 1200x560 OpenStreetMap crop, so at the 300px the
   theme's column gives it on a 390px screen it came out ~300x140 — a letterbox smaller than the
   form fields under it, and the only picture on the page. The marker sits dead centre of the
   image, so cropping to a taller window keeps the clinic and its street in view. */
@media screen and (max-width: 767px) {
  #map img {
    height: 260px !important;
    object-fit: cover;
    object-position: center center;
  }
}

/* The appointment form's consent line (markup added by ic_fix3_content.py). */
.restore-consent { clear: both; margin-top: 14px; }
.restore-consent-label {
  display: block;
  font-size: 13px;
  line-height: 1.55;
  color: #6b6b6b;
  text-transform: none;
  letter-spacing: 0;
}
.restore-consent-label input { width: auto; margin-right: 8px; vertical-align: middle; }

/* The appointment form on phones. The two desktop columns stack whole, so the visitor met FIRST
   NAME, DATE OF BIRTH, PHONE NUMBER and only then LAST NAME — the two halves of their own name
   separated by two unrelated fields. The fieldsets are dissolved into the row on a phone and the
   fields put back into the reading order the DESKTOP layout already has across its rows:
   first/last, date of birth/social security number, telephone/e-mail. Desktop is untouched. */
@media screen and (max-width: 767px) {
  #contact_form > div.vc_row:first-of-type { display: flex; flex-direction: column; }
  #contact_form > div.vc_row:first-of-type > fieldset { display: contents; }
  #contact_form > div.vc_row:first-of-type > fieldset:nth-of-type(1) > :nth-child(1) { order: 1; }
  #contact_form > div.vc_row:first-of-type > fieldset:nth-of-type(1) > :nth-child(2) { order: 2; }
  #contact_form > div.vc_row:first-of-type > fieldset:nth-of-type(2) > :nth-child(1) { order: 3; }
  #contact_form > div.vc_row:first-of-type > fieldset:nth-of-type(2) > :nth-child(2) { order: 4; }
  #contact_form > div.vc_row:first-of-type > fieldset:nth-of-type(1) > :nth-child(3) { order: 5; }
  #contact_form > div.vc_row:first-of-type > fieldset:nth-of-type(1) > :nth-child(4) { order: 6; }
  #contact_form > div.vc_row:first-of-type > fieldset:nth-of-type(2) > :nth-child(3) { order: 7; }
  #contact_form > div.vc_row:first-of-type > fieldset:nth-of-type(2) > :nth-child(4) { order: 8; }
  #contact_form > div.vc_row:first-of-type > fieldset:nth-of-type(1) > :nth-child(5) { order: 9; }
  #contact_form > div.vc_row:first-of-type > fieldset:nth-of-type(1) > :nth-child(6) { order: 10; }
  #contact_form > div.vc_row:first-of-type > fieldset:nth-of-type(2) > :nth-child(5) { order: 11; }
  #contact_form > div.vc_row:first-of-type > fieldset:nth-of-type(2) > :nth-child(6) { order: 12; }
}

/* NOT on the reviewer's list; found while re-shooting the post pages and recorded in the report.
   /2017/06/16/…/ embeds a WordPress caption block that carries a hard style="width: 550px" from the
   archive. At 390px that pushed the whole article to 615px wide, so every line of the post was cut
   off at the right edge of the phone. The image inside it is 540px; letting the block size itself
   leaves the desktop exactly as it was and lets the phone wrap. */
.wp-caption { width: auto !important; max-width: 100%; }
.wp-caption img { max-width: 100%; height: auto; }

/* =====================================================================
   Round-4 review — the located defects.
   ===================================================================== */

/* THE SEARCH BOX, on every page that has one. The same customiser line that painted the comment
   fields navy also names `.search .search-input`, and the theme sets `.search input { color:#999 }`
   for a field it expects to be #F0F0F0 — so the box was grey type on the brand navy. Round 3
   repainted the comment form and stopped there, which left the corrected style and the broken one
   sitting side by side on the two post pages. Same field colour as every other form on the site.
   The `body` prefix is load-bearing: the customiser <style> sits in the page BODY, after this file,
   so an equally specific selector would lose on source order. */
body .search .search-input { background-color: #f0f0f0; color: #111; }
body .search .search-input::placeholder { color: #6b6b6b; }
body .search .search-input:focus { color: #000; }

/* /search/ is the one page whose whole purpose is that field, and it inherited the header's fixed
   200px box: its own placeholder was clipped mid-word to "Search the clinic's ¡". Its submit is a
   bare `.more.mc-button`, which the theme draws as white type inside a white border — legible only
   on the coloured panels it is otherwise used on, invisible here. And because `.search input`
   floats, the "Type a word above to search the site." line set itself BESIDE the field instead of
   under it. A flex row ignores the float, lets the field take the width it has, and puts the
   status line back on its own line; the button takes the same two colours the SEND button on
   /contact-vilamoura/ is given by the site's own customiser. */
#restore-search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  max-width: 640px;
}
#restore-search-form .search-input {
  float: none;
  width: auto;
  flex: 1 1 240px;
  min-width: 0;
  padding-right: 22px;      /* the 57px the header reserves is for its magnifier, absent here */
}
#restore-search-form .search-input:focus { width: auto; }
#restore-search-form .mc-button {
  float: none;
  background-color: #eac696;
  border-color: #eac696;
  color: #fff;
  cursor: pointer;
}
#restore-search-form .mc-button:hover {
  background-color: #002d81;
  border-color: #002d81;
}
#restore-search-status, #restore-search-results { clear: both; }

/* The three programme pages carry a decorative rule the author typed as forty-four ellipsis
   characters in a row. That is one unbreakable "word" 438px wide, so at a 390px phone the document
   measured 511px and the browser shrank the whole page to about 76% to make it fit: /stop-pain/,
   /program-peace-of-mind/ and /stop-smoking-drugs-alchool/ set every word a quarter smaller than
   /pricing-plans/ and /detoxicationbody-energetic-harmonization/, which carry no such line.
   `body { overflow-x: clip }` above hides the scrollbar but not the shrink — the page is scaled to
   the width the content asked for before anything is clipped. Letting an over-long run break is the
   cure, and it can only ever apply to a "word" that does not fit, so no ordinary sentence moves. */
.theme-page { overflow-wrap: break-word; }

/* TOURISTIC PROGRAMS, still the odd cell in the main bar. Round 3 gave its label the navy its
   siblings have, and the item still read lighter: it is a <span>, not an <a>, and the theme's
   cell padding leaves the span two pixels shorter than the anchors, so a hairline of the <li>'s
   own white ground showed under the cream on that one item across all 35 pages. Painting the cell
   itself removes the strip whatever the label's box does. */
.sf-menu > li.menu-item:not(:has(> a)),
#navigation > ul > li.menu-item:not(:has(> a)) { background-color: #fff1dc; }

/* Primary buttons: Search, SEND, POST COMMENT. All three paint white on the clinic's peach
   #eac696, which measures 1.61:1 - the label is barely legible in a screenshot and fails the
   4.5:1 floor by a wide margin. This is the site's own long-standing pairing, not something a
   round introduced, so the peach stays and only the ink changes: to #002d81, the navy the site
   already prints on this exact peach in the three footer banner boxes. Measured 7.7:1 on the
   same background, and it is the clinic's own colour rather than a new one. */
#restore-search-form .mc-button,
.comment-form .mc-button,
.contact-form .mc-button,
.comment-form input[type="submit"],
.contact-form input[type="submit"] { color: #002d81; }
#restore-search-form .mc-button:hover,
.comment-form .mc-button:hover,
.contact-form .mc-button:hover,
.comment-form input[type="submit"]:hover,
.contact-form input[type="submit"]:hover { color: #fff1dc; }

/* Hero caption over a REAL photograph. The rebuilt hero was styled while every slide was a pale
   generated placeholder, so navy type with a white shadow and no panel read cleanly. With the
   clinic's own slider photographs restored underneath - a sunlit park, a treatment room - the
   same type sits on bright, busy pixels and "In the heart of Vilamoura." is barely readable.
   Rather than recolour the type, give it a ground: the cream panel with navy text is the exact
   pairing the three CTA panels directly below the hero already use, so the band belongs to the
   design rather than being introduced by it, and the contrast no longer depends on which slide
   happens to be showing. */
.restore-hero-copy {
  left: 50%; right: auto;
  transform: translate(-50%, -50%);
  width: auto;
  max-width: 78%;
  padding: 22px 38px;
  background: rgba(255, 241, 220, .9);
}
.restore-hero-copy p { text-shadow: none; }
.restore-hero-copy p + p { color: #6b5a41; }
@media (max-width: 767px) {
  .restore-hero-copy { max-width: 88%; padding: 14px 18px; }
}

/* =====================================================================
   Round 6 — defects the independent reviewer located.
   ===================================================================== */

/* THE BURGER MENU, and the single worst thing on the site at 390. Five of the seven top-level rows
   are <a> and render as the theme's 47-48px bordered cell; TOURISTIC PROGRAMS is a bare <span>
   among them, so it inherited none of that and measured 13px tall and 138px wide, hanging at x=45
   against the rows' x=63 — with TIMETABLE, whose anchor the build had dropped entirely, printed on
   top of it. TIMETABLE's anchor is restored in the markup because it has a page of its own;
   TOURISTIC PROGRAMS has none (it is a pure submenu parent, and on the desktop bar the same span
   opens its dropdown on hover), so it stays a span and is given the row here instead of being
   turned into an <a href="#"> that a visitor could click and get nothing from.
   The declarations are copied from .mobile-menu-container nav.mobile-menu>ul li a in mc-style.css
   so the row is identical to its siblings rather than merely similar. */
.mobile-menu-container nav.mobile-menu > ul li > span {
  display: block;
  color: #666;
  border: 1px solid #E5E5E5;
  border-top-width: 0;
  padding: 12px 20px;
  line-height: 22px;
  cursor: pointer;
}
.mobile-menu-container nav.mobile-menu > ul li ul > li > span {
  font-size: 13px;
  padding-left: 35px;
}

/* The same span on the DESKTOP bar. Its cream cell is painted (round 5 added that) but it carries
   no border, while every sibling <a> paints a 1px white one — so the cream ran 2px wider on that
   one item and the eye read the cell as a different shade. */
.sf-menu > li.menu-item > span { border: 1px solid #FFF; }
.mobile-menu-container nav.mobile-menu > ul li ul ul > li > span {
  font-size: 13px;
  padding-left: 50px;
}

/* Peach primary buttons: white label on #eac696 measures about 1.6:1, against a 4.5:1 floor. The
   clearest case is SEND at the foot of the appointment form on /contact-vilamoura/ at 390. The
   site itself never chose white for this pairing — every peach button the original wrote by hand
   (the homepage "Read More", the footer "Partnerships") carries color:#002d81, the site's own
   navy, which measures about 8:1 on the same ground. This makes the form and search buttons agree
   with the ones the clinic styled itself rather than inventing a colour. */
.comment-form .mc-button,
.contact-form .mc-button,
.contact-form input[type="submit"],
.comment-form input[type="submit"],
.search .search-submit,
form.search .search-submit {
  color: #002d81;
}
.comment-form .mc-button:hover,
.contact-form .mc-button:hover,
.contact-form input[type="submit"]:hover,
.comment-form input[type="submit"]:hover {
  color: #FFF;
}


/* ROUND 8. The plan tables scroll sideways on a phone (rule above) but nothing on
   screen said so, and on /pricing-plans/ two of the four plans sit off-screen with
   no affordance at all — a visitor reads four plans as two. The hint is shown only
   where the table actually overflows, and is hidden from wide screens where every
   column is already visible. */
.table-swipe-hint { display: none; }
@media screen and (max-width: 767px) {
  .table-swipe-hint {
    display: block;
    margin: 0 0 8px;
    font-size: 12px;
    font-style: italic;
    opacity: .75;
  }
}

/* --- HIT AREA ----------------------------------------------------------------------------------
   WCAG 2.5.8 puts the floor for anything a finger must hit at 24x24 CSS px, 2.5.5 the standard at
   44. Two shapes fail here.

   Most of them are standalone links set `display:inline`, so the border box is the height of the
   glyphs - the additional-links menu is 61x19, the contact addresses 134x18 - even though the line
   box around them is 14-24px. Vertical padding on an INLINE box enlarges the border box, and with
   it the hit target, WITHOUT changing the line box height: the menus keep their exact spacing and
   simply become hittable. That is why these are padding rather than line-height.

   The hero's slide dots were 11x11, which is the "too small for a finger" defect the client named.
   The dot has to keep its 11px look, so the button becomes a 24px hit area and the dot itself is
   drawn by a pseudo-element inside it; the flex gap drops to 0 because the box now carries the
   spacing the gap used to provide. */
#menu-additional-links li a,
ul.contact-data li .value a,
.news.clearfix a.euro-saude-address,
.bread-crumb li a,
.mc-gallery h2 a,
#menu-footer-menu li a,
.item-content .text h2 a,
ul.columns h2 a,
/* the blog template - its sidebar menu, the category line under a post, the "leave a reply" link
   and the recent-posts ticker were only reachable on a post page, which is why they survived a
   first pass that sampled the homepage, a policy page and one section page */
.widget_nav_menu ul.simple-list li a,
.post-footer-details li a,
.scrolling-list.footer-recent-posts li a,
/* LEGIBILITY ROUND 2. The first pass at this list was written from six pages that acceptance had
   sampled ALPHABETICALLY - the homepage and five 2016-17 blog posts, which is one template looked
   at six times. Everything below sits on a template that set never opened, and every one of them
   is the same shape as the links above: an inline <a> whose border box is the glyph box.
     .item-content .text h3 a  the three service links on each of the FIFTEEN /doctors/<name>/
                               pages - 192x23 at 1440 and 171x20 at 390. The h2 form of the same
                               widget was already fixed above; the doctor template uses h3, so it
                               fell straight through a selector list that looked complete.
     .post-content .post-title a  the post headline as a link: the five cards on /blog-news/ and
                               the three /features/* pages, 23px tall.
     .footer-banner-box h2 a   "Health Insurance", 111x19, in the banner strip at the foot of
                               EVERY page. It only ever showed up on /search/ because the theme
                               keeps .animated-element at visibility:hidden until it scrolls into
                               view, and /search/ is the one page short enough for it to start
                               there. A gate that cannot see an element is not a gate that cleared
                               it.
     ul.list-1 li a            the e-mail address on /timetable/, 146x19.
     .restore-consent-label a  the "privacy policy" link inside the contact form's consent
                               sentence, 75x17 - the smallest control on the site.
   padding-block, not line-height or display:inline-block, for the reason stated above: on an
   inline box it enlarges what the browser hit-tests and leaves the line box alone, so not one of
   these lines moves. */
.item-content .text h3 a,
.post-content .post-title a,
.footer-banner-box h2 a,
ul.list-1 li a,
.restore-consent-label a { padding-block: 5px; }
a.more.template-arrow-horizontal-1-after { padding-block: 2px; }
.icons-list a.icon-single.mc-icon { min-width: 24px; min-height: 24px; }
li[class*="restore-slide-"] > a { padding-block: 2px; }

.restore-hero-nav { gap: 0; }
.restore-hero-nav button {
  width: 24px; height: 24px; padding: 0;
  border: 0; background: transparent; border-radius: 0;
  position: relative;
}
.restore-hero-nav button::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid #002d81; background: transparent;
}
.restore-hero-nav button.is-active { background: transparent; }
.restore-hero-nav button.is-active::before { background: #002d81; }

/* The dots were painted 250px BELOW the photograph and behind the three cards, so nobody could see
   them, let alone press them - the slider had controls only in the markup. The cause is that the
   Revolution Slider wrapper is 670px tall (the plugin's own figure, and it still carries the rest
   of the layout), while the hero we rebuilt in its place is the 380px band at the top of it, so
   `bottom: 18px` measured from the wrong floor. Anchor them to the hero band instead: 380 - 24 - 18
   at full width. Under the 768px breakpoint the three cards ride up over the lower third of the
   photograph and the caption panel fills the middle of it, so the foot of the band is occupied and
   the middle is type. The dots go to the open strip of photograph above the caption instead. */
.restore-hero-nav { top: 338px; bottom: auto; }
@media (max-width: 767px) { .restore-hero-nav { top: 18px; } }
/* The WordPress image caption on the blog posts is 11px, under the 12px floor a person can read
   comfortably - the client's "magnifying glass" complaint applied to the smallest type on the page. */
/* marked important: the theme's own caption rule loads after this file. */
.wp-caption-text, p.wp-caption-text { font-size: 12px !important; }