/**
 * luhacovice.cz - article content + external link styles
 *
 * Content of this file:
 *   1) External link enhancement (visual ↗ icon)
 *   2) Article tables (replaces inline styles emitted by html_to_editorjs)
 *   3) Asides: .related, .quote, .image-source, .contest, .image-todo
 *   4) Callouts, hints, notes
 *   5) Article sources block
 *   6) Description lists (dl/dt/dd)
 *   7) Footnote superscript links
 *   8) Table of contents (nav.toc)
 *
 * Selectors are scoped to .article__inner-text (Lara CMS article body wrapper)
 * and standalone selectors as fallback. Won't conflict with admin or non-article
 * pages.
 *
 * Brand colors (from existing site):
 *   --teal:  #1a5c5e
 *   --gold:  #d4a853
 */


/* ===========================================================
 * 1) External link visual indicator (paired with external-links.js)
 * =========================================================== */

/* Removed (Tomáš 2026-05-10): visual ↗ after external links rozbíjelo layout. */

/* Don't double-up icons in nav menus or buttons */
.menu a.external-link::after,
nav a.external-link::after,
.btn.external-link::after,
.button.external-link::after,
header a.external-link::after,
footer a.external-link::after {
  content: "";
  margin-left: 0;
}


/* ===========================================================
 * 2) Article tables (so html_to_editorjs can stop emitting inline styles)
 * =========================================================== */

.article__inner-text table,
article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.95em;
  background: #fff;
}

.article__inner-text thead,
article thead {
  background: #f5f7f7;
}

.article__inner-text th,
article th {
  text-align: left;
  font-weight: 600;
  padding: 0.6em 1em;
  border-bottom: 2px solid #1a5c5e;
  color: #1a5c5e;
}

.article__inner-text td,
article td {
  padding: 0.55em 1em;
  border-bottom: 1px solid #e6e6e6;
  vertical-align: top;
}

.article__inner-text tr:nth-child(even) td,
article tr:nth-child(even) td {
  background: #fafbfb;
}

.article__inner-text tr:hover td,
article tr:hover td {
  background: #f0fafa;
}

/* Mobile: allow horizontal scroll instead of squeezed table */
@media (max-width: 640px) {
  .article__inner-text table,
  article table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .article__inner-text td,
  .article__inner-text th,
  article td,
  article th {
    white-space: normal;
  }
}


/* ===========================================================
 * 3) Asides (cross-link box, quote, image-source)
 * =========================================================== */

.article__inner-text aside.related,
article aside.related {
  background: #f0fafa;
  border-left: 4px solid #1a5c5e;
  padding: 1em 1.5em;
  margin: 2em 0;
  border-radius: 0 6px 6px 0;
}

.article__inner-text aside.related h3,
article aside.related h3 {
  margin: 0 0 0.5em;
  font-size: 1em;
  color: #1a5c5e;
}

.article__inner-text aside.related ul,
article aside.related ul {
  padding-left: 1.4em;
  margin: 0.4em 0 0;
}

.article__inner-text aside.related li,
article aside.related li {
  margin: 0.25em 0;
}

.article__inner-text aside.quote,
article aside.quote {
  background: #fff7e6;
  border-left: 4px solid #d4a853;
  padding: 1em 1.5em;
  margin: 1.5em 0;
  font-style: italic;
  font-size: 1.05em;
  color: #555;
  border-radius: 0 6px 6px 0;
}

.article__inner-text aside.image-source,
article aside.image-source {
  background: #f5f1e8;
  border-left: 4px solid #d4a853;
  padding: 1em 1.5em;
  margin: 1.5em 0;
  font-size: 0.92em;
  border-radius: 0 6px 6px 0;
}

.article__inner-text aside.image-source h3,
article aside.image-source h3 {
  margin: 0 0 0.4em;
  font-size: 0.95em;
  color: #8a6d2a;
}

.article__inner-text aside.contest,
article aside.contest {
  background: #fff8e1;
  border: 1px solid #ffc107;
  padding: 1em 1.5em;
  margin: 1.5em 0;
  border-radius: 6px;
}

/* image-todo - editor placeholder, hide on production */
.article__inner-text aside.image-todo,
article aside.image-todo,
.article__inner-text p.image-todo,
article p.image-todo {
  display: none;
}


/* ===========================================================
 * 4) Callouts and hints
 * =========================================================== */

.article__inner-text div.callout,
.article__inner-text .callout,
article div.callout,
article .callout {
  background: #e7f5ff;
  border: 1px solid #74c0fc;
  padding: 1em 1.25em;
  border-radius: 6px;
  margin: 1.25em 0;
}

.article__inner-text div.callout h3,
article div.callout h3 {
  margin: 0 0 0.5em;
  font-size: 1em;
}

.article__inner-text p.hint,
.article__inner-text .hint,
article p.hint,
article .hint {
  background: #fffbea;
  border-left: 3px solid #d4a853;
  padding: 0.55em 1em;
  border-radius: 0 4px 4px 0;
  font-size: 0.92em;
  color: #555;
  margin: 1em 0;
}

.article__inner-text p.note,
article p.note {
  background: #fff7e6;
  padding: 0.55em 1em;
  border-radius: 4px;
  font-size: 0.92em;
  color: #6b4f1a;
  margin: 1em 0;
}

.article__inner-text p.caption,
article p.caption {
  font-size: 0.88em;
  color: #777;
  text-align: center;
  margin-top: -0.5em;
  font-style: italic;
}


/* ===========================================================
 * 5) Article sources (citation block at end)
 * =========================================================== */

.article__inner-text p.article-sources,
article p.article-sources,
.article__inner-text section.article-sources,
article section.article-sources {
  font-size: 0.88em;
  color: #555;
  background: #fafafa;
  padding: 0.75em 1.2em;
  border-radius: 4px;
  border-left: 3px solid #ccc;
  margin-top: 2.5em;
  margin-bottom: 1em;
}

.article__inner-text section.article-sources ol,
article section.article-sources ol {
  margin: 0.4em 0 0;
  padding-left: 1.5em;
}


/* ===========================================================
 * 6) Description lists (dl/dt/dd)
 * =========================================================== */

.article__inner-text dl,
article dl {
  margin: 1.25em 0;
}

.article__inner-text dt,
article dt {
  font-weight: 600;
  color: #1a5c5e;
  margin-top: 0.8em;
}

.article__inner-text dd,
article dd {
  margin: 0.2em 0 0.6em 1.5em;
}


/* ===========================================================
 * 7) Footnote-style superscript links
 * =========================================================== */

.article__inner-text sup a,
article sup a {
  text-decoration: none;
  background: #1a5c5e;
  color: white;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 0.7em;
  margin: 0 1px;
  font-weight: 600;
}

.article__inner-text sup a:hover,
article sup a:hover {
  background: #d4a853;
  color: #1a5c5e;
}


/* ===========================================================
 * 8) Table of contents (nav.toc)
 * =========================================================== */

.article__inner-text nav.toc,
article nav.toc {
  background: #f5f7f7;
  border: 1px solid #d0d8d8;
  padding: 1em 1.5em;
  border-radius: 6px;
  margin: 1.5em 0;
}

.article__inner-text nav.toc h2,
article nav.toc h2 {
  font-size: 1em;
  margin: 0 0 0.5em;
  color: #1a5c5e;
  border-bottom: none;
}

.article__inner-text nav.toc ul,
.article__inner-text nav.toc ol,
article nav.toc ul,
article nav.toc ol {
  margin: 0.4em 0;
  padding-left: 1.4em;
}


/* ===========================================================
 * 9) Weather widget placeholder (until real widget arrives)
 * =========================================================== */

.article__inner-text .weather-widget,
article .weather-widget {
  background: #e3f2fd;
  border: 1px dashed #90caf9;
  padding: 1em 1.5em;
  margin: 1.5em 0;
  border-radius: 6px;
  text-align: center;
  font-size: 0.92em;
  color: #555;
}


/* ===========================================================
 * 10) Mega-menu dropdown spacing (Tomáš feedback 2026-05-08)
 *     Bold subsection headings (Zajímavá místa, Lázeňství a zdraví, …)
 *     need clear visual separation from the leaves above; leaf items
 *     need compact spacing instead of the default 30px gap.
 * =========================================================== */

/* Subsection heading — first <li> in each column */
.drop__inner-col > li {
  margin-bottom: 0.4em !important;
}

/* Leaf items inside .drop__inner-links — compact, less aggressive 30px gap */
.drop__inner-links li {
  margin-bottom: 0.35em !important;
}

/* Mobile (Lara theme stacks .drop__inner-col vertically below ~1000px):
 * give each subsection heading clear breathing room above so it reads
 * as a section header, not a continuation of the previous list. */
@media (max-width: 999px) {
  .drop__inner-col > li:first-child {
    margin-top: 1.5em !important;
    padding-top: 0.8em;
    border-top: 1px solid rgba(20, 13, 69, 0.12);
  }
  .drop__inner-row > .drop__inner-col:first-child > li:first-child,
  .drop__inner-row.big > .drop__inner-col:first-child > li:first-child {
    margin-top: 0 !important;
    padding-top: 0;
    border-top: none;
  }
}

/* Heading link visual weight (already bold from theme, but make sure the
 * underline-on-hover behaviour stays clean) */
.drop__inner-col > li > a {
  font-weight: 700;
}

/* Leaf links — slightly smaller than headings, normal weight */
.drop__inner-links a {
  font-size: 0.9em;
  font-weight: 500;
}

/* ===========================================================
 *  Article images — width control + side-by-side layout
 * ===========================================================
 *
 *  LaraCMS IMAGE block renders as <div class="article__inner-image">.
 *  By default this has no max-width so images stretch full container width.
 *  These rules constrain images to text column width (matching .article__inner-text).
 *
 *  For two images side by side, use a CustomHtml block with .article__inner-image-pair
 *  containing two <figure> elements (see scripts/patches/article_images.php op=pair).
 */

.article__inner-image {
  max-width: 1090px;
  margin: 0 auto 60px;
}

@media (min-width: 1200px) {
  .article__inner-image {
    margin-bottom: 80px;
  }
}

/* Side-by-side image pair (CustomHtml block) */
.article__inner-image-pair {
  max-width: 1090px;
  margin: 0 auto 60px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.article__inner-image-pair > figure {
  flex: 1 1 calc(50% - 12px);
  min-width: 280px;
  margin: 0;
  position: relative;
}

.article__inner-image-pair > figure > picture,
.article__inner-image-pair > figure > img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.article__inner-image-pair > figure > img {
  object-fit: cover;
}

.article__inner-image-pair > figure > figcaption {
  margin-top: 8px;
  color: #333;
  font-weight: 300;
  font-size: 0.92em;
  line-height: 1.35;
}

/* Smaller thumbnail variant (single image, ~50% width, centered) */
.article__inner-image--small {
  max-width: 540px;
}

/* Wide variant — break out beyond text column width (full container) */
.article__inner-image--wide {
  max-width: none;
  margin-left: -40px;
  margin-right: -40px;
}

@media (max-width: 768px) {
  .article__inner-image--wide {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ===========================================================
 *  Article tables — avonet-style "formatted"
 *  Borderless, alternating odd rows (#eef0f0), hover (#fef8c1)
 * =========================================================== */

.article__inner-text table,
.article__inner-text > .cdx-block table {
  border-collapse: collapse;
  border: 0;
  width: 100%;
  max-width: 1090px;
  margin: 0 auto 30px;
  font-size: 1rem;
}

.article__inner-text table tr,
.article__inner-text table td,
.article__inner-text table th {
  border: 0;
  vertical-align: top;
  text-align: left;
}

.article__inner-text table td {
  background: transparent;
  color: inherit;
  padding: 12px 12px;
  line-height: 1.5;
}

.article__inner-text table th,
.article__inner-text table tr:first-child th,
.article__inner-text table thead td,
.article__inner-text table thead th {
  background: #cdd2d4;
  color: #3f474a;
  padding: 12px 12px;
  font-weight: bold;
}

/* Alternating odd row */
.article__inner-text table tr:nth-of-type(odd) td {
  background-color: #eef0f0;
}

.article__inner-text table tr:hover td {
  background-color: #fef8c1;
}

/* First column (label) — keep emphasis but no nowrap that breaks layout */
.article__inner-text table td:first-child {
  font-weight: 600;
  color: #1a5c5e;
}

@media (max-width: 768px) {
  .article__inner-text table td,
  .article__inner-text table th {
    padding: 8px 10px;
    font-size: 0.92em;
  }
}