/*
Theme Name:   Design Your Direction
Theme URI:    https://designyourdirection.com
Description:  Child theme of the Sensei LMS "Course" theme. Adds five ready-built page patterns (Home, How It Works, Small Business, Nonprofits, About Jennifer) with the approved Design Your Direction copy, icons and imagery. Two brand palettes are supported: purple/leaf (default) and orange/compass (add the class "dyd-brand-orange").
Author:       Jennifer Arrowood
Template:     course
Version:      1.5.2
Text Domain:  dyd-child
*/

/* =========================================================
   1. BRAND TOKENS  —  change colors here, nowhere else
   Values from the DYD Content & Build Guides.
   ========================================================= */

:root {
	/* Each value tries the theme.json palette preset first, then falls back to
	   the literal hex. NOTE: on the designyourdirection.com install the dyd-*
	   presets are not currently emitted into the front-end CSS, so the fallback
	   hexes are what actually render — edit the hex here to change a colour.
	   If the presets ever start resolving, these pick them up automatically. */
	--dyd-navy:        var(--wp--preset--color--dyd-navy, #173b8f);
	--dyd-navy-deep:   var(--wp--preset--color--dyd-navy-deep, #12306f);
	--dyd-orange:      var(--wp--preset--color--dyd-orange, #f56b1a);
	--dyd-purple:      var(--wp--preset--color--dyd-purple, #7b7ed8);
	--dyd-script:      var(--wp--preset--color--dyd-script, #2f4bb0);
	--dyd-body:        var(--wp--preset--color--dyd-body, #414f68);
	--dyd-body-soft:   var(--wp--preset--color--dyd-body-soft, #6a768c);
	--dyd-lavender:    var(--wp--preset--color--dyd-lavender, #f8f1ff);
	--dyd-mint:        var(--wp--preset--color--dyd-mint, #e4f0e8);
	--dyd-cream:       var(--wp--preset--color--dyd-cream, #fbf1de);
	--dyd-sand:        var(--wp--preset--color--dyd-sand, #f2efe9);
	--dyd-peach:       var(--wp--preset--color--dyd-peach, #fff0e5);
	--dyd-blue-soft:   var(--wp--preset--color--dyd-blue-soft, #eaf4ff);

	/* Not in the palette: hover shades and hairlines, derived by hand. */
	--dyd-orange-dark: #dd5a0e;
	--dyd-purple-dark: #6669c9;
	--dyd-lavender-2:  #efe9fb;
	--dyd-rule:        rgba(23, 59, 143, .14);

	--dyd-font-head:   "Poppins", "Helvetica Neue", Arial, sans-serif;
	--dyd-font-body:   "Inter", "Helvetica Neue", Arial, sans-serif;
	--dyd-font-serif:  "Source Serif 4", Georgia, "Times New Roman", serif;
	--dyd-font-script: "Caveat", "Segoe Script", cursive;

	--dyd-max:         1180px;
	--dyd-pad:         clamp(20px, 5vw, 56px);
	--dyd-section-y:   clamp(48px, 7vw, 86px);

	/* Active accent. Flipped wholesale by .dyd-brand-orange */
	--dyd-accent:      var(--dyd-purple);
	--dyd-accent-dark: var(--dyd-purple-dark);
}

/* Put this class on a section (or on <body> via a page class) to switch
   the whole thing to the orange/compass identity. */
.dyd-brand-orange {
	--dyd-accent:      var(--dyd-orange);
	--dyd-accent-dark: var(--dyd-orange-dark);
	--dyd-script:      var(--dyd-navy-deep);
}

/* =========================================================
   2. BASE TYPE
   ========================================================= */

.dyd { font-family: var(--dyd-font-body); color: var(--dyd-body); }

.dyd h1, .dyd h2, .dyd h3, .dyd h4 {
	font-family: var(--dyd-font-head);
	color: var(--dyd-navy);
	font-weight: 600;
	line-height: 1.16;
	letter-spacing: -.015em;
	margin: 0 0 .55em;
}
.dyd h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
.dyd h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
.dyd h3 { font-size: clamp(1.05rem, 1.45vw, 1.25rem); }

.dyd p { font-size: 1rem; line-height: 1.66; margin: 0 0 1em; }
.dyd p:last-child { margin-bottom: 0; }
.dyd strong { color: var(--dyd-navy); font-weight: 600; }

/* The orange identity sets display type in a serif */
.dyd-brand-orange h1,
.dyd-brand-orange h2,
.dyd-brand-orange h3 {
	font-family: var(--dyd-font-serif);
	font-weight: 600;
	letter-spacing: -.005em;
	color: var(--dyd-navy-deep);
}

/* =========================================================
   3. SECTION SHELL
   Each pattern section is a core/group with .dyd .dyd-section
   ========================================================= */

.dyd-section { padding-block: var(--dyd-section-y); }
.dyd-section--tight { padding-block: clamp(28px, 4vw, 46px); }
.dyd-section--flush { padding-block: 0; }
.dyd-inner { max-width: var(--dyd-max); margin-inline: auto; padding-inline: var(--dyd-pad); }
.dyd-inner--narrow { max-width: 860px; }

.dyd-bg-lavender { background: var(--dyd-lavender); }
.dyd-bg-lavender2 { background: var(--dyd-lavender-2); }
.dyd-bg-mint     { background: var(--dyd-mint); }
.dyd-bg-cream    { background: var(--dyd-cream); }
.dyd-bg-sand     { background: var(--dyd-sand); }
.dyd-bg-white    { background: #fff; }

/* =========================================================
   4. SPLIT ROWS (core/columns, edge to edge)
   One column holds a photo that fills its half; the other holds copy.
   ========================================================= */

.dyd-split.wp-block-columns { gap: 0 !important; margin-block: 0; align-items: stretch; }
/* Both halves must fill the row even when the block's vertical-alignment
   setting would otherwise centre (and therefore shrink) them.
   !important is deliberate: core ships
   .wp-block-columns.are-vertically-aligned-center > .wp-block-column{align-self:center}
   at a higher specificity than any class pair we can write here. */
.dyd-split > .wp-block-column { margin: 0; align-self: stretch !important; }

/* the photo column */
.dyd-media-col { position: relative; align-self: stretch; min-height: 320px; overflow: hidden; }
.dyd-media-col .wp-block-image,
.dyd-media-col figure { height: 100%; margin: 0; }
.dyd-media-col img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: center;
	display: block;
}

/* the copy column — stretches to the row, centres its own content */
.dyd-copy-col {
	padding: clamp(30px, 4.4vw, 66px) clamp(24px, 4vw, 60px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Handwriting laid over the photo.
   The soft scrim keeps it readable wherever it lands on the picture. */
.dyd-script-over {
	position: absolute;
	top: clamp(20px, 6%, 56px);
	right: clamp(16px, 4%, 40px);
	z-index: 2;
	max-width: 46%;
	text-align: right;
	margin: 0;
	padding: .5em .7em;
	border-radius: 10px;
	background: rgba(255, 255, 255, .72);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}
.dyd-script-over--left { right: auto; left: clamp(16px, 4%, 40px); text-align: left; }
.dyd-script-over--bottom { top: auto; bottom: clamp(20px, 6%, 48px); }

/* =========================================================
   5. TYPE ACCENTS
   ========================================================= */

.dyd-eyebrow {
	font-family: var(--dyd-font-body) !important;
	font-size: .72rem !important;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--dyd-body-soft);
	margin: 0 0 1.1em !important;
}
.dyd-eyebrow--center { text-align: center; }

.dyd-script {
	font-family: var(--dyd-font-script) !important;
	color: var(--dyd-script);
	font-size: clamp(1.45rem, 2.3vw, 1.95rem) !important;
	line-height: 1.28;
	font-weight: 500;
	margin: 0 0 .5em;
}
.dyd-script--lg { font-size: clamp(2rem, 4vw, 3.1rem) !important; line-height: 1.15; }
.dyd-script--sm { font-size: clamp(1.15rem, 1.6vw, 1.4rem) !important; }

/* Handwriting sitting on a highlighter swipe */
.dyd-hl > * , .dyd-hl {
	background-image: linear-gradient(var(--hl, var(--dyd-mint)), var(--hl, var(--dyd-mint)));
	background-repeat: no-repeat;
	background-size: 100% 64%;
	background-position: 0 60%;
	display: inline;
	padding: 0 .22em .08em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
.dyd-hl--mint  { --hl: var(--dyd-mint); }
.dyd-hl--cream { --hl: var(--dyd-cream); }

/* Hand-drawn underline (orange identity) */
.dyd-underline { position: relative; display: inline-block; }
.dyd-underline::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: -.14em;
	height: .14em;
	background: var(--dyd-accent);
	border-radius: 999px;
	transform: rotate(-.4deg);
}

.dyd-label {
	font-family: var(--dyd-font-body) !important;
	font-size: .78rem !important;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--dyd-navy);
	margin: 0 0 .55em !important;
}
.dyd-tagline { font-size: .93rem !important; color: var(--dyd-body-soft); }
.dyd-lead { font-size: 1.06rem !important; }
/* Opening paragraph under a hero H1 — slightly larger, with a hairline
   above it so it reads as an introduction rather than body copy. */
.dyd-intro {
	color: var(--dyd-body);
	padding-top: .9em;
	border-top: 1px solid var(--dyd-rule);
	margin-top: 1.1em !important;
}
.dyd-center { text-align: center; }

/* =========================================================
   6. BUTTONS
   ========================================================= */

.dyd .dyd-btn > .wp-block-button__link,
.dyd .wp-block-button__link.dyd-btn,
.dyd a.dyd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	background: var(--dyd-accent);
	color: #fff !important;
	font-family: var(--dyd-font-body);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.3;
	padding: .85em 1.7em;
	border: 0;
	border-radius: 999px;
	text-decoration: none;
	transition: background .18s ease, transform .18s ease;
}
.dyd .dyd-btn > .wp-block-button__link:hover,
.dyd .wp-block-button__link.dyd-btn:hover,
.dyd a.dyd-btn:hover { background: var(--dyd-accent-dark); transform: translateY(-1px); }
.dyd .dyd-btn > .wp-block-button__link::after,
.dyd a.dyd-btn::after { content: "\2192"; font-size: 1.05em; line-height: 1; }
.dyd .dyd-btn--plain > .wp-block-button__link::after { content: none; }

/* Wide squared all-caps button (orange home page cards) */
.dyd .wp-block-button.dyd-btn-wide { width: 100%; }
.dyd .dyd-btn-wide > .wp-block-button__link,
.dyd .wp-block-button__link.dyd-btn--wide {
	width: 100%;
	border-radius: 6px;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: .86rem;
	padding: 1.05em 1.3em;
	text-align: center;
}

/* =========================================================
   7. ICONS
   ========================================================= */

/* Large icons that already carry their own tinted circle */
.dyd-icon-lg img, img.dyd-icon-lg {
	width: clamp(74px, 8vw, 92px);
	height: auto;
	display: block;
	margin-inline: auto;
}
/* Small line icons with no background */
.dyd-icon-sm img, img.dyd-icon-sm {
	width: 42px; height: 42px; display: block;
}
.dyd-icon-lg.wp-block-image, .dyd-icon-sm.wp-block-image { margin: 0 0 1.2em; }
.dyd-icon-lg.wp-block-image { margin-inline: auto; }

/* =========================================================
   8. FEATURE / QUESTION COLUMNS
   ========================================================= */

.dyd-features.wp-block-columns { margin-block: 0; }
.dyd-features .wp-block-column { text-align: center; }
.dyd-features h3 { font-size: 1.18rem; margin-bottom: .45em; }
.dyd-features p { font-size: .93rem; line-height: 1.6; }

/* Hairline dividers between question columns */
.dyd-divided.wp-block-columns { gap: 0 !important; }
.dyd-divided > .wp-block-column { padding-inline: clamp(14px, 2vw, 26px); }
.dyd-divided > .wp-block-column + .wp-block-column { border-left: 1px solid var(--dyd-rule); }

/* Left-aligned feature rows (tools / benefits) */
.dyd-features--left .wp-block-column { text-align: left; }
.dyd-features--left .dyd-icon-lg img,
.dyd-features--left .dyd-icon-sm img { margin-inline: 0; }

/* =========================================================
   9. FOUR-STEP FLOW WITH ARROWS
   ========================================================= */

.dyd-flow .wp-block-column { position: relative; text-align: center; }
.dyd-flow .wp-block-column:not(:last-child)::after {
	content: "\2192";
	position: absolute;
	top: clamp(26px, 3.2vw, 38px);
	right: 0;
	transform: translateX(calc(50% + .4em));
	color: var(--dyd-navy);
	font-size: 1.3rem;
	line-height: 1;
	pointer-events: none;
}
.dyd-flow .dyd-label { margin-top: 1.2em !important; }

/* Numbered steps (home page) */
.dyd-steps .wp-block-column { position: relative; }
.dyd-steps .dyd-step-head {
	display: flex;
	align-items: baseline;
	gap: .5em;
	margin-bottom: .3em;
}
.dyd-steps .dyd-step-head h3 { margin-bottom: 0; }
.dyd-steps .dyd-stepnum {
	font-family: var(--dyd-font-serif);
	font-size: 2.5rem;
	line-height: 1;
	color: var(--dyd-navy);
	font-weight: 600;
	margin: 0 0 .1em !important;
}
.dyd-steps h3 { margin-bottom: .3em; }
.dyd-steps p { font-size: .93rem; }
.dyd-steps .wp-block-column:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 34px; right: 0;
	width: calc(100% - 90px);
	height: 1px;
	background: var(--dyd-rule);
	transform: translateX(calc(50% + 8px));
}

/* =========================================================
   10. CARDS
   ========================================================= */

.dyd-card { padding: clamp(22px, 2.8vw, 34px); border-radius: 4px; height: 100%; }
.dyd-card h2 { font-size: clamp(1.35rem, 2vw, 1.75rem); margin-bottom: .45em; }
.dyd-card .wp-block-image { margin-bottom: 0; }
.dyd-card img { border-radius: 3px; }

/* =========================================================
   11. LESSON LIST (About page)
   ========================================================= */

.dyd-lessons .wp-block-columns { margin-block: 0 1.5em; gap: 1.1em !important; align-items: flex-start; }
.dyd-lessons .wp-block-column:first-child { flex-basis: 46px !important; flex-grow: 0; }
.dyd-lessons h4 {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--dyd-navy);
	margin: 0 0 .35em;
}
.dyd-lessons p { font-size: .9rem; line-height: 1.55; }

/* =========================================================
   12. QUOTES
   ========================================================= */

.dyd-quote .dyd-quote-mark {
	font-family: var(--dyd-font-serif);
	font-size: 3.4rem !important;
	line-height: .75;
	color: var(--dyd-accent);
	opacity: .45;
	margin: 0 0 .12em !important;
}
.dyd-quote .dyd-quote-text {
	font-family: var(--dyd-font-serif) !important;
	font-size: clamp(1.02rem, 1.45vw, 1.24rem) !important;
	font-style: italic;
	line-height: 1.58;
	color: var(--dyd-navy);
}
.dyd-quote .dyd-cite {
	font-family: var(--dyd-font-body) !important;
	font-size: .76rem !important;
	font-style: normal;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--dyd-body-soft);
	margin-top: 1.2em !important;
}
.dyd-quote--center { text-align: center; }

/* =========================================================
   12a. FREE GUIDE / EMAIL CAPTURE  (Home page)

   Two columns: the guide cover on the left, the pitch plus the signup
   form on the right. The form itself is a MailPoet Form block dropped
   into .dyd-guide-form — see the MailPoet notes at the end of this
   section for why the selectors are written the way they are.
   ========================================================= */

/* The white box the whole offer sits in */
.dyd-guide-box {
	background: #fff;
	border-radius: 8px;
	padding: clamp(26px, 3.4vw, 46px) !important;
	box-shadow: 0 10px 34px rgba(23, 59, 143, .07);
}
.dyd-guide-box > .wp-block-columns { margin-block: 0; }

.dyd-guide-row.wp-block-columns { gap: clamp(28px, 4vw, 56px) !important; align-items: center; }
.dyd-guide-row > .wp-block-column { align-self: center !important; }

.dyd-guide-cover img {
	display: block;
	width: 100%;
	max-width: 380px;
	height: auto;
	margin-inline: auto;
	border-radius: 4px;
	box-shadow: 0 18px 44px rgba(23, 59, 143, .18), 0 4px 12px rgba(23, 59, 143, .10);
}
.dyd-guide-cover .wp-block-image { margin: 0; }

.dyd-guide-copy h2 {
	font-size: clamp(1.3rem, 2.1vw, 1.75rem);
	line-height: 1.28;
	margin: 0 0 .6em;
}
.dyd-guide-copy p { margin-bottom: 1em; }
.dyd-guide-copy > *:first-child { margin-top: 0 !important; }
.dyd-guide-copy > *:last-child { margin-bottom: 0 !important; }

/* Fine print under the form */
.dyd-fine {
	font-size: .8rem !important;
	line-height: 1.5;
	color: var(--dyd-body-soft);
	margin: 1em 0 0 !important;
}

/* The editor-only placeholder that stands in for the MailPoet block.
   Delete the block once the real form is in; this rule is the safety net
   for an emptied-but-not-deleted placeholder, which otherwise renders as a
   bare dashed box above the form. */
.dyd-guide-form:has(.mailpoet_form) .dyd-placeholder,
.dyd-guide-form:has(form) .dyd-placeholder { display: none !important; }

.dyd-placeholder {
	border: 2px dashed var(--dyd-accent);
	border-radius: 6px;
	background: rgba(255, 255, 255, .6);
	padding: 1em 1.1em;
	font-size: .84rem !important;
	line-height: 1.5;
	color: var(--dyd-body-soft);
	margin: 0 !important;
}

/* ---------- MailPoet form, scoped to this section ----------
   MailPoet renders its own markup and its class names have changed between
   versions, so the load-bearing selectors below target element TYPES inside
   .dyd-guide-form. The .mailpoet_* class selectors are belt and braces: if
   MailPoet renames something, the element selectors still hold the design
   together. Nothing here leaks outside .dyd-guide-form, so any other
   MailPoet form on the site is untouched. */

.dyd-guide-form { margin: 1.4em 0 0; }
.dyd-guide-form form,
.dyd-guide-form .mailpoet_form {
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Stack the fields, kill MailPoet's own column widths */
.dyd-guide-form .mailpoet_form_columns,
.dyd-guide-form .mailpoet_column_with_background { display: block !important; width: 100% !important; }
.dyd-guide-form .mailpoet_paragraph { margin: 0 0 .7em !important; }
.dyd-guide-form .mailpoet_paragraph:last-of-type { margin-bottom: 0 !important; }

/* Labels — MailPoet can be set to show them or to use placeholders only */
.dyd-guide-form label,
.dyd-guide-form .mailpoet_text_label,
.dyd-guide-form .mailpoet_email_label {
	display: block;
	font-family: var(--dyd-font-body) !important;
	font-size: .78rem !important;
	font-weight: 600 !important;
	letter-spacing: .04em;
	color: var(--dyd-navy) !important;
	margin-bottom: .35em !important;
}

/* Text inputs */
.dyd-guide-form input[type="text"],
.dyd-guide-form input[type="email"],
.dyd-guide-form input[type="tel"],
.dyd-guide-form select,
.dyd-guide-form textarea,
.dyd-guide-form .mailpoet_text,
.dyd-guide-form .mailpoet_textarea,
.dyd-guide-form .mailpoet_select {
	/* !important throughout: MailPoet scopes its own field CSS by form ID
	   (#mailpoet_form_1 …), which outranks these class selectors. Without
	   !important, MailPoet's Styles panel (input padding, border size, border
	   radius) wins and the fields stop matching the page. */
	width: 100% !important;
	box-sizing: border-box !important;
	font-family: var(--dyd-font-body) !important;
	font-size: .95rem !important;
	line-height: 1.4 !important;
	color: var(--dyd-body) !important;
	background: #fff !important;
	border: 1px solid var(--dyd-rule) !important;
	border-radius: 6px !important;
	padding: .8em 1em !important;
	margin: 0 !important;
	box-shadow: none !important;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.dyd-guide-form input[type="text"]:focus,
.dyd-guide-form input[type="email"]:focus,
.dyd-guide-form textarea:focus,
.dyd-guide-form select:focus {
	outline: 0;
	border-color: var(--dyd-accent) !important;
	box-shadow: 0 0 0 3px rgba(245, 107, 26, .18) !important;
}
.dyd-guide-form ::placeholder { color: var(--dyd-body-soft); opacity: 1; }

/* Submit button — matches .dyd-btn-wide on the cards */
.dyd-guide-form input[type="submit"],
.dyd-guide-form button[type="submit"],
.dyd-guide-form .mailpoet_submit {
	display: block !important;
	width: 100% !important;
	font-family: var(--dyd-font-body) !important;
	font-size: .86rem !important;
	font-weight: 600 !important;
	line-height: 1.3;
	letter-spacing: .04em !important;
	text-transform: uppercase !important;
	text-align: center !important;
	color: #fff !important;
	background: var(--dyd-accent) !important;
	border: 0 !important;
	border-radius: 6px !important;
	padding: 1.05em 1.3em !important;
	margin: 0 !important;
	cursor: pointer;
	transition: background .18s ease, transform .18s ease;
}
.dyd-guide-form input[type="submit"]:hover,
.dyd-guide-form button[type="submit"]:hover,
.dyd-guide-form .mailpoet_submit:hover {
	background: var(--dyd-accent-dark) !important;
	/* deliberately no translateY here: the wrapper below clips this button,
	   so lifting it 1px would expose a hairline gap along the bottom edge. */
}

/* MailPoet writes `border-radius:0px !important` as an INLINE style on the
   submit input. Inline !important sits at the top of the cascade, so no
   stylesheet rule can beat it — the `border-radius` above is ignored on a
   real MailPoet form. Rounding the paragraph that wraps the button and
   clipping it produces the same result without fighting the cascade. The
   button carries no margin (see above) so the clip box hugs it exactly.
   You can also set Border radius to 6 in MailPoet's Styles panel; this
   works whether you do or not. */
.dyd-guide-form .mailpoet_paragraph:has(> .mailpoet_submit),
.dyd-guide-form .mailpoet_paragraph:has(> input[type="submit"]),
.dyd-guide-form .mailpoet_paragraph.last {
	border-radius: 6px;
	overflow: hidden;
}

/* MailPoet's validation and confirmation messages */
.dyd-guide-form .mailpoet_validate_success,
.dyd-guide-form .mailpoet_validate_error {
	font-family: var(--dyd-font-body);
	font-size: .85rem;
	line-height: 1.5;
	margin-top: .8em;
}
.dyd-guide-form .mailpoet_validate_success { color: #1d7a4c; }
.dyd-guide-form .mailpoet_validate_error { color: #b3341f; }

/* MailPoet ships a reCAPTCHA / checkbox row in some setups */
.dyd-guide-form .mailpoet_checkbox_label,
.dyd-guide-form .mailpoet_radio_label {
	display: flex;
	align-items: flex-start;
	gap: .5em;
	font-size: .82rem;
	font-weight: 400;
	color: var(--dyd-body-soft);
	letter-spacing: 0;
}

/* =========================================================
   13. POLAROID
   ========================================================= */

.dyd-polaroid.wp-block-image {
	background: #fff;
	padding: 10px 10px 14px;
	box-shadow: 0 8px 26px rgba(23, 59, 143, .16);
	transform: rotate(-1.4deg);
	margin-bottom: 1.6em;
}
.dyd-polaroid.wp-block-image img { display: block; width: 100%; border-radius: 0; }

/* =========================================================
   14. SCENIC CTA (core/cover)
   ========================================================= */

.dyd-scenic.wp-block-cover { min-height: clamp(280px, 34vw, 420px); padding: clamp(40px, 6vw, 80px) var(--dyd-pad); }
.dyd-scenic .wp-block-cover__inner-container { max-width: var(--dyd-max); margin-inline: auto; width: 100%; }
.dyd-scenic h2, .dyd-scenic p:not(.dyd-script) { color: var(--dyd-navy); }
.dyd-scenic .dyd-script { color: var(--dyd-script); }

/* Thin scenic band with a single line of handwriting */
.dyd-band.wp-block-cover { min-height: clamp(150px, 20vw, 230px); }
.dyd-band .wp-block-cover__inner-container { text-align: center; }

/* =========================================================
   15. PAGE TITLE
   The WordPress page title comes from the theme's page template, not from the
   pattern. The proper fix is to set the page's template to "DYD Full Width
   (no page title)". This rule is the belt-and-braces version, so a DYD page
   looks right even before that template is selected.

   Scoped to .wp-site-blocks, which only exists on the front end, so the title
   field inside the block editor is untouched. Delete this rule if you ever
   want the title back.
   ========================================================= */

.wp-site-blocks:has(.dyd) .wp-block-post-title { display: none; }

/* =========================================================
   16. FOOTER GAP
   Course's "Wide - No Featured Image, No Title" template puts an inline
   margin-bottom:80px on <main>. Every DYD page ends in a full-bleed section
   (a scenic call to action on four of the five), so that margin shows up as a
   band of page background between the section and the site footer.

   !important is needed only because the margin is an inline style on the
   template's own markup, which a stylesheet can't otherwise beat.
   ========================================================= */

.wp-site-blocks main:has(.dyd) { margin-bottom: 0 !important; }

/* =========================================================
   17. RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
	.dyd-divided > .wp-block-column { padding-inline: clamp(10px, 1.5vw, 18px); }
}

@media (max-width: 980px) {
	.dyd-flow .wp-block-column::after,
	.dyd-steps .wp-block-column::after { display: none; }
}

/* Core columns stack at 781px. Match our custom pieces to that. */
@media (max-width: 781px) {
	.dyd-divided > .wp-block-column + .wp-block-column {
		border-left: 0;
		border-top: 1px solid var(--dyd-rule);
		padding-block: 1.4em;
	}
	.dyd-media-col { min-height: 260px; max-height: 380px; }
	.dyd-copy-col { padding: clamp(28px, 7vw, 44px) var(--dyd-pad); }
	/* Keep the handwriting on the photo rather than letting it fall into
	   the media column's flow, where overflow:hidden would clip it. */
	.dyd-script-over {
		top: auto;
		bottom: clamp(12px, 4%, 24px);
		right: auto;
		left: clamp(12px, 4%, 24px);
		max-width: calc(100% - 24px);
		text-align: left;
	}
	.dyd-guide-cover img { max-width: 280px; }
	.dyd-guide-row.wp-block-columns { gap: clamp(22px, 6vw, 34px) !important; }
	.dyd-lessons .wp-block-column:first-child { flex-basis: 46px !important; }
	.dyd-scenic.wp-block-cover { min-height: 0; padding-block: clamp(36px, 9vw, 56px); }
	/* On a split row where copy comes first in the markup but the design
	   shows the photo on top, add .dyd-split--photo-first to the columns. */
	.dyd-split--photo-first { flex-direction: column-reverse !important; }
}

@media (max-width: 599px) {
	.dyd-lessons .wp-block-columns { gap: .8em !important; }
}