/*
Theme Name:   20 Hour Work Week
Theme URI:    https://www.20hourworkweek.com/
Description:  Standalone custom theme for 20HourWorkWeek.com. Native PHP page templates for the marketing pages, resources, books, blog and utility pages, with a settings page for logo, Google Tag Manager and footer social links. No parent theme required.
Author:       Praveen Kumar
Author URI:   https://www.wildcreekwebstudio.com/
Version:      2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License:      GPL-2.0-or-later
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
   ========================================================================== */

/* Reset layer. This theme has no parent, so the normalisation that the old
   old parent theme used to supply lives here. */
*,
*::before,
*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
	margin:0;
	font-family:'Poppins', Arial, sans-serif;
	color:var(--navy);
	background:#fff;
	line-height:1.7;
	-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{ line-height:1.3; margin:0 0 .6em; }
p{ margin:0 0 1em; }
a{ color:var(--green-dark); }
a:hover{ color:var(--green); }
img,picture,video,canvas,svg{ max-width:100%; height:auto; }
svg{ height:auto; }
figure{ margin:0 0 1.2em; }
table{ border-collapse:collapse; max-width:100%; }
hr{ border:0; border-top:1px solid var(--border); margin:2em 0; }
button,input,select,textarea{ font-family:inherit; font-size:100%; }
iframe,embed,object{ max-width:100%; }
ul,ol{ margin:0 0 1em; padding-left:1.4em; }
ul{ list-style:disc; }
ol{ list-style:decimal; }
pre{ overflow:auto; max-width:100%; }

/* WordPress core classes. */
.screen-reader-text{
	border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
	height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute;
	width:1px; word-wrap:normal !important;
}
.screen-reader-text:focus{
	background:#fff; clip:auto !important; clip-path:none; color:var(--navy);
	display:block; font-weight:600; height:auto; left:8px; padding:12px 20px;
	top:8px; width:auto; z-index:100000;
}
.skip-link:focus{ text-decoration:none; }
.alignleft{ float:left; margin:0 1.4em 1em 0; }
.alignright{ float:right; margin:0 0 1em 1.4em; }
.aligncenter{ display:block; margin-left:auto; margin-right:auto; text-align:center; }
.alignnone{ margin:0 0 1em; }
.wp-caption-text,
.wp-element-caption,
figcaption{ font-size:13px; color:var(--text-muted); margin-top:6px; }
.gallery{ display:grid; gap:12px; grid-template-columns:repeat(3,1fr); margin-bottom:1.2em; }
.gallery-item{ margin:0; }
.sticky,
.bypostauthor{ display:block; }

/* Lists that belong to navigation or card grids stay unstyled. */
.twhw-nav ul,
.twhw-footer-row nav ul,
.twhw-resource-block ul,
.twhw-checklist ul{ list-style:none; }
.twhw-nav li,
.twhw-footer-row nav li{ list-style:none; }

.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; }
/* Restore list styling inside content blocks 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; }
.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; }
.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; }
.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;
}

/* ==========================================================================
   18. DEFAULT PAGES, ARCHIVES, COMMENT LIST
   Added when the theme became standalone (page.php, archive.php, comments.php).
   ========================================================================== */

.twhw-benefits-heading{ font-weight:600; margin:0 0 16px; }
.twhw-archive-description{ color:#cfd2d4; font-size:16px; }
.twhw-archive-description p:last-child{ margin-bottom:0; }

.twhw-page-body{ padding:48px 0 72px; }
.twhw-page-content{ max-width:820px; }
.twhw-page-content h2{ font-size:22px; margin:36px 0 14px; }
.twhw-page-content h3{ font-size:18px; margin:28px 0 12px; }
.twhw-page-content ul{ list-style:disc; margin:0 0 16px; padding-left:22px; }
.twhw-page-content ol{ list-style:decimal; margin:0 0 16px; padding-left:22px; }
.twhw-page-content blockquote{
	margin:0 0 20px; padding:16px 22px; background:#f6f8f7;
	border-left:4px solid var(--green); border-radius:0 var(--radius) var(--radius) 0;
}
.twhw-page-content blockquote p:last-child{ margin-bottom:0; }
.twhw-page-content table{ width:100%; margin:0 0 20px; font-size:14px; }
.twhw-page-content th,
.twhw-page-content td{ border:1px solid var(--border); padding:10px 12px; text-align:left; }
.twhw-page-content img{ max-width:100%; height:auto; }

.twhw-toc ol,
.twhw-toc li,
.twhw-comment-list,
.twhw-comment-list li,
#ez-toc-container ul,
#ez-toc-container li{ list-style:none; }
.twhw-toc ol{ padding-left:0; }
.twhw-comment-list{ margin:0; padding:0; }
.twhw-comment-list .children{ list-style:none; margin:16px 0 0 28px; padding:0; }
.twhw-comment-item .avatar-wrap{ flex-shrink:0; }
.twhw-comment-item .avatar{ display:block; }
.twhw-comment-item .meta a{ color:var(--text-muted); text-decoration:none; }
.twhw-comment-item .meta .sep{ margin:0 4px; }
.twhw-comment-item .reply a{ font-size:12px; font-weight:600; text-decoration:none; }
.twhw-comment-pending{ font-style:italic; }
.comments-area .navigation.comments-pagination{ margin:0 0 24px; }