/**
 * HartmanCosco overrides — applied in BOTH the WordPress front-end and the
 * Loom builder canvas iframe.
 *
 * The static source design (under /source/) was authored as standalone HTML
 * that loaded only `bootstrap.css` + `style.css`. When that design is rendered
 * by WordPress it picks up extra CSS from the active theme, parent theme, and
 * Bootstrap defaults that the static page never had to neutralize. The rules
 * below restore the source design's visual contract.
 *
 * Two scopes are used:
 *   - `body.hc-loom`            applies on both front-end and canvas
 *   - `body.loom-canvas-body`   applies only inside the editor iframe
 */

/* ─────────────────────────────────────────────
   Links — kill hover/focus underlines.
   The parent theme (spindlestack/assets/css/theme.css) ships
       a:hover { text-decoration: underline; }
   which the source design never had. The source uses
       a { text-decoration: none; }
   plus per-component border-bottom transitions (e.g. .gold-link)
   for visual feedback. Strip the inherited hover underline so
   buttons, gold-links, client-rows etc. read the way they do
   in the static design.
   ───────────────────────────────────────────── */
body.hc-loom a,
body.hc-loom a:hover,
body.hc-loom a:focus,
body.hc-loom a:focus-visible,
body.hc-loom a:active {
	text-decoration: none;
}

/* Buttons should never carry a link underline, even on hover. */
body.hc-loom .btn,
body.hc-loom .btn:hover,
body.hc-loom .btn:focus,
body.hc-loom .btn:active,
body.hc-loom a.btn,
body.hc-loom a.btn:hover,
body.hc-loom a.btn:focus,
body.hc-loom a.btn:active,
body.hc-loom .btn-hc,
body.hc-loom .btn-hc:hover,
body.hc-loom .btn-hc-outline,
body.hc-loom .btn-hc-outline:hover {
	text-decoration: none;
}

/* Gold links + accent links use border-bottom for the underline effect.
   Make sure no inherited text-decoration competes with that. */
body.hc-loom .gold-link,
body.hc-loom .gold-link:hover,
body.hc-loom .gold-link:focus,
body.hc-loom .accent-link,
body.hc-loom .accent-link:hover {
	text-decoration: none;
}

/* Client rows: the row link itself never gets an underline, on hover the
   `.client-arrow` fades in from opacity:0 to 1 — that's the only visual
   change. The parent theme's hover rule was adding an unwanted underline. */
body.hc-loom .client-row,
body.hc-loom .client-row:hover,
body.hc-loom .client-row:focus,
body.hc-loom .client-row-dark,
body.hc-loom .client-row-dark:hover,
body.hc-loom .client-row-dark:focus {
	text-decoration: none;
}

/* Client-row arrow: keep U+2197 as a text glyph (gold line), not Segoe UI Emoji. */
body.hc-loom .client-arrow,
body.hc-loom .client-arrow-dark {
	font-family: var(--font-body), 'Raleway', 'Helvetica Neue', Arial, sans-serif;
	font-variant-emoji: text;
}

/* Allow the source design's deliberate underlines (footer fine-print, etc.)
   to win again. These are targeted explicitly so the blanket reset above
   doesn't strip them. */
body.hc-loom .footer-li-placeholder a,
body.hc-loom .footer-li-placeholder a:hover,
body.hc-loom .spindle-credit a,
body.hc-loom .spindle-credit a:hover,
body.hc-loom .contact-form-note a:hover {
	text-decoration: underline;
}

/* ─────────────────────────────────────────────
   Canvas-only — clamp `vh`-based heights.
   The Loom builder canvas iframe auto-resizes its height to its content,
   so any source rule like `.hero-section { height: 85vh }` spirals: 85% of
   an iframe-that-grows-to-content is huge. Replace those with fixed
   pixel heights only inside the iframe.
   ───────────────────────────────────────────── */
.loom-canvas-body .hero-section {
	height: 640px !important;
	min-height: 0 !important;
}

.loom-canvas-body .hero-content-wrapper {
	min-height: 0 !important;
}

.loom-canvas-body .inner-hero {
	min-height: 480px !important;
}

/* ─────────────────────────────────────────────
   Canvas-only — restore contact-form readable styling.
   loom-builder/assets/canvas-bridge.css applies generic Courtland-theme
   rules to `.loom-canvas-body .contact-form .form-label`, including
   `color: var(--color-ink)`. `--color-ink` is not defined on this
   site, so labels render as the inherited body color (a faint grey
   on white). Re-assert the source design's own values.
   ───────────────────────────────────────────── */
body.loom-canvas-body .contact-form .form-label {
	font-family: var(--font-body), 'Raleway', 'Helvetica Neue', Arial, sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #111111 !important;
}

body.loom-canvas-body .contact-form-optional {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: #6b6b6b !important;
	font-size: 0.75rem;
}

body.loom-canvas-body .contact-form-control,
body.loom-canvas-body .contact-form .form-control,
body.loom-canvas-body .contact-form .form-select {
	border: 1px solid #d8d8d8;
	border-radius: var(--radius-sm);
	padding: 0.65rem 0.85rem;
	font-family: var(--font-body), 'Raleway', 'Helvetica Neue', Arial, sans-serif;
	font-size: 1rem;
	background: #ffffff;
}

body.loom-canvas-body .contact-form .contact-form-textarea {
	min-height: 140px;
}

body.loom-canvas-body .contact-form-note {
	font-size: 0.875rem;
	color: #6b6b6b;
	font-style: normal;
	margin: 0;
}

/* ─────────────────────────────────────────────
   Section-pad heading colors on light bands.
   The source design scopes its dark-text-on-light-bg rules to `<main>`:
       main .section-pad.bg-hc-light h2 { color: var(--hc-text-on-light); }
       main .section-pad.bg-hc-fog  h2 { color: var(--hc-text-on-light); }
   The Loom builder renders blocks inside `<div id="loom-root">`, NOT
   inside a `<main>` element, so those scoped rules never match and the
   h2 inherits the body color (the parent WordPress theme overrides
   `body { color }` to a faint grey on white). Re-assert the dark
   color under the `.hc-loom` umbrella for the light-themed sections.

   We deliberately DO NOT re-assert `main .section-pad h2 { color: white }`,
   because sections like `.section-intro-split` have an explicit white
   background and their own dark `h2` color — a global white default
   would render those headlines white-on-white.
   ───────────────────────────────────────────── */
body.hc-loom .section-pad.bg-hc-light h2,
body.hc-loom .section-pad.bg-hc-light h3,
body.hc-loom .section-pad.bg-hc-fog h2,
body.hc-loom .section-pad.bg-hc-fog h3,
body.hc-loom .about-team-prelude h2,
body.hc-loom .about-team-prelude h3 {
	color: var(--hc-text-on-light);
}

/* ─────────────────────────────────────────────
   Team Bio block — small title subhead under the primary name
   heading. Matches the source's `.pain-headline` typographic feel
   but at a smaller size so it reads as a supporting role / title.
   ───────────────────────────────────────────── */
body.hc-loom .hc-team-bio__title {
	font-family: var(--font-heading), 'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif;
	font-size: clamp(1.05rem, 1.4vw, 1.35rem);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gold-on-light, #7a6228);
	margin: -0.25rem 0 1rem;
	line-height: 1.2;
}

body.hc-loom .hc-team-bio__contact {
	font-size: 0.95rem;
	margin-bottom: 0.5rem;
}

body.hc-loom .hc-team-bio__contact strong {
	color: var(--hc-text-on-light, #141414);
	margin-right: 0.25rem;
}

/* ─────────────────────────────────────────────
   From The Well — posts grid additions.
   The source `.ftw-card-*` classes already exist in style.css; these
   rules wire up the full-card click target, the featured-image fill,
   the pagination strip, and the editor-canvas info note.
   ───────────────────────────────────────────── */
body.hc-loom .ftw-card .ftw-card-link-wrap {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

body.hc-loom .ftw-card .ftw-card-link-wrap:hover,
body.hc-loom .ftw-card .ftw-card-link-wrap:focus {
	color: inherit;
	text-decoration: none;
}

body.hc-loom .ftw-card .ftw-card-thumb {
	overflow: hidden;
}

body.hc-loom .ftw-card .ftw-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.45s ease;
}

body.hc-loom .ftw-card:hover .ftw-card-thumb img {
	transform: scale(1.04);
}

body.hc-loom .hc-ftw-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: center;
	margin-top: 2rem;
}

body.hc-loom .hc-ftw-pagination__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	padding: 0.45rem 0.75rem;
	font-family: var(--font-body), 'Raleway', 'Helvetica Neue', Arial, sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--hc-text-on-light, #141414);
	border: 1px solid #d8d4cd;
	border-radius: 2px;
	background: #ffffff;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

body.hc-loom .hc-ftw-pagination__link:hover,
body.hc-loom .hc-ftw-pagination__link:focus {
	border-color: var(--gold-on-light, #7a6228);
	color: var(--gold-on-light, #7a6228);
	text-decoration: none;
}

body.hc-loom .hc-ftw-pagination__link--current {
	border-color: var(--gold-on-light, #7a6228);
	background: var(--gold-on-light, #7a6228);
	color: #ffffff;
	cursor: default;
}

body.hc-loom .hc-ftw-editor-note {
	margin-top: 1.25rem;
	padding: 0.75rem 1rem;
	background: rgba(122, 98, 40, 0.08);
	border-left: 3px solid var(--gold-on-light, #7a6228);
	color: var(--hc-text-on-light, #141414);
	font-style: italic;
	max-width: none;
	text-align: left;
}

/*
 * Dark-gold eyebrow override for select Loom blocks.
 *
 * Targets the testimonials, "Our Clients" intro, "Our Current Clients",
 * Contact Form, "From The Well" intro, and "From The Well" updates blocks.
 * Forces both the rule and label to use the dark on-light gold (#7a6228)
 * instead of the bright accent gold, matching the source design.
 *
 * Applied to both the WordPress front end (body.hc-loom) and the Loom
 * editor canvas (body.loom-canvas-body) so the preview matches live.
 */
body.hc-loom .testimonials-section .section-eyebrow .eyebrow-label,
body.hc-loom .clients-intro .section-eyebrow .eyebrow-label,
body.hc-loom .clients-current .section-eyebrow .eyebrow-label,
body.hc-loom .contact-form-section .section-eyebrow .eyebrow-label,
body.hc-loom .hc-ftw-intro .section-eyebrow .eyebrow-label,
body.hc-loom .hc-ftw-grid-section .section-eyebrow .eyebrow-label,
body.loom-canvas-body .testimonials-section .section-eyebrow .eyebrow-label,
body.loom-canvas-body .clients-intro .section-eyebrow .eyebrow-label,
body.loom-canvas-body .clients-current .section-eyebrow .eyebrow-label,
body.loom-canvas-body .contact-form-section .section-eyebrow .eyebrow-label,
body.loom-canvas-body .hc-ftw-intro .section-eyebrow .eyebrow-label,
body.loom-canvas-body .hc-ftw-grid-section .section-eyebrow .eyebrow-label {
	color: var(--gold-on-light, #7a6228) !important;
	font-weight: 700;
}

body.hc-loom .testimonials-section .section-eyebrow .eyebrow-rule,
body.hc-loom .clients-intro .section-eyebrow .eyebrow-rule,
body.hc-loom .clients-current .section-eyebrow .eyebrow-rule,
body.hc-loom .contact-form-section .section-eyebrow .eyebrow-rule,
body.hc-loom .hc-ftw-intro .section-eyebrow .eyebrow-rule,
body.hc-loom .hc-ftw-grid-section .section-eyebrow .eyebrow-rule,
body.loom-canvas-body .testimonials-section .section-eyebrow .eyebrow-rule,
body.loom-canvas-body .clients-intro .section-eyebrow .eyebrow-rule,
body.loom-canvas-body .clients-current .section-eyebrow .eyebrow-rule,
body.loom-canvas-body .contact-form-section .section-eyebrow .eyebrow-rule,
body.loom-canvas-body .hc-ftw-intro .section-eyebrow .eyebrow-rule,
body.loom-canvas-body .hc-ftw-grid-section .section-eyebrow .eyebrow-rule {
	background: var(--gold-on-light, #7a6228) !important;
	opacity: 0.85;
}