/**
 * Component styles.
 *
 * Everything here refers to the variables in tokens.css and never writes a raw
 * design value of its own. If you find yourself typing a hex code or a pixel
 * measurement in this file, it probably belongs in tokens.css instead.
 *
 * Loaded in the front end and in the editor canvas (see functions.php) so blocks
 * look the same in both.
 */

/* --------------------------------------------------------------------------
   Body copy is justified.

   Deliberately a bare element selector. Editor styles get their selectors
   prefixed with the canvas wrapper, so "p" keeps matching there and the editor
   shows the same justification as the front end — scoping this to
   .wp-block-post-content, as the previous theme did, meant it only ever
   appeared on the front end.

   Specificity is doing real work here: at (0,0,1) this loses to WordPress's own
   .has-text-align-* classes, so setting a paragraph centred, left or right in
   the editor just works, with no opt-out rule needed. Headings are untouched.

   Do NOT add `text-align-last` here. WordPress's alignment classes set only
   `text-align`, so a `text-align-last: left` survives them and left-aligns the
   last line of a centred or right-aligned paragraph — and since a single-line
   paragraph's only line IS its last line, it silently defeats the alignment
   entirely (a centred one-word label renders left). The initial value, `auto`,
   is already correct: it follows `text-align`, except under `justify`, where it
   start-aligns the last line, which is what justified copy wants.

   Justified text needs a decent measure to avoid rivers, which is why
   contentSize is 40rem rather than the ~34rem the mockup measures.
   -------------------------------------------------------------------------- */
p {
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
}

/* --------------------------------------------------------------------------
   Wordmark — the FLAVIA CATENA lockup. Set as an h1 on the home page and as a
   link in the footer, so it is a class rather than an element rule.
   -------------------------------------------------------------------------- */
.fc-wordmark {
	font-family: var(--fc-font-wordmark);
	font-weight: var(--fc-weight-wordmark);
	line-height: var(--fc-leading-display);
	letter-spacing: var(--fc-tracking-wordmark);
	text-transform: uppercase;
}

/*
 * The page lockup — the h1 on the home page, as against the single-line brand
 * runs in the nav and footer, which are <p class="fc-wordmark">. Scoping by
 * element keeps the two apart without a modifier class.
 */
h1.fc-wordmark {
	/* The two-line break comes from a <br> in the heading content, not from
	   anything here. */
	font-size: var(--fc-size-wordmark);
}

/* The single-line brand runs in the nav and footer. At their much smaller size a
   300 weight goes spindly, so they take the regular cut. */
p.fc-wordmark {
	font-weight: 400;
}

/* --------------------------------------------------------------------------
   Label — the small uppercase run used for PORTFOLIOS, KIND WORDS, captions
   and the nav.
   -------------------------------------------------------------------------- */
.fc-label {
	font-family: var(--fc-font-label);
	font-size: var(--fc-size-label);
	letter-spacing: var(--fc-tracking-label);
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Home page runs.
   -------------------------------------------------------------------------- */

/*
 * The banner photograph at the top of the home page — an ordinary full-width
 * core/image with this class added, so the photo itself stays swappable from
 * the editor.
 *
 * Height is set from the viewport rather than left to the photograph's own
 * ratio. At desktop widths a full-bleed 3:2 frame is most of a screen tall,
 * which pushed the wordmark and the opening paragraph below the fold; three
 * quarters of the viewport leaves the top of the page visible while the banner
 * still dominates it. The crop that costs is accepted — object-fit holds the
 * middle of the frame, which is where these photographs are composed.
 *
 * The selector names both classes on purpose. Core's block library sets
 * `.wp-block-image img { height: auto }` at the same specificity as a bare
 * `.fc-hero img` would have, and loads after the theme, so the tie goes to core
 * and the height is silently ignored.
 */
.wp-block-image.fc-hero img {
	display: block;
	width: 100%;
	height: var(--fc-hero-height);
	object-fit: cover;
	object-position: center;
}

/* The line that opens the About column. Same size as body copy in the mockup —
   it earns its emphasis from the space beneath it, not from a larger size. */
.fc-lead {
	margin-block-end: var(--fc-space-s);
}

/* The testimonial. It sits in an alignwide group so it starts at the gutter
   rather than centred, but the line itself is held to a readable measure — a
   longer quote would otherwise run the full 78rem. */
.fc-kind-words {
	max-width: 34rem;
}

/* The closing call to action. The wide break before it is now carried by the
   feather divider block that precedes it, so this only needs to clear the mark
   itself. If that block is ever removed, raise this back to xxl. */
.fc-cta {
	margin-block-start: var(--fc-space-l);
}


/* --------------------------------------------------------------------------
   About page — the portrait beside the copy.

   The photo is an ordinary core/image set to "align right", which core renders
   as a float: the copy runs down its left, then closes underneath it once it
   passes the bottom. That is the point of a float here rather than a two-column
   group, which would leave a hard column edge and a tall empty gap whenever the
   text outran or fell short of the photo.

   Both rules name the block class as well as ours. Core's float and margins are
   written as a bare `.alignright`, and core's stylesheet loads after the
   theme's, so a single-class selector here would either tie or lose.
   -------------------------------------------------------------------------- */
.wp-block-image.fc-portrait {
	/* A fixed share of the column rather than the photo's own size, so the
	   measure left for the copy beside it does not depend on which portrait is
	   in the slot. The percentage takes over on narrow screens, before the
	   float is dropped altogether. */
	width: min(20rem, 40%);
	margin-inline-start: var(--fc-space-l);
	margin-block: 0 var(--fc-space-s);
}

/* Below the breakpoint the column is too narrow to carry both, so the photo
   takes the full width and the copy simply follows it. */
@media (max-width: 47.999em) {
	.wp-block-image.fc-portrait {
		float: none;
		width: 100%;
		margin-inline-start: 0;
		margin-block-end: var(--fc-space-m);
	}
}

/* --------------------------------------------------------------------------
   Navigation bar.

   Sits between the hero and the wordmark on the home page, and at the very top
   of every other page. Full-bleed hairline, links aligned to the page gutter.
   The gutter is applied here rather than relying on WordPress's root-padding
   alignment handling, which behaves differently depending on whether the block
   is nested in a constrained parent.
   -------------------------------------------------------------------------- */
.fc-nav {
	padding-inline: var(--fc-gutter);
	padding-block: var(--fc-space-xs);
	border-bottom: 1px solid var(--fc-color-contrast);
}

/*
 * The bar sits flush against whatever precedes it.
 *
 * On the home page it is a template-part nested inside post-content, so it is a
 * sibling of the hero and WordPress's blockGap gives it a 32px top margin. That
 * put 48px above the links against 16px below — the bar's own padding is
 * symmetric, but the block gap sits outside it, so it just read as a mistake.
 * Inner pages never showed it, the bar being the template's first child.
 */
header.wp-block-template-part {
	margin-block-start: 0;
}

/*
 * The brand mark that opens the bar: the feather, then FLAVIA CATENA linking
 * home. Set apart from the menu by the group's own blockGap.
 */
.fc-nav__wordmark {
	position: relative;
	display: flex;
	align-items: center;
	/* Room for the mark, which is positioned into this gutter. */
	padding-inline-start: 2.1em;
	/* Holds the bar open on the front page, where the link is hidden and this
	   paragraph would otherwise collapse to nothing and take the mark with it. */
	min-height: 1.15em;
	font-family: var(--fc-font-wordmark);
	font-size: var(--fc-size-body);
	letter-spacing: var(--fc-tracking-wordmark);
	text-transform: uppercase;
	white-space: nowrap;

	/*
	 * line-height 1 keeps this run's box inside the menu's 19px, so the bar's
	 * height is set by the menu alone rather than by the tallest item here. The
	 * feather is sized to stay under that ceiling too. All caps, so there are no
	 * descenders to clip.
	 */
	line-height: 1;
}

/*
 * The feather. On the paragraph rather than inside the anchor, so it is a mark
 * and not a target — clicking it does nothing. A background on a pseudo-element
 * keeps it decorative and out of the accessibility tree, which is right: the
 * link beside it already says where it goes.
 */
.fc-nav__wordmark::before {
	content: "";
	/*
	 * Positioned rather than in flow. As a flex item it would be the tallest
	 * thing in the bar and set its height, which caps a legible size at about
	 * 19px — too small for line-work this fine. Out of flow it can be half again
	 * as large while the bar stays exactly as tall as its menu.
	 */
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 50%;
	translate: 0 -50%;
	width: 1.6em;
	height: 1.6em;
	background: var(--fc-feather) no-repeat center / contain;
}

/*
 * On the front page the *link* goes but the feather stays. The words would sit
 * a few centimetres above the identical lockup in the page itself and point at
 * the page you are already on; the mark carries the brand on its own.
 *
 * This keys off the `home` class WordPress puts on <body> via body_class() when
 * is_front_page() is true — present on / and absent everywhere else, checked in
 * the rendered output. Doing it in CSS keeps parts/header.html the single source
 * for the nav; a second header part, or the bar rebuilt per template, would
 * duplicate the menu itself.
 *
 * display:none rather than a visual-only hide is deliberate: the link is
 * genuinely redundant there, so it should leave the accessibility tree too.
 */
.home .fc-nav__wordmark a {
	display: none;
}

.fc-nav__wordmark a {
	text-decoration: none;
}

.fc-nav__wordmark a:hover,
.fc-nav__wordmark a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1px;
}

.fc-nav .wp-block-navigation-item__content {
	font-family: var(--fc-font-label);
	font-size: var(--fc-size-label);
	letter-spacing: var(--fc-tracking-label);
	text-transform: uppercase;
	text-decoration: none;
}

.fc-nav .wp-block-navigation-item__content:hover,
.fc-nav .wp-block-navigation-item__content:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.4em;
	text-decoration-thickness: 1px;
}

/* Portfolio dropdown. Square, bone, hairline — no shadow or radius. */
.fc-nav .wp-block-navigation__submenu-container {
	background-color: var(--fc-color-base);
	border: 1px solid var(--fc-color-contrast);
	border-radius: 0;
	padding-block: var(--fc-space-xs);
}

.fc-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-inline: var(--fc-space-s);
	padding-block: 0.4em;
}

/* --------------------------------------------------------------------------
   Enquiry form (Contact Form 7).

   Everything is scoped under .wpcf7. The plugin ships almost no styling of its
   own, so what a visitor otherwise sees is the browser's default widgets —
   rounded grey boxes that belong to no design at all. These rules put the form
   in the same language as the rest of the site: hairline rules on bone, square
   corners, uppercase labels in the label font.

   Scoping matters more than usual here: site.css is loaded into the block
   editor canvas too, and bare `input`/`textarea`/`button` selectors would reach
   the editor's own furniture.
   -------------------------------------------------------------------------- */

.wpcf7 {
	margin-block-start: var(--fc-space-l);
}

/*
 * CF7 runs the form through wpautop, so every row arrives wrapped in a <p> that
 * it never asked for. Left alone those bring a 1em margin each — doubling the
 * gaps set below — and inherit the site-wide justification, which stretches a
 * two-word label across the column.
 */
.wpcf7 p {
	margin: 0;
	text-align: start;
	hyphens: manual;
}

/* The gap between fields. Wider than the theme's default block gap — a form is
   read as a sequence of separate questions, not as continuous prose. */
.fc-form-row {
	margin-block-end: var(--fc-space-m);
}

/*
 * Field labels, and the legend of the radio group, share the small uppercase
 * run used for the nav and captions. The label element wraps its input (that is
 * how the form is written in the CF7 editor), so the typography has to be reset
 * on the input below or it inherits caps and tracking.
 */
.fc-form-row label,
.fc-form-choices legend {
	display: block;
	font-family: var(--fc-font-label);
	font-size: var(--fc-size-label);
	letter-spacing: var(--fc-tracking-label);
	text-transform: uppercase;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
	display: block;
	width: 100%;
	/*
	 * The cap lives on the fields rather than on the form, so that the form
	 * itself still fills the column and its left edge lines up with the
	 * paragraph above it. Capping the form instead would leave it centred: a
	 * narrower-than-the-column child of a constrained layout gets
	 * `margin-inline: auto !important` from WordPress, which is not worth
	 * fighting. Text inputs also invite an answer as long as they are wide, and
	 * a name is not 40rem long.
	 */
	max-width: 30rem;
	margin-block-start: var(--fc-space-xs);
	padding: 0.7em 0.85em;
	/* Undo the label's caps and tracking, which would otherwise be inherited. */
	font-family: var(--fc-font-body);
	font-size: var(--fc-size-body);
	letter-spacing: normal;
	text-transform: none;
	line-height: var(--fc-leading-body);
	color: var(--fc-color-contrast);
	/* Transparent, not bone: the field then sits on whatever it is placed on. */
	background-color: transparent;
	border: 1px solid var(--fc-color-contrast);
	border-radius: 0;
	/* Safari rounds inputs and shades textareas regardless of the above. */
	-webkit-appearance: none;
	appearance: none;
}

.wpcf7 textarea {
	/* Only the message field is resizable, and only downwards — dragging it
	   wider would break it out of the column. */
	resize: vertical;
}

.wpcf7 input:focus-visible,
.wpcf7 textarea:focus-visible {
	outline: 1px solid var(--fc-color-contrast);
	outline-offset: 2px;
}

/* --- The "how did you find me" radio group ------------------------------- */

.fc-form-choices {
	/* A fieldset carries default border and padding in every browser. */
	margin: 0 0 var(--fc-space-m);
	padding: 0;
	border: 0;
}

.fc-form-choices .wpcf7-list-item {
	display: block;
	margin: var(--fc-space-xs) 0 0;
}

.fc-form-choices .wpcf7-list-item label {
	display: flex;
	align-items: baseline;
	gap: 0.6em;
	cursor: pointer;
}

/*
 * Custom radios. The native control cannot be given a hairline in the theme's
 * weight, so it is replaced: appearance:none leaves an empty box that is then
 * drawn as a ring, and the selected state fills its middle with an inset
 * shadow rather than a pseudo-element, which a replaced element cannot carry.
 *
 * Round, against the square corners used everywhere else in the theme. A
 * square radio reads as a checkbox, and losing that distinction costs more
 * than the consistency gains.
 */
.wpcf7 input[type="radio"] {
	flex: none;
	width: 0.85em;
	height: 0.85em;
	margin: 0;
	/* Nudges the ring onto the text baseline; radios have no baseline of their
	   own, so flex alignment puts their bottom edge on it. */
	transform: translateY(0.1em);
	border: 1px solid var(--fc-color-contrast);
	border-radius: 50%;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.wpcf7 input[type="radio"]:checked {
	box-shadow: inset 0 0 0 0.2em var(--fc-color-contrast);
}

.wpcf7 input[type="radio"]:focus-visible {
	outline: 1px solid var(--fc-color-contrast);
	outline-offset: 2px;
}

/*
 * The follow-up text field, which only concerns people who answered "Other".
 * form.js sets [hidden] on it and clears that when Other is chosen; with
 * scripting off the attribute is never set and the field simply stays visible,
 * which is why its label reads as a complete question on its own.
 */
.fc-form-referral-detail[hidden] {
	display: none;
}

/* --- Submit and messages -------------------------------------------------- */

.wpcf7 input[type="submit"] {
	padding: var(--fc-space-xs) var(--fc-space-s);
	font-family: var(--fc-font-label);
	font-size: var(--fc-size-label);
	letter-spacing: var(--fc-tracking-label);
	text-transform: uppercase;
	color: var(--fc-color-contrast);
	background-color: transparent;
	/* 1.5px to match theme.json's button element, which this deliberately
	   imitates — CF7's submit is a bare input, so none of that reaches it. */
	border: 1.5px solid var(--fc-color-contrast);
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 input[type="submit"]:focus-visible {
	color: var(--fc-color-base);
	background-color: var(--fc-color-contrast);
}

/* The spinner CF7 drops in beside the button while a message is in flight. */
.wpcf7 .wpcf7-spinner {
	margin-inline-start: var(--fc-space-xs);
}

/*
 * Per-field validation notes, and the summary line under the button.
 *
 * CF7 colours these red. The palette has two values and no third, so the error
 * state is carried by position and weight instead: the note sits directly under
 * the field it is about, and that field's rule thickens. Nothing here depends
 * on hue, which is the accessible way round in any case.
 */
.wpcf7 .wpcf7-not-valid-tip,
.wpcf7 .wpcf7-response-output {
	font-family: var(--fc-font-label);
	font-size: var(--fc-size-label);
	letter-spacing: var(--fc-tracking-label);
	text-transform: uppercase;
	color: var(--fc-color-contrast);
}

.wpcf7 .wpcf7-not-valid-tip {
	margin-block-start: var(--fc-space-xs);
}

.wpcf7 .wpcf7-not-valid {
	border-width: 2px;
}

.wpcf7 .wpcf7-response-output {
	margin: var(--fc-space-m) 0 0;
	padding: var(--fc-space-s);
	border: 1px solid var(--fc-color-contrast);
	border-radius: 0;
}

/* --------------------------------------------------------------------------
   Footer.
   -------------------------------------------------------------------------- */
.fc-footer {
	margin-block-start: var(--fc-space-xxl);
	padding-inline: var(--fc-gutter);
	padding-block: var(--fc-space-xl) var(--fc-space-l);
	border-top: 1px solid var(--fc-color-contrast);
}

.fc-footer .fc-wordmark {
	font-size: var(--fc-size-heading);
}

.fc-footer a {
	color: var(--fc-color-contrast);
}

/* The wordmark is a link, so the underline has to be taken off the anchor
   itself, not the paragraph that carries the .fc-wordmark class. */
.fc-footer .fc-wordmark a {
	text-decoration: none;
}

.fc-footer .fc-wordmark a:hover,
.fc-footer .fc-wordmark a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.fc-footer .wp-block-social-links {
	gap: var(--fc-space-xs);
}

/* Footer micro-copy opts out of justification: the columns are only 22rem, so
   stretching two short lines just opens gaps. Delete this to justify it too. */
.fc-footer p {
	text-align: start;
	hyphens: manual;
}

.fc-footer-colophon {
	margin-block-start: var(--fc-space-l);
	color: var(--fc-color-muted);
}