/*
Theme Name:   20 Hour Work Week Child
Theme URI:    https://www.20hourworkweek.com/
Description:  Child theme for 20 Hour Work Week, built on Soledad. Custom page
              templates replacing the Elementor-built hub pages, plain
              unstyled resource-item pages, and default blog templates.
Author:       Praveen Kumar
Template:     20hours
Version:      1.0.0
Text Domain:  twhw
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Single source of truth for color/spacing used across every template.
   Matches the approved mockups exactly - do not change these values
   without re-approving the affected mockups.
   ========================================================================== */

:root{
	--green:#23B15A;
	--green-dark:#1E9A4D;
	--navy:#2C3D50;
	--navy-2:#1F2B38;
	--dark-section:#333333;
	--text-muted:#5b6672;
	--border:#e6e8eb;
	--radius:12px;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

body{
	font-family:'Poppins', Arial, sans-serif;
	color:var(--navy);
	line-height:1.7;
}

.twhw-wrap{
	max-width:1140px;
	margin:0 auto;
	padding:0 24px;
}

.twhw-badge{
	display:inline-block;
	font-size:13px;
	font-weight:600;
	letter-spacing:.05em;
	color:#fff;
	padding:8px 18px;
	background:var(--green);
	margin-bottom:20px;
}
/* The fade-to-transparent treatment only reads correctly against a dark
   background (it fades into the hero's own dark color). Everywhere else
   (white/light sections) the badge stays solid so the text never fades
   into unreadable white-on-white. */
.twhw-page-hero .twhw-badge,
.twhw-hero .twhw-badge,
.twhw-resources .twhw-badge{
	background:linear-gradient(90deg, var(--green) 0%, rgba(35,177,90,0) 100%);
}

/* ==========================================================================
   3. HEADER / NAV  (see header.php)
   ========================================================================== */

.twhw-header{
	border-bottom:1px solid var(--border);
	background:#fff;
}
.twhw-header .twhw-headerbar{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:18px 24px;
	max-width:1140px;
	margin:0 auto;
}
.twhw-header .twhw-logo img{
	height:52px;
	width:auto;
}
.twhw-nav ul{
	list-style:none;
	display:flex;
	gap:28px;
	margin:0;
	padding:0;
	font-weight:600;
	font-size:14px;
	letter-spacing:.02em;
}
.twhw-nav a{
	color:var(--navy);
	text-decoration:none;
}
.twhw-nav .current-menu-item > a,
.twhw-nav a:hover{
	color:var(--green);
}
.twhw-nav li{
	position:relative;
}
.twhw-nav .sub-menu{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#fff;
	border:1px solid var(--border);
	border-radius:8px;
	padding:10px;
	margin-top:0;
	padding-top:16px;
	margin-top:-4px;
	min-width:240px;
	box-shadow:0 10px 24px rgba(20,30,25,.12);
	flex-direction:column;
	gap:2px;
	z-index:200;
}
.twhw-nav li:hover > .sub-menu{
	display:flex;
}
.twhw-nav .sub-menu a{
	padding:11px 14px;
	border-radius:6px;
	font-weight:500;
	font-size:15px;
	white-space:nowrap;
}
.twhw-nav .sub-menu a:hover{
	background:#f4fbf6;
}
.twhw-mobile-toggle{
	display:none;
	background:none;
	border:none;
	font-size:24px;
	cursor:pointer;
	color:var(--navy);
}

@media (max-width:900px){
	.twhw-nav{ display:none; }
	.twhw-nav.is-open{
		display:block;
		position:absolute;
		top:100%;
		left:0;
		right:0;
		background:#fff;
		border-bottom:1px solid var(--border);
		padding:16px 24px;
		z-index:100;
	}
	.twhw-nav.is-open ul{ flex-direction:column; gap:0; }
	.twhw-nav.is-open li{ border-bottom:1px solid var(--border); }
	.twhw-nav.is-open li:last-child{ border-bottom:none; }
	.twhw-nav.is-open a{ display:block; padding:12px 0; }
	.twhw-nav.is-open .sub-menu{
		display:block; position:static; border:none; box-shadow:none;
		padding:0 0 0 16px; margin:0;
	}
	.twhw-mobile-toggle{ display:block; }
	.twhw-header .twhw-headerbar{ position:relative; }
}

/* ==========================================================================
   4. PAGE HERO  (dark banner reused on every inner page)
   ========================================================================== */

.twhw-page-hero{
	background:var(--dark-section);
	color:#fff;
	padding:48px 0;
}
.twhw-page-hero.is-large{
	padding:56px 0;
}
.twhw-page-hero h1{
	font-size:30px;
	margin:0;
	color:#fff;
}
.twhw-page-hero.is-large h1{
	font-size:34px;
	margin:0 0 18px;
}
.twhw-page-hero p{
	color:#cfd2d4;
	font-size:16px;
	margin:0 0 12px;
}
.twhw-page-hero p:last-child{ margin-bottom:0; }
.twhw-page-hero strong{ color:#fff; }

/* ==========================================================================
   5. BREADCRUMBS  (resource items, tool pages, legal pages)
   ========================================================================== */

.twhw-crumbs{
	background:#f6f8f7;
	border-bottom:1px solid var(--border);
	padding:12px 0;
	font-size:13px;
	color:var(--text-muted);
}
.twhw-crumbs a{ color:var(--text-muted); text-decoration:none; }
.twhw-crumbs a:hover{ color:var(--green-dark); }
.twhw-crumbs .sep{ margin:0 6px; color:#c3c9cd; }
.twhw-crumbs .current{ color:var(--navy); font-weight:500; }

/* ==========================================================================
   6. HOME PAGE
   ========================================================================== */

.twhw-hero{ padding:64px 0 56px; }
.twhw-hero .twhw-wrap{
	display:grid;
	grid-template-columns:1.1fr .9fr;
	gap:40px;
	align-items:center;
}
.twhw-hero h1{ font-size:40px; line-height:1.2; margin:0 0 20px; font-weight:700; }
.twhw-hero p{ color:var(--text-muted); font-size:16px; margin:0 0 14px; }
.twhw-hero-art{ position:relative; height:380px; }
.twhw-hero-art .img1,
.twhw-hero-art .img2{
	position:absolute;
	border-radius:50%;
	object-fit:cover;
	overflow:hidden;
	display:block;
	border:6px solid #eaf6ee;
}
/* WP Rocket/Perfmatters lazy-load can rewrite <img class="img1"> into
   <picture class="img1"><source><img></picture>, moving the class off
   the actual <img>. The rule above still sizes/clips the wrapper either
   way; this rule makes sure a class-less inner <img> fills it. */
.twhw-hero-art .img1 img,
.twhw-hero-art .img2 img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.twhw-hero-art .img1{ width:300px; height:300px; top:0; left:60px; }
.twhw-hero-art .img2{ width:190px; height:190px; bottom:0; right:0; border-color:#fff; }

.twhw-resources{ background:var(--dark-section); color:#fff; padding:64px 0; }
.twhw-resources h2{ font-size:30px; margin:0 0 18px; color:#fff; }
.twhw-resources p.lead{ color:#cfd2d4; margin:0 0 16px; }
.twhw-res-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:24px; }
.twhw-res-card{
	background:#3d3d3d;
	border:1px solid #4a4a4a;
	border-radius:var(--radius);
	padding:22px 18px;
	text-align:center;
	transition:.15s;
	display:block;
	color:#fff;
	text-decoration:none;
}
.twhw-res-card:hover{ background:var(--green); border-color:var(--green); color:#fff; }
.twhw-res-card .ico{ font-size:22px; margin-bottom:10px; }
.twhw-res-card span{ font-weight:600; font-size:14px; }

.twhw-books-home{ padding:64px 0; }
.twhw-section-title{ text-align:center; margin-bottom:44px; }
.twhw-section-title .pill{
	display:inline-block;
	background:#e9f7ee;
	color:var(--green-dark);
	padding:10px 26px;
	border-radius:30px;
	font-weight:700;
	font-size:22px;
}
.twhw-book-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.twhw-book-card{
	border:1px solid var(--border);
	border-radius:var(--radius);
	overflow:hidden;
	display:flex;
	flex-direction:column;
}
.twhw-book-card .cover{ height:220px; background:#eef1f3 center/contain no-repeat; }
.twhw-book-card .body{ padding:24px; display:flex; flex-direction:column; flex:1; }
.twhw-book-card h2,
.twhw-book-card h3{ font-size:18px; margin:0 0 12px; line-height:1.4; }
.twhw-book-card p{ color:var(--text-muted); font-size:14px; margin:0 0 14px; }
.twhw-btn-primary{
	display:inline-block;
	background:var(--green);
	color:#fff;
	padding:13px 28px;
	border-radius:6px;
	font-weight:600;
	font-size:14px;
	text-decoration:none;
	border:none;
	cursor:pointer;
	align-self:flex-start;
	margin-top:auto;
}
.twhw-btn-primary:hover{ background:var(--green-dark); color:#fff; }

.twhw-blog-home{ background:#fafafa; padding:64px 0; }
.twhw-blog-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

.twhw-benefits{ padding:64px 0; background:#eef8f0; }
.twhw-benefits h2{ text-align:center; font-size:20px; margin:0 0 40px; line-height:1.5; }
.twhw-benefit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.twhw-benefit-card{ background:#fff; border-radius:var(--radius); padding:22px; display:flex; gap:14px; align-items:flex-start; }
.twhw-benefit-card .ico{
	width:44px; height:44px; border-radius:10px; background:var(--green);
	display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; font-size:18px;
}
.twhw-benefit-card h3{ font-size:16px; margin:0 0 6px; }
.twhw-benefit-card p{ font-size:13px; color:var(--text-muted); margin:0; }

/* ==========================================================================
   7. ABOUT US PAGE
   ========================================================================== */

.twhw-story{ padding:64px 0; }
.twhw-story .twhw-wrap{ display:grid; grid-template-columns:220px 1fr; gap:40px; align-items:start; }
.twhw-founder-side{ text-align:center; }
.twhw-founder-photo{
	width:220px; height:220px; border-radius:50%; object-fit:cover; overflow:hidden;
	margin:0 auto 16px; display:block; border:6px solid #eaf6ee;
}
/* Same lazy-load class-stripping issue as the hero images - the wrapper
   (whichever element ends up with this class) is sized/clipped above;
   this makes sure a class-less inner <img> fills it. */
.twhw-founder-photo img{
	width:100%; height:100%; object-fit:cover; display:block;
}
.twhw-founder-name{ font-weight:600; font-size:16px; margin:0 0 14px; }
.twhw-social-row{ display:flex; justify-content:center; gap:10px; }
.twhw-social-row a{
	width:36px; height:36px; border-radius:8px; background:var(--navy); color:#fff;
	display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; text-decoration:none;
}
.twhw-story-card{
	background:#fafafa; border:1px solid var(--border); border-radius:var(--radius); padding:40px;
}
.twhw-story-card h2{ font-size:26px; margin:0 0 20px; }
.twhw-story-card p{ color:var(--text-muted); font-size:15px; margin:0 0 16px; }

.twhw-mission{ padding:64px 0; background:#eef8f0; }
.twhw-mission h2{ text-align:center; font-size:28px; margin:0 0 44px; }
.twhw-mission-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.twhw-mission-card{ background:#fff; border-radius:var(--radius); padding:24px; }
.twhw-mission-card p{ font-size:14px; color:var(--text-muted); margin:0; }

/* ==========================================================================
   8. RESOURCE HUB  (Checklists / Guides / Templates / Worksheets / Tools index)
   ========================================================================== */

.twhw-intro{ padding:56px 0 8px; }
.twhw-intro.is-narrow .twhw-wrap{ max-width:820px; }
.twhw-intro h2{ font-size:26px; margin:0 0 8px; }
.twhw-intro p{ color:var(--text-muted); font-size:15px; margin:0 0 16px; }
/* The parent theme resets list-style:none globally - restore it here so
   real <ul>/<ol> content (e.g. the Eisenhower Matrix quadrant list on the
   Task Prioritization tool page) actually shows bullets/numbers. */
.twhw-intro ul{ list-style:disc; margin:0 0 16px; padding-left:22px; }
.twhw-intro ol{ list-style:decimal; margin:0 0 16px; padding-left:22px; }
.twhw-intro li{ display:list-item; margin-bottom:8px; color:var(--text-muted); font-size:15px; }
/* The parent theme's global reset is "li, ol, ul{list-style:none}" - it
   targets <li> directly, so setting list-style on the <ul> parent alone
   isn't enough (CSS cascades per-property; since the <li> rule above
   never declared list-style itself, the theme's li-level rule still wins
   for that property specifically). Declaring it directly on li here -
   split by ul/ol context - fixes it for real. */
.twhw-intro ul li{ list-style-type:disc; }
.twhw-intro ol li{ list-style-type:decimal; }

.twhw-item-list{ padding:40px 0 72px; background:#f6f8f7; }
.twhw-item-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.twhw-item-card{
	display:flex; align-items:center; gap:12px;
	background:#fff; border:1px solid var(--border); border-radius:var(--radius);
	padding:18px 20px; font-size:14px; font-weight:400; color:var(--navy);
	box-shadow:0 1px 3px rgba(20,30,25,.06);
	transition:.15s; text-decoration:none;
}
.twhw-item-card:hover{
	border-color:var(--green); box-shadow:0 4px 10px rgba(35,177,90,.18);
	transform:translateY(-2px); color:var(--navy);
}
.twhw-item-card .check{
	width:26px; height:26px; border-radius:50%; background:var(--green); color:#fff;
	display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0;
}

/* Resources main page (/resources/) - 4 category preview blocks */
.twhw-resource-blocks{ padding:16px 0 72px; }
.twhw-resource-blocks-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:36px; }
.twhw-resource-block h2{ font-size:20px; margin:0 0 4px; color:var(--navy); }
.twhw-resource-block ul{ list-style:none; margin:0; padding:0; }
.twhw-resource-block li{ border-bottom:1px solid var(--border); }
.twhw-resource-block li a{
	display:block; padding:14px 0; color:var(--navy); text-decoration:none; font-size:15px;
}
.twhw-resource-block li a:hover{ color:var(--green-dark); }
.twhw-resource-block .more-link{
	display:inline-block; margin-top:16px; color:var(--green-dark); font-weight:700;
	font-size:13px; text-transform:uppercase; letter-spacing:.03em; text-decoration:none;
}
.twhw-resource-block .more-link:hover{ color:var(--green); }

/* ==========================================================================
   9. RESOURCE ITEM  (individual checklist / guide / worksheet / template page)
   ========================================================================== */

.twhw-checklist{ padding:24px 0 48px; }
.twhw-checklist .twhw-wrap{ max-width:820px; }
.twhw-checklist{ padding:24px 0 56px; }
.twhw-checklist .twhw-wrap{ max-width:820px; }

/* Generic styling for whatever comes out of the_content() - these pages'
   structure varies (checklists use real checkbox lists, guides/templates/
   worksheets are more prose-like), so we style bare tags rather than
   assume a fixed structure. */
.twhw-checklist p{ color:var(--text-muted); font-size:15px; margin:0 0 16px; }
.twhw-checklist h2{ font-size:19px; margin:32px 0 14px; color:var(--navy); }
.twhw-checklist h3{
	font-size:17px; margin:32px 0 12px; color:var(--navy);
	padding-left:14px; border-left:4px solid var(--green);
}
/* The paragraph right after an h3 (e.g. "Final Thoughts:") reads as a callout */
.twhw-checklist h3 + p{
	background:#eef8f0; border-radius:var(--radius); padding:18px 22px; color:var(--navy);
}
.twhw-checklist ul{ list-style:none; margin:0 0 24px; padding:0; display:grid; gap:10px; }
.twhw-checklist li{
	display:flex; align-items:flex-start; gap:12px;
	background:#f6f8f7; border:1px solid var(--border); border-radius:var(--radius);
	padding:14px 16px; font-size:14px; color:var(--navy);
}
.twhw-checklist li input[type="checkbox"]{
	margin-top:3px; width:16px; height:16px; accent-color:var(--green); flex-shrink:0;
}
.twhw-checklist ol{ margin:0 0 16px; padding-left:20px; color:var(--text-muted); font-size:15px; }
.twhw-checklist ol li{ background:none; border:none; padding:2px 0; display:list-item; }
.twhw-checklist blockquote{
	margin:24px 0; padding:18px 24px; background:#f6f8f7;
	border-left:4px solid var(--green); border-radius:0 var(--radius) var(--radius) 0;
	font-style:italic; color:var(--navy); font-size:15px;
}
.twhw-checklist table{ width:100%; border-collapse:collapse; margin:20px 0; font-size:13px; }
.twhw-checklist th,
.twhw-checklist td{ padding:10px 12px; text-align:left; border-bottom:1px solid var(--border); }
.twhw-checklist th{ background:#f6f8f7; font-weight:600; }

.twhw-prevnext{
	display:grid; grid-template-columns:1fr 1fr; gap:14px;
	margin-top:56px; padding-top:32px; border-top:2px solid var(--border);
}
.twhw-prevnext a{
	display:block; background:#f6f8f7; border:1px solid var(--border); border-radius:var(--radius);
	padding:16px 18px; font-size:14px; font-weight:500; color:var(--navy); text-decoration:none;
}
.twhw-prevnext a:hover{ border-color:var(--green); }
.twhw-prevnext a.next{ text-align:right; }

/* ==========================================================================
   10. TOOL PAGE  (Work-Life Balance Calculator etc. - wraps a plugin shortcode)
   ========================================================================== */

.twhw-widget-section{ padding:24px 0 72px; }
.twhw-widget-section .twhw-wrap{ max-width:820px; }
.twhw-widget-card{
	background:#f6f8f7; border:1px solid var(--border); border-radius:var(--radius); padding:36px;
}
.twhw-widget-card h2{ font-size:19px; margin:0 0 24px; }
.twhw-field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.twhw-field label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--navy); }
.twhw-field input,
.twhw-field textarea{
	width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:8px;
	font-family:inherit; font-size:14px; background:#fff;
}
.twhw-field input:focus,
.twhw-field textarea:focus{ outline:none; border-color:var(--green); }

/* If the shortcode's own markup doesn't use .twhw-field wrappers, apply a
   general reset so its raw inputs still look consistent inside the card: */
.twhw-widget-card input[type="text"],
.twhw-widget-card input[type="email"],
.twhw-widget-card input[type="number"]{
	width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:8px;
	font-family:inherit; font-size:14px; background:#fff; margin-bottom:16px;
}
.twhw-widget-card button,
.twhw-widget-card input[type="submit"],
.twhw-widget-card input[type="button"]{
	display:inline-block; background:var(--green); color:#fff; border:none;
	padding:14px 32px; border-radius:6px; font-weight:600; font-size:14px; cursor:pointer;
}

/* ==========================================================================
   11. BOOKS HUB + SINGLE BOOK PAGE
   ========================================================================== */

.twhw-book-detail{ padding:56px 0 24px; }
.twhw-book-detail .twhw-wrap{ display:grid; grid-template-columns:280px 1fr; gap:44px; align-items:start; }
.twhw-book-detail .cover{
	width:100%; border-radius:8px; box-shadow:0 8px 24px rgba(20,30,25,.12); display:block; overflow:hidden;
}
.twhw-book-detail .cover img{ width:100%; height:auto; display:block; }
.twhw-book-copy h2{ font-size:22px; margin:0 0 16px; }
.twhw-book-copy p{ color:var(--text-muted); font-size:15px; margin:0 0 16px; }

.twhw-benefits-narrow{ padding:8px 0 40px; }
.twhw-benefits-narrow .twhw-wrap{ display:grid; grid-template-columns:280px 1fr; gap:44px; }
.twhw-benefits-narrow .twhw-wrap > *{ grid-column:2; }
.twhw-benefit-list{ display:grid; gap:12px; margin-bottom:28px; }
.twhw-benefit-item{
	display:flex; gap:12px; align-items:flex-start; background:#f6f8f7;
	border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; font-size:14px;
}
.twhw-benefit-item .check{
	width:24px; height:24px; border-radius:50%; background:var(--green); color:#fff;
	display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0;
}
.twhw-tagline{ font-weight:600; font-size:18px; margin:0 0 28px; color:var(--navy); }

.twhw-buy-section{ padding:8px 0 64px; }
.twhw-buy-section .twhw-wrap{ display:grid; grid-template-columns:280px 1fr; gap:44px; }
.twhw-buy-section .twhw-wrap > *{ grid-column:2; }
.twhw-intl-box{ background:#f6f8f7; border:1px solid var(--border); border-radius:var(--radius); padding:28px; margin-top:32px; }
.twhw-intl-box h3{ font-size:15px; margin:0 0 16px; color:var(--green-dark); }
.twhw-intl-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px 20px; font-size:14px; }
.twhw-intl-grid a{ display:flex; align-items:center; gap:8px; color:var(--navy); text-decoration:none; }
.twhw-intl-grid .check{ color:var(--green); font-weight:700; }

/* ==========================================================================
   12. CONTACT US
   ========================================================================== */

.twhw-contact-section{ padding:56px 0 72px; }
.twhw-contact-card{
	max-width:760px; margin:0 auto; background:#f6f8f7; border:1px solid var(--border);
	border-radius:var(--radius); padding:44px;
}
.twhw-contact-card h2{ text-align:center; font-size:26px; margin:0 0 8px; }
.twhw-contact-card .subnote{ text-align:center; color:var(--green-dark); font-size:13px; margin:0 0 32px; }
.twhw-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }

/* Fluent Forms fields are already reasonably styled by the plugin; these
   rules make sure they have enough contrast against the card background
   (verified actual class names: .ff-el-form-control, .ff-btn-submit). */
.twhw-contact-card .ff-el-form-control{
	border: 1.5px solid #c7ccd1 !important;
	background: #fff !important;
	border-radius: 8px !important;
	box-shadow: 0 1px 2px rgba(20,30,25,.05) !important;
}
.twhw-contact-card .ff-el-form-control:focus{
	border-color: var(--green) !important;
	box-shadow: 0 0 0 3px rgba(35,177,90,.12) !important;
}
.twhw-contact-card .ff-btn-submit{
	background: var(--green) !important;
	border-radius: 6px !important;
}

/* ==========================================================================
   13. LEGAL PAGES  (GDPR Policy / Terms and Conditions)
   ========================================================================== */

.twhw-legal{ padding:48px 0 72px; }
.twhw-legal .twhw-wrap{ display:grid; grid-template-columns:240px 1fr; gap:48px; align-items:start; }
.twhw-legal.no-toc .twhw-wrap{ grid-template-columns:1fr; max-width:820px; }
.twhw-toc{
	position:sticky; top:24px; background:#f6f8f7; border:1px solid var(--border); border-radius:var(--radius);
	padding:20px; max-height:calc(100vh - 48px); overflow-y:auto;
}
.twhw-toc p{ font-size:12px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--text-muted); margin:0 0 12px; }
.twhw-toc ol{ margin:0; padding-left:18px; font-size:13px; }
.twhw-toc li{ margin-bottom:8px; }
.twhw-toc a{ color:var(--navy); text-decoration:none; }
.twhw-toc a:hover{ color:var(--green-dark); }

.twhw-legal-body section{ margin-bottom:32px; }
.twhw-legal-body h2{ font-size:19px; margin:0 0 12px; }
.twhw-legal-body p{ color:var(--text-muted); font-size:14px; margin:0 0 12px; }
.twhw-legal-body ul{ list-style:disc; margin:0 0 12px; padding-left:20px; color:var(--text-muted); font-size:14px; }
.twhw-legal-body li{ margin-bottom:6px; list-style-type:disc; }

@media (max-width:820px){
	.twhw-legal .twhw-wrap{ grid-template-columns:1fr; }
	.twhw-toc{ position:static; }
}

/* ==========================================================================
   14. BLOG ARCHIVE
   ========================================================================== */

.twhw-blog-grid-section{ padding:56px 0 40px; }
.twhw-blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.twhw-post-card{
	display:flex; flex-direction:column; background:#fff; border:1px solid var(--border);
	border-radius:var(--radius); overflow:hidden; transition:.15s; text-decoration:none; color:inherit;
}
.twhw-post-card:hover{ border-color:var(--green); box-shadow:0 6px 16px rgba(20,30,25,.08); transform:translateY(-2px); }
.twhw-post-card .thumb{ height:170px; background:#e2e5e8 center/cover; }
.twhw-post-card .body{ padding:18px 20px 22px; }
.twhw-post-card .cat{ color:var(--green-dark); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
.twhw-post-card h3{ font-size:16px; margin:0; line-height:1.4; color:var(--navy); }

.twhw-pagination{ display:flex; justify-content:center; gap:8px; padding:16px 0 64px; }
.twhw-pagination a,
.twhw-pagination span{
	width:38px; height:38px; border-radius:8px; border:1px solid var(--border);
	display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600;
	text-decoration:none; color:var(--navy);
}
.twhw-pagination .current{ background:var(--green); border-color:var(--green); color:#fff; }

/* Search results page */
.twhw-hero-search{ display:flex; gap:10px; max-width:480px; margin-top:20px; }
.twhw-hero-search input{
	flex:1; padding:13px 16px; border:1px solid rgba(255,255,255,.25); border-radius:8px;
	background:rgba(255,255,255,.08); color:#fff; font-family:inherit; font-size:14px;
}
.twhw-hero-search input::placeholder{ color:#9aa3ab; }
.twhw-hero-search input:focus{ outline:none; border-color:var(--green); }
.twhw-hero-search button{
	background:var(--green); color:#fff; border:none; padding:0 24px; border-radius:8px;
	font-weight:600; font-size:14px; cursor:pointer;
}
.twhw-no-results{ padding:24px 0 56px; text-align:center; }
.twhw-no-results p{ color:var(--text-muted); font-size:15px; margin:0 0 24px; }
.twhw-no-results .twhw-related-list{
	display:flex; justify-content:center; gap:14px; max-width:none;
}
.twhw-no-results .twhw-related-list a{ padding:12px 24px; }

/* 404 page */
.twhw-404{ padding:80px 0; text-align:center; }
.twhw-404 .twhw-wrap{ max-width:560px; }
.twhw-404-code{ font-size:80px; font-weight:700; color:var(--green); line-height:1; margin-bottom:8px; }
.twhw-404 h1{ font-size:28px; margin:0 0 12px; }
.twhw-404 p{ color:var(--text-muted); font-size:15px; margin:0 0 28px; }
.twhw-404 .twhw-hero-search{ margin:0 auto 32px; }
.twhw-404 .twhw-hero-search input{
	background:#fff; border-color:var(--border); color:var(--navy);
}
.twhw-404 .twhw-hero-search input::placeholder{ color:#98a0a7; }
.twhw-404-links{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.twhw-404-links a{
	padding:10px 20px; border:1px solid var(--border); border-radius:8px;
	color:var(--navy); text-decoration:none; font-size:14px; font-weight:500;
}
.twhw-404-links a:hover{ border-color:var(--green); color:var(--green-dark); }

/* ==========================================================================
   15. BLOG SINGLE POST
   ========================================================================== */

.twhw-post-layout{ padding:48px 0 72px; }
.twhw-post-layout .twhw-wrap{ display:grid; grid-template-columns:1fr 300px; gap:44px; align-items:start; }
.twhw-featured-img{ width:100%; border-radius:var(--radius); margin-bottom:24px; display:block; }

/* Easy Table of Contents plugin - restyled via its real markup (#ez-toc-container) */
#ez-toc-container{
	background:#f6f8f7; border:1px solid var(--border); border-radius:var(--radius);
	padding:20px 24px; margin:0 0 24px;
}
#ez-toc-container p.ez-toc-title{ font-weight:600; font-size:15px; margin:0; color:var(--navy); }
.ez-toc-title-toggle{ float:right; }
#ez-toc-container ul.ez-toc-list{ margin:14px 0 0; padding-left:18px; font-size:13px; color:var(--text-muted); }
#ez-toc-container ul.ez-toc-list li{ margin-bottom:6px; }
#ez-toc-container ul.ez-toc-list a{ color:var(--navy); text-decoration:none; }
#ez-toc-container ul.ez-toc-list a:hover{ color:var(--green-dark); }

.twhw-key-highlights{
	background:#eef8f0; border-left:4px solid var(--green);
	border-radius:0 var(--radius) var(--radius) 0; padding:22px 26px; margin:0 0 24px;
}
.twhw-key-highlights h2{ font-size:16px; margin:0 0 12px; }
.twhw-key-highlights ul{ margin:0; padding-left:18px; font-size:14px; color:var(--navy); }
.twhw-key-highlights li{ margin-bottom:8px; }

.twhw-post-body p{ color:#3d4a56; font-size:16px; line-height:32px; margin:0 0 16px; }
.twhw-post-body h2{ font-size:22px; margin:36px 0 14px; }
.twhw-post-body h3{ font-size:18px; margin:28px 0 12px; }
/* Same global list-style:none reset issue as .twhw-intro - restore it so
   the Key Highlights list and any in-content lists show real bullets. */
.twhw-post-body ul{ list-style:disc; margin:0 0 16px; padding-left:22px; }
.twhw-post-body ol{ list-style:decimal; margin:0 0 16px; padding-left:22px; }
.twhw-post-body li{ display:list-item; margin-bottom:8px; color:#3d4a56; font-size:16px; line-height:32px; }
/* Same theme-reset issue as .twhw-intro above - declare list-style
   directly on the <li> itself, not just its <ul>/<ol> parent. */
.twhw-post-body ul li{ list-style-type:disc; }
.twhw-post-body ol li{ list-style-type:decimal; }

.twhw-table-scroll{ overflow-x:auto; margin:20px 0; border:1px solid var(--border); border-radius:var(--radius); }
.twhw-post-body table{ width:100%; border-collapse:collapse; font-size:13px; min-width:300px; /*480 before */ }
.twhw-post-body th,
.twhw-post-body td{ padding:12px 14px; text-align:left; border-bottom:1px solid var(--border); }
.twhw-post-body tr:last-child td{ border-bottom:none; }
.twhw-post-body th{ background:#f6f8f7; font-weight:600; color:var(--navy); }
.twhw-post-body tr:nth-child(even) td{ background:#fafbfb; }

.twhw-post-body blockquote{
	margin:24px 0; padding:18px 24px; background:#f6f8f7;
	border-left:4px solid var(--green); border-radius:0 var(--radius) var(--radius) 0;
	font-style:italic; color:var(--navy); font-size:15px;
}
.twhw-post-body blockquote p{ margin:0; color:var(--navy); }
.twhw-post-body img{
	max-width:100%!important;
	width:auto !important;
	height:auto !important;
	display:block;
	border-radius:var(--radius);
	margin:0 0 20px;
}
.twhw-post-body picture img{
	max-width:100%!important;
	width:auto !important;
	height:auto !important;
	display:block;
	border-radius:var(--radius);
	margin:0 0 20px;
}
.twhw-related{ margin-top:44px; }
.twhw-related h2{ font-size:18px; margin:0 0 16px; }
.twhw-related-list{ display:grid; gap:10px; }
.twhw-related-list a{
	display:block; background:#f6f8f7; border:1px solid var(--border); border-radius:var(--radius);
	padding:14px 18px; font-size:14px; font-weight:500; text-decoration:none; color:var(--navy);
}
.twhw-related-list a:hover{ border-color:var(--green); }

.twhw-comments{ margin-top:48px; padding-top:36px; border-top:1px solid var(--border); }
.twhw-comments h2,
.comments-title{ font-size:19px; margin:0 0 20px; }
.twhw-comment-item{ display:flex; gap:14px; margin-bottom:20px; }
.twhw-comment-item .avatar{ width:42px; height:42px; border-radius:50%; background:var(--navy); flex-shrink:0; }
.twhw-comment-item .body{ background:#f6f8f7; border:1px solid var(--border); border-radius:var(--radius); padding:14px 18px; flex:1; }
.twhw-comment-item .meta{ font-size:12px; color:var(--text-muted); margin-bottom:4px; }
.twhw-comment-item .meta strong{ color:var(--navy); }
.twhw-comment-item p{ margin:0; font-size:14px; color:var(--navy); }
.comment-respond{ margin-top:28px; }
.comment-reply-title{ font-size:15px; margin:0 0 16px; }
.comment-form label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"]{
	width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:8px;
	font-family:inherit; font-size:14px; margin-bottom:14px;
}
.comment-form textarea{ min-height:110px; resize:vertical; }
.comment-form .comment-form-cookies-consent{ font-size:12px; color:var(--text-muted); margin-bottom:14px; display:flex; gap:8px; align-items:flex-start; }
.comment-form input[type="submit"]{
	background:var(--green); color:#fff; border:none; padding:13px 30px;
	border-radius:6px; font-weight:600; font-size:14px; cursor:pointer; width:auto;
}

.twhw-sidebar-box{ background:#f6f8f7; border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-bottom:20px; }
.twhw-sidebar-box h3{ font-size:13px; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); margin:0 0 14px; }
.twhw-search-row{ display:flex; gap:8px; }
.twhw-search-row input{ flex:1; padding:10px 12px; border:1px solid var(--border); border-radius:8px; font-size:13px; }
.twhw-search-row button{ background:var(--green); color:#fff; border:none; border-radius:8px; padding:0 16px; font-weight:600; font-size:12px; cursor:pointer; }
.twhw-pop-post{ display:flex; gap:10px; align-items:center; margin-bottom:12px; text-decoration:none; color:inherit; }
.twhw-pop-post .num{
	width:22px; height:22px; border-radius:50%; background:var(--navy); color:#fff;
	font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.twhw-pop-post span{ font-size:13px; font-weight:500; }
.twhw-latest-post{ display:block; font-size:13px; font-weight:500; padding:10px 0; border-bottom:1px solid var(--border); color:var(--navy); text-decoration:none; }
.twhw-latest-post:last-child{ border-bottom:none; padding-bottom:0; }
.twhw-latest-post:hover{ color:var(--green-dark); }

/* ==========================================================================
   16. FOOTER  (see footer.php)
   ========================================================================== */

.twhw-footer{ background:var(--navy-2); color:#cfd2d4; padding:40px 0; }
.twhw-footer-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.twhw-footer-row .twhw-social a{
	display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
	background:#fff; border-radius:6px; margin-right:8px; color:var(--navy); text-decoration:none;
}
.twhw-footer-row nav ul{ display:flex; list-style:none; padding:0; margin:0; gap:22px; }
.twhw-footer-row nav a{ color:#cfd2d4; font-weight:500; text-decoration:none; }
.twhw-footer-row nav a:hover{ color:#fff; }
.twhw-copyright{ text-align:center; color:#8b95a1; font-size:13px; padding-top:24px; margin-top:24px; border-top:1px solid #33404d; }
.twhw-copyright a{ color:var(--green); text-decoration:none; }

/* ==========================================================================
   17. RESPONSIVE
   Applies across all templates above. Breakpoints: 900px (tablet), 600px (mobile)
   ========================================================================== */

@media (max-width:900px){
	.twhw-hero .twhw-wrap,
	.twhw-story .twhw-wrap,
	.twhw-book-detail .twhw-wrap,
	.twhw-benefits-narrow .twhw-wrap,
	.twhw-buy-section .twhw-wrap,
	.twhw-post-layout .twhw-wrap{ grid-template-columns:1fr; }
	.twhw-benefits-narrow .twhw-wrap > *,
	.twhw-buy-section .twhw-wrap > *{ grid-column:1; }
	.twhw-hero-art{ display:none; }
	.twhw-res-grid,
	.twhw-mission-grid,
	.twhw-benefit-grid,
	.twhw-book-grid,
	.twhw-blog-grid-3,
	.twhw-blog-grid,
	.twhw-field-grid,
	.twhw-field-row,
	.twhw-intl-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:600px){
	.twhw-header .twhw-headerbar{ padding:14px 20px; }
	.twhw-page-hero h1{ font-size:24px; }
	.twhw-hero h1{ font-size:28px; }
	.twhw-res-grid,
	.twhw-mission-grid,
	.twhw-benefit-grid,
	.twhw-book-grid,
	.twhw-blog-grid-3,
	.twhw-blog-grid,
	.twhw-field-grid,
	.twhw-field-row,
	.twhw-intl-grid{ grid-template-columns:1fr; }
	.twhw-resource-blocks-grid{ grid-template-columns:1fr; }
	.twhw-story .twhw-wrap,
	.twhw-book-detail .twhw-wrap{ gap:24px; }
	.twhw-footer-row{ flex-direction:column; text-align:center; }
	.twhw-footer-row nav ul{ flex-wrap:wrap; justify-content:center; }
}

@media (max-width:900px){
	/* The sidebar (and its TOC) moves below all post content once
	   .twhw-post-layout collapses to one column, which makes a jump-nav
	   TOC pointless there (you'd only see it after scrolling past
	   everything it links to) - hide it on mobile for blog posts only.
	   Legal pages keep theirs: their TOC sits before the body text in
	   the DOM, so it's still useful even after collapsing to 1 column. */
	.twhw-post-layout .twhw-toc{ display:none; }
}


/* WordPress's legacy caption wrapper (.wp-caption) writes its width as an
   inline style attribute (e.g. style="width: 940px") directly on the div,
   which beats any CSS rule without !important. That fixed pixel width
   made captioned images overflow their column on any screen narrower
   than the original upload width. Forcing it to shrink to its
   container fixes this on both desktop and mobile. */
.wp-caption{
	max-width:100% !important;
	width:auto !important;
	height:auto !important;
}