/* Whyworld pages on srofia.com — loaded AFTER /styles.css.
   The frame (header, footer, type, colours, ledger/cells/legal) comes from styles.css, like every other app page.
   This file only adds Whyworld-only pieces, built from the Srofia tokens. */

/* App bar: the Whyworld section links under the Srofia header */
.ww-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin-top: calc(-1 * var(--s6)); margin-bottom: var(--s7); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.ww-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; color: var(--text); text-decoration: none; }
.ww-brand img { width: 28px; height: 28px; border-radius: 8px; }
.ww-brand:hover { color: var(--text); }
.ww-bar-links { display: flex; flex-wrap: wrap; gap: 0 18px; }
.ww-bar-links a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--text-2); text-decoration: none; }
.ww-bar-links a:hover, .ww-bar-links a[aria-current] { color: var(--text); }
.ww-bar-links a[aria-current] { box-shadow: inset 0 -1px 0 var(--accent); }

/* Landing hero intro paragraph */
.ww-dek { margin-top: var(--s4); max-width: 60ch; color: var(--text-2); }

/* Breadcrumb, styled like the page eyebrow */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--text-3); }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs li[aria-current] { color: var(--text-3); }

/* Link grid (countries) */
.ww-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); column-gap: var(--s5); border-top: 1px solid var(--line); }
.ww-links li { border-bottom: 1px solid var(--line); }
.ww-links a { display: flex; align-items: center; min-height: 48px; color: var(--text-2); font-size: var(--fs-small); text-decoration: none; }
.ww-links a::after { content: "→"; margin-left: auto; padding-left: 12px; color: var(--text-3); transition: transform var(--t-1) var(--ease-out), color var(--t-1) var(--ease-out); }
.ww-links a:hover { color: var(--text); }
.ww-links a:hover::after { color: var(--accent-text); transform: translateX(3px); }

/* FAQ */
.ww-faq details { border-bottom: 1px solid var(--line); }
.ww-faq details:first-child { border-top: 1px solid var(--line); }
.ww-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: var(--s3) 0; list-style: none; cursor: pointer; color: var(--text); font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; }
.ww-faq summary::-webkit-details-marker { display: none; }
.ww-faq summary::after { content: "+"; flex: none; font-family: var(--font-mono); color: var(--text-3); transition: transform var(--t-1) var(--ease-out); }
.ww-faq details[open] summary::after { transform: rotate(45deg); }
.ww-faq details p { padding-bottom: var(--s4); max-width: 62ch; color: var(--text-2); }

/* Country page: today's topics */
.ww-meta { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .08em; color: var(--text-3); }
.ww-topics { border-top: 1px solid var(--line); }
.ww-topics .topic { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s3); padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
.ww-topics .num { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .14em; color: var(--accent-text); padding-top: 4px; }
.ww-topics .cat { font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--text-3); }
.ww-topics h3 { margin-top: 6px; font-size: var(--fs-h3); line-height: 1.3; color: var(--text); }
.ww-topics .why { margin-top: var(--s2); color: var(--text-2); }
.ww-topics .why-k { margin-right: 6px; color: var(--text); font-weight: 500; }
.ww-topics .src { margin-top: var(--s2); font-size: var(--fs-small); color: var(--text-3); overflow-wrap: anywhere; }
.ww-topics .src a { color: var(--text-2); }
.ledger .note p + p { margin-top: var(--s2); }
.ledger .note p { color: var(--text-2); }

/* Contact page */
.content-section a:not(.btn) { overflow-wrap: anywhere; }

/* Footer: a third column (Whyworld links) next to Apps and Studio */
@media (min-width: 560px) { .ww-footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Studio page: app screenshots */
.ww-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
@media (min-width: 760px) { .ww-shots { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ww-shots img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line); }