/*
 * Inner-page styles (blog, single, page, search, archive, 404).
 * These classes never appear on the homepage, so this file cannot affect the
 * pixel-faithful landing design. Everything uses the design's own tokens.
 */

.site-main.inner {
	padding-top: 92px; /* clear the fixed header */
}

.page-hero {
	background: linear-gradient(180deg, var(--mist-2), var(--mist));
	border-bottom: 1px solid var(--line);
	padding: 54px 0 46px;
}

.page-hero .wrap {
	max-width: 900px;
}

.page-hero h1 {
	font-size: clamp(2rem, 4.4vw, 3rem);
	color: var(--ink);
	margin: 14px 0 6px;
}

.page-hero .page-meta {
	color: var(--ink-soft);
	font-size: .95rem;
}

.page-body {
	max-width: 820px;
	padding-top: 46px;
	padding-bottom: 70px;
}

.entry-content {
	color: var(--ink-soft);
	font-size: 1.06rem;
	line-height: 1.8;
}

.entry-content > * + * {
	margin-top: 1.1em;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	color: var(--ink);
	margin-top: 1.6em;
	line-height: 1.2;
}

.entry-content h2 { font-size: 1.7rem; }
.entry-content h3 { font-size: 1.35rem; }

.entry-content a {
	color: var(--teal-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.entry-content a:hover { color: var(--brand); }

.entry-content img,
.entry-content .wp-block-image img {
	border-radius: var(--r);
	box-shadow: var(--shadow-md);
	height: auto;
}

.entry-content blockquote {
	border-left: 3px solid var(--teal);
	padding: 6px 0 6px 22px;
	margin: 1.4em 0;
	font-family: "Fraunces", Georgia, serif;
	font-size: 1.2rem;
	color: var(--ink);
}

.entry-content ul,
.entry-content ol { padding-left: 1.3em; }
.entry-content li + li { margin-top: .4em; }

.entry-content code {
	background: var(--mist-2);
	padding: .15em .45em;
	border-radius: 6px;
	font-size: .92em;
}

.entry-content pre {
	background: var(--ink);
	color: #EAF1F6;
	padding: 18px 20px;
	border-radius: 14px;
	overflow: auto;
}

.entry-content pre code { background: none; padding: 0; }

/* Post list (blog / archive) */
.post-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 26px;
}

.post-card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.post-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

.post-card .thumb {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--mist-2);
}

.post-card .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-card .card-body {
	padding: 22px 24px 26px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.post-card h2,
.post-card h3 {
	font-size: 1.3rem;
	color: var(--ink);
	line-height: 1.2;
}

.post-card .post-meta {
	font-size: .82rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--teal-deep);
	font-weight: 600;
}

.post-card p { color: var(--ink-soft); font-size: .98rem; }

.post-card .readmore {
	margin-top: auto;
	font-weight: 600;
	color: var(--brand);
}

/* Pagination */
.asha-pagination {
	margin: 46px 0 0;
	display: flex;
	justify-content: center;
}

.asha-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	margin: 0 4px;
	border-radius: 999px;
	border: 1px solid var(--line);
	color: var(--ink);
	font-weight: 600;
}

.asha-pagination .page-numbers.current,
.asha-pagination .page-numbers:hover {
	background: var(--teal);
	border-color: var(--teal);
	color: #fff;
}

/* Sidebar widgets */
.widget { margin-bottom: 34px; }
.widget-title {
	color: var(--ink);
	font-size: 1.1rem;
	margin-bottom: 12px;
}
.widget ul { list-style: none; }
.widget li { padding: 7px 0; border-bottom: 1px solid var(--line); }
.widget a { color: var(--ink-soft); }
.widget a:hover { color: var(--teal-deep); }

/* Search form */
.asha-search {
	display: flex;
	gap: 10px;
	max-width: 480px;
}
.asha-search input[type="search"] {
	flex: 1;
	padding: 13px 18px;
	border-radius: 999px;
	border: 1.5px solid var(--line);
	background: var(--paper);
	color: var(--ink);
	font: inherit;
}
.asha-search input[type="search"]:focus {
	outline: none;
	border-color: var(--teal);
}

/* 404 */
.error-404 { text-align: center; padding: 80px 0; }
.error-404 .code {
	font-family: "Fraunces", Georgia, serif;
	font-size: clamp(4rem, 12vw, 8rem);
	color: var(--teal);
	line-height: 1;
}

/* Comments */
.comments-area { margin-top: 50px; padding-top: 34px; border-top: 1px solid var(--line); }
.comment-list { list-style: none; }
.comment-list .comment { padding: 18px 0; border-bottom: 1px solid var(--line); }
.comment-list .children { list-style: none; margin-left: 28px; }
.comment-author { font-weight: 600; color: var(--ink); }
.comment-metadata { font-size: .82rem; color: var(--ink-soft); }

.two-col {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 48px;
	align-items: start;
}
@media (max-width: 900px) {
	.two-col { grid-template-columns: 1fr; }
}

/* Full-width page template: use the site max-width instead of the reading width */
.page-body--full { max-width: var(--maxw); }
.sidebar .widget:first-child { margin-top: 0; }

/* =========================================================================
 *  ABOUT PAGE (page-templates/about.php) — matches the approved wireframe.
 *  Reuses .hero, .about-grid, .about-img, .band, .cta-band from main.css
 *  with a few page-specific tweaks below.
 * ====================================================================== */

/* Hero sits under the fixed header; give the first band clearance. */
.about-page.inner { padding-top: 0; }
.about-hero { padding-top: 128px; }

/* Hero "What We Do" heading uses the serif display face (not the giant H1). */
.about-hero .hero-title {
	font-family: "Fraunces", Georgia, serif;
	font-size: clamp(2.4rem, 4.6vw, 3.6rem);
	color: var(--ink);
	margin-bottom: 20px;
	line-height: 1.05;
}
.about-hero .hero-title .hope { position: relative; white-space: nowrap; color: var(--teal-deep); }
.about-hero .hero-title .hope::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: .04em;
	width: 100%;
	height: .12em;
	background: linear-gradient(90deg, var(--teal), rgba(37, 169, 188, .25));
	border-radius: 6px;
	z-index: -1;
	opacity: .6;
}
.about-hero .hero-frame img { height: 340px; }

/* Image variants used across the About bands. */
.about-img.is-square img  { height: auto; aspect-ratio: 1 / 1; }
.about-img.is-plain img   { height: 380px; border-width: 0; border-radius: var(--r); }
.about-img.is-portrait img { height: 560px; }

/* Mission band: text is the first column, image second (image sits right). */
.about-grid.about-grid--text-first { grid-template-columns: 1.05fr .95fr; }

/* Keep About headings on the serif face for the editorial wireframe look. */
.about-page .about-body h2 {
	font-family: "Fraunces", Georgia, serif;
	font-weight: 600;
}

@media (max-width: 900px) {
	.about-hero { padding-top: 108px; }
	.about-hero .hero-frame img { height: 260px; }
	.about-img.is-portrait img,
	.about-img.is-plain img { height: 420px; }
	/* On mobile, image should come before text in the mission band too. */
	.about-grid.about-grid--text-first .about-img { order: -1; }
}

/* =========================================================================
 *  CONDITIONS PAGE — list styling for the Conditions/Services column.
 * ====================================================================== */
.conditions-page .cond-list-title {
	font-family: "Fraunces", Georgia, serif;
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--brand);
	margin: 22px 0 12px;
}

.conditions-page .cond-serv-lead {
	color: var(--ink-soft);
	margin-top: 22px;
	margin-bottom: 4px;
	font-size: 1.03rem;
}

.conditions-page .cond-list {
	list-style: none;
	margin: 0 0 4px;
	padding: 0;
}

.conditions-page .cond-list li {
	position: relative;
	padding-left: 22px;
	margin: 9px 0;
	color: var(--ink-soft);
	font-size: 1.02rem;
	line-height: 1.5;
}

.conditions-page .cond-list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .62em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--teal);
}

/* The conditions body column has a lot of content — top-align the grid. */
.conditions-page .band .about-grid { align-items: start; }
.conditions-page .about-img.is-square { position: sticky; top: 96px; }

@media (max-width: 900px) {
	.conditions-page .about-img.is-square { position: static; }
}

/* =========================================================================
 *  FAQ PAGE — category tab pills + panels.
 * ====================================================================== */
.faq-page .faq-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	margin-bottom: 40px;
}

.faq-page .faq-tab {
	font-family: "Fraunces", Georgia, serif;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--brand);
	background: var(--paper);
	border: 1.5px solid var(--line);
	border-radius: 999px;
	padding: 16px 30px;
	cursor: pointer;
	transition: background .3s var(--ease), color .3s, border-color .3s, transform .3s var(--ease), box-shadow .3s;
	white-space: nowrap;
}

.faq-page .faq-tab:hover {
	border-color: var(--teal);
	transform: translateY(-2px);
}

.faq-page .faq-tab.is-active {
	background: var(--teal);
	border-color: var(--teal);
	color: #fff;
	box-shadow: var(--shadow-md);
}

.faq-page .faq-panel { animation: asha-fade-in .4s var(--ease); }
.faq-page .faq-panel[hidden] { display: none; }

@keyframes asha-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

.faq-page .faq-grid {
	max-width: 940px;
	margin: 0 auto;
	display: grid;
	gap: 16px;
}

@media (max-width: 640px) {
	.faq-page .faq-tabs { gap: 10px; }
	.faq-page .faq-tab { font-size: .95rem; padding: 12px 20px; }
}

/* =========================================================================
 *  CONTACT PAGE — "Get a Quote" + Contact Form 7 styling.
 *  The form markup is generated by CF7; the rules below theme its default
 *  output to match the wireframe. They also style the built-in placeholder
 *  shown before a shortcode is added.
 * ====================================================================== */
.contact-page .contact-grid {
	display: grid;
	grid-template-columns: .82fr 1.18fr;
	gap: 40px;
	align-items: stretch;
}

.contact-page .contact-photo {
	border-radius: var(--r);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	min-height: 420px;
}
.contact-page .contact-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.contact-page .contact-card {
	background: var(--paper);
	border-radius: var(--r);
	box-shadow: var(--shadow-lg);
	padding: 48px clamp(28px, 4vw, 56px);
}

.contact-page .contact-form-title {
	font-family: "Fraunces", Georgia, serif;
	font-weight: 600;
	font-size: clamp(1.9rem, 3.4vw, 2.8rem);
	line-height: 1.08;
	color: var(--ink);
	margin-bottom: 34px;
}

/* --- Contact Form 7 field theming ------------------------------------- */
.contact-page .wpcf7-form p { margin: 0; }

/* Two-column rows: wrap paired fields in the CF7 editor inside a container with
 * class "cf-row" for the exact 2-up layout. The grid splits its DIRECT children
 * evenly, so it works whether each field is a <label> or a bare input/span. */
.contact-page .wpcf7-form .cf-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	align-items: start;
}

/* Each field inside a row takes the full width of its column. */
.contact-page .wpcf7-form .cf-row > * { margin: 0; }
.contact-page .wpcf7-form .cf-row .wpcf7-form-control-wrap,
.contact-page .wpcf7-form .cf-row input,
.contact-page .wpcf7-form .cf-row label { width: 100%; }

.contact-page .wpcf7-form label {
	display: block;
	font-size: .95rem;
	color: var(--ink);
	margin: 20px 0 8px;
	font-weight: 500;
}
.contact-page .wpcf7-form .cf-row label:first-child { margin-top: 0; }

.contact-page .wpcf7-form input[type="text"],
.contact-page .wpcf7-form input[type="email"],
.contact-page .wpcf7-form input[type="tel"],
.contact-page .wpcf7-form input[type="url"],
.contact-page .wpcf7-form input[type="number"],
.contact-page .wpcf7-form input[type="date"],
.contact-page .wpcf7-form select,
.contact-page .wpcf7-form textarea {
	width: 100%;
	font: inherit;
	color: var(--ink);
	background: var(--paper);
	border: 1.5px solid var(--line);
	border-radius: 12px;
	padding: 14px 16px;
	transition: border-color .25s, box-shadow .25s;
	box-sizing: border-box;
}

.contact-page .wpcf7-form input:focus,
.contact-page .wpcf7-form select:focus,
.contact-page .wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--teal);
	box-shadow: 0 0 0 4px rgba(37, 169, 188, .14);
}

.contact-page .wpcf7-form textarea { min-height: 130px; resize: vertical; }

/* Submit button → the theme's primary pill */
.contact-page .wpcf7-form input[type="submit"],
.contact-page .wpcf7-form button[type="submit"] {
	margin-top: 26px;
	background: var(--teal);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 15px 34px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background .3s var(--ease), transform .2s var(--ease), box-shadow .3s;
}
.contact-page .wpcf7-form input[type="submit"]:hover,
.contact-page .wpcf7-form button[type="submit"]:hover {
	background: var(--teal-deep);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

/* CF7 spinner + response messages */
.contact-page .wpcf7-spinner { margin: 0 0 0 12px; }
.contact-page .wpcf7 form .wpcf7-response-output {
	margin: 22px 0 0;
	border-radius: 12px;
	padding: 14px 18px;
	border-width: 1.5px;
}
.contact-page .wpcf7-not-valid-tip { color: #c0392b; font-size: .85rem; margin-top: 6px; }
.contact-page .wpcf7-form .wpcf7-not-valid { border-color: #e07a6b; }

/* --- Placeholder (before a shortcode is added) ------------------------ */
.contact-page .contact-form-placeholder .cf-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
}
.contact-page .contact-form-placeholder .cf-field { margin-bottom: 20px; }
.contact-page .contact-form-placeholder label {
	display: block;
	font-size: .95rem;
	color: var(--ink);
	margin-bottom: 8px;
}
.contact-page .contact-form-placeholder .cf-input {
	display: block;
	height: 52px;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	background: #fbfdfe;
}
.contact-page .contact-form-placeholder .cf-textarea { height: 130px; }
.contact-page .contact-form-placeholder .cf-submit {
	display: inline-block;
	margin-top: 26px;
	cursor: default;
}
.contact-page .contact-form-hint {
	margin-top: 20px;
	font-size: .85rem;
	color: var(--ink-soft);
	background: var(--mist-2);
	border-radius: 12px;
	padding: 12px 16px;
}

@media (max-width: 900px) {
	.contact-page .contact-grid { grid-template-columns: 1fr; }
	.contact-page .contact-photo { min-height: 300px; }
	.contact-page .contact-form-placeholder .cf-row,
	.contact-page .wpcf7-form .cf-row { grid-template-columns: 1fr; gap: 0; }
}

/* Footer logo link — inline-block so the linked logo keeps its size + is tappable */
#contact .foot-brand .foot-logo-link { display: inline-block; line-height: 0; }

/* =========================================================================
 *  CONTACT PAGE — embedded external form (SimplePractice, etc.)
 * ====================================================================== */
.contact-page .contact-embed {
	width: 100%;
	height: var(--embed-h, 1000px);
}
.contact-page .contact-embed iframe {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 12px;
	display: block;
	background: var(--paper);
}
@media (max-width: 900px) {
	.contact-page .contact-embed { height: auto; min-height: var(--embed-h, 1000px); }
}