/* =============================================================
   Pawshtails — About Us page (page-templates/page-about.php).

   This stylesheet is the SINGLE source of truth for the About Us
   page. It ports the canonical rules straight from the
   mockups/pawshtails-about-us.html <style> block — verbatim where
   possible, lightly adapted only when the WP markup deviates.

   Why unscoped selectors are safe here:
     - about.css is enqueued ONLY when is_page_template(
       'page-templates/page-about.php' ) — i.e. nowhere else on
       the site. So `.account-hero` etc inside this file can't
       collide with the same class on Contact, FAQs, Sizing Help,
       Account pages — those pages don't load this stylesheet.
   ============================================================= */


/* =============================================================
   1. BREADCRUMB — top-of-page nav.
   ============================================================= */
.breadcrumb {
	background: var(--white);
	border-bottom: 1px solid var(--neutral-200);
	padding: var(--space-3) 0;
}
.breadcrumb .container { max-width: 1280px; }
.breadcrumb-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--neutral-500);
	margin: 0;
	padding: 0;
}
.breadcrumb-list a {
	color: var(--neutral-700);
	transition: color var(--t-base, 200ms);
	text-decoration: none;
}
.breadcrumb-list a:hover { color: var(--brand-orange); }
.breadcrumb-sep { color: var(--neutral-300); }
.breadcrumb-current { color: var(--neutral-900); }


/* =============================================================
   2. ACCOUNT-STYLE HERO — dark band, Caveat eyebrow, big title.
   ============================================================= */
.account-hero {
	padding: var(--space-8) var(--section-x) var(--space-6);
	background: var(--neutral-900);
	color: var(--white);
	text-align: center;
}
.account-hero-inner { max-width: 1100px; margin: 0 auto; }
.account-hero-eyebrow {
	font-family: var(--font-accent);
	font-size: var(--text-2xl);
	color: var(--brand-orange);
	transform: rotate(-2deg);
	display: inline-block;
	line-height: 1;
	margin-bottom: var(--space-2);
}
.account-hero-title {
	font-family: var(--font-display);
	font-size: var(--text-4xl);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--white);
}
.account-hero-subtitle {
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.7);
	margin-top: var(--space-3);
	max-width: 540px;
	margin-left: auto;
	margin-right: auto;
}
.account-hero-subtitle p { margin: 0; }
@media (min-width: 720px) {
	.account-hero { padding: var(--space-10) var(--section-x) var(--space-8); }
	.account-hero-eyebrow { font-size: var(--text-3xl); }
	.account-hero-title { font-size: var(--text-5xl); }
}


/* =============================================================
   3. FEATURE IMAGE — full-bleed photo strip. White background to
      sit flush with the prose section below; image-to-prose gap
      kept tight to mirror the prose-to-CTA gap.
   ============================================================= */
.about-feature-image-wrap {
	width: 100%;
	margin: 0;
	padding: var(--space-6) var(--section-x) 0;
	background: var(--white);
}
.about-feature-image {
	max-width: 1100px;
	margin: 0 auto;
}
.about-feature-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}


/* =============================================================
   4. PROSE SECTION — WHITE background, content widened to the
      full container width (matches the orange CTA banner below).
      Top padding kept tight so the gap between the image and the
      prose matches the gap between the prose and the CTA banner.
   ============================================================= */
.prose-section {
	padding: var(--space-6) 0 var(--space-12, 80px);
	background: var(--white);
}
.prose-section .container {
	max-width: 1100px;
	margin: 0 auto;
	padding-left: var(--section-x);
	padding-right: var(--section-x);
}
@media (min-width: 720px) {
	.prose-section { padding: var(--space-8) 0 var(--space-14, 96px); }
}
.prose-block {
	max-width: none;   /* widen to fill the container — matches CTA banner width */
	margin: 0 auto;
}

/* Eyebrow inside prose */
.prose-eyebrow {
	font-family: var(--font-accent);
	font-size: var(--text-xl);
	color: var(--brand-orange);
	display: inline-block;
	line-height: 1;
	margin-bottom: var(--space-2);
}

.about-prose h2 {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	color: var(--neutral-900);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: var(--space-8) 0 var(--space-3);
	font-weight: 400;
}
.about-prose h2:first-child { margin-top: 0; }
.about-prose p {
	font-size: var(--text-base);
	line-height: 1.7;
	color: var(--neutral-700);
	margin-bottom: var(--space-4);
}
.about-prose p strong {
	color: var(--neutral-900);
	font-weight: 700;
}
.about-prose p a {
	color: var(--brand-orange);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.about-prose p a:hover { color: var(--brand-orange-dark); }
.about-prose blockquote {
	font-family: var(--font-accent);
	font-style: normal;
	font-size: var(--text-2xl);
	color: var(--brand-orange);
	border-left: 3px solid var(--brand-orange);
	padding: 0 0 0 var(--space-4);
	margin: var(--space-6) 0;
	line-height: 1.3;
}


/* =============================================================
   5. ORANGE "ASK US" BANNER — bottom of page CTA.
      Icon column is HIDDEN per the 2026-06 design pass — the
      .ask-us-banner--no-icon modifier removes the icon HTML in
      our template; this stylesheet is permissive about either
      shape.
   ============================================================= */
.ask-us-banner {
	background: var(--brand-orange);
	color: var(--white);
	padding: var(--space-5);
	display: flex;
	align-items: center;
	gap: var(--space-4);
	flex-wrap: wrap;
	margin-top: var(--space-6);
}
@media (min-width: 720px) {
	.ask-us-banner { padding: var(--space-6); gap: var(--space-5); }
}
.ask-us-banner-icon { display: none; } /* removed per design pass */
.ask-us-banner-content { flex: 1; min-width: 200px; }
.ask-us-banner-title {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	margin-bottom: 4px;
	letter-spacing: -0.01em;
}
.ask-us-banner-sub {
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.4;
}
.ask-us-banner-cta {
	background: var(--white);
	color: var(--brand-orange);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: var(--space-3) var(--space-5);
	text-decoration: none;
	transition: background var(--t-base, 200ms);
}
.ask-us-banner-cta:hover { background: var(--brand-cream); }