/*!
Theme Name: How to Fixers
Theme URI: http://underscores.me/
Author: Abdul Rehman
Author URI: https://abdulrehmanshoukat.com/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: how_to_fixers
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

How to Fixers is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

a:visited {
	color: #800080;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.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 !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/* Prevent the browser's default purple :visited link color from
   overriding this theme's custom link colors anywhere on the site. */
a:visited {
	color: inherit;
}

/* Homepage
--------------------------------------------- */
.hero-section {
	position: relative;
	width: 100%;
	overflow: hidden;
	/* V4: nebula base color, near-black with a hint of depth (see
	   .universe-nebula-canvas / js/universe-of-knowledge.js). */
	background: #050508;
	color: #fff;
	padding: 5rem 1rem 4.5rem;
	text-align: center;
}

/* "Universe of Knowledge" background animation. Shared by hero.php and
   founder-card.php. V4 section 2 replaced the flat V3 navy (#0A1628) with
   an animated nebula (canvas, z-index:0) underneath the V3 tsParticles
   star layer (z-index:1); the V2 .hero-blob glow circles are retired as
   redundant now that the nebula covers that role.

   The radial gradient below is the always-on CSS fallback: mobile/tablet
   (<=768px) and prefers-reduced-motion skip the canvas/tsParticles JS
   entirely (see js/universe-of-knowledge.js shouldAnimate()), so this is
   what those visitors see, permanently. On desktop, once the nebula
   canvas + tsParticles are confirmed running, JS adds .universe-bg--active
   to hide it — though in practice the nebula canvas's own opaque fill
   already paints over it regardless, so there's never a blank state
   either way (V4 section 2.6). */
.universe-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background-image: radial-gradient( circle at center, #050508 0%, #1a1533 55%, #241b3d 100% );
}

/* JS adds this once tsParticles has actually initialized, so the fallback
   gradient isn't left showing at the edges behind the animated canvases. */
.universe-bg--active {
	background-image: none;
}

.universe-bg canvas {
	position: absolute !important;
	inset: 0;
}

.universe-nebula-canvas {
	z-index: 0;
}

/* The tsParticles star canvas is the "other" canvas inside .universe-bg
   (tsParticles injects it itself, so it can't be targeted by a fixed id). */
.universe-bg canvas:not(.universe-nebula-canvas) {
	z-index: 1;
}

/* Floating knowledge icon layer sits above the star canvas but must never
   swallow cursor events meant for the star layer's grab interaction. */
.universe-bg-icons {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* 1-2 bright "burst" stars (V4 section 2.5) — plain DOM elements rather
   than tsParticles particles, since the spec calls for a real CSS glow
   (box-shadow), which canvas-drawn particles can't do. */
.universe-bright-stars {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.universe-bright-star {
	position: absolute;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.85), 0 0 16px 4px rgba(227, 242, 253, 0.5);
	animation: universe-bright-star-twinkle 4s ease-in-out infinite;
}

@keyframes universe-bright-star-twinkle {
	0%, 100% {
		opacity: 0.6;
		transform: scale( 0.85 );
	}
	50% {
		opacity: 1;
		transform: scale( 1 );
	}
}

@media (prefers-reduced-motion: reduce) {
	.universe-bright-star {
		animation: none;
	}
}

.hero-content {
	position: relative;
	z-index: 2;
}

.hero-title {
	font-size: 2.5rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin-bottom: 0.6rem;
	color: #fff;
}

/* Option A: orange underline accent on the word "problem". */
.hero-title-accent {
	position: relative;
	color: #ff9466;
	text-decoration: none;
}

.hero-title-accent::after {
	content: '';
	position: absolute;
	left: 0.05em;
	right: 0.05em;
	bottom: -0.08em;
	height: 3px;
	background: #ff6b2b;
	border-radius: 2px;
}

.hero-subtitle {
	font-size: 1.08rem;
	color: #c3cbe0;
	margin-bottom: 2.25rem;
}

.hero-search-form {
	max-width: 640px;
	margin: 0 auto;
	position: relative;
}

.hero-search-bar {
	display: flex;
	align-items: stretch;
	background: #fff;
	border-radius: 999px;
	overflow: hidden;
	box-shadow: 0 15px 40px rgba(9, 15, 30, 0.35);
	transition: box-shadow 0.2s ease-in-out;
}

.hero-search-form:focus-within .hero-search-bar {
	box-shadow: 0 0 0 4px rgba(255, 148, 102, 0.35), 0 15px 40px rgba(9, 15, 30, 0.35);
}

.hero-search-prefix {
	display: flex;
	align-items: center;
	padding: 0 1.25rem;
	margin: 0.4rem 0 0.4rem 0.4rem;
	font-weight: 700;
	font-size: 0.9rem;
	color: #1b2a4a;
	background: #eef1f7;
	border-radius: 999px;
	white-space: nowrap;
}

.hero-search-input {
	flex: 1;
	border: 0;
	padding: 0.9rem 0.75rem;
	font-size: 1rem;
	color: #212529;
	outline: none;
	min-width: 0;
	background: transparent;
}

.hero-search-button {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	border: 0;
	background: #ff6b35;
	color: #fff;
	font-weight: 600;
	padding: 0 1.5rem;
	margin: 0.3rem 0.3rem 0.3rem 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, transform 0.1s ease-in-out;
}

.hero-search-button:hover,
.hero-search-button:focus {
	background: #e6592a;
}

.hero-search-button:active {
	transform: scale(0.97);
}

.hero-search-button-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.hero-search-suggestions {
	list-style: none;
	margin: 0.6rem 0 0;
	padding: 0.4rem;
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 15px 40px rgba(9, 15, 30, 0.25);
	text-align: left;
	position: absolute;
	left: 0;
	right: 0;
	z-index: 20;
}

.hero-search-suggestions li a {
	display: block;
	padding: 0.6rem 0.9rem;
	border-radius: 0.6rem;
	color: #212529;
	text-decoration: none;
}

.hero-search-suggestions li a:hover,
.hero-search-suggestions li a:focus {
	background: #f2f4f8;
}

.hero-quick-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1.5rem;
}

.hero-quick-links-label {
	font-size: 0.85rem;
	color: #93a0bd;
	margin-right: 0.15rem;
}

.hero-quick-link {
	font-size: 0.85rem;
	font-weight: 600;
	color: #e4e8f2;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.hero-quick-link:hover,
.hero-quick-link:focus {
	background: #ff6b35;
	border-color: #ff6b35;
	color: #fff;
}

.hero-stat {
	margin: 1.75rem 0 0;
	font-size: 0.85rem;
	color: #8b96b8;
}

.hero-stat strong {
	color: #e4e8f2;
	font-weight: 700;
}

@media ( max-width: 576px ) {
	.hero-section {
		padding: 3.5rem 1rem 3rem;
	}

	.hero-title {
		font-size: clamp(1.5rem, 6.5vw, 1.9rem);
		line-height: 1.25;
	}

	.hero-search-bar {
		flex-wrap: wrap;
		border-radius: 1.25rem;
	}

	.hero-search-prefix {
		width: calc(100% - 0.8rem);
		justify-content: center;
		margin: 0.4rem 0.4rem 0;
	}

	.hero-search-input {
		width: 100%;
		padding: 0.9rem 1rem;
	}

	.hero-search-button {
		width: calc(100% - 0.6rem);
		justify-content: center;
		margin: 0.4rem 0.3rem 0.3rem;
		padding: 0.8rem;
	}

	/* "Popular:" category chips scroll horizontally instead of wrapping
	   to multiple lines on narrow screens. */
	.hero-quick-links {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		padding-bottom: 0.25rem;
		margin-left: -1rem;
		margin-right: -1rem;
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.hero-quick-links-label,
	.hero-quick-link {
		flex-shrink: 0;
		scroll-snap-align: start;
	}
}

/* Most Popular Row
--------------------------------------------- */
.popular-section {
	padding: 3rem 1rem 0.5rem;
}

.popular-row {
	display: flex;
	gap: 1.1rem;
	overflow-x: auto;
	padding-bottom: 0.75rem;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.popular-row::-webkit-scrollbar {
	height: 6px;
}

.popular-row::-webkit-scrollbar-thumb {
	background: #d7dae3;
	border-radius: 999px;
}

.popular-card {
	flex: 0 0 auto;
	scroll-snap-align: start;
	width: 260px;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e7e9ee;
	border-radius: 0.6rem;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.popular-card:visited {
	color: inherit;
}

.popular-card:hover,
.popular-card:focus {
	box-shadow: 0 10px 25px rgba(27, 42, 74, 0.1);
	transform: translateY(-2px);
	color: inherit;
}

.popular-card-thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: #eef1f7;
	overflow: hidden;
}

.popular-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.popular-card-img-placeholder {
	background: linear-gradient(135deg, #eef1f7 0%, #dde2ec 100%);
}

.popular-card-badge {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	background: #ff6b35;
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 0.3rem 0.6rem;
	border-radius: 999px;
	box-shadow: 0 4px 10px rgba(255, 107, 53, 0.35);
}

.popular-card-badge-icon {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

.popular-card-body {
	display: flex;
	flex-direction: column;
	padding: 0.9rem 1rem 1.1rem;
	gap: 0.3rem;
}

.popular-card-category {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #ff6b35;
}

.popular-card-title {
	font-size: 0.98rem;
	font-weight: 700;
	color: #1b2a4a;
	line-height: 1.35;
}

/* Writer profile page: Top 3 shown as a static (non-scrolling) row of
   larger cards, since there are only ever three of them. */
.writer-top-articles {
	padding: 2.5rem 0 1rem;
}

.popular-row-static {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	overflow-x: visible;
}

.popular-card-large {
	width: auto;
}

.popular-card-large .popular-card-title {
	font-size: 1.1rem;
}

.popular-card-large .popular-card-badge {
	font-size: 0.78rem;
	padding: 0.35rem 0.75rem;
}

@media (max-width: 767px) {
	.popular-row-static {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
}

.latest-articles-section {
	padding: 3rem 1rem;
}

.section-title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 1.6rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	color: #1b2a4a;
}

/* Option A: small orange dot accent before every homepage section heading. */
.section-title::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ff6b2b;
	flex-shrink: 0;
}

/* Option A: navy divider with a centered orange diamond, used between
   homepage sections. */
.section-divider {
	position: relative;
	height: 1px;
	background: #1b3a6b;
	opacity: 0.15;
	margin: 0 auto;
	max-width: 1140px;
}

.section-divider::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	background: #ff6b2b;
	transform: translate(-50%, -50%) rotate(45deg);
}

/* Option A: 3px orange top border on every article card, site-wide. */
.article-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid #e7e9ee;
	border-top: 3px solid #ff6b2b;
	border-radius: 0.5rem;
	overflow: hidden;
	transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.article-card:hover {
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.article-card-thumb {
	display: block;
	aspect-ratio: 16 / 9;
	background: #eef1f7;
	overflow: hidden;
}

.article-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.article-card-img-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #eef1f7 0%, #dde2ec 100%);
}

.article-card-body {
	padding: 1.1rem 1.25rem 1.25rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.article-card-category {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #ff6b35;
	text-decoration: none;
	margin-bottom: 0.5rem;
}

.article-card-category:hover {
	text-decoration: underline;
}

.article-card-title {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
	line-height: 1.35;
}

.article-card-title a {
	color: #1b2a4a;
	text-decoration: none;
}

.article-card-title a:hover {
	text-decoration: underline;
}

.article-card-excerpt {
	font-size: 0.925rem;
	color: #5a6272;
	margin-bottom: 0.75rem;
	flex: 1;
}

.article-card-date {
	font-size: 0.8rem;
	color: #8b91a0;
}

.latest-articles-load-more-wrap {
	text-align: center;
	margin-top: 2rem;
}

.load-more-button {
	border: 2px solid #1b2a4a;
	background: transparent;
	color: #1b2a4a;
	font-weight: 600;
	padding: 0.65rem 2rem;
	border-radius: 0.4rem;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.load-more-button:hover,
.load-more-button:focus {
	background: #1b2a4a;
	color: #fff;
}

.load-more-button.is-loading {
	opacity: 0.6;
	cursor: wait;
}

/* Option A: faint light gray grid pattern, Browse by Category section only. */
.category-tiles-section {
	padding: 1rem 1rem 3.5rem;
	background-image:
		linear-gradient(to right, rgba(27, 58, 107, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(27, 58, 107, 0.05) 1px, transparent 1px);
	background-size: 32px 32px;
}

.category-tile {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	column-gap: 0.85rem;
	row-gap: 0.1rem;
	height: 100%;
	padding: 1.1rem 1.1rem;
	border-radius: 0.75rem;
	background: #fff;
	border: 1px solid #e7e9ee;
	color: #1b2a4a;
	text-decoration: none;
	transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.category-tile:visited {
	color: #1b2a4a;
}

.category-tile:hover,
.category-tile:focus {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(27, 42, 74, 0.12);
	border-color: var(--tile-accent, #ff6b35);
	color: #1b2a4a;
}

.category-tile-icon {
	grid-row: 1 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 0.65rem;
	background: var(--tile-accent, #ff6b35);
	color: #fff;
	font-weight: 700;
	font-size: 1.1rem;
	flex-shrink: 0;
}

.category-tile-name {
	grid-column: 2;
	grid-row: 1;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.25;
}

.category-tile-count {
	grid-column: 2;
	grid-row: 2;
	font-size: 0.8rem;
	color: #8b91a0;
}

.category-tile-arrow {
	grid-column: 3;
	grid-row: 1 / 3;
	color: #c2c6d0;
	font-size: 1.1rem;
	transition: transform 0.15s ease-in-out, color 0.15s ease-in-out;
}

.category-tile:hover .category-tile-arrow,
.category-tile:focus .category-tile-arrow {
	transform: translateX(3px);
	color: var(--tile-accent, #ff6b35);
}

/* Mobile: category tiles go full width, stacked vertically (not shrunk
   into a 2-up grid), with a comfortable minimum tap height. */
@media (max-width: 576px) {
	.category-tile-grid > .col {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
	}

	.category-tile {
		min-height: 48px;
	}
}

/* Breadcrumbs
--------------------------------------------- */
.breadcrumbs {
	margin: 1.5rem 0 1rem;
	font-size: 0.875rem;
	color: #5a6272;
}

.breadcrumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}

.breadcrumbs li {
	display: flex;
	align-items: center;
}

.breadcrumbs li:not(:last-child)::after {
	content: '/';
	margin: 0 0.5rem;
	color: #c2c6d0;
}

.breadcrumbs a {
	color: #5a6272;
	text-decoration: none;
}

.breadcrumbs a:hover {
	color: #1b2a4a;
	text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
	color: #1b2a4a;
	font-weight: 600;
}

/* Category Hub Pages
--------------------------------------------- */
.category-hub {
	padding-bottom: 3rem;
}

.category-hub-header {
	margin-bottom: 2rem;
}

.category-hub-title {
	font-size: 2rem;
	font-weight: 700;
	color: #1b2a4a;
	margin-bottom: 0.75rem;
}

.category-hub-intro {
	max-width: 760px;
	color: #4a5164;
	font-size: 1.02rem;
	line-height: 1.7;
}

.category-hub-pagination {
	margin-top: 2rem;
}

.category-hub-pagination .nav-links {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.category-hub-pagination a,
.category-hub-pagination span {
	display: inline-block;
	padding: 0.5rem 1rem;
	border: 1px solid #e7e9ee;
	border-radius: 0.4rem;
	color: #1b2a4a;
	text-decoration: none;
}

.category-hub-pagination a:hover {
	background: #1b2a4a;
	color: #fff;
}

/* Single Article Page
--------------------------------------------- */
.article-container {
	max-width: 780px;
	padding-bottom: 3rem;
}

.single-article .entry-header {
	margin-bottom: 1.5rem;
}

.single-article .entry-title {
	font-size: 2rem;
	font-weight: 700;
	color: #1b2a4a;
	margin: 0.5rem 0 0.75rem;
	line-height: 1.25;
}

.article-byline {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	font-size: 0.9rem;
	color: #5a6272;
}

.article-byline-written a {
	color: #1b2a4a;
	font-weight: 600;
	text-decoration: none;
}

.article-byline-written a:hover {
	text-decoration: underline;
}

.article-byline-dates {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.article-toc {
	background: #f6f7fa;
	border: 1px solid #e7e9ee;
	border-radius: 0.5rem;
	padding: 1.25rem 1.5rem;
	margin: 1.5rem 0 2rem;
}

.article-toc-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: 0;
	padding: 0;
	margin: 0 0 0.5rem;
	cursor: default;
	text-align: left;
}

.article-toc-title {
	font-weight: 700;
	color: #1b2a4a;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.article-toc-toggle-label {
	display: none;
}

.article-toc-list {
	margin: 0;
	padding-left: 1.25rem;
}

.article-toc a {
	color: #2c4270;
	text-decoration: none;
}

.article-toc a:hover {
	text-decoration: underline;
}

/* Tools Required / What You'll Need section (spec section 10)
--------------------------------------------- */
.article-requirements {
	border-left: 3px solid #ff6b2b;
	background: #fff8f0;
	border-radius: 0 0.5rem 0.5rem 0;
	padding: 1.5rem 1.75rem 1.75rem;
	margin: 1.5rem 0 2rem;
}

.article-requirements-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: #1b3a6b;
	margin: 0 0 1.1rem;
}

.article-requirements-title svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: #ff6b2b;
}

.article-requirements-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.9rem;
}

.article-requirements-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	background: #fff;
	border: 1px solid #e7d9c8;
	border-radius: 0.5rem;
	padding: 1rem 0.6rem;
	text-align: center;
	transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.article-requirements-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: #1b3a6b;
}

.article-requirements-icon svg {
	width: 100%;
	height: 100%;
}

.article-requirements-name {
	font-size: 0.85rem;
	font-weight: 600;
	color: #1b3a6b;
	line-height: 1.3;
}

@media (min-width: 577px) {
	.article-requirements-item:hover {
		box-shadow: 0 8px 18px rgba(255, 107, 43, 0.2);
		transform: translateY(-2px);
	}
}

@media (max-width: 991px) {
	.article-requirements-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 576px) {
	.article-requirements-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.article-requirements {
		padding: 1.25rem 1.1rem 1.4rem;
	}
}

/* Tool Box block editor-only preview (V4 section 4.6). This block is
   dynamic/server-rendered — the real icon grid (.article-requirements-*
   above) only appears on the front end via render_callback, so the editor
   gets a lightweight chip-list preview instead. */
.tool-box-block-editor-preview {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.75rem;
}

.tool-box-block-editor-chip {
	background: #fff8f0;
	border: 1px solid rgba( 27, 58, 107, 0.15 );
	border-radius: 999px;
	padding: 0.3rem 0.75rem;
	font-size: 0.85rem;
	color: #1b3a6b;
}

.tool-box-block-editor-empty {
	color: #8b91a0;
	font-style: italic;
	font-size: 0.9rem;
}

.single-article .entry-content {
	font-size: 1.05rem;
	line-height: 1.75;
	color: #2c3140;
}

.single-article .entry-content h2 {
	font-size: 1.4rem;
	font-weight: 700;
	color: #1b2a4a;
	margin: 2rem 0 0.75rem;
	scroll-margin-top: 1.5rem;
}

.single-article .entry-content p {
	margin-bottom: 1.1rem;
}

/* H3s are used for FAQ questions and other standard-format sub-headings
   (Common Mistakes / FAQ live under a normal H2, spec section 12). */
.single-article .entry-content h3 {
	font-size: 1.1rem;
	font-weight: 700;
	color: #1b3a6b;
	margin: 1.5rem 0 0.5rem;
	scroll-margin-top: 1.5rem;
}

.single-article .entry-content ul,
.single-article .entry-content ol {
	margin: 0 0 1.1rem 1.25rem;
}

.single-article .entry-content li {
	margin-bottom: 0.5rem;
}

.single-article .entry-content li > ul,
.single-article .entry-content li > ol {
	margin-top: 0.5rem;
}

/* Common Mistakes bullets (spec section 12): orange square marker instead
   of the browser default disc, to match the Option A accent system. */
.single-article .entry-content ul li::marker {
	color: #ff6b2b;
}

/* Content Box custom block (V4 section 4.3). Heading/body/list styling is
   inherited from the generic .entry-content h2/p/ul rules above — this
   only covers the block's own wrapper, optional image, and the Read
   More/Show Less behavior (V4 section 3.5) added by
   js/content-box-read-more.js. */
.content-box {
	margin-bottom: 1.5rem;
}

.content-box-image {
	margin: 1.25rem 0;
}

.content-box-image img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
}

.content-box-body {
	position: relative;
	overflow: hidden;
	transition: max-height 0.3s ease-in-out;
}

.content-box-body.is-collapsed {
	max-height: 260px;
}

.content-box-body.is-collapsed::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 70px;
	background: linear-gradient( to bottom, rgba( 255, 255, 255, 0 ) 0%, #fff 90% );
	pointer-events: none;
}

.content-box-read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.75rem;
	background: transparent;
	border: none;
	color: #ff6b2b;
	font-weight: 700;
	font-size: 0.95rem;
	cursor: pointer;
	padding: 0;
}

.content-box-read-more svg {
	transition: transform 0.3s ease-in-out;
}

.content-box-read-more[aria-expanded="true"] svg {
	transform: rotate( 180deg );
}

@media (max-width: 576px) {
	.content-box-read-more {
		display: flex;
		justify-content: center;
		width: 100%;
		margin-top: 1rem;
		padding: 0.75rem;
		background: #fff8f0;
		border-radius: 6px;
	}
}

/* FAQ Accordion (V4 section 1): progressive enhancement over the Rank
   Math FAQ block's own rendered markup (js/faq-accordion.js adds the
   .is-open class + inline max-height, and wraps each answer's children in
   a padded .rank-math-answer-inner so the padding doesn't leak past the
   clipped max-height:0 box when collapsed). The block itself, and its
   FAQPage schema output, are untouched — this is visuals + behavior only. */
.single-article .entry-content .rank-math-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.single-article .entry-content .rank-math-list-item {
	background: #fff8f0;
	border: 1px solid rgba(27, 58, 107, 0.14);
	border-left: 3px solid transparent;
	border-radius: 6px;
	margin-bottom: 0.75rem;
}

.single-article .entry-content .rank-math-list-item:hover {
	border-left-color: rgba(255, 107, 43, 0.5);
}

.single-article .entry-content .rank-math-list-item.is-open {
	border-left-color: #ff6b2b;
}

.single-article .entry-content .rank-math-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: 0.85rem 1.25rem;
	min-height: 48px;
	font-size: 1.05rem;
	font-weight: 700;
	color: #1b3a6b;
	cursor: pointer;
	scroll-margin-top: 1.5rem;
}

.single-article .entry-content .rank-math-question::after {
	content: '\203A';
	flex: 0 0 auto;
	font-size: 1.6rem;
	line-height: 1;
	color: #ff6b2b;
	transform: rotate(0deg);
	transition: transform 0.3s ease-in-out;
}

.single-article .entry-content .rank-math-list-item.is-open .rank-math-question::after {
	transform: rotate(90deg);
}

.single-article .entry-content .rank-math-answer {
	max-height: 0;
	overflow: hidden;
	background: #fffdfa;
	transition: max-height 0.3s ease-in-out;
}

.single-article .entry-content .rank-math-answer-inner {
	padding: 0 1.25rem 1.1rem;
	color: #5a6272;
	text-align: left;
	font-size: 1rem;
}

.single-article .entry-content .rank-math-answer-inner p {
	margin: 0 0 0.75rem;
}

.single-article .entry-content .rank-math-answer-inner p:last-child {
	margin-bottom: 0;
}

@media (max-width: 576px) {
	.single-article .entry-content .rank-math-question {
		padding: 0.85rem 1rem;
		font-size: 1rem;
	}

	.single-article .entry-content .rank-math-answer-inner {
		padding: 0 1rem 1rem;
	}
}

.single-article .entry-content strong {
	color: #1b2a4a;
}

/* Full-width Step Row Layout (spec section 7; V4 section 4.4 for the
   custom Steps block). Roman numerals are generated entirely by CSS
   counters (counter-reset on .steps-block-rows, counter-increment on
   .step-row) rather than stored/computed in JS or PHP — this guarantees
   numbering can never go stale if a writer drags to reorder, duplicates,
   or deletes a step, satisfying the "must not break on reorder/duplicate"
   requirement by construction. .step-row-number is aria-hidden (purely
   decorative); the same counter also prefixes the real H3 heading text
   below so screen readers still get "Step I: …" as part of the heading. */
.steps-block-rows {
	counter-reset: step-counter;
}

.step-row {
	counter-increment: step-counter;
	display: flex;
	align-items: stretch;
	width: 100%;
	border-bottom: 2px solid #ff6b2b;
}

.step-row:last-child {
	border-bottom: none;
}

.step-row-number {
	flex: 0 0 65px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #1b3a6b;
	color: #ff6b2b;
	font-size: 1.5rem;
	font-weight: 800;
}

.step-row-number::before {
	content: counter( step-counter, upper-roman );
}

/* Every step after the first has a 2+ character numeral (II, III, IV…) —
   shrink so it still fits the 60-70px column without wrapping. Correct
   regardless of reordering, since ":not(:first-child)" is re-evaluated
   live from current DOM order, never a stored value. */
.step-row:not(:first-child) .step-row-number {
	font-size: 13px;
	letter-spacing: 0.02em;
}

.step-row-content {
	flex: 1;
	min-width: 0;
	background: #fff8f0;
	padding: 1.5rem 1.75rem;
}

/* More specific than the general entry-content h2 rule, so it wins
   without needing !important. */
.single-article .entry-content .step-row-heading {
	font-size: 1.25rem;
	font-weight: 700;
	color: #1b3a6b;
	margin: 0 0 0.65rem;
	scroll-margin-top: 1.5rem;
}

.single-article .entry-content .step-row-heading::before {
	content: 'Step ' counter( step-counter, upper-roman ) ': ';
}

.step-row-body,
.step-row-content p {
	color: #5a6272;
}

.step-row-body p:last-child,
.step-row-content p:last-child {
	margin-bottom: 0;
}

.step-row-image {
	margin: 1rem 0 0;
}

.step-row-image img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
}

@media (max-width: 576px) {
	.step-row-number {
		flex-basis: 45px;
		font-size: 1.15rem;
	}

	.step-row:not(:first-child) .step-row-number {
		font-size: 12px;
	}

	.step-row-content {
		padding: 1.1rem 1.1rem;
	}
}

/* Methods card layout (V4 sections 3.4 / 4.5). Like the Steps block,
   "Method N" numbering is 100% CSS-counter generated — never stored,
   never goes stale on reorder/duplicate. The :has() rule below implements
   "max 2 cards side by side on desktop, 3+ always stacks" purely
   structurally: if a 3rd card exists anywhere among the siblings, every
   card in that set switches to full width. */
.methods-block {
	margin-bottom: 1.5rem;
}

.methods-block-cards {
	counter-reset: method-counter;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.method-card {
	counter-increment: method-counter;
	flex: 1 1 100%;
	min-width: 0;
	background: #fff;
	border: 1px solid rgba( 27, 58, 107, 0.14 );
	border-top: 3px solid #ff6b2b;
	border-radius: 8px;
	padding: 1.5rem;
}

.method-card-title {
	margin: 0 0 0.5rem;
	color: #1b3a6b;
	font-weight: 700;
	font-size: 1.15rem;
}

.method-card-title::before {
	content: 'Method ' counter( method-counter ) ': ';
}

.method-card-body {
	color: #5a6272;
}

.method-card-body p:last-child {
	margin-bottom: 0;
}

.method-card-image {
	margin: 1rem 0 0;
}

.method-card-image img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
}

@media (min-width: 768px) {
	.methods-block-cards:has( .method-card:nth-child(3) ) .method-card {
		flex-basis: 100%;
	}

	.methods-block-cards:not( :has( .method-card:nth-child(3) ) ) .method-card {
		flex-basis: calc( 50% - 0.75rem );
	}
}

/* Option A: orange left border on tip/warning/note callout boxes
   (blockquote is the natural editorial element for these). */
.single-article .entry-content blockquote {
	border-left: 3px solid #ff6b2b;
	background: #f6f7fa;
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	border-radius: 0 0.4rem 0.4rem 0;
	color: #2c3140;
}

.single-article .entry-content blockquote p:last-child {
	margin-bottom: 0;
}

/* Share Buttons
--------------------------------------------- */
.article-share-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.25rem 0;
}

.share-button {
	display: inline-flex;
	align-items: center;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0.45rem 0.9rem;
	border-radius: 999px;
	border: 1px solid #e7e9ee;
	background: #fff;
	color: #2c3140;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.share-button:hover,
.share-button:focus {
	background: #1b2a4a;
	color: #fff;
	border-color: #1b2a4a;
}

.share-whatsapp {
	border-color: #25d366;
	color: #128c4a;
}

.share-whatsapp:hover {
	background: #25d366;
	border-color: #25d366;
	color: #fff;
}

/* Related Articles
--------------------------------------------- */
.article-related-section {
	margin-top: 2.5rem;
}

.article-related-box {
	background: #f6f7fa;
	border: 1px solid #e7e9ee;
	border-radius: 0.75rem;
	padding: 1.75rem;
}

.article-related-title {
	font-size: 1.3rem;
	font-weight: 700;
	color: #1b2a4a;
	margin: 0 0 1.25rem;
}

.related-card-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

.related-card {
	display: flex;
	gap: 1rem;
	align-items: center;
	background: #fff;
	border: 1px solid #e7e9ee;
	border-radius: 0.6rem;
	padding: 0.75rem;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.related-card:hover,
.related-card:focus {
	box-shadow: 0 8px 20px rgba(27, 42, 74, 0.1);
	transform: translateY(-2px);
	border-color: #d7dae3;
	color: inherit;
}

.related-card-thumb {
	flex-shrink: 0;
	width: 84px;
	height: 84px;
	border-radius: 0.5rem;
	overflow: hidden;
	display: block;
}

.related-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.related-card-img-placeholder {
	background: linear-gradient(135deg, #eef1f7 0%, #dde2ec 100%);
}

.related-card-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.related-card-category {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #ff6b35;
	margin-bottom: 0.2rem;
}

.related-card-title {
	font-size: 0.98rem;
	font-weight: 700;
	color: #1b2a4a;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 0.35rem;
}

.related-card-cta {
	font-size: 0.8rem;
	font-weight: 600;
	color: #2c4270;
}

@media (max-width: 640px) {
	.related-card-grid {
		grid-template-columns: 1fr;
	}
}

/* Mobile Article Page UX
--------------------------------------------- */
.mobile-pdf-button {
	display: none;
}

.mobile-share-bar {
	display: none;
}

@media (max-width: 576px) {
	/* Dedicated, prominent PDF button directly below the title. */
	.mobile-pdf-button {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		width: 100%;
		background: #1b2a4a;
		color: #fff;
		border: 0;
		border-radius: 0.5rem;
		padding: 0.85rem 1rem;
		font-weight: 700;
		font-size: 0.95rem;
		margin: 1rem 0;
		cursor: pointer;
	}

	.mobile-pdf-button:hover,
	.mobile-pdf-button:focus {
		background: #12203a;
	}

	.mobile-pdf-button svg {
		width: 18px;
		height: 18px;
		flex-shrink: 0;
	}

	/* Collapsible Table of Contents, collapsed by default. */
	.article-toc-toggle {
		cursor: pointer;
	}

	.article-toc-toggle-label {
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;
		font-size: 0.8rem;
		font-weight: 600;
		color: #2c4270;
	}

	.article-toc-toggle-label::after {
		content: '';
		width: 0.4em;
		height: 0.4em;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform 0.2s ease-in-out;
	}

	.article-toc.is-open .article-toc-toggle-label::after {
		transform: rotate(225deg);
	}

	.article-toc-list {
		display: none;
	}

	.article-toc.is-open .article-toc-list {
		display: block;
		margin-top: 0.9rem;
	}

	/* The always-inline share button rows (top + bottom of content) give
	   way to a single persistent floating bar on mobile. */
	.article-share-buttons {
		display: none;
	}

	.mobile-share-bar {
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 150;
		background: #fff;
		border-top: 1px solid #e7e9ee;
		padding: 0.6rem 0.5rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -8px 20px rgba(9, 15, 30, 0.08);
	}

	.mobile-share-bar-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		border-radius: 50%;
		background: #f2f4f8;
		color: #1b2a4a;
		border: 0;
		cursor: pointer;
	}

	.mobile-share-bar-item svg {
		width: 20px;
		height: 20px;
	}

	.mobile-share-bar-whatsapp {
		background: #25d366;
		color: #fff;
	}

	/* Room for the fixed bottom bar so it never covers the last bit of
	   content (related articles / request-topic CTA). */
	.single-article {
		padding-bottom: 4.5rem;
	}
}

/* Print Styles
--------------------------------------------- */
@media print {
	#masthead,
	#colophon,
	.article-share-buttons,
	.article-related-section,
	.hero-search-suggestions,
	.post-navigation,
	.comments-area,
	.skip-link,
	.mobile-pdf-button,
	.mobile-share-bar,
	.help-cta-section {
		display: none !important;
	}

	.article-container {
		max-width: 100%;
	}

	.single-article .entry-content {
		font-size: 12pt;
		line-height: 1.5;
	}
}

/* Private "Get Help with This Topic" system (V3 section 2)
--------------------------------------------- */
.help-cta-section {
	margin: 2rem 0;
}

.help-cta-inner {
	text-align: center;
}

.help-toggle-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background: #ff6b2b;
	color: #fff;
	border: 0;
	border-radius: 0.5rem;
	padding: 0.85rem 1.75rem;
	font-weight: 700;
	font-size: 0.98rem;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
}

.help-toggle-btn:hover,
.help-toggle-btn:focus,
.help-toggle-btn[aria-expanded="true"] {
	background: #e6592a;
}

.help-toggle-btn svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* Desktop: smooth CSS-only expand/collapse via the grid-rows technique
   (0fr -> 1fr), no JS height calculation needed. */
.help-form-panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s ease-in-out;
	margin-top: 0;
}

.help-form-panel.is-open {
	grid-template-rows: 1fr;
	margin-top: 1.25rem;
}

.help-form-panel-inner {
	overflow: hidden;
	min-height: 0;
}

.help-form-body {
	position: relative;
	max-width: 560px;
	margin: 0 auto;
	background: #f6f7fa;
	border: 1px solid #e7e9ee;
	border-radius: 0.6rem;
	padding: 1.75rem;
}

.help-form-close {
	position: absolute;
	top: 0.75rem;
	right: 0.9rem;
	z-index: 210;
	background: transparent;
	border: 0;
	font-size: 1.5rem;
	line-height: 1;
	color: #8b91a0;
	cursor: pointer;
	padding: 0.25rem;
}

.help-form-close:hover {
	color: #1b2a4a;
}

.help-form-title {
	font-size: 1.15rem;
	font-weight: 700;
	color: #1b2a4a;
	margin: 0 0 0.35rem;
}

.help-form-subtitle {
	font-size: 0.9rem;
	color: #5a6272;
	margin: 0 0 1.25rem;
}

.help-form-field {
	margin-bottom: 1rem;
}

.help-form-field label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: #2c3140;
	margin-bottom: 0.35rem;
}

.help-form-field input,
.help-form-field textarea {
	width: 100%;
	padding: 0.65rem 0.85rem;
	border: 1px solid #d7dae3;
	border-radius: 0.4rem;
	font-size: 1rem;
	font-family: inherit;
}

.help-form-field textarea {
	resize: vertical;
}

.help-form-error {
	background: #fdecea;
	color: #b3261e;
	border: 1px solid #f5c2be;
	border-radius: 0.4rem;
	padding: 0.65rem 0.9rem;
	font-size: 0.875rem;
	margin-bottom: 1rem;
}

.help-form-submit {
	width: 100%;
	background: #ff6b2b;
	color: #fff;
	border: 0;
	border-radius: 0.4rem;
	padding: 0.75rem;
	font-weight: 700;
	font-size: 0.98rem;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
}

.help-form-submit:hover,
.help-form-submit:focus {
	background: #e6592a;
}

.help-form-submit:disabled {
	opacity: 0.6;
	cursor: wait;
}

.help-form-success p {
	margin: 0;
	color: #1b2a4a;
	font-size: 0.98rem;
	line-height: 1.6;
}

.help-form-overlay {
	display: none;
}

/* Mobile: bottom-sheet overlay instead of an inline expand. */
@media (max-width: 576px) {
	.help-toggle-btn {
		width: 100%;
	}

	.help-form-overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(9, 15, 30, 0.5);
		opacity: 0;
		z-index: 250;
		transition: opacity 0.25s ease-in-out;
	}

	.help-form-overlay.is-visible {
		opacity: 1;
	}

	.help-form-panel {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		max-height: 85vh;
		overflow-y: auto;
		background: #fff;
		border-radius: 1rem 1rem 0 0;
		box-shadow: 0 -10px 30px rgba(9, 15, 30, 0.2);
		transform: translateY(100%);
		transition: transform 0.3s ease-in-out;
		z-index: 260;
		margin-top: 0;
	}

	.help-form-panel.is-open {
		transform: translateY(0);
	}

	.help-form-body {
		max-width: none;
		background: transparent;
		border: none;
		border-radius: 0;
		padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
	}

	body.help-form-open {
		overflow: hidden;
	}
}

/* Request a Topic CTA
--------------------------------------------- */
.request-topic-cta {
	padding: 0 1rem 3rem;
}

.article-container .request-topic-cta {
	padding: 2.5rem 0 0;
}

.request-topic-cta-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	background: #f6f7fa;
	border: 1px solid #e7e9ee;
	border-radius: 0.6rem;
	padding: 1.75rem 2rem;
}

.request-topic-cta-title {
	font-size: 1.2rem;
	font-weight: 700;
	color: #1b2a4a;
	margin: 0 0 0.35rem;
}

.request-topic-cta-text {
	margin: 0;
	color: #5a6272;
}

.request-topic-cta-button {
	flex-shrink: 0;
	background: #ff6b35;
	color: #fff;
	font-weight: 600;
	padding: 0.7rem 1.5rem;
	border-radius: 0.4rem;
	text-decoration: none;
	white-space: nowrap;
}

.request-topic-cta-button:hover {
	background: #e6592a;
	color: #fff;
}

/* Contact Form 7
--------------------------------------------- */
.wpcf7-form p {
	margin-bottom: 1rem;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea {
	width: 100%;
	padding: 0.65rem 0.85rem;
	border: 1px solid #d7dae3;
	border-radius: 0.4rem;
	font-size: 1rem;
}

.wpcf7-form textarea {
	min-height: 140px;
}

.wpcf7-form input[type="submit"] {
	background: #ff6b35;
	color: #fff;
	border: 0;
	font-weight: 600;
	padding: 0.7rem 1.75rem;
	border-radius: 0.4rem;
	cursor: pointer;
}

.wpcf7-form input[type="submit"]:hover {
	background: #e6592a;
}

/* Search Results Page
--------------------------------------------- */
.search-results-page {
	padding-bottom: 3rem;
}

.search-results-page .page-header {
	margin: 1rem 0 2rem;
}

.search-results-page .page-title {
	font-size: 1.75rem;
	font-weight: 700;
	color: #1b2a4a;
}

.search-results-page .page-title span {
	color: #ff6b35;
}

.search-no-results {
	background: #f6f7fa;
	border: 1px solid #e7e9ee;
	border-radius: 0.6rem;
	padding: 2rem;
	margin-bottom: 1.5rem;
}

.search-no-results p {
	font-size: 1.05rem;
	color: #4a5164;
	margin-bottom: 1.25rem;
}

.search-no-results-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.category-pill {
	display: inline-block;
	padding: 0.5rem 1.1rem;
	border-radius: 999px;
	background: #1b2a4a;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
}

.category-pill:hover {
	background: #2c4270;
	color: #fff;
}

/* Meet the Fixers Page
--------------------------------------------- */
.meet-the-fixers-page {
	padding-bottom: 3rem;
}

/* V3: heading, dot accent, and intro are center-aligned on this page only
   (alignment change only — size/weight/color/spacing untouched). */
.meet-the-fixers-page .page-header {
	text-align: center;
}

.meet-the-fixers-intro {
	max-width: 700px;
	color: #4a5164;
	margin: 0.5rem auto 0;
}

/* Option A dot accent, reused on this page's H1. */
.page-title-accent {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
}

.page-title-accent::before {
	content: '';
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #ff6b2b;
	flex-shrink: 0;
}

/* Founder Card
--------------------------------------------- */
.founder-section {
	position: relative;
	overflow: hidden;
	/* V4: nebula base color (see .universe-nebula-canvas below). */
	background: #050508;
	padding: 3rem 0;
	margin-top: 2rem;
}

.founder-card {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 55fr 45fr;
	align-items: flex-start;
	gap: 2.5rem;
}

.founder-card-left {
	color: #fff;
}

.founder-card-divider {
	width: 60px;
	height: 3px;
	background: #ff6b2b;
	margin-bottom: 1.5rem;
}

.founder-bullets {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.founder-bullets li {
	position: relative;
	padding-left: 1.25rem;
	font-size: 1.02rem;
	line-height: 1.5;
	color: #e4e8f2;
}

.founder-bullets li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #ff6b2b;
}

.founder-card-actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.founder-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
	border-radius: 0.4rem;
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, transform 0.1s ease-in-out;
}

.founder-btn-primary {
	background: #ff6b2b;
	color: #fff;
	padding: 0.75rem 1.5rem;
	border: 2px solid #ff6b2b;
}

.founder-btn-primary:hover,
.founder-btn-primary:focus {
	background: #e6592a;
	border-color: #e6592a;
	color: #fff;
}

.founder-btn-outline {
	width: 44px;
	height: 44px;
	border: 2px solid #fff;
	color: #fff;
	background: transparent;
}

.founder-btn-outline svg {
	width: 18px;
	height: 18px;
}

.founder-btn-outline:hover,
.founder-btn-outline:focus {
	background: #fff;
	color: #1b3a6b;
}

.founder-credential-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.credential-pill {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #ff6b2b;
	border: 1px solid rgba(255, 107, 43, 0.4);
	background: rgba(255, 107, 43, 0.1);
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
}

.founder-card-right {
	text-align: center;
}

.founder-photo {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	border: 4px solid #ff6b2b;
	margin-bottom: 1.1rem;
}

.founder-name {
	font-size: 1.6rem;
	font-weight: 800;
	color: #fff;
	margin: 0 0 0.35rem;
}

.founder-position {
	font-size: 1rem;
	font-weight: 600;
	color: #ff9d6e;
	margin: 0;
}

@media (max-width: 767px) {
	.founder-card {
		grid-template-columns: 1fr;
	}

	.founder-card-right {
		order: 1;
	}

	.founder-card-left {
		order: 2;
		text-align: left;
	}

	.founder-card-actions,
	.founder-credential-pills {
		justify-content: center;
	}
}

/* Team Members Grid
--------------------------------------------- */
.team-section {
	background: #fff8f0;
	padding: 3.5rem 0;
}

.fixer-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.fixer-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.3rem;
	background: #fff;
	border: 1px solid #e7e9ee;
	border-top: 3px solid #ff6b2b;
	border-radius: 0.6rem;
	padding: 2rem 1.5rem;
	text-decoration: none;
	color: inherit;
	scroll-margin-top: 1.5rem;
	transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.fixer-card:visited {
	color: inherit;
}

.fixer-card:hover,
.fixer-card:focus {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(27, 58, 107, 0.15), 0 0 0 1px rgba(255, 107, 43, 0.25);
	color: inherit;
}

.fixer-avatar {
	border-radius: 50%;
	flex-shrink: 0;
	width: 90px;
	height: 90px;
	border: 3px solid #ff6b2b;
	margin-bottom: 0.5rem;
}

.fixer-name {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0;
	color: #1b3a6b;
}

.fixer-role {
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #ff6b35;
	margin: 0;
}

@media (max-width: 767px) {
	.fixer-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}

	.fixer-card {
		padding: 1.25rem 0.75rem;
	}
}

/* Writer Profile Page
--------------------------------------------- */
.writer-profile-page {
	padding-bottom: 3rem;
}

.writer-hero {
	background: #1b3a6b;
	color: #fff;
	text-align: center;
	padding: 2.5rem 1rem 3rem;
	margin-bottom: 2.5rem;
}

.writer-hero .breadcrumbs {
	text-align: left;
	margin-bottom: 1.5rem;
}

.writer-hero .breadcrumbs a {
	color: #b7c2dc;
}

.writer-hero .breadcrumbs a:hover {
	color: #fff;
}

.writer-hero .breadcrumbs [aria-current="page"] {
	color: #fff;
}

.writer-hero .breadcrumbs li:not(:last-child)::after {
	color: #4f628f;
}

.writer-hero-photo {
	width: 130px;
	height: 130px;
	border-radius: 50%;
	border: 4px solid #ff6b2b;
	margin-bottom: 1.1rem;
}

.writer-hero-name {
	font-size: 2rem;
	font-weight: 800;
	color: #fff;
	margin: 0 0 0.35rem;
}

.writer-hero-role {
	font-size: 1.02rem;
	font-weight: 600;
	color: #ff6b2b;
	margin: 0 0 0.85rem;
}

.writer-hero-bio {
	font-size: 0.98rem;
	color: #c3cbe0;
	max-width: 520px;
	margin: 0 auto 2rem;
}

.writer-stats-row {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.writer-stat-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	min-width: 150px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 0.6rem;
	padding: 1.25rem 1.5rem;
}

.writer-stat-number {
	font-size: 2rem;
	font-weight: 800;
	color: #ff6b2b;
	line-height: 1;
}

.writer-stat-label {
	font-size: 0.8rem;
	font-weight: 600;
	color: #fff;
	text-align: center;
}

@media (max-width: 576px) {
	.writer-stat-box {
		min-width: 0;
		flex: 1 1 calc(50% - 0.5rem);
	}
}

.writer-stats-table-section {
	padding: 2.5rem 0;
	background: #f6f7fa;
	margin-bottom: 2.5rem;
}

.writer-stats-table-wrap {
	background: #fff;
	border: 1px solid #e7e9ee;
	border-radius: 0.6rem;
	overflow-x: auto;
}

.writer-stats-table {
	width: 100%;
	border-collapse: collapse;
}

.writer-stats-table tr:not(:last-child) th,
.writer-stats-table tr:not(:last-child) td {
	border-bottom: 1px solid #f0f1f5;
}

.writer-stats-table th,
.writer-stats-table td {
	padding: 0.85rem 1.25rem;
	text-align: left;
	font-size: 0.95rem;
}

.writer-stats-table th {
	width: 40%;
	font-weight: 600;
	color: #5a6272;
}

.writer-stats-table td {
	color: #1b2a4a;
	font-weight: 600;
}

.writer-stats-table td a {
	color: #ff6b2b;
	text-decoration: none;
}

.writer-stats-table td a:hover {
	text-decoration: underline;
}

@media (max-width: 576px) {
	.writer-stats-table th,
	.writer-stats-table td {
		padding: 0.65rem 0.9rem;
		font-size: 0.875rem;
	}
}

/* Header / Site Navigation
--------------------------------------------- */
.site-header {
	background: #fff;
	border-bottom: 1px solid #e7e9ee;
	position: sticky;
	top: 0;
	z-index: 200;
	box-shadow: 0 1px 0 rgba(27, 42, 74, 0.03);
}

.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 0.85rem 1rem;
}

.site-branding {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	flex-shrink: 0;
}

.site-branding .site-title,
.site-branding .site-title a {
	font-size: 1.4rem;
	font-weight: 800;
	color: #1b2a4a;
	text-decoration: none;
	margin: 0;
	letter-spacing: -0.01em;
	transition: color 0.15s ease-in-out;
}

.site-branding .site-title a:hover {
	color: #ff6b35;
}

.site-branding .site-description {
	margin: 0;
	font-size: 0.85rem;
	color: #5a6272;
}

/* Desktop nav: single row, right-aligned, no wrapping */
.main-navigation {
	width: auto;
	flex: 1;
	display: flex;
	justify-content: flex-end;
}

.main-navigation ul {
	align-items: center;
	gap: 0.15rem;
}

.main-navigation ul > li > a {
	display: flex;
	align-items: center;
	padding: 0.55rem 0.9rem;
	color: #2c3140;
	font-weight: 600;
	font-size: 0.95rem;
	border-radius: 0.4rem;
	transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.main-navigation ul > li > a:hover,
.main-navigation ul > li:hover > a,
.main-navigation ul > li.focus > a {
	background: #f2f4f8;
	color: #1b2a4a;
}

/* Current page indicator */
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-parent > a,
.main-navigation .current_page_item > a {
	color: #1b2a4a;
	background: #eef1f7;
}

/* Dropdown affordance arrow on parent items */
.main-navigation .menu-item-has-children > a::after {
	content: '';
	width: 0.4em;
	height: 0.4em;
	margin-left: 0.4em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.6;
	transition: transform 0.15s ease-in-out;
}

.main-navigation .menu-item-has-children:hover > a::after,
.main-navigation .menu-item-has-children.focus > a::after {
	transform: rotate(225deg);
}

.main-navigation ul ul {
	display: block;
	background: #fff;
	border: 1px solid #e7e9ee;
	border-radius: 0.6rem;
	padding: 0.4rem;
	margin-top: 0.5rem;
	box-shadow: 0 12px 28px rgba(27, 42, 74, 0.12);
}

/* Categories Mega-Menu — scales to any number of categories via a capped,
   scrollable grid instead of an ever-growing vertical list. */
.mega-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 0.5rem;
	width: min(640px, 90vw);
	background: #fff;
	border: 1px solid #e7e9ee;
	border-radius: 0.75rem;
	box-shadow: 0 20px 45px rgba(27, 42, 74, 0.16);
	overflow: hidden;
	z-index: 50;
}

.menu-item-has-mega-menu:hover .mega-menu,
.menu-item-has-mega-menu.focus .mega-menu {
	display: block;
}

.mega-menu-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.15rem;
	max-height: min(55vh, 420px);
	overflow-y: auto;
	padding: 0.75rem;
}

.mega-menu-item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.55rem 0.6rem;
	border-radius: 0.5rem;
	color: #2c3140;
	text-decoration: none;
	transition: background-color 0.12s ease-in-out;
}

.mega-menu-item:hover,
.mega-menu-item:focus {
	background: #f2f4f8;
	color: #1b2a4a;
}

.mega-menu-item-dot {
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #ff6b35;
}

.mega-menu-item-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.mega-menu-item-name {
	font-size: 0.9rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mega-menu-item-count {
	font-size: 0.75rem;
	color: #8b91a0;
}

.mega-menu-footer {
	border-top: 1px solid #e7e9ee;
	background: #f8f9fb;
	padding: 0.6rem 1rem;
}

.mega-menu-viewall {
	font-size: 0.85rem;
	font-weight: 700;
	color: #ff6b35;
	text-decoration: none;
}

.mega-menu-viewall:hover {
	text-decoration: underline;
}

.main-navigation ul ul a {
	padding: 0.55rem 0.8rem;
	border-radius: 0.4rem;
	color: #2c3140;
	font-weight: 500;
	font-size: 0.9rem;
}

.main-navigation ul ul a:hover {
	background: #f2f4f8;
}

/* Mobile toggle button */
.menu-toggle {
	align-items: center;
	gap: 0.5rem;
	background: transparent;
	color: #1b2a4a;
	border: 1px solid #e7e9ee;
	padding: 0.5rem 0.9rem;
	border-radius: 0.4rem;
	font-weight: 600;
	font-size: 0.9rem;
	cursor: pointer;
}

.menu-toggle:hover {
	background: #f2f4f8;
}

.menu-toggle-icon {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	width: 18px;
}

.menu-toggle-icon span {
	display: block;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.main-navigation.toggled .menu-toggle-icon span:nth-child(1) {
	transform: translateY(5px) rotate(45deg);
}

.main-navigation.toggled .menu-toggle-icon span:nth-child(2) {
	opacity: 0;
}

.main-navigation.toggled .menu-toggle-icon span:nth-child(3) {
	transform: translateY(-5px) rotate(-45deg);
}

/* Accordion toggle is mobile-only; hidden by default so it never renders
   as a stray unstyled button on desktop. */
.mobile-accordion-toggle {
	display: none;
}

/* Mobile menu panel */
@media screen and (max-width: 37.4375em) {
	.menu-toggle {
		display: flex;
		position: relative;
		z-index: 310;
	}

	.main-navigation {
		width: auto;
		flex: 0 0 auto;
	}

	/* The menu becomes a fixed off-canvas sidebar that slides in from the
	   right, instead of an inline dropdown that pushes the header taller. */
	.main-navigation ul#primary-menu {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		position: fixed;
		top: 0;
		right: 0;
		height: 100vh;
		height: 100dvh;
		width: min(85vw, 320px);
		margin: 0;
		padding: 5.5rem 1.25rem 2rem;
		background: #fff;
		box-shadow: -12px 0 35px rgba(9, 15, 30, 0.25);
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform 0.3s ease-in-out;
		z-index: 300;
	}

	.main-navigation.toggled ul#primary-menu {
		transform: translateX(0);
	}

	.main-navigation ul > li {
		width: 100%;
	}

	.main-navigation ul > li > a {
		padding: 0.85rem 0.25rem;
		border-radius: 0;
		border-bottom: 1px solid #f2f4f8;
	}

	.main-navigation ul ul {
		position: static;
		box-shadow: none;
		border: none;
		background: #f8f9fb;
		margin: 0 0 0 0.75rem;
		padding: 0;
	}

	.main-navigation .menu-item-has-children > a::after {
		display: none;
	}

	.main-navigation ul > li > a {
		justify-content: space-between;
	}

	/* Accordion toggle: covers the entire "Categories" row so tapping
	   anywhere on it expands/collapses the submenu (not just a small
	   corner icon) — it sits above the underlying link in the DOM/paint
	   order, intercepting the tap; the link itself still works for
	   desktop hover and screen readers. */
	.mobile-accordion-toggle {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 48px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-right: 0.5rem;
		background: transparent;
		border: 0;
		cursor: pointer;
	}

	.mobile-accordion-toggle span {
		width: 0.5em;
		height: 0.5em;
		border-right: 2px solid #1b2a4a;
		border-bottom: 2px solid #1b2a4a;
		transform: rotate(45deg);
		transition: transform 0.2s ease-in-out;
	}

	.menu-item-has-mega-menu {
		position: relative;
	}

	.menu-item-has-mega-menu.accordion-open .mobile-accordion-toggle span {
		transform: rotate(225deg);
	}

	.mega-menu {
		position: static;
		display: block;
		width: 100%;
		max-height: 0;
		margin-top: 0;
		border: none;
		border-radius: 0;
		box-shadow: none;
		background: #f8f9fb;
		overflow: hidden;
		transition: max-height 0.3s ease-in-out;
	}

	.menu-item-has-mega-menu.accordion-open .mega-menu {
		max-height: 2000px;
	}

	.mega-menu-grid {
		grid-template-columns: 1fr;
		max-height: 45vh;
		padding: 0.5rem 0.75rem;
	}

	.mega-menu-footer {
		background: transparent;
		padding: 0.6rem 0.75rem 0.75rem;
	}
}

/* Overlay backdrop behind the off-canvas mobile sidebar. */
.mobile-nav-overlay {
	position: fixed;
	inset: 0;
	background: rgba(9, 15, 30, 0.5);
	opacity: 0;
	/* Below .site-header's z-index (200): .site-header is a positioned
	   stacking context, so the sidebar/button nested inside it (z-index
	   300/310) only outrank elements compared *within* that context — from
	   outside, the whole header subtree is capped at its own z-index. The
	   overlay must stay under that cap or it paints over the sidebar. */
	z-index: 150;
	transition: opacity 0.25s ease-in-out;
}

.mobile-nav-overlay.is-visible {
	opacity: 1;
}

body.mobile-nav-open {
	overflow: hidden;
}

@media screen and (min-width: 37.5em) {
	.mobile-nav-overlay {
		display: none;
	}
}

/* Footer
--------------------------------------------- */
.site-footer {
	background: #16223d;
	color: #b7bfd4;
	margin-top: 3rem;
}

.footer-main {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 2.5rem;
	padding: 3.5rem 1rem 2.75rem;
}

.footer-col-brand {
	padding-right: 1.5rem;
}

.footer-brand {
	display: inline-block;
	font-size: 1.3rem;
	font-weight: 800;
	color: #fff;
	text-decoration: none;
	letter-spacing: -0.01em;
	margin-bottom: 0.75rem;
}

.footer-brand:hover {
	color: #ff6b35;
}

.footer-tagline {
	font-size: 0.925rem;
	line-height: 1.65;
	color: #93a0bd;
	margin: 0;
	max-width: 32ch;
}

.footer-col-title {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #6f7d9c;
	margin: 0 0 1.1rem;
}

.footer-col-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.footer-col-list a {
	position: relative;
	display: inline-flex;
	color: #cfd4e2;
	text-decoration: none;
	font-size: 0.925rem;
	transition: color 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.footer-col-list a:hover,
.footer-col-list a:focus {
	color: #fff;
	transform: translateX(3px);
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding: 1.25rem 1rem;
}

.footer-copyright,
.footer-credit {
	margin: 0;
	font-size: 0.8rem;
	color: #7a86a3;
}

.footer-credit a {
	color: #9aa5c2;
	text-decoration: none;
}

.footer-credit a:hover {
	color: #fff;
	text-decoration: underline;
}

.footer-credit .sep {
	margin: 0 0.5rem;
	opacity: 0.5;
}

@media (max-width: 991px) {
	.footer-main {
		grid-template-columns: 1fr 1fr;
		row-gap: 2.25rem;
	}

	.footer-col-brand {
		grid-column: 1 / -1;
		padding-right: 0;
	}

	.footer-tagline {
		max-width: 48ch;
	}
}

@media (max-width: 575px) {
	.footer-main {
		grid-template-columns: 1fr;
	}

	.footer-bottom-inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Back to top button */
.back-to-top {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #1b2a4a;
	color: #fff;
	border: none;
	border-radius: 50%;
	font-size: 1.1rem;
	cursor: pointer;
	box-shadow: 0 8px 22px rgba(27, 42, 74, 0.3);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, background-color 0.15s ease-in-out;
	z-index: 150;
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus {
	background: #ff6b35;
}

@media print {
	.back-to-top {
		display: none;
	}
}

/* Reading Progress Bar (article pages only)
--------------------------------------------- */
#reading-progress-bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 0%;
	height: 3px;
	background: #ff6b2b;
	z-index: 500;
	pointer-events: none;
}

@media print {
	#reading-progress-bar {
		display: none;
	}
}

/* Article "Back to Step 1" / "Back to Top" floating button (spec 9)
--------------------------------------------- */
.article-scroll-btn {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	width: 50px;
	height: 50px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	background: #ff6b2b;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(255, 107, 43, 0.45);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, background-color 0.15s ease-in-out;
	z-index: 150;
}

.article-scroll-btn.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	animation: htf-scroll-btn-bounce 8s ease-in-out infinite;
}

.article-scroll-btn:hover,
.article-scroll-btn:focus {
	background: #e6592a;
}

.article-scroll-btn-arrow {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.article-scroll-btn-label {
	font-size: 0.6rem;
	font-weight: 800;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1;
}

/* 2-3 quick bounces, then a pause, repeating — kept inside the
   .is-visible animation so it only runs while the button is shown. */
@keyframes htf-scroll-btn-bounce {
	0%, 35%, 100% {
		transform: translateY(0);
	}
	5%, 15%, 25% {
		transform: translateY(-9px);
	}
	10%, 20%, 30% {
		transform: translateY(0);
	}
}

@media print {
	.article-scroll-btn {
		display: none;
	}
}

/* 404 Page
--------------------------------------------- */
.error-404-hero {
	padding: 3rem 1rem;
}

/* Static Pages (About, Contact, Privacy, Terms)
--------------------------------------------- */
.static-page {
	padding: 1rem 0 3rem;
}

.static-page .entry-title {
	font-size: 2rem;
	font-weight: 700;
	color: #1b2a4a;
	margin: 0.5rem 0 0.75rem;
}

.categories-page-intro {
	color: #5a6272;
	font-size: 1.02rem;
	margin-bottom: 2rem;
}

.static-page .entry-content {
	font-size: 1.05rem;
	line-height: 1.75;
	color: #2c3140;
}

.static-page .entry-content h2 {
	font-size: 1.4rem;
	font-weight: 700;
	color: #1b2a4a;
	margin: 1.75rem 0 0.75rem;
}

.static-page .entry-content p {
	margin-bottom: 1.1rem;
}

.static-page .entry-content ul {
	margin: 0 0 1.1rem 1.25rem;
}

.static-page .entry-content li {
	margin-bottom: 0.4rem;
}

/* Comments
--------------------------------------------- */
.comments-area {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid #e7e9ee;
}

.comments-title {
	font-size: 1.4rem;
	font-weight: 700;
	color: #1b2a4a;
	margin-bottom: 1.25rem;
}

.comments-title span {
	color: #ff6b35;
}

.comment-list {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
}

.comment-list .comment {
	display: flex;
	gap: 1rem;
	padding: 1.25rem 0;
	border-bottom: 1px solid #e7e9ee;
}

.comment-list .children {
	list-style: none;
	margin: 0.5rem 0 0 2.5rem;
	padding: 0;
}

.comment-list .avatar {
	border-radius: 50%;
	flex-shrink: 0;
}

.comment-author .fn {
	font-weight: 700;
	font-style: normal;
	color: #1b2a4a;
}

.comment-metadata {
	margin-bottom: 0.5rem;
}

.comment-metadata a {
	font-size: 0.8rem;
	color: #8b91a0;
	text-decoration: none;
}

.comment-content p {
	margin: 0.35rem 0 0.5rem;
	color: #2c3140;
}

.comment-reply-link {
	font-size: 0.8rem;
	font-weight: 600;
	color: #2c4270;
	text-decoration: none;
}

.comment-reply-link:hover {
	text-decoration: underline;
}

.no-comments {
	color: #5a6272;
	margin-bottom: 1.5rem;
}

#respond {
	background: #f6f7fa;
	border: 1px solid #e7e9ee;
	border-radius: 0.6rem;
	padding: 1.75rem;
}

#reply-title {
	font-size: 1.15rem;
	font-weight: 700;
	color: #1b2a4a;
	margin: 0 0 1rem;
}

.comment-notes,
.logged-in-as {
	font-size: 0.9rem;
	color: #5a6272;
	margin-bottom: 1rem;
}

.comment-form p {
	margin-bottom: 1rem;
}

.comment-form label {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	color: #2c3140;
	margin-bottom: 0.35rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 0.65rem 0.85rem;
	border: 1px solid #d7dae3;
	border-radius: 0.4rem;
	font-size: 1rem;
	color: #2c3140;
}

.comment-form textarea {
	min-height: 140px;
}

.form-submit {
	margin-bottom: 0;
}

.comment-form input#submit {
	background: #ff6b35;
	color: #fff;
	border: 0;
	font-weight: 600;
	padding: 0.7rem 1.75rem;
	border-radius: 0.4rem;
	cursor: pointer;
}

.comment-form input#submit:hover {
	background: #e6592a;
}