/*
Theme Name:   Hello Elementor Child
Theme URI:    https://elementor.com/hello-theme/
Description:  Tom Kirkman — light "Cover Story" design. Header, footer, single post, archive and search templates. Requires the "TK Site Kit — Elementor Widgets" plugin (widgets, shortcodes, design system).
Author:       Your Name
Template:     hello-elementor
Version:      3.0.0
Requires at least: 6.0
Requires PHP: 7.4
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  hello-elementor-child
*/

/* Fallback tokens (the plugin defines the same ones) */
:root {
	--tk-bg: #F3F6FA; --tk-bg-ice: #E3EBF5; --tk-card: #FFFFFF; --tk-text: #0E1A38; --tk-muted: #4D5B78;
	--tk-line: rgba(14, 26, 56, .12); --tk-line-strong: rgba(14, 26, 56, .28); --tk-ice: #C4D4E8;
	--tk-navy: #233A74; --tk-navy-deep: #14244F; --tk-accent-ink: #2E4FA3; --tk-lime: #D7F23C; --tk-gold: #D5BC65;
	--tk-head: "Barlow", system-ui, sans-serif; --tk-serif: "Source Serif 4", Georgia, serif; --tk-jost: "Jost", system-ui, sans-serif;
	--tk-shadow: 0 1px 2px rgba(14, 26, 56, .04), 0 12px 32px rgba(14, 26, 56, .06);
}

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--tk-bg); color: var(--tk-text); font-family: var(--tk-head); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--tk-accent-ink); }
a:hover, a:focus { color: var(--tk-text); }
::selection { background: var(--tk-lime); color: #0E1A38; }
:focus-visible { outline: 3px solid var(--tk-navy); outline-offset: 3px; }
img { max-width: 100%; height: auto; }
h1 { overflow-wrap: break-word; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button:hover, button:focus, [type="submit"]:hover, [type="submit"]:focus { background-color: inherit; color: inherit; }
.site-main, .page-content { max-width: none; }
.elementor-page .site-main { padding: 0; }

.tk-wrap { max-width: 1240px; margin: 0 auto; padding-left: clamp(18px, 4vw, 32px); padding-right: clamp(18px, 4vw, 32px); box-sizing: border-box; }
.tk-narrow { max-width: 760px; margin: 0 auto; padding-left: clamp(18px, 4vw, 32px); padding-right: clamp(18px, 4vw, 32px); box-sizing: border-box; }
.tk-sec { padding-top: clamp(64px, 9vw, 110px); display: flex; flex-direction: column; gap: 24px; }
.tk-h1 { margin: 0; font-weight: 900; font-style: italic; font-size: clamp(48px, 9vw, 120px); line-height: .88; letter-spacing: -.03em; color: var(--tk-text); }
.tk-h2 { margin: 0; font-weight: 900; font-style: italic; font-size: clamp(34px, 4.5vw, 54px); line-height: .92; letter-spacing: -.02em; color: var(--tk-text); }
.tk-hero-c { padding-top: clamp(32px, 5vw, 72px); display: flex; flex-direction: column; gap: 22px; align-items: center; text-align: center; }
.tk-hero-c__search { width: 100%; max-width: 680px; }

/* =========================================================================
   Header
   ====================================================================== */
.tk-header { position: sticky; top: 0; z-index: 50; background: rgba(243, 246, 250, 0); transition: background-color .3s, box-shadow .3s; }
.admin-bar .tk-header { top: 32px; }
.tk-header.is-scrolled { background: rgba(243, 246, 250, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--tk-line); }
.tk-header__inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 18px; padding-bottom: 18px; }
.tk-logo { display: flex; flex-direction: column; text-decoration: none; color: var(--tk-text); line-height: .9; }
.tk-logo:hover { color: var(--tk-text); }
.tk-logo__name { font-weight: 900; font-style: italic; font-size: 26px; letter-spacing: -.01em; }
.tk-logo__role { font-family: var(--tk-jost); font-weight: 400; font-size: 11px; letter-spacing: .32em; color: var(--tk-accent-ink); margin-top: 4px; }
.tk-nav { display: flex; gap: 2px; align-items: center; padding: 5px; border: 1px solid var(--tk-line); border-radius: 999px; background: #FFFFFF; box-shadow: var(--tk-shadow); }
.tk-nav__link { padding: 10px 18px; border-radius: 999px; color: var(--tk-text); text-decoration: none; font-size: 15px; font-weight: 600; transition: background-color .2s, color .2s; }
.tk-nav__link:hover { color: var(--tk-text); background: var(--tk-bg-ice); }
.tk-nav__link.is-active { background: var(--tk-navy); color: #FFFFFF; }
.tk-nav__cta { padding: 10px 20px; border-radius: 999px; background: var(--tk-lime); color: #0E1A38 !important; text-decoration: none; font-size: 15px; font-weight: 800; transition: transform .2s, box-shadow .2s; }
.tk-nav__cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(150, 175, 20, .35); }
.tk-mnav { display: none; position: relative; }
.tk-mnav summary { list-style: none; cursor: pointer; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--tk-line); background: #FFFFFF; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; box-shadow: var(--tk-shadow); }
.tk-mnav summary::-webkit-details-marker { display: none; }
.tk-mnav summary span { width: 20px; height: 2px; background: var(--tk-text); border-radius: 2px; transition: transform .25s, opacity .25s; }
.tk-mnav[open] summary span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tk-mnav[open] summary span:nth-child(2) { opacity: 0; }
.tk-mnav[open] summary span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.tk-mnav__panel { position: absolute; right: 0; top: 58px; width: min(84vw, 320px); padding: 12px; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; border-radius: 24px; border: 1px solid var(--tk-line); background: #FFFFFF; box-shadow: 0 30px 60px rgba(14, 26, 56, .18); }
.tk-mnav__panel .tk-nav__link { padding: 14px 16px; font-size: 18px; }
.tk-mnav__panel .tk-nav__cta { margin-top: 6px; text-align: center; padding: 14px 16px; font-size: 17px; }

/* =========================================================================
   Footer
   ====================================================================== */
.tk-footer { background: var(--tk-navy-deep); color: #FFFFFF; margin-top: 60px; }
.tk-footer__top { padding-top: 56px; padding-bottom: 40px; display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; }
.tk-footer__brand { flex: 1 1 280px; display: flex; flex-direction: column; gap: 10px; }
.tk-footer__name { font-weight: 900; font-style: italic; font-size: 30px; color: #FFFFFF; }
.tk-footer__text { font-family: var(--tk-serif); font-size: 16px; line-height: 1.6; color: var(--tk-ice); max-width: 340px; }
.tk-footer__nav { flex: 1 1 360px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 24px; font-size: 15px; }
.tk-footer__nav a { color: #FFFFFF; text-decoration: none; }
.tk-footer__nav a:hover { color: var(--tk-lime); }
.tk-footer__bottom { padding-top: 20px; padding-bottom: 32px; font-size: 13px; color: var(--tk-ice); border-top: 1px solid rgba(255, 255, 255, .14); }

/* =========================================================================
   Single post & plain pages
   ====================================================================== */
.tk-post__head { padding-top: clamp(32px, 5vw, 64px); display: flex; flex-direction: column; gap: 22px; }
.tk-crumbs { font-size: 15px; color: var(--tk-muted); }
.tk-crumbs a { color: var(--tk-muted); }
.tk-crumbs a:last-child { color: var(--tk-accent-ink); font-weight: 700; }
.tk-post__meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; color: var(--tk-muted); font-size: 14px; }
.tk-post__title, .tk-page__title { margin: 0; font-weight: 900; font-style: italic; font-size: clamp(38px, 6vw, 72px); line-height: .95; letter-spacing: -.02em; color: var(--tk-text); }
.tk-page__title { padding-top: clamp(32px, 5vw, 64px); margin-bottom: 32px; }
.tk-post__author { display: flex; align-items: center; gap: 14px; }
.tk-post__author img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: top; }
.tk-post__author span { display: flex; flex-direction: column; }
.tk-post__author small { font-size: 14px; color: var(--tk-muted); }
.tk-post__image { max-width: 1040px; margin: 40px auto 0; padding: 0 clamp(18px, 4vw, 32px); }
.tk-post__image img { width: 100%; border-radius: 28px; display: block; }
.tk-post__body { margin-top: 40px; padding-top: 40px; padding-bottom: 40px; background: #FFFFFF; border-radius: 28px; box-shadow: var(--tk-shadow); max-width: 800px; }
.tk-prose { font-family: var(--tk-serif); font-size: clamp(19px, 2vw, 21px); line-height: 1.75; color: var(--tk-text); }
.tk-prose p { margin: 0 0 1.1em; }
.tk-prose img { border-radius: 20px; }
.tk-prose a { color: var(--tk-accent-ink); text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--tk-lime); overflow-wrap: anywhere; }
.tk-prose blockquote { margin: 1.5em 0; padding: 22px 26px; border-radius: 20px; background: var(--tk-bg-ice); border-left: 4px solid var(--tk-gold); color: var(--tk-muted); font-style: italic; }
.tk-post__body p:last-child em a { display: inline-flex; align-items: center; min-height: 54px; padding: 0 28px; margin-top: 10px; border-radius: 999px; background: var(--tk-lime); color: #0E1A38; font-family: var(--tk-head); font-style: normal; font-weight: 800; font-size: 17px; text-decoration: none; }
.tk-postnav { padding-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; max-width: 1040px; }
.tk-postnav a { border-radius: 24px; padding: 26px; background: #FFFFFF; border: 1px solid var(--tk-line); box-shadow: var(--tk-shadow); text-decoration: none; color: var(--tk-text); display: flex; flex-direction: column; gap: 8px; }
.tk-postnav a small { font-size: 14px; color: var(--tk-muted); }
.tk-postnav a span { font-weight: 800; font-size: 20px; line-height: 1.2; }
.tk-postnav__next { text-align: right; }

/* =========================================================================
   Responsive
   ====================================================================== */
@media (max-width: 960px) {
	.tk-nav { display: none; }
	.tk-mnav { display: block; }
}
@media (max-width: 782px) {
	.admin-bar .tk-header { top: 46px; }
}
@media (max-width: 600px) {
	.tk-post__body { border-radius: 20px; }
}

/* ---------- Your custom CSS below ---------- */