/**
 * Teacher Classroom Guide — rich SEO post template.
 * Uses the site's core brand palette (navy/green/gold), applied in a
 * fresh, colourful, "premium magazine" treatment distinct from the
 * warmer, serif Teacher Insights template. Loaded only on posts
 * using template-classroom-guide.php.
 *
 * @package MyTeacher_Child
 */

.mt-seo-article,
.mt-seo-more,
.mt-seo-toc{
	--sg-teal:#1B8A8A;
	--sg-plum:#7A5A96;
	--sg-terracotta:#B84A2A;
}

/* ---------------- HERO ---------------- */
.mt-seo-hero{
	position:relative; overflow:hidden; color:#fff;
	background:
		radial-gradient(circle at 88% 6%, rgba(224,169,63,.30), transparent 45%),
		linear-gradient(120deg,#0A7A56 0%, #0E9A6E 22%, #1B8A8A 46%, #213A47 100%);
	padding:52px 24px 46px; text-align:center;
}
.mt-seo-hero::before{
	content:""; position:absolute; inset:0;
	background-image:radial-gradient(circle, rgba(255,255,255,.09) 1.4px, transparent 1.4px);
	background-size:24px 24px; opacity:.55; pointer-events:none;
}
.mt-seo-hero-inner{ position:relative; max-width:800px; margin:0 auto; }
.mt-seo-crumb{
	font-family:var(--mt-sans); font-size:.8rem; font-weight:700; color:rgba(255,255,255,.75);
	margin-bottom:16px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
}
.mt-seo-crumb a{ color:rgba(255,255,255,.92); text-decoration:none; }
.mt-seo-crumb a:hover{ text-decoration:underline; }
.mt-seo-badge{
	display:inline-block; font-family:var(--mt-display); font-weight:800; font-size:.74rem;
	letter-spacing:.06em; text-transform:uppercase; color:var(--mt-navy); background:var(--mt-gold);
	padding:6px 16px; border-radius:999px; margin-bottom:18px;
}
.mt-seo-hero h1{
	font-family:var(--mt-display); font-weight:800; letter-spacing:-.02em; color:#fff;
	font-size:clamp(1.8rem,4vw,2.9rem); line-height:1.15; margin:0 0 16px;
}
.mt-seo-lead{
	font-family:var(--mt-sans); font-size:1.08rem; color:rgba(255,255,255,.9); font-weight:600;
	max-width:58ch; margin:0 auto 22px; line-height:1.6;
}
.mt-seo-meta{
	display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
	color:rgba(255,255,255,.85); font-family:var(--mt-sans); font-weight:700; font-size:.86rem;
}
.mt-seo-author{ display:inline-flex; align-items:center; gap:8px; }
.mt-seo-author img{ border-radius:50%; }
.mt-seo-dot{ opacity:.6; }

.mt-seo-cover{ max-width:920px; margin:0 auto 10px; padding:0 24px; margin-top:-26px; position:relative; z-index:2; }
.mt-seo-cover img{
	width:100%; border-radius:20px; box-shadow:var(--mt-shadow-lg); display:block; border:5px solid #fff;
}

/* ---------------- WRAP / TOC ---------------- */
.mt-seo-wrap{ max-width:740px; margin:0 auto; padding:0 24px; }

.mt-seo-toc{
	background:var(--mt-cream); border:1.5px solid var(--mt-line); border-radius:16px;
	padding:22px 24px; margin:36px 0 8px;
}
.mt-seo-toc-title{
	font-family:var(--mt-display); font-weight:800; font-size:.95rem; color:var(--mt-navy);
	margin:0 0 10px;
}
.mt-seo-toc ol{ margin:0; padding:0 0 0 1.2em; }
.mt-seo-toc li{ margin-bottom:6px; }
.mt-seo-toc a{
	font-family:var(--mt-sans); font-weight:700; font-size:.94rem; color:var(--mt-green-deep);
	text-decoration:none;
}
.mt-seo-toc a:hover{ text-decoration:underline; }

/* ---------------- CONTENT TYPOGRAPHY ---------------- */
.mt-seo-content{
	font-family:var(--mt-sans); color:var(--mt-navy); font-size:1.08rem; line-height:1.85;
	margin-top:28px;
}
.mt-seo-content > p{ margin:0 0 22px; }
.mt-seo-content h2{
	font-family:var(--mt-display) !important; font-weight:800 !important; letter-spacing:-.01em;
	color:#fff !important; font-size:clamp(1.25rem,2.4vw,1.55rem) !important; line-height:1.3;
	margin:48px 0 20px !important; padding:14px 22px; border-radius:14px;
	background:linear-gradient(100deg,var(--mt-green-deep),var(--mt-green) 70%);
	box-shadow:0 8px 20px rgba(10,122,86,.25);
}
.mt-seo-content h3{
	font-family:var(--mt-display) !important; font-weight:800 !important;
	color:var(--mt-gold-deep) !important; font-size:1.2rem !important; line-height:1.4;
	margin:32px 0 14px !important; padding-left:14px; border-left:4px solid var(--mt-gold);
}
.mt-seo-content h3::before{ content:none; }
.mt-seo-content ul,
.mt-seo-content ol{ margin:0 0 22px; padding-left:1.4em; }
.mt-seo-content li{ margin-bottom:9px; }
.mt-seo-content ul > li::marker{ color:var(--mt-green-deep); }
.mt-seo-content ol > li::marker{ color:var(--mt-gold-deep); font-weight:800; }
.mt-seo-content a{ color:var(--mt-green-deep); font-weight:700; text-decoration-thickness:1.5px; }
.mt-seo-inline-link{
	background:var(--mt-green-tint); padding:1px 6px; border-radius:6px; text-decoration:none !important;
}
.mt-seo-inline-link:hover{ background:var(--mt-gold-tint); color:var(--mt-gold-deep); }
.mt-seo-content strong{ color:var(--mt-navy); }
.mt-seo-content img{ max-width:100%; border-radius:14px; }
.mt-seo-content table{ width:100%; border-collapse:collapse; margin:0 0 24px; font-size:.96rem; }
.mt-seo-content th,
.mt-seo-content td{ border:1px solid var(--mt-line); padding:10px 12px; text-align:left; }
.mt-seo-content th{ background:var(--mt-cream); font-family:var(--mt-display); font-weight:700; color:var(--mt-navy); }

/* ---------------- IMAGE CARDS — the "interrupt the text" element ---------------- */
.mt-seo-card{
	max-width:480px; margin:38px auto; text-align:center; position:relative;
}
.mt-seo-card-frame{ border-radius:20px; overflow:hidden; box-shadow:var(--mt-shadow-lg); border:4px solid #fff; outline:1px solid var(--mt-line); }

/* Square AI-illustration cards — cropped to a neat square, as before. */
.mt-seo-card-square .mt-seo-card-frame{ aspect-ratio:1/1; }
.mt-seo-card-square img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Tall/wide document previews (e.g. an A4 exam page) — shown in full,
   at their own real proportions, never cropped or squeezed. */
.mt-seo-card-fitted{ max-width:320px; }
.mt-seo-card-fitted .mt-seo-card-frame{ background:var(--mt-cream); display:flex; align-items:center; justify-content:center; max-height:560px; }
.mt-seo-card-fitted img{ width:100%; height:100%; object-fit:contain; display:block; }

.mt-seo-card-label{
	position:absolute; top:-12px; left:50%; transform:translateX(-50%); z-index:2;
	background:var(--mt-gold); color:var(--mt-navy); font-family:var(--mt-display); font-weight:800;
	font-size:.74rem; letter-spacing:.02em; padding:6px 16px; border-radius:999px;
	box-shadow:0 6px 16px rgba(200,144,42,.4); white-space:nowrap;
}
.mt-seo-card figcaption{
	font-family:var(--mt-sans); font-style:italic; color:var(--mt-ink-soft); font-size:.88rem;
	margin-top:12px;
}

/* ---------------- CALLOUT BOXES ---------------- */
.mt-seo-callout{
	border-radius:16px; padding:18px 20px; margin:30px 0; border-left:5px solid; box-shadow:var(--mt-shadow);
}
.mt-seo-callout-title{
	display:flex; align-items:center; gap:8px; font-family:var(--mt-display); font-weight:800;
	font-size:1rem; margin:0 0 8px;
}
.mt-seo-callout-title span{ font-size:1.3rem; line-height:1; flex:none; }
.mt-seo-callout-body{ width:100%; }
.mt-seo-callout-body p:last-child{ margin-bottom:0; }
.mt-seo-callout-body p{ margin:0 0 10px; font-size:1rem; line-height:1.7; }
.mt-seo-callout-tip{ background:var(--mt-green-tint); border-color:var(--mt-green); }
.mt-seo-callout-tip .mt-seo-callout-title{ color:var(--mt-green-deep); }
.mt-seo-callout-note{ background:#E5EAEC; border-color:var(--mt-navy); }
.mt-seo-callout-note .mt-seo-callout-title{ color:var(--mt-navy); }
.mt-seo-callout-stat{ background:var(--mt-gold-tint); border-color:var(--mt-gold-deep); }
.mt-seo-callout-stat .mt-seo-callout-title{ color:var(--mt-gold-deep); }

/* ---------------- PULL QUOTE ---------------- */
.mt-seo-pullquote{
	margin:34px 0; padding:26px 30px; border-radius:16px; position:relative;
	background:linear-gradient(120deg, var(--mt-navy), #2E4A5A);
	color:#fff;
}
.mt-seo-pullquote p{
	font-family:var(--mt-display); font-weight:700; font-size:1.2rem; line-height:1.5; margin:0 0 10px;
}
.mt-seo-pullquote cite{ font-family:var(--mt-sans); font-style:normal; font-weight:700; font-size:.86rem; color:var(--mt-gold); }

/* ---------------- FAQ ACCORDION ---------------- */
.mt-seo-faq{ margin:34px 0; }
.mt-seo-faq-item{
	border:1.5px solid var(--mt-line); border-radius:14px; margin-bottom:12px; overflow:hidden;
}
.mt-seo-faq-q{
	width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
	background:#fff; border:none; padding:16px 18px; cursor:pointer; text-align:left;
	font-family:var(--mt-display); font-weight:700; font-size:1rem; color:var(--mt-navy);
}
.mt-seo-faq-q > span:first-child{ flex:1 1 0%; min-width:0; }
.mt-seo-faq-q:hover{ background:var(--mt-cream); }
.mt-seo-faq-toggle{
	flex:none; width:26px; height:26px; border-radius:50%; background:var(--mt-green-tint);
	color:var(--mt-green-deep); display:flex; align-items:center; justify-content:center;
	font-size:1.1rem; font-weight:800; transition:transform .2s ease;
}
.mt-seo-faq-item.is-open .mt-seo-faq-toggle{ transform:rotate(45deg); }
.mt-seo-faq-a{
	max-height:0; overflow:hidden; transition:max-height .3s ease; padding:0 18px;
	font-family:var(--mt-sans); color:var(--mt-ink-soft); font-size:.98rem; line-height:1.7;
}
.mt-seo-faq-item.is-open .mt-seo-faq-a{ max-height:1200px; padding:0 18px 18px; }
.mt-seo-faq-a p{ margin:0 0 10px; }
.mt-seo-faq-a p:last-child{ margin-bottom:0; }

/* ---------------- FREE SAMPLE DOWNLOAD CARDS ---------------- */
.mt-seo-sample{
	max-width:280px; margin:0 auto; text-align:center; background:#fff; border-radius:18px;
	padding:16px 16px 20px; box-shadow:var(--mt-shadow); border:1px solid var(--mt-line);
}
.mt-seo-sample img{
	width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:12px; display:block; margin-bottom:14px;
	box-shadow:0 8px 20px rgba(33,58,71,.12);
}
.mt-seo-sample-title{
	font-family:var(--mt-display); font-weight:700; font-size:.92rem; color:var(--mt-navy); margin:0 0 14px;
}
.mt-seo-sample-btn{
	display:inline-flex; align-items:center; gap:6px; background:var(--mt-green); color:#fff; font-family:var(--mt-display);
	font-weight:800; font-size:.85rem; padding:11px 20px; border-radius:999px; text-decoration:none;
	transition:background .15s ease, transform .15s ease;
}
.mt-seo-sample-btn:hover{ background:var(--mt-green-deep); transform:translateY(-2px); }

.mt-seo-sample-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:34px 0; }
@media (max-width:700px){ .mt-seo-sample-row{ grid-template-columns:1fr; max-width:280px; margin-left:auto; margin-right:auto; } }

/* ---------------- PREMIUM CLOSING CTA CARD ---------------- */
.mt-seo-premium-cta{
	position:relative; overflow:hidden; text-align:center; border-radius:22px; padding:40px 26px; margin:44px 0;
	background:linear-gradient(120deg,#0A7A56 0%, var(--mt-green) 40%, var(--mt-gold-deep) 100%);
	box-shadow:0 20px 46px rgba(10,122,86,.28);
}
.mt-seo-premium-shine{
	position:absolute; top:-50%; left:-30%; width:60%; height:200%;
	background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
	transform:rotate(15deg); animation:mtSeoShine 3.2s ease-in-out infinite;
}
@keyframes mtSeoShine{
	0%   { left:-40%; }
	55%  { left:120%; }
	100% { left:120%; }
}
.mt-seo-premium-icon{ font-size:2.2rem; display:block; margin-bottom:10px; position:relative; }
.mt-seo-premium-cta h3{
	position:relative; color:#fff; font-family:var(--mt-display); font-weight:800; font-size:1.35rem; margin:0 0 10px;
}
.mt-seo-premium-cta p{
	position:relative; color:rgba(255,255,255,.92); font-size:.96rem; max-width:48ch; margin:0 auto 22px; line-height:1.6;
}
.mt-seo-premium-btn{
	position:relative; display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--mt-green-deep);
	font-family:var(--mt-display); font-weight:800; font-size:.95rem; padding:14px 28px; border-radius:999px;
	text-decoration:none; box-shadow:0 10px 24px rgba(0,0,0,.18); transition:transform .15s ease;
}
.mt-seo-premium-btn:hover{ transform:translateY(-3px); }

/* ---------------- AD SLOT ---------------- */
.mt-seo-ad{
	margin:36px auto; max-width:100%; min-height:250px; display:flex; flex-direction:column;
	align-items:center; justify-content:center; background:var(--mt-cream);
	border:1.5px dashed var(--mt-line); border-radius:14px; padding:10px;
}
.mt-seo-ad-label{
	font-family:var(--mt-sans); font-size:.72rem; font-weight:700; text-transform:uppercase;
	letter-spacing:.06em; color:var(--mt-ink-soft); margin-bottom:8px;
}

/* ---------------- MORE FOR TEACHERS ---------------- */
.mt-seo-more{ background:var(--mt-cream); padding:56px 0; margin-top:50px; }
.mt-seo-more h2{
	font-family:var(--mt-display); font-weight:800; color:var(--mt-navy); font-size:1.5rem;
	margin:0 0 22px; text-align:center;
}
.mt-seo-more-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.mt-seo-more-card{
	display:block; background:#fff; border-radius:16px; overflow:hidden; box-shadow:var(--mt-shadow);
	text-decoration:none; transition:transform .15s ease, box-shadow .15s ease;
}
.mt-seo-more-card:hover{ transform:translateY(-4px); box-shadow:var(--mt-shadow-lg); }
.mt-seo-more-card img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.mt-seo-more-card h3{
	font-family:var(--mt-display); font-weight:700; color:var(--mt-navy); font-size:1rem;
	margin:0; padding:14px 16px;
}
.mt-seo-more-fallback{ display:flex; align-items:center; justify-content:center; min-height:120px; grid-column:1/-1; }
.mt-seo-more-fallback h3{ color:var(--mt-green-deep); }

@media (max-width:760px){
	.mt-seo-more-grid{ grid-template-columns:1fr; }
	.mt-seo-card{ max-width:100%; }
}

/* Tighter side padding on phones — more of the screen width goes to
   actual text instead of margin, so lines wrap naturally rather than
   feeling narrow and choppy. */
@media (max-width:480px){
	.mt-seo-hero{ padding:40px 16px 34px; }
	.mt-seo-wrap{ padding:0 16px; }
	.mt-seo-cover{ padding:0 16px; }
	.mt-seo-toc{ padding:18px 16px; }
	.mt-seo-content{ font-size:1.02rem; }
	.mt-seo-content h2{ padding:12px 16px; margin:38px 0 16px !important; }
	.mt-seo-callout{ padding:14px 16px; }
	.mt-seo-card{ margin:28px auto; }
	.mt-seo-more{ padding:40px 0; }
}