/*
Theme Name: NEWLINECLUB Archive
Theme URI: https://newlineclub.net
Author: NEWLINECLUB
Description: Archive theme for NEWLINECLUB and iEARN-Belarus, preserving 15+ years of youth education club history.
Version: 1.0-pilot
Text Domain: newlineclub-archive
*/

:root {
  --nl-bg: #FFFFFF;
  --nl-panel: #F2F1ED;
  --nl-ink: #2E2E2E;
  --nl-muted: #6B6B68;
  --nl-accent: #1C6FEB;
  --nl-line: #DAD9D2;

  --ie-bg: #FFFDF2;
  --ie-ink: #2B2A1E;
  --ie-muted: #7A7256;
  --ie-accent: #FFE24D;
  --ie-gold: #8A6F00;
  --ie-line: #E8DFB8;

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--nl-bg);
  color: var(--nl-ink);
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
h1, h2, h3, h4 { font-family: 'PT Serif', Georgia, serif; font-weight: 700; margin: 0 0 .4em; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ===== utility bar ===== */
.utility { background: var(--nl-ink); color: #E7E7E3; font-size: 13px; }
.utility .wrap { display: flex; justify-content: space-between; align-items: center; padding: 8px 24px; gap: 12px; flex-wrap: wrap; }
.utility-link { color: #E7E7E3; text-decoration: none; border-bottom: 1px solid rgba(231,231,227,.4); }
.utility-link:hover { border-bottom-color: #E7E7E3; }

/* ===== header ===== */
header.site-head { border-bottom: 1px solid var(--nl-line); }
.head-inner { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; gap: 24px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand img.logo { height: 40px; width: auto; }
.brand-text { font-family: 'PT Serif', serif; font-size: 22px; font-style: italic; }
.since-badge { display: flex; flex-direction: column; line-height: 1.05; border-left: 2px solid var(--nl-accent); padding-left: 12px; }
.since-badge b { font-family: 'PT Serif', serif; font-size: 20px; color: var(--nl-accent); }
.since-badge span { font-size: 10.5px; color: var(--nl-muted); letter-spacing: .02em; }

nav.primary ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0; padding: 0; }
nav.primary a { text-decoration: none; color: var(--nl-ink); padding: 4px 0; border-bottom: 2px solid transparent; font-size: 14px; display: block; }
nav.primary a:hover { border-bottom-color: var(--nl-accent); }

/* ===== hero ===== */
.hero { padding: 48px 0 40px; border-bottom: 1px solid var(--nl-line); }
.hero .kicker { color: var(--nl-accent); font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.hero h1 { font-size: 32px; max-width: 640px; line-height: 1.28; }
.hero p.lead { max-width: 560px; color: var(--nl-muted); margin-top: 16px; font-size: 15.5px; }
.hero .stats { display: flex; gap: 36px; margin-top: 28px; flex-wrap: wrap; }
.hero .stat b { font-family: 'PT Serif', serif; font-size: 24px; display: block; color: var(--nl-ink); }
.hero .stat span { font-size: 12.5px; color: var(--nl-muted); }

/* ===== section grid (categories) ===== */
.section-head { padding: 40px 0 18px; }
.section-head h2 { font-size: 21px; }
.section-head p { color: var(--nl-muted); margin-top: 6px; font-size: 14.5px; max-width: 580px; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-bottom: 20px; list-style: none; margin: 0; }
@media (max-width: 760px) { .grid { grid-template-columns: 1fr; } }

.card { background: var(--nl-panel); border-left: 4px solid var(--nl-accent); padding: 18px 20px; text-decoration: none; display: block; color: var(--nl-ink); }
.card h3 { font-size: 16px; margin-bottom: 6px; }
.card p.count { color: var(--nl-muted); font-size: 13px; margin: 0 0 8px; }
.card p.desc { font-size: 13.5px; color: var(--nl-ink); margin: 0; }
.grid li:nth-child(3n+2) .card { border-left-color: #8FAF3E; }
.grid li:nth-child(3n+3) .card { border-left-color: #C9762B; }

/* ===== projects / banners ===== */
.banner-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 6px 0 50px; list-style: none; margin: 0; }
@media (max-width: 860px) { .banner-row { grid-template-columns: repeat(2, 1fr); } }
.banner-tile { display: block; text-decoration: none; border: 1px solid var(--nl-line); background: #fff; overflow: hidden; transition: border-color .15s ease; }
.banner-tile:hover { border-color: var(--nl-accent); }
.banner-tile .art { height: 110px; display: flex; align-items: center; justify-content: center; background: #FAFAF7; overflow: hidden; }
.banner-tile .art img { max-height: 100%; max-width: 100%; object-fit: contain; }
.banner-tile .art.yellow { background: #FFF7B0; }
.banner-tile .art.yellow img, .banner-tile .art.photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.banner-tile .art.blue { background: #1857C4; }

/* ===== "card" treatment: logo fills the full tile, tile
   background set to plain white so there's no color seam
   around logos that themselves have a white/near-white
   background (Earth Charter, Peace One Day, AYV, Belarus
   Connection). No padding/shrinking — logo stays full size. ===== */
.banner-tile .art.logo-card { background: #fff; }
.banner-tile .art.logo-card img { max-height: 100%; max-width: 100%; object-fit: contain; }
.banner-tile .cap { padding: 10px 14px; border-top: 1px solid var(--nl-line); }
.banner-tile .cap b { display: block; font-size: 13.5px; }
.banner-tile .cap span { font-size: 11.5px; color: var(--nl-muted); }

/* ===== article / single post ===== */
.post-single { padding: 40px 0 60px; }
.post-single .post-meta { color: var(--nl-muted); font-size: 13px; margin-bottom: 10px; }
.post-single h1 { font-size: 28px; max-width: 760px; }
.post-single .post-category { display: inline-block; background: var(--nl-panel); color: var(--nl-ink); font-size: 12px; padding: 3px 10px; margin-bottom: 14px; text-decoration: none; }
.post-content { max-width: 760px; font-size: 16px; }
.post-content img { margin: 1.2em 0; }
.post-content p { margin: 0 0 1.1em; }

/* ===== archive / category listing ===== */
.post-list { list-style: none; margin: 0; padding: 30px 0 60px; }
.post-list li { border-bottom: 1px solid var(--nl-line); padding: 18px 0; display: flex; gap: 18px; align-items: flex-start; }
.post-list .thumb { width: 96px; height: 72px; object-fit: cover; background: var(--nl-panel); flex-shrink: 0; }
.post-list h2 { font-size: 17px; margin-bottom: 4px; }
.post-list h2 a { text-decoration: none; }
.post-list .excerpt { color: var(--nl-muted); font-size: 13.5px; margin: 0; }
.post-list .meta { color: var(--nl-muted); font-size: 12px; margin-top: 4px; }

/* ===== footer ===== */
footer.site-footer { background: var(--nl-ink); color: #B9B9B4; font-size: 13px; padding: 30px 0; margin-top: 20px; }
footer.site-footer .bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
footer.site-footer .footer-link { color: #B9B9B4; text-decoration: none; border-bottom: 1px solid rgba(185,185,180,.4); }
footer.site-footer .footer-link:hover { border-bottom-color: #B9B9B4; }

/* ===== iEARN section ===== */
body.post-type-archive-iearn, body.single-iearn { background: var(--ie-bg); color: var(--ie-ink); }
.ie-banner-wrap { width: 100%; overflow: hidden; background: #FFF7B0; }
.ie-banner-wrap img { width: 100%; height: auto; display: block; }
.ie-intro { padding: 36px 0 8px; }
.ie-intro .eyebrow { color: var(--ie-gold); font-weight: 700; font-size: 13px; }
.ie-intro h1, .ie-intro h2 { font-size: 23px; margin-top: 6px; }
.ie-intro p { max-width: 640px; color: var(--ie-muted); font-size: 14.5px; margin-top: 8px; }

.ie-post-list { list-style: none; margin: 0; padding: 10px 0 60px; }
.ie-post-list li { border-bottom: 1px solid var(--ie-line); padding: 16px 0; }
.ie-post-list h3 { font-size: 16px; margin-bottom: 4px; }
.ie-post-list h3 a { text-decoration: none; color: var(--ie-ink); }
.ie-post-list .meta { color: var(--ie-gold); font-size: 12px; }

.ie-single { padding: 36px 0 60px; max-width: 760px; margin: 0 auto; }
.ie-single h1 { font-size: 26px; color: var(--ie-ink); }
.ie-single .post-content { font-size: 16px; }
.ie-back { display: inline-block; margin-bottom: 18px; font-size: 13px; color: var(--ie-gold); text-decoration: none; }


/* ===== header right-side full title block ===== */
.head-inner { position: relative; }
.brand-full-title { display: flex; flex-direction: column; line-height: 1.25; text-align: right; border-right: 2px solid var(--nl-accent); padding-right: 12px; }
.brand-full-title b { font-family: 'PT Serif', serif; font-size: 14px; color: var(--nl-accent); font-weight: 700; }
.brand-full-title span { font-size: 11px; color: var(--nl-accent); }

/* ===== homepage legacy teaser ===== */
.legacy-teaser { background: var(--nl-panel); border-left: 4px solid var(--nl-accent); padding: 22px 24px; margin: 10px 0 40px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.legacy-teaser p { margin: 0; font-size: 14.5px; color: var(--nl-ink); }
.legacy-teaser a.btn { flex-shrink: 0; text-decoration: none; background: var(--nl-accent); color: #fff; padding: 9px 18px; font-size: 13.5px; font-weight: 700; }

.audio-teaser { background: #fff; padding: 22px 24px; margin: 0 0 40px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; border: 1px solid var(--nl-line); }
.audio-teaser-text { display: flex; align-items: center; gap: 14px; flex: 1 1 320px; min-width: 240px; }
.audio-teaser .audio-icon { width: 38px; height: 38px; flex-shrink: 0; overflow: visible; }
.audio-teaser .audio-icon .wave { animation: nl-wave-pulse 1.1s ease-in-out infinite; }
.audio-teaser .audio-icon .wave-1 { animation-delay: 0s; }
.audio-teaser .audio-icon .wave-2 { animation-delay: .15s; }
.audio-teaser .audio-icon .wave-3 { animation-delay: .3s; }
@keyframes nl-wave-pulse {
	0%, 100% { opacity: .35; }
	50% { opacity: 1; }
}
.audio-teaser p { margin: 0; font-size: 14.5px; color: var(--nl-ink); }
.audio-teaser audio { flex-shrink: 0; accent-color: var(--nl-accent); max-width: 100%; }

/* ===== inline "learn more" link in lead paragraph ===== */
.lead a.more-link { color: var(--nl-accent); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--nl-accent); }


/* ===== hero two-column layout with image placeholder ===== */
.hero-grid { display: flex; gap: 40px; align-items: center; flex-wrap: wrap; }
.hero-text { flex: 1 1 480px; min-width: 280px; }
.hero-image-placeholder { flex: 1 1 320px; min-width: 240px; aspect-ratio: 4 / 3; background: var(--nl-panel); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--nl-muted); font-size: 13px; text-align: center; }
.hero-image-placeholder img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===============================================================
   Normalize typography inside imported legacy article content.
   The original Joomla articles carry inline font-family/font-size
   styles (Arial 9pt, etc.) plus old <table>/<blockquote> layout
   markup. Inline styles win over external CSS by specificity, so
   !important is required here to make old content match the
   theme's own type scale consistently across every page/post.
   =============================================================== */
.post-content, .post-content * {
	font-family: 'PT Sans', Arial, sans-serif !important;
	font-size: 16px !important;
	color: var(--nl-ink) !important;
	line-height: 1.6 !important;
	background: transparent !important;
}
.post-content strong, .post-content b { font-weight: 700 !important; }
.post-content table { width: 100% !important; border-collapse: collapse; }
.post-content td, .post-content th { padding: 4px 0 !important; vertical-align: top; }
.post-content a { color: var(--nl-accent) !important; text-decoration: underline; }

/* ===== homepage bottom banner strip ===== */
.site-banner-strip { max-width: 1080px; margin: 30px auto 0; padding: 0 24px 30px; display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
.site-banner-strip .strip-banner { display: block; flex-shrink: 0; }
.site-banner-strip .strip-banner img { width: auto; height: 90px; max-width: 100%; display: block; }

.partner-logos { display: flex; align-items: center; justify-content: center; gap: 36px; list-style: none; margin: 0 0 40px; padding: 24px 0 0; flex-wrap: wrap; border-top: 1px solid var(--nl-line); }
.partner-logos li { display: flex; align-items: center; justify-content: center; height: 56px; }
.partner-logos a { display: flex; align-items: center; justify-content: center; height: 100%; }
.partner-logos img { max-height: 100%; max-width: 140px; width: auto; object-fit: contain; }

/* ===== contact form ===== */
.contact-form { max-width: 520px; margin: 30px 0; }
.contact-form .hp-field { position: absolute; left: -9999px; top: -9999px; }
.contact-form .form-row { margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
.contact-form label { font-size: 13.5px; font-weight: 700; color: var(--nl-ink); }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea {
	font-family: inherit; font-size: 14.5px; padding: 10px 12px;
	border: 1px solid var(--nl-line); background: #fff; color: var(--nl-ink);
	border-radius: 2px;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--nl-accent); }
.contact-form button.btn {
	border: none; cursor: pointer; text-decoration: none;
	background: var(--nl-accent); color: #fff; padding: 11px 24px;
	font-size: 14px; font-weight: 700; font-family: inherit;
}
.contact-form button.btn:hover { opacity: .92; }
.form-notice { padding: 14px 18px; margin: 20px 0; font-size: 14px; }
.form-notice-success { background: #E8F3E3; border-left: 4px solid #6B9E3F; color: var(--nl-ink); }
.form-notice-error { background: #FBE9E7; border-left: 4px solid #C0392B; color: var(--nl-ink); }


/* ================================================================
   ADOBE YOUTH VOICES (AYV) SECTION — dark wood, recreated from the
   original ayvbelarus.wordpress.com "Modularity Lite" WordPress.com
   theme. Scoped entirely under .ayv-page so it never leaks into the
   rest of the NEWLINECLUB site.
   ================================================================ */

.ayv-page {
	/* Fixed background: the wood image stays still while the page scrolls.
	   It sits on a ::before layer (below) because iPhones ignore
	   background-attachment: fixed. clip-path keeps that layer inside
	   this section so it never shows behind the header or footer. */
	position: relative;
	isolation: isolate;
	clip-path: inset(0);
	background-color: #1a1410;
	color: #eee;
	padding: 50px 0 70px;
	font-family: 'PT Sans', Arial, sans-serif;
}
.ayv-page::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: #1a1410 url('assets/ayv/ayv-bg.jpg') no-repeat center top;
	background-size: cover;
	pointer-events: none;
}
.ayv-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.ayv-hero { text-align: center; margin-bottom: 36px; }
.ayv-hero h1 {
	font-family: 'PT Serif', Georgia, serif;
	color: #fff;
	font-size: 30px;
	letter-spacing: .5px;
	margin: 0 0 6px;
	text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.ayv-hero .ayv-sub { color: #cfc6bd; font-size: 14px; margin: 0; text-transform: uppercase; letter-spacing: 1px; }

.ayv-layout { display: flex; gap: 32px; align-items: flex-start; }
.ayv-main { flex: 1; min-width: 0; }
.ayv-sidebar { width: 300px; flex-shrink: 0; }

/* AYV section menu */
.ayv-nav { margin: 0 0 28px; background: rgba(20,14,10,.82); border: 1px solid rgba(255,255,255,.12); }
.ayv-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; }
.ayv-nav a { display: block; padding: 12px 18px; color: #e9e2da; text-decoration: none; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
.ayv-nav a:hover, .ayv-nav a:focus-visible { color: #fff; background: rgba(255,255,255,.08); }
.ayv-nav a.is-current { color: #fff; box-shadow: inset 0 -2px 0 #fff; }
@media (max-width: 760px) { .ayv-nav a { padding: 10px 12px; font-size: 12px; } }

.ayv-section-title {
	font-family: 'PT Serif', Georgia, serif;
	color: #fff;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-bottom: 1px solid rgba(255,255,255,.2);
	padding-bottom: 10px;
	margin-bottom: 22px;
}

.ayv-post-card {
	background: rgba(0,0,0,.28);
	border: 1px solid rgba(255,255,255,.08);
	padding: 22px 26px;
	margin-bottom: 20px;
}
.ayv-post-card h3 { margin: 0 0 12px; font-family: 'PT Serif', Georgia, serif; font-size: 20px; }
.ayv-post-card h3 a { color: #fff; text-decoration: none; }
.ayv-post-card h3 a:hover { text-decoration: underline; }
.ayv-post-card::after { content: ""; display: block; clear: both; }
.ayv-post-card .ayv-thumb { float: left; width: 200px; margin: 4px 20px 10px 0; }
.ayv-thumb img { display: block; width: 100%; height: auto; border: 1px solid rgba(255,255,255,.15); }
.ayv-post-card .ayv-meta { clear: both; }
.ayv-excerpt { color: #ddd6cc; font-size: 15px; line-height: 1.6; }
.ayv-excerpt p { margin: 0 0 10px; }
.ayv-meta {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid rgba(255,255,255,.12);
	font-size: 12.5px;
	color: #a79c8d;
}
.ayv-meta a { color: #a79c8d; }

.ayv-widget {
	background: rgba(0,0,0,.28);
	border: 1px solid rgba(255,255,255,.08);
	padding: 18px 20px;
	margin-bottom: 20px;
}
.ayv-widget h4 {
	font-family: 'PT Serif', Georgia, serif;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: #fff;
	margin: 0 0 12px;
	border-bottom: 1px solid rgba(255,255,255,.15);
	padding-bottom: 8px;
}
.ayv-widget p { font-size: 13.5px; color: #cfc6bd; line-height: 1.6; margin: 0; }
.ayv-banner { margin-bottom: 18px; }
.ayv-banner img { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; border: 1px solid rgba(255,255,255,.12); }
.ayv-banner a:hover img, .ayv-banner a:focus-visible img { border-color: rgba(255,255,255,.5); }
.ayv-banner--logos img { border: 0; }
.ayv-hero .ayv-logo { margin: 0 0 8px; line-height: 0; }
.ayv-hero .ayv-logo img { display: inline-block; width: 380px; max-width: 80vw; height: auto; }
.ayv-recent-list { list-style: none; margin: 0; padding: 0; }
.ayv-recent-list li { padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 13.5px; }
.ayv-recent-list li:last-child { border-bottom: none; }
.ayv-recent-list a { color: #ddd6cc; text-decoration: none; }
.ayv-recent-list a:hover { color: #fff; text-decoration: underline; }

/* Single article view */
.ayv-back { display: inline-block; margin-bottom: 22px; color: #cfc6bd; text-decoration: none; font-size: 13.5px; }
.ayv-back:hover { color: #fff; }
.ayv-single-card {
	background: rgba(0,0,0,.28);
	border: 1px solid rgba(255,255,255,.08);
	padding: 32px 40px;
	max-width: 760px;
	margin: 0 auto;
}
.ayv-single-card h1 { font-family: 'PT Serif', Georgia, serif; color: #fff; font-size: 26px; margin: 0 0 8px; }
.ayv-single-card .ayv-meta { border-top: none; padding-top: 0; margin-top: 0; margin-bottom: 20px; }
.ayv-single-card .ayv-thumb { margin-bottom: 20px; }
.ayv-content { color: #ddd6cc; font-size: 16px; line-height: 1.7; }
.ayv-content p { margin: 0 0 16px; }
.ayv-content img { border: 1px solid rgba(255,255,255,.15); margin: 10px 0; }
.ayv-content a { color: #ff9d6a; }

/* Pagination */
.ayv-page .pagination, .ayv-page .nav-links {
	margin-top: 10px; display: flex; gap: 10px; color: #cfc6bd; font-size: 13px;
}
.ayv-page .pagination a, .ayv-page .nav-links a { color: #fff; }

@media (max-width: 760px) {
	.ayv-layout { flex-direction: column; }
	.ayv-sidebar { width: 100%; }
	.ayv-page::before { background-position: left top; }
	.ayv-post-card .ayv-thumb { float: none; width: auto; max-width: 300px; margin: 0 0 12px; }
}