/*
Theme Name: Medical Tourism Wiki
Theme URI: https://medicaltourismwiki.com
Description: Encyclopedia surface for Medical Tourism Wiki. Child theme of GeneratePress. Design direction: Reference Slate.
Author: Medical Tourism Wiki
Template: generatepress
Version: 1.0.0
Text Domain: medicaltourismwiki
*/

@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-serif-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --mtw-bg:         #F8FAFC;
  --mtw-surface:    #FFFFFF;
  --mtw-ink:        #334155;
  --mtw-ink-muted:  #64748B;
  --mtw-accent:     #1D4ED8;
  --mtw-visited:    #6B4BA1;
  --mtw-citation:   #0891B2;
  --mtw-rule:       #94A3B8;
  --mtw-rule-soft:  #CBD5E1;
  --mtw-rule-faint: #E2E8F0;

  --mtw-serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --mtw-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --mtw-sm: 6px;
  --mtw-md: 12px;
  --mtw-lg: 24px;
  --mtw-xl: 40px;
}

/* ---------- 1. Ground ---------- */

body {
  background: var(--mtw-bg);
  color: var(--mtw-ink);
  font-family: var(--mtw-sans);
  font-size: 15px;
  line-height: 1.6;
}

.site-content {
  padding-top: var(--mtw-lg);
  padding-bottom: var(--mtw-xl);
}

.separate-containers .inside-article,
.separate-containers .site-main > .page-header,
.separate-containers .paging-navigation,
.one-container .site-content {
  background: var(--mtw-surface);
  border: 1px solid var(--mtw-rule);
  border-radius: 0;
  padding: 20px 28px 32px;
}

/* ---------- 2. Masthead ---------- */

.site-header {
  background: var(--mtw-surface);
  border-bottom: 1px solid var(--mtw-rule);
}

.site-logo img { max-height: 46px; width: auto; }

.main-title {
  font-family: var(--mtw-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.main-title a { color: var(--mtw-ink); }
.main-title a:hover { text-decoration: none; }

.site-description {
  color: var(--mtw-ink-muted);
  font-size: 13px;
}

/* ---------- 3. Headings ---------- */

.entry-title,
h1.entry-title,
.page-header h1 {
  font-family: var(--mtw-serif);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.2;
  color: var(--mtw-ink);
  margin: 0 0 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--mtw-rule);
}

.entry-content h2 {
  font-family: var(--mtw-serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 1.4em 0 .5em;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--mtw-rule);
}

.entry-content h3 { font-size: 1.15rem; font-weight: 700; margin: 1.2em 0 .35em; line-height: 1.3; }
.entry-content h4 { font-size: 1.02rem; font-weight: 700; margin: 1.1em 0 .3em; }
.entry-content h5 { font-size: .95rem;  font-weight: 700; margin: 1em 0 .3em; }

/* ---------- 4. Links ---------- */

a         { color: var(--mtw-accent); text-decoration: none; }
a:visited { color: var(--mtw-visited); }
a:hover   { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--mtw-accent); outline-offset: 2px; }

.entry-content a[href^="http"]:not([href*="medicaltourismwiki.com"])::after {
  content: "";
  display: inline-block;
  width: 11px; height: 11px;
  margin-left: 3px;
  vertical-align: baseline;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%231D4ED8' d='M6 1h5v5L8.86 3.85 4.7 8 4 7.3l4.15-4.16zM2 3h2v1H2v6h6V8h1v2a1 1 0 01-1 1H2a1 1 0 01-1-1V4a1 1 0 011-1z'/%3E%3C/svg%3E");
}

/* ---------- 5. Reading column ---------- */

.entry-content p { margin: 0 0 .7em; max-width: 80ch; }
.entry-content ul,
.entry-content ol { margin: .35em 0 .8em 1.7em; max-width: 80ch; }
.entry-content li { margin-bottom: .15em; }
.entry-content > *:first-child { margin-top: 0; }

/* ---------- 6. Page status bar ---------- */

.mtw-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 12px;
  color: var(--mtw-ink-muted);
  margin: 0 0 14px;
}

.mtw-status__state {
  background: #E0F2FE;
  color: #0E5A72;
  padding: 1px 7px;
  font-weight: 600;
  letter-spacing: .01em;
}

.mtw-status__sep { color: var(--mtw-rule-soft); }

/* ---------- 7. Infobox ---------- */

.mtw-infobox {
  float: right;
  clear: right;
  width: 22em;
  max-width: 100%;
  margin: 0 0 1.2em 1.6em;
  border: 1px solid var(--mtw-rule);
  background: var(--mtw-bg);
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.5;
}

.mtw-infobox__title {
  font-family: var(--mtw-serif);
  font-size: 1.15em;
  text-align: center;
  padding: 8px 10px 7px;
  color: var(--mtw-ink);
}

/* The group block renders an is-layout-flow inner container, whose default
   rule puts 24px between every child. Inside the infobox that would space the
   title, photo and table apart. */

/* GeneratePress sets .site-main .wp-block-group__inner-container{padding:40px}
   at the same specificity and loads later, which inset the infobox by 40px on
   every side and squeezed its photo to 204px. Beat it on specificity. */

.entry-content .mtw-infobox .wp-block-group__inner-container {
  margin: 0;
  padding: 0;
}

.mtw-infobox > *,
.mtw-infobox .wp-block-group__inner-container > * {
  margin-top: 0;
  margin-bottom: 0;
}

.mtw-infobox__data {
  width: 100%;
  border-collapse: collapse;
}

.mtw-infobox__band {
  background: var(--mtw-rule-faint);
  text-align: center;
  font-size: .86em;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 3px 6px;
  color: #475569;
}

.mtw-infobox th,
.mtw-infobox td {
  border: 0;
  border-top: 1px solid var(--mtw-rule-faint);
  padding: 5px 9px;
  vertical-align: top;
  text-align: left;
}

.mtw-infobox th { width: 40%; font-weight: 500; color: #475569; }

.mtw-infobox__note {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--mtw-ink-muted);
  padding: 7px 9px;
  border-top: 1px solid var(--mtw-rule-faint);
}

/* ---------- 8. Hatnote and notices ---------- */

.mtw-hatnote {
  font-style: italic;
  padding-left: 1.6em;
  margin: 0 0 .8em;
  color: #475569;
  font-size: .95em;
}

.mtw-notice {
  border: 1px solid var(--mtw-rule-soft);
  border-left: 8px solid var(--mtw-citation);
  background: var(--mtw-bg);
  border-radius: 0;
  margin: 0 0 1em;
  padding: 9px 14px;
  font-size: .95em;
}

/* ---------- 9. Table of contents ---------- */

#ez-toc-container,
div#ez-toc-container {
  display: table !important;
  width: auto !important;
  max-width: 100%;
  background: var(--mtw-bg) !important;
  border: 1px solid var(--mtw-rule-soft) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 10px 16px !important;
  margin: 1.2em 0 1.4em !important;
  font-size: 14px;
}

#ez-toc-container .ez-toc-title {
  font-family: var(--mtw-sans) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--mtw-ink) !important;
  display: block;
  margin-bottom: 4px;
}

#ez-toc-container ul { list-style: none !important; margin: 0 !important; padding-left: 2px !important; }
#ez-toc-container ul ul { padding-left: 1.6em !important; }
#ez-toc-container li { margin-bottom: 2px !important; }
#ez-toc-container a { color: var(--mtw-accent) !important; }

/* ---------- 10. Tables ---------- */

.entry-content table {
  border-collapse: collapse;
  background: var(--mtw-surface);
  margin: 1.1em 0 1.3em;
  font-size: 14px;
}

.entry-content th {
  background: var(--mtw-bg);
  border: 1px solid var(--mtw-rule-soft);
  padding: 6px 10px;
  font-weight: 700;
  text-align: left;
}

.entry-content td {
  border: 1px solid var(--mtw-rule-soft);
  padding: 6px 10px;
  vertical-align: top;
}

/* ---------- 11. Figures ---------- */

.entry-content figure.wp-block-image {
  border: 1px solid var(--mtw-rule-soft);
  background: var(--mtw-bg);
  border-radius: 0;
  padding: 4px;
  margin: .4em 0 1.4em 1.6em;
  float: right;
  clear: right;
  max-width: 320px;
}

.entry-content figure.wp-block-image img { border-radius: 0; display: block; }

.entry-content figure.wp-block-image figcaption {
  font-size: 12.5px;
  line-height: 1.45;
  padding: 5px 3px 2px;
  margin: 0;
  text-align: left;
  color: var(--mtw-ink);
}

/* ---------- 12. Citations ---------- */

.entry-content sup a { font-size: .82em; }

.wp-block-footnotes {
  font-size: 13px;
  line-height: 1.55;
  padding-left: 2.2em;
  color: #475569;
}

.wp-block-footnotes li { margin-bottom: 2px; }

/* ---------- 13. Category bar ---------- */

.mtw-catlinks {
  border: 1px solid var(--mtw-rule-soft);
  background: var(--mtw-bg);
  padding: 7px 10px;
  margin-top: 1.8em;
  font-size: 13px;
  clear: both;
}

.mtw-catlinks b { font-weight: 700; }
.mtw-catlinks ul { display: inline; list-style: none; margin: 0; padding: 0; }
.mtw-catlinks li {
  display: inline-block;
  border-left: 1px solid var(--mtw-rule-soft);
  margin: 0 0 0 .45em;
  padding: 0 .1em 0 .55em;
}
.mtw-catlinks li:first-child { border-left: 0; margin-left: 4px; padding-left: 0; }

/* ---------- 14. Left rail ---------- */

.inside-left-sidebar,
.inside-right-sidebar { padding-top: 4px; }

.sidebar .widget {
  background: transparent;
  border: 0;
  padding: 0 0 18px;
  font-size: 14px;
}

.sidebar .widget .widget-title {
  font-family: var(--mtw-sans);
  font-size: 11.5px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: .01em;
  color: var(--mtw-ink-muted);
  border-bottom: 1px solid var(--mtw-rule-faint);
  padding-bottom: 3px;
  margin-bottom: 6px;
}

.sidebar .widget ul { list-style: none; margin: 0; padding: 0; }
.sidebar .widget li { margin-bottom: 3px; border: 0; padding: 0; }

/* ---------- 15. Search ---------- */

.mtw-search { margin-bottom: 18px; }

.mtw-search form { display: flex; border: 1px solid var(--mtw-rule); background: var(--mtw-surface); }

.mtw-search input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 7px 9px;
  font-size: 13px;
  color: var(--mtw-ink);
}

.mtw-search input[type="search"]:focus { outline: 2px solid var(--mtw-accent); outline-offset: -2px; }
.mtw-search input[type="search"]::placeholder { color: #94A3B8; }

.mtw-search button {
  border: 0;
  border-left: 1px solid var(--mtw-rule-soft);
  background: var(--mtw-bg);
  border-radius: 0;
  color: var(--mtw-accent);
  padding: 0 11px;
  font-size: 13px;
  cursor: pointer;
}

.mtw-search button:hover { background: var(--mtw-rule-faint); }

/* ---------- 16. Footer ---------- */

.site-footer {
  background: var(--mtw-surface);
  border-top: 1px solid var(--mtw-rule);
  font-size: 13px;
}

.site-info { color: var(--mtw-ink-muted); }

/* ---------- 17. Mobile ---------- */

@media (max-width: 768px) {
  body { font-size: 15px; }

  .separate-containers .inside-article { padding: 16px; }

  .mtw-infobox {
    float: none;
    width: 100%;
    margin: 0 0 1.2em;
  }

  .entry-content figure.wp-block-image {
    float: none;
    max-width: 100%;
    margin: .4em 0 1.2em;
  }

  .entry-title, h1.entry-title { font-size: 1.7rem; }
  .entry-content h2 { font-size: 1.35rem; }
}

/* ---------- 18. Rail: categories block ---------- */

.sidebar .widget-title {
  font-family: var(--mtw-sans);
  font-size: 11.5px;
  color: var(--mtw-ink-muted);
  border-bottom: 1px solid var(--mtw-rule-faint);
  padding-bottom: 3px;
  margin-bottom: 6px;
}

.sidebar .wp-block-categories,
.sidebar ul.wp-block-categories-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  font-size: 14px;
}

.sidebar .wp-block-categories li { margin-bottom: 3px; }

.sidebar .wp-block-categories li a { color: var(--mtw-accent); }

/* Screen reader helper, in case the parent does not provide one */
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- 19. Rail subjects ---------- */

.sidebar .mtw-subjects { list-style: none; margin: 0 0 18px; padding: 0; font-size: 14px; }
.sidebar .mtw-subjects li { margin-bottom: 3px; }
.sidebar .mtw-subjects span { color: var(--mtw-ink-muted); font-size: 12px; }

/* ---------- 20. Default WordPress search form ---------- */

.entry-content .wp-block-search__inside-wrapper,
.search-form, form.search-form {
  display: flex;
  max-width: 460px;
  border: 1px solid var(--mtw-rule);
  background: var(--mtw-surface);
}

.search-form input[type="search"],
.search-form .search-field {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 8px 10px;
  font-size: 14px;
  color: var(--mtw-ink);
}

.search-form button,
.search-form .search-submit {
  border: 0;
  border-left: 1px solid var(--mtw-rule-soft);
  border-radius: 0;
  background: var(--mtw-bg);
  color: var(--mtw-accent);
  padding: 0 14px;
  font-size: 14px;
  cursor: pointer;
}

.search-form button:hover,
.search-form .search-submit:hover { background: var(--mtw-rule-faint); }

/* ---------- 21. References ---------- */

.entry-content ol.mtw-refs {
  font-size: 13px;
  line-height: 1.55;
  color: #475569;
  margin: .4em 0 1em 0;
  padding-left: 2.2em;
  max-width: 78ch;
}

.entry-content ol.mtw-refs li { margin-bottom: 4px; }

.entry-content ol.mtw-refs li:target { background: #E0F2FE; }

.mtw-srcnote {
  border-left: 8px solid var(--mtw-citation);
  border-top: 1px solid var(--mtw-rule-soft);
  border-right: 1px solid var(--mtw-rule-soft);
  border-bottom: 1px solid var(--mtw-rule-soft);
  background: var(--mtw-bg);
  padding: 9px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: #475569;
  margin: 0 0 1em;
  max-width: 78ch;
}

/* Citation numerals use the accent: Citation Aqua fails contrast at this size */
.entry-content sup a { font-size: .82em; color: var(--mtw-accent); }
.entry-content sup a:visited { color: var(--mtw-accent); }

/* ---------- 22. Page status variants ---------- */

.mtw-status__state--draft {
  background: var(--mtw-rule-faint);
  color: #475569;
}

/* ---------- 23. Figures, placeholders, timeline ---------- */

.mtw-figure {
  float: right;
  clear: right;
  width: 320px;
  max-width: 100%;
  margin: .3em 0 1.3em 1.6em;
  border: 1px solid var(--mtw-rule-soft);
  background: var(--mtw-bg);
  padding: 4px;
}

.mtw-figure svg,
.mtw-figure img { display: block; width: 100%; height: auto; }

.mtw-figure figcaption {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--mtw-ink);
  padding: 6px 4px 2px;
  text-align: left;
}

.mtw-needed {
  display: block;
  color: var(--mtw-ink-muted);
  font-size: 11.5px;
  margin-top: 3px;
}

/* The infobox lead photo is a native image block so an editor can swap it
   from the media library. It must not take the right float body figures use. */

.entry-content .mtw-infobox figure.wp-block-image {
  float: none;
  clear: none;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 5px;
  border: 0;
  border-top: 1px solid var(--mtw-rule-faint);
  background: transparent;
}

.entry-content .mtw-infobox figure.wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
}

.entry-content .mtw-infobox figure.wp-block-image figcaption {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--mtw-ink-muted);
  padding: 5px 3px 2px;
  text-align: left;
}

.mtw-timeline {
  margin: 1.2em 0 1.5em;
  border: 1px solid var(--mtw-rule-soft);
  background: var(--mtw-bg);
  padding: 12px 14px 8px;
  max-width: 620px;
}

.mtw-timeline svg { display: block; width: 100%; height: auto; }

.mtw-timeline figcaption {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--mtw-ink-muted);
  padding-top: 8px;
}

@media (max-width: 768px) {
  .mtw-figure { float: none; width: 100%; margin: .3em 0 1.2em; }
}

/* ---------- 24. Bordered blocks beside the infobox ---------- */
/* Without a block formatting context a bordered block is stretched by the
   adjacent infobox float, which measured 442px instead of 162px. */

.mtw-timeline,
.entry-content figure.wp-block-table,
.mtw-notice,
.mtw-srcnote,
.mtw-catlinks {
  display: flow-root;
}

/* ---------- 25. Infobox stacks early ---------- */
/* Between 768 and 1000px a floated 22em infobox leaves roughly 285px of
   text, about 37 characters. Stack it instead so the column stays readable. */

@media (max-width: 1000px) {
  .mtw-infobox {
    float: none;
    width: 100%;
    max-width: 420px;
    margin: 0 0 1.3em;
  }

  .mtw-figure {
    float: none;
    width: 100%;
    max-width: 380px;
    margin: .3em 0 1.3em;
  }

  .entry-content figure.wp-block-image {
    float: none;
    max-width: 380px;
    margin: .3em 0 1.3em;
  }
}

/* ---------- 26. Photograph credits ---------- */
/* CC BY-SA requires visible attribution and a licence link beside the image. */

.mtw-credit {
  display: block;
  margin-top: 3px;
  font-size: .92em;
  color: var(--mtw-ink-muted);
}

/* ---------- 27. Photo placement ---------- */
/* A tall infobox forces every later right float to clear past its own section,
   so cap the lead photo and let the panorama run across the column instead. */

.entry-content .mtw-infobox figure.wp-block-image img {
  /* 380px clears this portrait photo uncropped (274x365); the cap only
     guards against a future image tall enough to stretch the infobox. */
  max-height: 380px;
  object-fit: cover;
  object-position: center 35%;
}

.entry-content figure.wp-block-image.mtw-wide {
  float: none;
  clear: both;
  width: 100%;
  max-width: 900px;
  margin: 1.2em 0 1.4em;
}

@media (max-width: 1000px) {
  .entry-content figure.wp-block-image.mtw-wide { max-width: 100%; }
}