/* ==========================================================================
   Lazepe child theme
   Readability, mobile and accessibility layer on top of Shadowcat.
   Scoped to front-end content; no parent file is modified.
   ========================================================================== */

:root {
  --lz-ink: #1f2933;
  --lz-ink-soft: #52606d;
  --lz-rule: #e4e7eb;
  --lz-green: #2f8f46;
  --lz-green-dark: #1f6b33;
  --lz-surface: #f7f8f9;
  --lz-measure: 68ch;
}

/* --------------------------------------------------------------------------
   1. Reading comfort
   Pages rendered at 14px/21px and articles at 16px/25.6px are both below the
   comfortable range for long-form reading. Unify and enlarge.
   -------------------------------------------------------------------------- */

.post-content,
.article-content {
  font-size: 17px;
  line-height: 1.72;
  color: var(--lz-ink);
}

.post-content p,
.article-content p {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0 0 1.4em;
}

.post-content li,
.article-content li {
  font-size: 17px;
  line-height: 1.72;
  margin-bottom: 0.5em;
}

/* Full-width pages stretch text to the whole viewport on desktop, which pushes
   line length past 120 characters. Cap the measure while keeping media wide. */
.wp-page .col-md-12.fullwidth .post-content > p,
.wp-page .col-md-12.fullwidth .post-content > ul,
.wp-page .col-md-12.fullwidth .post-content > ol,
.wp-page .col-md-12.fullwidth .post-content > h2,
.wp-page .col-md-12.fullwidth .post-content > h3,
.wp-page .col-md-12.fullwidth .post-content > h4,
.wp-page .col-md-12.fullwidth .post-content > blockquote {
  max-width: var(--lz-measure);
}

.post-content strong,
.article-content strong {
  color: #10171e;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   2. Headings inside content
   -------------------------------------------------------------------------- */

.post-content h2,
.article-content h2 {
  font-size: 25px;
  line-height: 1.3;
  font-weight: 700;
  color: #10171e;
  margin: 2.2em 0 0.7em;
  padding-bottom: 0.35em;
  border-bottom: 2px solid var(--lz-rule);
}

.post-content h3,
.article-content h3 {
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
  color: #10171e;
  margin: 1.9em 0 0.6em;
}

.post-content h2:first-child,
.article-content h2:first-child,
.post-content h3:first-child,
.article-content h3:first-child {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   3. In-content links: previously indistinguishable from body text
   -------------------------------------------------------------------------- */

.post-content > p a,
.article-content > p a,
.post-content li a,
.article-content li a {
  color: var(--lz-green-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.post-content > p a:hover,
.article-content > p a:hover,
.post-content li a:hover,
.article-content li a:hover {
  color: var(--lz-green);
  text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   4. Images inside content
   -------------------------------------------------------------------------- */

.post-content img,
.article-content img {
  max-width: 100%;
  height: auto;
  border-radius: 2px;
}

@media (max-width: 767px) {
  /* Floated images at ~200px leave unreadable 8-word columns on a phone. */
  .post-content img[style*="float"],
  .article-content img[style*="float"],
  .post-content .alignleft,
  .post-content .alignright,
  .article-content .alignleft,
  .article-content .alignright {
    float: none !important;
    display: block;
    margin: 1.5em auto !important;
    width: 100%;
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   5. Reading time + table of contents
   -------------------------------------------------------------------------- */

.lz-reading-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--lz-ink-soft);
  margin: 0 0 18px;
}

.lz-reading-time::before {
  content: "";
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 50%;
  position: relative;
  display: inline-block;
}

#ez-toc-container {
  background: var(--lz-surface);
  border: 1px solid var(--lz-rule);
  border-left: 4px solid var(--lz-green);
  border-radius: 2px;
  padding: 18px 22px;
  margin: 0 0 32px;
  max-width: var(--lz-measure);
  box-shadow: none;
}

#ez-toc-container .ez-toc-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lz-ink-soft);
}

#ez-toc-container ul li a {
  font-size: 15px;
  line-height: 1.6;
  color: var(--lz-green-dark);
}

/* --------------------------------------------------------------------------
   6. "Read next" block injected on pillar pages
   -------------------------------------------------------------------------- */

.lz-readnext {
  margin: 46px 0 10px;
  padding: 26px 28px;
  background: var(--lz-surface);
  border: 1px solid var(--lz-rule);
  border-radius: 2px;
  max-width: var(--lz-measure);
}

.lz-readnext__title {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--lz-ink-soft);
}

.lz-readnext__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lz-readnext__list li {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--lz-rule);
}

.lz-readnext__list li:first-child {
  border-top: 0;
}

.lz-readnext__list a {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  color: var(--lz-ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

.lz-readnext__list a:hover {
  color: var(--lz-green-dark);
}

.lz-readnext__thumb {
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  border-radius: 2px;
  object-fit: cover;
  background: var(--lz-rule);
}

/* --------------------------------------------------------------------------
   7. Sibling page navigation
   -------------------------------------------------------------------------- */

.lz-siblings {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 34px 0 0;
  max-width: var(--lz-measure);
}

.lz-siblings a {
  flex: 1 1 240px;
  display: block;
  padding: 14px 18px;
  border: 1px solid var(--lz-rule);
  border-radius: 2px;
  text-decoration: none;
  color: var(--lz-ink);
  transition: border-color 0.15s ease;
}

.lz-siblings a:hover {
  border-color: var(--lz-green);
}

.lz-siblings__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--lz-ink-soft);
  margin-bottom: 4px;
}

.lz-siblings__title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.lz-siblings .lz-siblings__next {
  text-align: right;
}

/* --------------------------------------------------------------------------
   8. Language switcher — was six 16px flags, below any touch-target guidance
   -------------------------------------------------------------------------- */

.gtranslate_wrapper a,
.top-bar .gtranslate_wrapper a,
.switcher a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 4px;
  border-radius: 2px;
  transition: background-color 0.15s ease;
}

.gtranslate_wrapper a:hover,
.switcher a:hover {
  background: rgba(255, 255, 255, 0.14);
}

.gtranslate_wrapper img,
.switcher img {
  width: 24px !important;
  height: 18px !important;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.gtranslate_wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}

/* --------------------------------------------------------------------------
   9. Mobile layout fixes
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* The slider track renders at 2172px inside a 390px viewport. */
  .flexslider,
  .bk-slider,
  .grid-carousel {
    overflow: hidden;
    max-width: 100%;
  }

  .flexslider .slides > li {
    max-width: 100vw;
  }

  /* Category blocks whose last item escapes its grid cell. */
  .bkblock .block-item,
  .block_1 .post-item,
  .block_2 .post-item {
    float: none;
    width: 100%;
    clear: both;
  }

  body {
    overflow-x: hidden;
  }

  .post-content,
  .article-content {
    font-size: 17px;
  }
}

/* --------------------------------------------------------------------------
   10. Accessibility
   -------------------------------------------------------------------------- */

.lz-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 12px 22px;
  background: #10171e;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 2px 0;
}

.lz-skip-link:focus {
  left: 0;
  color: #fff;
}

/* The theme removes focus rings; restore a visible one for keyboard users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--lz-green);
  outline-offset: 2px;
}

/* The logo is wrapped in an <h1> on every page; on articles it competes with
   the real title. The PHP module demotes it, this keeps the visual identical. */
.site-branding-heading {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

/* --------------------------------------------------------------------------
   11. Sidebar "Explore" navigation (replaces the logo-only widget)
   -------------------------------------------------------------------------- */

.lz-explore__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lz-explore__list li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--lz-rule, #e4e7eb);
}

.lz-explore__list li:last-child {
  border-bottom: 0;
}

.lz-explore__list a {
  display: block;
  padding: 11px 2px;
  text-decoration: none;
  color: var(--lz-ink, #1f2933);
}

.lz-explore__list a:hover .lz-explore__label {
  color: var(--lz-green-dark, #1f6b33);
}

.lz-explore__label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.lz-explore__desc {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--lz-ink-soft, #52606d);
}

/* Injected page title for pages whose body copy has no heading of its own. */
.lz-page-title {
  margin: 0 0 22px;
  font-size: 34px;
  line-height: 1.2;
  font-weight: 700;
  color: #10171e;
}

@media (max-width: 767px) {
  .lz-page-title { font-size: 27px; }
}

/* An archive title promoted from h2 to h1 must keep the theme's badge styling. */
.page-title h1.heading,
.module-title h1.heading {
  padding: 5px 12px;
  line-height: 27px !important;
  display: inline-block;
  font-size: 15px;
  margin: 0;
  background-color: #333946;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600 !important;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}

/* --------------------------------------------------------------------------
   12. Quiz cards: a themed icon so the subjects read at a glance
   -------------------------------------------------------------------------- */

.lz-quiz-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  font-size: 23px;
  line-height: 1;
  margin-bottom: 15px;
}

.lz-quiz-icon--history  { background: #f3ebe0; color: #8a6234; }
.lz-quiz-icon--language { background: #e6eff5; color: #2d6b8c; }
.lz-quiz-icon--music    { background: #e7f4e9; color: #2f8f46; }
.lz-quiz-icon--people   { background: #f1ecf6; color: #6b4e8f; }
.lz-quiz-icon--place    { background: #e9f2f1; color: #2f7f74; }
.lz-quiz-icon--default  { background: #eef1f3; color: #52606d; }

/* Carry the theme colour into the card's top rule. */
#lz-quiz-app .lz-quiz-card--history  { border-top-color: #8a6234; }
#lz-quiz-app .lz-quiz-card--language { border-top-color: #2d6b8c; }
#lz-quiz-app .lz-quiz-card--music    { border-top-color: #2f8f46; }
#lz-quiz-app .lz-quiz-card--people   { border-top-color: #6b4e8f; }
#lz-quiz-app .lz-quiz-card--place    { border-top-color: #2f7f74; }

#lz-quiz-app .lz-quiz-card {
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

#lz-quiz-app .lz-quiz-card:hover {
  box-shadow: 0 4px 14px rgba(16, 23, 30, 0.09);
  transform: translateY(-2px);
}

/* Title of the quiz being played, with its icon. */
#lz-quiz-app .lz-quiz-playing {
  display: flex;
  align-items: center;
  gap: 10px;
}

#lz-quiz-app .lz-quiz-playing i {
  font-size: 18px;
}

#lz-quiz-app .lz-quiz-playing--history  i { color: #8a6234; }
#lz-quiz-app .lz-quiz-playing--language i { color: #2d6b8c; }
#lz-quiz-app .lz-quiz-playing--music    i { color: #2f8f46; }
#lz-quiz-app .lz-quiz-playing--people   i { color: #6b4e8f; }
#lz-quiz-app .lz-quiz-playing--place    i { color: #2f7f74; }

@media (max-width: 600px) {
  .lz-quiz-icon {
    width: 46px;
    height: 46px;
    font-size: 20px;
    margin-bottom: 12px;
  }
}

/* --------------------------------------------------------------------------
   13. Contact page: form fields and the inline TikTok mark
   -------------------------------------------------------------------------- */

.lz-tiktok-icon {
  vertical-align: -2px;
  margin-right: 2px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus {
  border-color: var(--lz-green, #2f8f46);
  box-shadow: 0 0 0 3px rgba(47, 143, 70, 0.14);
  outline: none;
}

.lz-social-box .lz-tiktok-icon {
  color: #4caf50;
  width: 18px;
  height: 18px;
}

/* The logo carries intrinsic width/height so the browser reserves its box before
   decoding; height:auto keeps the rendered ratio driven by the CSS width. */
.header .logo img,
.site-branding-heading img,
.logo > a > img {
  height: auto;
}

/* --------------------------------------------------------------------------
   14. Article figures: images placed inside the body copy, with captions
   -------------------------------------------------------------------------- */

.lz-figure {
  margin: 34px 0;
  max-width: var(--lz-measure);
}

.lz-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.lz-figure figcaption {
  margin-top: 9px;
  padding-left: 11px;
  border-left: 3px solid var(--lz-rule, #e4e7eb);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--lz-ink-soft, #52606d);
}

.lz-figure__credit {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: #8a94a0;
}

/* A portrait-shaped image should not tower over the text column. */
.lz-figure--portrait img {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   15. Sources block at the end of an article
   -------------------------------------------------------------------------- */

.lz-sources {
  margin: 40px 0 0;
  padding: 18px 22px;
  background: var(--lz-surface, #f7f8f9);
  border: 1px solid var(--lz-rule, #e4e7eb);
  border-radius: 2px;
  max-width: var(--lz-measure);
}

.lz-sources .lz-sources__title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--lz-ink-soft, #52606d);
  border: 0;
  padding: 0;
}

.lz-sources ul {
  margin: 0;
  padding-left: 18px;
}

.lz-sources li {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 5px;
}

.lz-sources a {
  color: var(--lz-green-dark, #1f6b33);
}