/* mececirurgiaestetica.pt — the layer Camilyo's layout.js used to provide.
   Written by _scripts/mece_03_finish.py; edit that, not this file. */

/* ---------- header phone strip ---------- */
.mece-sep { color: #d9a15c; padding: 0 2px; }

/* ---------- gallery: wookmark never ran, so six photos stacked in one column ----------
   Two columns, not three: the gallery shares a row with a ~800px text column, and at three
   across it finished in 300px and left half the row blank. */
[class*="_masonry-gallery"] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  visibility: visible !important;
}
[class*="_grid_item"] { margin: 0 !important; width: auto !important; float: none !important; }
[class*="_grid_item"] a { display: block; position: relative; overflow: hidden; border-radius: 3px; }
[class*="_grid_item"] img {
  display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2;
  transition: transform .35s ease;
}
[class*="_grid_item"] a:hover img,
[class*="_grid_item"] a:focus-visible img { transform: scale(1.05); }
[class*="_grid_item"] a:focus-visible { outline: 3px solid #EF8000; outline-offset: 2px; }

/* ---------- carousel (was a jssor slider with visibility:hidden and a dead bundle) ---------- */
.mece-carousel {
  /* the archived box was a hard 960x432; keep the 960 so the block sits in the column exactly
     where it used to, but let the height follow the photo. jssor cropped to fill 432 and we
     cannot know where it cropped, so showing the whole frame is the honest choice. */
  position: relative !important; width: 100% !important; max-width: 960px;
  height: auto !important; margin: 0 auto;
  overflow: visible !important; visibility: visible !important; left: 0 !important; top: 0 !important;
}
.mece-carousel:focus-visible { outline: 3px solid #EF8000; outline-offset: 3px; }
.mece-track {
  position: relative !important; left: 0 !important; top: 0 !important;
  width: 100% !important; height: auto !important; cursor: default !important;
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -ms-overflow-style: none; scrollbar-width: none; border-radius: 3px;
}
.mece-track::-webkit-scrollbar { display: none; }
.mece-slide { flex: 0 0 100%; scroll-snap-align: center; min-width: 0; }
.mece-slide img { display: block; width: 100%; height: auto; }
.mece-cx {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  /* opaque, bordered and firmly shadowed: at 86% white these vanished against the bright
     high-key photos this clinic uses, and a control you cannot see is a control you do not have */
  background: #fff; color: #22332f; font-size: 26px; line-height: 1;
  border: 1px solid rgba(34, 51, 47, .22); box-shadow: 0 2px 9px rgba(0, 0, 0, .34);
}
.mece-cx:hover { background: #EF8000; color: #fff; }
.mece-cx:focus-visible { outline: 3px solid #EF8000; outline-offset: 2px; }
.mece-cx-prev { left: 10px; }
.mece-cx-next { right: 10px; }
.mece-dots { display: flex; justify-content: center; gap: 9px; margin-top: 12px; }
.mece-dots button {
  width: 11px; height: 11px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid #EF8000; background: transparent;
}
.mece-dots button[aria-selected="true"] { background: #EF8000; }
.mece-dots button:focus-visible { outline: 3px solid #22332f; outline-offset: 2px; }

/* ---------- lightbox ---------- */
.mece-lb[hidden] { display: none; }
.mece-lb {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center;
  justify-content: center; background: rgba(16, 22, 20, .92); padding: 24px;
}
.mece-lb img { max-width: 100%; max-height: 82vh; display: block; border-radius: 3px; }
.mece-lb figcaption {
  color: #fdfdfd; text-align: center; margin-top: 12px; font-size: 15px;
  font-family: Quicksand, sans-serif;
}
.mece-lb button {
  position: absolute; background: rgba(255, 255, 255, .12); color: #fff; border: 0;
  width: 48px; height: 48px; border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer;
}
.mece-lb button:hover { background: rgba(239, 128, 0, .9); }
.mece-lb button:focus-visible { outline: 3px solid #EF8000; outline-offset: 2px; }
.mece-lb .mece-lb-close { top: 18px; right: 18px; }
.mece-lb .mece-lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.mece-lb .mece-lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
body.mece-lb-open { overflow: hidden; }

/* ---------- cookie-policy page ----------
   The legal page is the one page with no photo band behind its title, and the platform gave its
   h1 the same #b8b8b8 it uses over photographs: 1.98:1 on white, i.e. the page heading was
   effectively invisible. Its sub-headings were #8d938f (3.13:1). Both are pulled onto the
   palette the rest of the site already uses for headings on white. Scoped to this page so no
   other heading anywhere moves. */
#page110_container10 h1.title,
#page110_containersgroup2 h1.title { color: #bf6600 !important; }
#page110_containersgroup2 .plt_font_50 { color: #22332f !important; font-weight: 600; }
#page110_containersgroup2 { padding-bottom: 40px; }

.page110_containersgroup2_tabs_container {
  display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; margin-bottom: 6px;
}
a[role="tab"] {
  cursor: pointer; font-size: 13px !important; padding: 7px 14px !important;
  font-family: Quicksand, sans-serif; border-radius: 3px 3px 0 0;
}
a[role="tab"][aria-selected="true"] { background: #EF8000 !important; color: #fff !important; }
a[role="tab"]:focus-visible { outline: 3px solid #22332f; outline-offset: 2px; }
[role="tabpanel"][hidden] { display: none !important; }
[role="tabpanel"] { display: block !important; }

/* ---------- footer: the current page's own entry was white on #b9b9b9 (1.96:1) ---------- */
#inc38_menucomp1 .inc38_menucomp1_selected { background-color: #3f5450 !important; }

/* ---------- click-to-load embeds (YouTube player, OSM/Leaflet) ---------- */
.mece-embed { position: relative; display: block; width: 100%; background: #22332f; overflow: hidden;
  border-radius: 3px; }
.mece-embed img { display: block; width: 100%; height: auto; }
.mece-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
/* On a street map a translucent white pill disappears; this one is opaque, bordered and sits
   clear of the marker at the bottom of the frame. */
.mece-embed-play {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); cursor: pointer;
  border: 1px solid #EF8000; border-radius: 3px; padding: 11px 20px;
  font-family: Quicksand, sans-serif; font-size: 15px; font-weight: 600;
  background: #fff; color: #a35700; box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}
.mece-embed-play:hover { background: #EF8000; color: #fff; }
.mece-embed-play:focus-visible { outline: 3px solid #22332f; outline-offset: 3px; }
.mece-embed-play-yt {
  left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%);
  width: 78px; height: 54px; padding: 0; font-size: 26px; border-radius: 12px;
  background: rgba(220, 40, 30, .94); color: #fff; border-color: rgba(220, 40, 30, .94);
}
.mece-embed-play-yt:hover { background: #c5271c; color: #fff; }
.mece-credit { font-family: Quicksand, sans-serif; font-size: 13px; color: #6d6d6d; margin-top: 8px; }
.msgwebcontainer .mece-credit a { color: #a35700; text-decoration: underline; }

/* ---------- contact page ---------- */
.mece-map { width: 100%; }
.mece-map iframe { border: 0; width: 100%; height: 380px; display: block; border-radius: 3px; }
.mece-map-link {
  display: inline-block; margin-top: 10px; color: #a35700; text-decoration: underline;
  font-family: Quicksand, sans-serif; font-size: 15px;
}
.mece-contact-extra { margin: 34px 0 10px; font-family: Quicksand, sans-serif; color: #4a4a4a; }
.mece-contact-extra h2 {
  font-family: "Josefin Slab", serif; font-size: 28px; color: #EF8000; text-align: left;
  margin-bottom: 12px;
}
.mece-hours { border-collapse: collapse; width: 100%; max-width: 420px; margin-bottom: 16px; }
.mece-hours th, .mece-hours td {
  text-align: left; padding: 9px 4px; border-bottom: 1px solid #e6e6e6; font-size: 15px;
  font-weight: normal;
}
.mece-hours td { text-align: right; color: #22332f; }
.mece-note { font-size: 15px; line-height: 1.6; margin-bottom: 10px; }
.mece-note a { color: #a35700; text-decoration: underline; }

/* ---------- /contacte-nos: the "your visit" section ----------
   Sits at the end of #msp39_Content, below the address/map row, so it runs the full content width
   instead of squeezing into the narrow left column the hours table lives in. Two columns at
   desktop, one on a phone; the heading colours match .mece-contact-extra h2 so the page reads as
   one page and not as a strip of restored content bolted under an original. */
.mece-visit {
  margin: 46px 0 8px; font-family: Quicksand, sans-serif; color: #4a4a4a;
  border-top: 1px solid #e6e6e6; padding-top: 30px;
}
.mece-visit h2 {
  font-family: "Josefin Slab", serif; font-size: 28px; color: #EF8000; text-align: left;
  margin-bottom: 14px;
}
.mece-visit h3 {
  font-family: "Josefin Slab", serif; font-size: 21px; color: #EF8000; text-align: left;
  margin: 0 0 8px;
}
.mece-visit p { font-size: 15px; line-height: 1.7; margin: 0 0 18px; }
.mece-visit-lead { max-width: 76ch; }
.msgwebcontainer .mece-visit a { color: #a35700; text-decoration: underline; }
.mece-visit-grid { display: flex; flex-wrap: wrap; gap: 34px; align-items: flex-start; }
.mece-visit-block { flex: 1 1 340px; min-width: 0; }
/* The two photographs are the clinic's own and have nothing in common geometrically - a 446x335
   interior and a 240x320 gift voucher. They are shown at their native size and NOT stretched to a
   common width: 335 against 320 already reads as a pair, and forcing a shared width would print
   the voucher a head taller than the room it stands in. Flex-wrap does the phone case. */
.mece-visit-photos {
  display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start;
  margin: 4px 0 30px;
}
.mece-visit-photos figure { margin: 0; max-width: 100%; }
.mece-visit-photos img { max-width: 100%; height: auto; display: block; border-radius: 3px; }
.mece-visit-photos figcaption {
  font-size: 13px; line-height: 1.5; color: #6b6b6b; margin-top: 7px; max-width: 34ch;
}
@media (max-width: 980px) {
  .mece-visit { margin-top: 34px; }
  .mece-visit-grid { gap: 22px; }
  .mece-visit-photos { gap: 16px; }
  .mece-visit-photos figcaption { max-width: none; }
}

/* ---------- footer facebook link (the like-box iframe is gone) ----------
   .msgwebcontainer a{color:inherit} is a class+type selector and outranks a bare class, so the
   first version of this rule lost and the label rendered in the footer's own #22332f — orange
   border round invisible text. */
.msgwebcontainer a.mece-fb, .mece-fb {
  display: inline-block; padding: 10px 18px; border: 1px solid #EF8000; color: #EF8000;
  font-family: Quicksand, sans-serif; font-size: 15px; border-radius: 3px;
}
.msgwebcontainer a.mece-fb:hover, .mece-fb:hover { background: #EF8000; color: #fff; }
/* the platform sets .msgwebcontainer a{color:inherit}, which outranks a bare class */
.msgwebcontainer a.mece-map-link, .msgwebcontainer .mece-note a { color: #a35700; }

/* ---------- burger ---------- */
.mece-burger { display: none; }

/* ---------- images never wider than their column ---------- */
.msgwebcontainer img { max-width: 100%; height: auto; }

/* ---------- tablet: keep the 1140 grid off the window edge ---------- */
@media (max-width: 1190px) {
  #msp39_Header, #msp39_Middle, #msp39_Footer {
    width: auto !important; max-width: 1140px !important;
    margin-left: 20px !important; margin-right: 20px !important;
  }
}

/* ---------- phone / small tablet: collapse the whole thing to one column ---------- */
@media (max-width: 980px) {
  #msp39_Header, #msp39_Middle, #msp39_Footer {
    width: auto !important; max-width: 100% !important;
    margin-left: 16px !important; margin-right: 16px !important;
  }
  .msgwebcontainer .wp_column { right: 0 !important; width: 100% !important; float: none !important; }
  .msgwebcontainer .wp_col_content {
    width: 100% !important; left: 0 !important; float: none !important;
    margin-left: 0 !important; margin-right: 0 !important;
    padding-left: 0 !important; padding-right: 0 !important;
    /* the desktop grid gives each column a min-height so the row sides line up. Stacked, that
       becomes 200-300px of blank page between a list and the button under it. */
    min-height: 0 !important;
  }
  .msgwebcontainer .wp_bg, .msgwebcontainer .box_bg { display: none !important; }
  .msgwebcontainer .wp_all_column {
    margin-left: 0 !important; margin-right: 0 !important; min-height: 0 !important;
  }
  .msgwebcontainer [class*="_wp_outer"] { float: none !important; }

  [class*="_masonry-gallery"] { grid-template-columns: repeat(2, 1fr); }

  /* header: logo centred, burger pinned to the corner, phone row above */
  #msp39_HeaderInternal { position: relative; }
  #inc37_logo1.inc37_logo1_wp_outer { margin-bottom: 4px !important; }
  #inc37_logo1 img { max-width: 190px; }
  .mece-burger {
    display: block; position: absolute; top: 34px; right: 0; width: 46px; height: 40px;
    background: transparent; border: 1px solid #EF8000; border-radius: 3px; cursor: pointer;
    padding: 9px 10px; z-index: 30;
  }
  .mece-burger span {
    display: block; height: 2px; background: #EF8000; border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
  }
  .mece-burger span + span { margin-top: 5px; }
  .mece-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mece-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .mece-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .mece-burger:focus-visible { outline: 3px solid #EF8000; outline-offset: 2px; }

  #inc37_menucomp1 nav { width: 100%; }
  ul.mlhmenu.inc37_menucomp1 {
    display: none !important; width: 100% !important; margin: 6px 0 10px !important;
    border-top: 1px solid #ececec;
  }
  ul.mlhmenu.inc37_menucomp1.mece-open { display: block !important; }
  ul.mlhmenu.inc37_menucomp1 > li { display: block !important; width: 100% !important; }
  #inc37_menucomp1 .inc37_menucomp1_item {
    display: block !important; text-align: left !important; padding: 14px 4px !important;
    margin: 0 !important; border-width: 0 0 1px 0 !important; border-color: #ececec !important;
    line-height: 1.3 !important;
  }
  #inc37_menucomp1 .inc37_menucomp1_selected { border-left: 3px solid #bf6600 !important; padding-left: 12px !important; }

  /* The top phone strip is an icon column plus a number column. Stacked, the icon lands alone on
     its own line next to the burger and reads as clutter; the icon links to the same number the
     text does, so on a phone the text alone carries it. */
  #inc37_image1.inc37_image1_wp_outer { display: none !important; }
  #inc37_columns3 .wp_col_content { text-align: left !important; }
  #inc37_columns3.inc37_columns3_wp_outer { padding-right: 58px !important; }
  #inc37_htmltext2.inc37_htmltext2_wp_outer { padding-top: 4px !important; }

  /* page-title bands: the desktop crops are composed for a 1440x400 letterbox, so on a phone
     "right center" showed nothing but the right-hand edge of the photo */
  [class*="_swp_outer_bg"] {
    background-attachment: scroll !important;
    background-position: center center !important;
  }
  /* The palette classes carry a hard line-height:24px against 26-30px type. On a 1140px column
     those runs were one line each so it never showed; at 390px they wrap to four or five and the
     lines overlap. Only the wrapped case is touched. */
  .msgwebcontainer [class*="plt_font_"] { line-height: 1.32 !important; }

  .msgwebcontainer h1 { font-size: 30px !important; line-height: 1.2 !important; }
  .msgwebcontainer h2 { font-size: 25px !important; }
  .msgwebcontainer h3 { font-size: 22px !important; }
  .msgwebcontainer h4 { font-size: 20px !important; }
  .msgwebcontainer h5 { font-size: 19px !important; }

  .mece-map iframe { height: 300px; }
  .mece-lb button { width: 42px; height: 42px; }
}

@media (max-width: 560px) {
  [class*="_masonry-gallery"] { grid-template-columns: 1fr; }
}

/* ---------- 404 ---------- */
.mece-404 { max-width: 720px; margin: 70px auto 90px; text-align: center; padding: 0 16px; }
.mece-404 h1 { color: #EF8000 !important; font-size: 44px !important; margin-bottom: 10px; }
.mece-404 p { font-family: Quicksand, sans-serif; font-size: 17px; line-height: 1.65; color: #4a4a4a; }
.mece-404 ul { list-style: none; margin: 26px 0 0 !important; padding: 0; }
.mece-404 li { display: inline-block; margin: 6px 5px; }
.msgwebcontainer .mece-404 li a, .mece-404 li a {
  display: inline-block; padding: 11px 20px; border: 1px solid #EF8000; color: #a35700;
  font-family: Quicksand, sans-serif; font-size: 15px; border-radius: 3px;
}
.msgwebcontainer .mece-404 li a:hover, .mece-404 li a:hover { background: #EF8000; color: #fff; }