/* Kids Gazette – inner pages: articles, sections, search, pages, 404.
   Builds on frontpage.css (colours, header, footer, cards, buttons). */

.wrap-narrow { width: min(760px, 100% - 40px); margin-inline: auto; }
.wrap-media { width: min(980px, 100% - 40px); margin-inline: auto; }

/* ---------- reading progress ---------- */
.progress { position: sticky; top: 0; z-index: 30; height: 6px; background: transparent; }
.progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--coral), var(--sun), var(--leaf), var(--sky), var(--grape)); }
.admin-bar .progress { top: 32px; }

/* ---------- article header ---------- */
.article { padding-bottom: 10px; }
.article__head { padding-top: 34px; }
.crumbs { font-size: 14px; font-weight: 700; color: var(--ink-2); margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.crumbs a { border-bottom: 2px solid var(--sun); }
.crumbs a:hover { border-color: var(--coral); }
.article__title { font-size: clamp(32px, 4.6vw, 50px); font-weight: 800; letter-spacing: -.6px; line-height: 1.08; margin: 4px 0 14px; }
.article__dek { font-size: clamp(18px, 2vw, 21px); line-height: 1.5; color: var(--ink-2); margin: 0 0 20px; font-weight: 600; }
.byline { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-block: 2px dashed rgba(22, 33, 62, .18); }
.byline__avatar {
  flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c); color: #fff; font: 800 17px var(--head); border: 2.5px solid var(--line);
}
.byline__avatar.c-sun { color: var(--ink); }
.byline__text { display: flex; flex-direction: column; line-height: 1.3; font-size: 15px; }
.byline__text span { color: var(--ink-2); font-weight: 600; font-size: 14px; }
.textsize { margin-left: auto; display: flex; gap: 6px; }
.textsize button {
  font: 800 15px var(--body); width: 42px; height: 38px; border-radius: 12px; border: 2.5px solid var(--line);
  background: #fff; color: var(--ink); cursor: pointer; box-shadow: 2px 2px 0 var(--line);
}
.textsize button:hover { background: var(--sun); }

.article__hero { margin-top: 26px; margin-bottom: 8px; }
.article__img { width: 100%; height: auto; max-height: 560px; object-fit: cover; border: 3px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lg); background: var(--sun-soft); }
.article__hero figcaption { font-size: 14px; color: var(--ink-2); margin-top: 10px; text-align: center; }

/* ---------- article body: built for comfortable reading ---------- */
.prose {
  --prose-size: 19px;
  font-size: var(--prose-size); line-height: 1.8; color: #1f2a44;
  margin-top: 28px; overflow-wrap: break-word;
}
.prose > :first-child { margin-top: 0; }
.prose p, .prose div:not([class*="kg-"]) { margin: 0 0 1.15em; }
.prose > p:first-of-type { font-size: 1.12em; line-height: 1.7; }
.prose--dropcap > p:first-of-type::first-letter {
  float: left; font: 800 3.4em/.82 var(--head); color: var(--coral); margin: .08em .1em 0 0;
}
.prose h2 { font-size: 1.55em; font-weight: 800; margin: 1.6em 0 .55em; line-height: 1.2; }
.prose h2::after { content: ''; display: block; width: 56px; height: 6px; border-radius: 6px; background: var(--sun); margin-top: 8px; }
.prose h3 { font-size: 1.25em; font-weight: 700; margin: 1.4em 0 .5em; }
.prose h4, .prose h5, .prose h6 { font-family: var(--head); font-size: 1.1em; margin: 1.2em 0 .4em; }
.prose strong, .prose b { color: var(--ink); font-weight: 800; }
.prose a { color: #1d63c9; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose a:hover { color: var(--coral); }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .5em; padding-left: .2em; }
.prose ul li::marker { color: var(--coral); font-size: 1.2em; }
.prose ol li::marker { color: var(--coral); font-weight: 800; }
.prose img { max-width: 100%; height: auto; border-radius: 16px; border: 2.5px solid var(--line); margin: .4em 0 1.2em; }
.prose figure { margin: 1.4em 0; }
.prose figcaption, .prose .wp-caption-text { font-size: .8em; color: var(--ink-2); text-align: center; margin-top: .4em; }
.prose blockquote {
  margin: 1.4em 0; padding: 18px 22px; background: var(--sun-soft); border-left: 6px solid var(--sun);
  border-radius: 0 16px 16px 0; font-size: 1.05em; font-weight: 600;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: .9em; }
.prose th, .prose td { border: 2px solid rgba(22, 33, 62, .15); padding: 8px 10px; text-align: left; }
.prose th { background: var(--sky-soft); }
.prose iframe, .prose video { max-width: 100%; border-radius: 16px; }
.prose hr { border: 0; border-top: 3px dotted rgba(22, 33, 62, .25); margin: 2em 0; }

/* Story section boxes (Words to know, Did you know?, Think about it, Quiz, Sources) */
.kg-box { margin: 1.8em 0; padding: 22px 26px 8px; border: 3px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); background: #fff; }
.kg-box h2 { margin-top: 0; font-size: 1.3em; }
.kg-box h2::after { display: none; }
.kg-box h2::before { margin-right: 8px; }
.kg-box--why { background: var(--coral-soft); }
.kg-box--why h2::before { content: '💡'; }
.kg-box--words { background: var(--sky-soft); }
.kg-box--words h2::before { content: '📖'; }
.kg-box--words ul { list-style: none; padding: 0; }
.kg-box--words li { background: #fff; border: 2px solid rgba(22, 33, 62, .15); border-radius: 14px; padding: 10px 14px; }
.kg-box--fact { background: var(--grape-soft); transform: rotate(-.4deg); }
.kg-box--fact h2::before { content: '🤯'; }
.kg-box--think { background: var(--leaf-soft); }
.kg-box--think h2::before { content: '🤔'; }
.kg-box--quiz { background: var(--sun-soft); }
.kg-box--quiz h2::before { content: '🧠'; }
.kg-box--quiz ol { list-style: upper-alpha; }
.kg-box--quiz details { margin: 0 0 1.2em; }
.kg-box--quiz summary {
  display: inline-block; cursor: pointer; font: 800 .85em var(--body); padding: 8px 16px; border-radius: 99px;
  background: var(--ink); color: #fff; list-style: none;
}
.kg-box--quiz summary::-webkit-details-marker { display: none; }
.kg-box--quiz details[open] summary { background: var(--leaf); }
.kg-box--quiz details p { margin-top: .7em; font-weight: 800; }
.kg-box--sources { background: #f7f8fb; box-shadow: none; border-width: 2px; font-size: .8em; line-height: 1.6; padding-top: 16px; }
.kg-box--sources h2 { font-size: 1.15em; }
.kg-box--sources h2::before { content: '🔗'; }
.kg-box--sources a { word-break: break-word; }
/* The AI note that follows the sources */
.prose .kg-box--sources + p em, .prose > p:last-child > em:only-child { display: block; font-size: .8em; color: var(--ink-2); }

/* ---------- article footer, tags, share ---------- */
.article__foot { margin-top: 26px; padding-top: 18px; border-top: 2px dashed rgba(22, 33, 62, .18); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags a { display: inline-block; font-weight: 800; font-size: 14px; padding: 4px 12px; border-radius: 99px; background: var(--paper); border: 2px solid var(--line); }
.tags a:hover { background: var(--sun); }
.share { display: flex; flex-wrap: wrap; gap: 8px; }
.share__btn {
  font: 800 14px var(--body); padding: 8px 14px; border-radius: 99px; border: 2.5px solid var(--line);
  background: #fff; color: var(--ink); cursor: pointer; box-shadow: 2px 2px 0 var(--line);
}
.share__btn:hover { background: var(--sun); }
.share__btn--wa { background: #25d366; color: #fff; }
.share__btn--wa:hover { background: #1fb457; }
.share__btn.is-done { background: var(--leaf); color: #fff; }
.more { margin-bottom: 0; }

/* Elementor-built pages and posts keep their own layout inside the new header/footer */
.page-builder { width: 100%; }
.page-builder img { display: inline-block; }

/* ---------- section / search pages ---------- */
.archive-head { background: var(--cs, var(--sun-soft)); border-bottom: 3px solid var(--line); padding: 34px 0 30px; }
.archive-head__in { display: flex; gap: 20px; align-items: center; }
.archive-head__icon {
  flex: none; display: grid; place-items: center; width: 78px; height: 78px; font-size: 40px; border-radius: 22px;
  background: var(--c, var(--sun)); border: 3px solid var(--line); box-shadow: 4px 4px 0 var(--line); transform: rotate(-6deg);
}
.archive-head__title { font-size: clamp(32px, 4.4vw, 50px); font-weight: 800; letter-spacing: -.5px; }
.archive-head__blurb { margin: 6px 0 0; font-size: 18px; font-weight: 600; color: var(--ink-2); max-width: 700px; }
.archive-head__page { margin: 6px 0 0; font-weight: 800; }
.archive-body { padding: 34px 0 10px; }
.archive-grid { margin-bottom: 22px; }
.archive-grid:empty { display: none; }
.archive-body > .card--wide { margin-bottom: 22px; }
.archive-body > .card--wide .card__media { min-height: 300px; }
.archive-body > .card--wide .card__title { font-size: clamp(24px, 2.6vw, 32px); }

.pager { display: flex; justify-content: center; margin: 14px 0 10px; }
.pager .page-numbers {
  display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; margin: 4px;
  font-weight: 800; border: 2.5px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 2px 2px 0 var(--line);
}
.pager .page-numbers.current { background: var(--ink); color: #fff; }
.pager a.page-numbers:hover { background: var(--sun); }
.pager .dots { border: 0; box-shadow: none; background: transparent; }

.empty { text-align: center; padding: 40px 0; }
.empty__big { font: 800 26px var(--head); margin-bottom: 6px; }
.empty__emoji { font-size: 74px; margin: 0; }
.empty--404 { padding: 50px 0 30px; }
.empty .btn { margin-top: 12px; }
.search--big { max-width: 460px; margin: 18px auto; }
.search--big input { width: 100%; font-size: 17px; padding: 12px 18px; }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .wrap-narrow, .wrap-media { width: calc(100% - 28px); }
  .article__head { padding-top: 22px; }
  .byline { flex-wrap: wrap; }
  .prose { --prose-size: 18px; line-height: 1.75; }
  .kg-box { padding: 18px 18px 6px; border-radius: 18px; }
  .kg-box--fact { transform: none; }
  .article__img { border-radius: 16px; }
  .archive-head__in { align-items: flex-start; }
  .archive-head__icon { width: 58px; height: 58px; font-size: 30px; border-radius: 16px; }
  .archive-body > .card--wide .card__media { min-height: 0; }
}

/* ---------- print: just the story ---------- */
@media print {
  .topbar, .masthead, .progress, .textsize, .share, .more, .join, .footer, .ticker { display: none !important; }
  body { background: #fff; }
  .prose { font-size: 13pt; }
  .kg-box { box-shadow: none; break-inside: avoid; }
}

/* ---------- contact page ---------- */
.contact { display: grid; grid-template-columns: 1fr 1.5fr; gap: 30px; align-items: start; padding: 36px 0 50px; }
.contact__ways { display: flex; flex-direction: column; gap: 14px; }
.way {
  display: flex; gap: 14px; align-items: center; padding: 16px 18px; background: #fff;
  border: 2.5px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s;
}
.way:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--line); }
.way__icon {
  flex: none; width: 50px; height: 50px; display: grid; place-items: center; font-size: 24px;
  background: var(--cs); border: 2.5px solid var(--line); border-radius: 14px; transform: rotate(-5deg);
}
.way strong { display: block; font: 800 19px var(--head); }
.way small { display: block; color: var(--ink-2); font-weight: 700; font-size: 14.5px; word-break: break-word; }
.contact__note { margin: 4px 0 0; padding: 12px 16px; background: var(--sun-soft); border: 2px dashed var(--sun); border-radius: 16px; font-weight: 700; font-size: 15px; }

.contact__form { background: #fff; border: 3px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-lg); padding: 28px 30px 30px; }
.contact__form > h2 { font-size: 30px; font-weight: 800; }
.contact__hint { margin: 6px 0 18px; color: var(--ink-2); font-weight: 600; }
.contact__fallback { background: var(--sky-soft); border-radius: 16px; padding: 16px 18px; font-weight: 600; }
.contact__fallback a { color: #1d63c9; text-decoration: underline; }

/* WPForms in the site style (works with its "modern" and "classic" markup) */
.kg-contact .wpforms-container {
  --wpforms-field-border-radius: 14px; --wpforms-field-border-size: 2.5px; --wpforms-field-border-color: var(--ink);
  --wpforms-field-text-color: var(--ink); --wpforms-label-color: var(--ink); --wpforms-label-sublabel-color: var(--ink-2);
  --wpforms-button-background-color: var(--sun); --wpforms-button-text-color: var(--ink); --wpforms-button-border-radius: 99px;
  --wpforms-button-border-size: 2.5px; --wpforms-button-border-color: var(--ink); --wpforms-button-border-style: solid;
  --wpforms-field-size-font-size: 17px; --wpforms-label-size-font-size: 16px; --wpforms-button-size-font-size: 17px;
  margin: 0 !important; font-family: var(--body);
}
.kg-contact .wpforms-field-label { font-family: var(--body); font-weight: 800 !important; color: var(--ink); }
.kg-contact .wpforms-container input[type="text"], .kg-contact .wpforms-container input[type="email"],
.kg-contact .wpforms-container input[type="tel"], .kg-contact .wpforms-container select, .kg-contact .wpforms-container textarea {
  width: 100% !important; max-width: 100% !important; font: 600 17px var(--body) !important; color: var(--ink) !important;
  border: 2.5px solid var(--ink) !important; border-radius: 14px !important; background: var(--paper) !important;
  padding: 10px 14px !important; box-shadow: none !important; height: auto !important;
}
.kg-contact .wpforms-container textarea { min-height: 150px; }
.kg-contact .wpforms-container input:focus, .kg-contact .wpforms-container textarea:focus, .kg-contact .wpforms-container select:focus {
  outline: 3px solid var(--sky) !important; outline-offset: 2px; background: #fff !important;
}
.kg-contact .wpforms-submit {
  font: 800 17px var(--body) !important; padding: 12px 28px !important; height: auto !important; border-radius: 99px !important;
  background: var(--sun) !important; color: var(--ink) !important; border: 2.5px solid var(--ink) !important;
  box-shadow: var(--shadow) !important; cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.kg-contact .wpforms-submit:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--line) !important; }
.kg-contact .wpforms-confirmation-container-full {
  background: var(--leaf-soft) !important; border: 2.5px solid var(--leaf) !important; border-radius: 16px !important; color: var(--ink) !important; font-weight: 700;
}
.kg-contact .wpforms-error, .kg-contact label.wpforms-error { color: #c0392b !important; font-weight: 700; }

@media (max-width: 860px) {
  .contact { grid-template-columns: 1fr; }
  .contact__form { order: -1; padding: 22px 18px; }
}
.kg-contact .wpforms-field { padding: 10px 0 !important; }
.kg-contact .wpforms-field-label { display: block; margin-bottom: 6px !important; }
.kg-contact .wpforms-submit-container { padding-top: 12px !important; }

/* Short share link under the share buttons */
.share__short { flex-basis: 100%; margin: 4px 0 0; font-size: 13px; font-weight: 700; color: var(--ink-2); text-align: right; }
.share__short code { font: 800 13px var(--body); background: var(--sun-soft); padding: 2px 8px; border-radius: 8px; user-select: all; }
.share__btn--native { background: var(--sky); color: #fff; }
.share__btn--native:hover { background: #1d6fe0; }
@media (max-width: 760px) { .share__short { text-align: left; } }