/*
 * Prose styling for core-block content.
 *
 * The compiled Tailwind bundle is frozen, so it only knows the utility
 * classes the v4 markup uses. Content written in the block editor emits plain
 * h2/p/ul/blockquote with no utilities at all — this file gives those
 * elements the same look by selecting on the element instead, using the
 * bundle's own design tokens so the two can never disagree about a colour.
 *
 * Scope: everything lives under .dr-prose. Nothing here may leak out and
 * restyle the designed sections.
 */

.dr-prose {
	color: var(--foreground);
	font-size: .8rem;
	line-height: 1.625;
}

.dr-prose > * + * {
	margin-top: 1.5rem;
}

/* Headings use the display face, matching the v4 legal and about pages. */
.dr-prose h2 {
	font-family: "Sofia Sans", sans-serif;
	font-size: 1.2rem;
	font-weight: 900;
	line-height: 1.6rem;
	text-transform: uppercase;
	margin-top: 2.5rem;
}

.dr-prose h3 {
	font-family: "Sofia Sans", sans-serif;
	font-size: 1rem;
	font-weight: 900;
	line-height: 1.4rem;
	text-transform: uppercase;
	margin-top: 2rem;
}

.dr-prose h4 {
	font-weight: 800;
	font-size: .9rem;
	margin-top: 1.5rem;
}

.dr-prose h2 + *,
.dr-prose h3 + *,
.dr-prose h4 + * {
	margin-top: .75rem;
}

.dr-prose p,
.dr-prose li {
	color: var(--muted-foreground);
	line-height: 1.625;
}

/* The opening paragraph reads as a lead, as it does on the v4 pages. */
.dr-prose > p:first-child {
	font-size: .9rem;
	line-height: 1.4rem;
}

.dr-prose a {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.dr-prose a:hover {
	color: var(--accent);
}

.dr-prose strong {
	color: var(--foreground);
	font-weight: 700;
}

.dr-prose ul,
.dr-prose ol {
	padding-inline-start: 1.25rem;
}

.dr-prose ul {
	list-style: disc;
}

.dr-prose ol {
	list-style: decimal;
}

.dr-prose li + li {
	margin-top: .5rem;
}

.dr-prose li::marker {
	color: var(--accent);
}

.dr-prose blockquote {
	border-inline-start: 2px solid var(--accent);
	padding-inline-start: 1.25rem;
	font-family: "Sofia Sans", sans-serif;
	font-size: 1.2rem;
	font-weight: 900;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--foreground);
}

.dr-prose img,
.dr-prose figure img {
	border-radius: .125rem;
	width: 100%;
	height: auto;
}

.dr-prose figcaption {
	color: var(--muted-foreground);
	font-size: .7rem;
	margin-top: .5rem;
}

.dr-prose hr {
	border: 0;
	border-top: 1px solid var(--border);
	margin-block: 2.5rem;
}

/* Tables can out-run a phone; let them scroll rather than break the page. */
.dr-prose .wp-block-table {
	overflow-x: auto;
}

.dr-prose table {
	border-collapse: collapse;
	width: 100%;
	font-size: .7rem;
}

.dr-prose th,
.dr-prose td {
	border: 1px solid var(--border);
	padding: .5rem .75rem;
	text-align: start;
}

.dr-prose th {
	font-weight: 700;
	background: var(--sand);
}

/* The editor canvas gets the same treatment, so what the agency sees while
   typing is what the page will look like. */
.editor-styles-wrapper .block-editor-block-list__layout {
	color: var(--foreground);
}

/*
 * Contact Form 7 fields.
 *
 * Styled against the plugin's own classes rather than by putting design
 * classes in the form definition: CF7's class: option takes only the first
 * token of a spaced value and strips the dot from mt-0.5, so this design
 * system cannot be expressed there at all. Doing it here also means the
 * agency can rewrite the form in wp-admin without it losing its appearance.
 *
 * Values mirror the inquiry form in the approved design.
 */

.dr-form .wpcf7-form-control:not([type="submit"]):not([type="checkbox"]) {
	display: flex;
	width: 100%;
	height: 2.25rem;
	padding: .25rem .75rem;
	border: 1px solid var(--input);
	border-radius: .375rem;
	background: transparent;
	color: var(--foreground);
	font: inherit;
	font-size: .8rem;
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
	transition: border-color .15s, box-shadow .15s;
}

.dr-form textarea.wpcf7-form-control {
	min-height: 6rem;
	height: auto;
	padding: .5rem .75rem;
	line-height: 1.6;
}

.dr-form .wpcf7-form-control:not([type="submit"]):focus-visible {
	outline: none;
	border-color: var(--ring);
	box-shadow: 0 0 0 1px var(--ring);
}

.dr-form .wpcf7-form-control::placeholder {
	color: var(--muted-foreground);
}

/* The contact form's checkbox is a size larger than the trip form's, which
   is what the approved contact page uses (mt-1 size-5). */
.dr-form input[type="checkbox"] {
	margin-top: .25rem;
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	accent-color: var(--accent);
}

.dr-form .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	height: 2.5rem;
	padding-inline: 2rem;
	border: 0;
	border-radius: .375rem;
	background: var(--primary);
	color: var(--primary-foreground);
	font-weight: 500;
	font-size: .7rem;
	cursor: pointer;
	white-space: nowrap;
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1);
	transition: opacity .15s;
}

.dr-form .wpcf7-submit:hover {
	opacity: .9;
}

.dr-form .wpcf7-submit:disabled {
	opacity: .5;
	cursor: not-allowed;
}

/*
 * Contact Form 7.
 *
 * The field markup carries the design's own classes, passed through CF7's
 * class: option, so inputs already look right. What is left is the plugin's
 * own furniture — the response box, the inline error tips, the spinner and
 * the wrapper it puts around an acceptance checkbox — none of which the
 * frozen bundle knows about. Scoped to .dr-form so nothing leaks.
 */

.dr-form .wpcf7-form > p:empty,
.dr-form .wpcf7-form p:empty {
	display: none;
}

.dr-form .wpcf7-spinner {
	display: none;
}

.dr-form .wpcf7-form.submitting .wpcf7-spinner {
	display: inline-block;
	margin-inline-start: .5rem;
	width: .9rem;
	height: .9rem;
	border: 2px solid var(--muted-foreground);
	border-top-color: transparent;
	border-radius: 50%;
	animation: dr-spin .8s linear infinite;
}

@keyframes dr-spin {
	to { transform: rotate(360deg); }
}

/* The plugin's acceptance tag wraps its checkbox in two spans. */
.dr-form .wpcf7-list-item {
	margin: 0;
}

.dr-form .wpcf7-list-item-label {
	font-weight: 400;
}

/* Inline field errors. */
.dr-form .wpcf7-not-valid-tip {
	color: var(--destructive);
	font-size: .7rem;
	font-weight: 600;
	margin-top: .25rem;
}

.dr-form .wpcf7-not-valid {
	border-color: var(--destructive);
}

/* The message the plugin shows after a submission. */
.dr-form .wpcf7-response-output {
	border: 1px solid var(--border);
	border-radius: .375rem;
	padding: .75rem 1rem;
	margin: 1.5rem 0 0;
	font-size: .7rem;
	line-height: 1.6;
}

.dr-form form.sent .wpcf7-response-output {
	border-color: var(--status-new);
	color: var(--status-new);
}

.dr-form form.invalid .wpcf7-response-output,
.dr-form form.failed .wpcf7-response-output,
.dr-form form.spam .wpcf7-response-output {
	border-color: var(--destructive);
	color: var(--destructive);
}

.dr-form label {
	display: grid;
	gap: .5rem;
}

.dr-form .flex label,
.dr-form label.flex {
	display: flex;
}

/* ---------------------------------------------------------------------------
 * Article prose
 *
 * A blog post is read, not scanned. The approved build sets its body one step
 * up from the base size — section-shell max-w-3xl py-16 text-lg leading-relaxed
 * — with larger headings to match, while the legal pages stay at the base
 * size. .dr-prose carries the base; this modifier carries the article.
 * ------------------------------------------------------------------------ */

.dr-prose-lg {
	font-size: var(--text-lg);
	line-height: 1.625;
}

.dr-prose-lg h2 {
	font-size: var(--text-3xl);
	line-height: 1.9rem;
	margin-top: 2.5rem;
}

.dr-prose-lg h3 {
	font-size: var(--text-2xl);
	line-height: 1.6rem;
	margin-top: 2rem;
}

.dr-prose-lg h4 {
	font-size: var(--text-xl);
}

/* The opening paragraph is the standfirst, as it is on the v4 post. */
.dr-prose-lg > p:first-child {
	font-size: var(--text-xl);
	font-weight: 600;
	line-height: 1.5rem;
}

.dr-prose-lg > * + * {
	margin-top: 1.25rem;
}

.dr-prose-lg h2 + *,
.dr-prose-lg h3 + *,
.dr-prose-lg h4 + * {
	margin-top: 1rem;
}

/* ---------------------------------------------------------------------------
 * The home hero photograph
 *
 * It is a 16:9 picture in a container far wider than that, so object-cover
 * crops it top and bottom. Centred, that crop cuts the logo and the "Group
 * Trips" line straight off the top of the artwork. Anchoring to the top keeps
 * them: what is lost instead is the foot of the picture, which the headline
 * and the button already cover.
 *
 * The frozen bundle ships no object-position utility, so the rule lives here.
 * ------------------------------------------------------------------------ */

.dr-hero-photo {
	object-position: center top;
}