/*
 * MAF Portal — page chrome and brand skin that sits above the plugin's
 * functional CSS. Loads after the plugin's stylesheets, so equal-specificity
 * rules here win. Portal structure (grids, drawer, modals) stays in the plugin.
 *
 * 2027: brown page ground, black sidebar, white reading column, lilac for
 * every highlight. The one palette rule — white type never sits on lilac —
 * is enforced through --fm-color-on-accent in tokens.css.
 */

/* ---- Base ------------------------------------------------------------------ */

/* The page is a flex column so the portal fills exactly the viewport minus the
   masthead and the footer strip -- no hardcoded chrome heights, so it stays
   right at every breakpoint and if either one changes size later. */
body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var( --fm-color-ink );
	color: var( --fm-color-ink );
	font-family: var( --fm-font-body );
	line-height: 1.5;
}

.site-masthead,
.site-footer {
	flex: 0 0 auto;
}

/* Shared inner container: masthead and footer content align with the
   --site-max-width content frame below. */
.site-container {
	max-width: var( --site-max-width );
	margin: 0 auto;
	padding: 0 24px;
}

/* ---- Masthead -------------------------------------------------------------- *
 * Brown ground with the lockup centred. The lockup is an inline SVG whose paths
 * are fill="currentColor", so a single colour here drives the whole mark.
 */

.site-masthead {
	padding: 26px 0;
	background: var( --fm-color-ink );
}

.site-masthead .site-container {
	display: flex;
	flex-direction: column;
}

.site-masthead__home {
	display: block;
	align-self: center;
	width: min( 260px, 60vw );
	color: var( --fm-color-accent );
	text-decoration: none;
}

.site-masthead__home svg {
	display: block;
	width: 100%;
	height: auto;
}

/* The two facts that place a visitor: when the fair runs, and where. Sits under
   a hairline so the header reads as the top of a room sheet rather than as site
   chrome. Wraps to two lines on a narrow screen rather than shrinking. */
.site-masthead__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px 20px;
	flex-wrap: wrap;
	margin: 14px 0 0;
	padding: 9px 0;
	border-top: 1px solid rgba( 184, 171, 255, 0.32 );
	/* The venue is set in the heading face, white, so it reads as a peer of the
	   dates beside it rather than as fine print. */
	font-family: var( --fm-font-heading );
	font-size: 0.95rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

/* Below the portal breakpoint the two facts wrap onto their own lines, where
   space-between has nothing to distribute — centre them under the lockup, which
   is itself centred. */
@media only screen and (max-width: 767px) {
	.site-masthead__meta {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
}

.site-masthead__dates {
	font-family: var( --fm-font-accent );
	font-size: 0.86rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --fm-color-accent );
}

/* ---- Plain-page content ----------------------------------------------------- */

.site-main--theme {
	max-width: 900px;
	margin: 0 auto;
	padding: 32px 24px;
}

.site-main--theme .entry-title {
	font-family: var( --fm-font-heading );
	font-size: var( --fm-size-title );
	line-height: 1;
	letter-spacing: 0.005em;
	text-transform: uppercase;
}

/* ---- Footer ----------------------------------------------------------------- */

/* A shallow strip: the byline on the left, the fair's social icons on the
   right. Contained to the same --site-max-width frame as the portal above it, so
   the two align and the brown page ground shows either side. border-box because
   the 24px padding has to sit INSIDE that width, not add to it. */
.site-footer {
	box-sizing: border-box;
	width: 100%;
	max-width: var( --site-max-width );
	margin: 0 auto;
	padding: 24px 0;
	background: transparent;
	color: #fff;
}

/* The footer's inner container carries the same 24px gutter as the masthead's,
   so the credit and the lockup share one vertical. Credit left, socials right;
   below the portal breakpoint they stack, centred. */
.site-footer .site-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	max-width: none;
	padding: 0 24px;
}

@media only screen and (max-width: 767px) {
	.site-footer .site-container {
		flex-direction: column;
	}
}

/* Only the studio name is a link, and it is the only lilac thing here -- the
   "Portal powered by" half stays plain white. */
.site-footer__credit {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	color: #fff;
	font-size: 0.9rem;
}

.site-footer__credit a {
	color: var( --fm-color-accent );
	text-decoration: none;
}

.site-footer__credit a:hover,
.site-footer__credit a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.site-footer__credit img {
	display: block;
	width: 32px;
	height: 32px;
}

/* The social icons. Each link is a white square whose SHAPE is a static theme
   SVG applied as a mask and whose colour is background-color, so the same file
   would read black on lilac elsewhere; the icon is currentColor in effect. White
   like the byline, lilac on hover like the studio link. The span inside carries
   the accessible name and is visually hidden. */
.site-footer__socials {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The <li> is a flex box too: as a block it would give the link a text line's
   worth of height and push the icon off the strip's centre line. */
.site-footer__socials li {
	display: flex;
	align-items: center;
}

.site-footer__social {
	display: block;
	width: 18px;
	height: 18px;
	background-color: #fff;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	transition: background-color 0.16s ease;
}

.site-footer__social--facebook {
	mask-image: url( "../img/facebook-f.svg" );
}

.site-footer__social--instagram {
	mask-image: url( "../img/instagram.svg" );
}

.site-footer__social:hover,
.site-footer__social:focus-visible {
	background-color: var( --fm-color-accent );
}

.site-footer__social span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* ---- Brand skin over plugin components -------------------------------------- *
 * The plugin ships these with neutral values; the brand look is solid black.
 * Same selectors, printed later, so these win.
 */

.ff-nominations .ff-table thead th,
.ff-exhibitor .ff-table thead th {
	background: var( --fm-color-dark );
	color: #fff;
}

/* ---- Inline links ------------------------------------------------------------ *
 * Lilac type on white is 2.05:1 — unreadable — so on the reading column the WORD
 * carries the contrast (brown, bold, set in capitals) and the lilac is
 * decoration: an underline that turns black on hover. The palette stays at four
 * values. Buttons are deliberately NOT given this treatment (see the
 * .wp-block-button__link reset below): a link and a button should read as two
 * different things.
 *
 * Every surface that carries running text is listed: portal pages, the login
 * screen's intro copy, and the restricted notice. They do not share a wrapper
 * class, which is why this is a list rather than one selector.
 */

#content .portal-content p a,
#content .portal-content li a,
#content .portal-content .wp-block-paragraph a,
#content .portal-content .wp-block-list a,
#content .login-page__form-content p a,
#content .portal-restricted p a {
	color: var( --fm-color-ink );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-decoration: underline;
	text-decoration-color: var( --fm-color-accent );
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: text-decoration-color 0.16s ease;
}

#content .portal-content .wp-block-button__link {
	text-transform: none;
	letter-spacing: 0;
	text-decoration: none;
}

#content .portal-content p a:hover,
#content .portal-content li a:hover,
#content .portal-content .wp-block-paragraph a:hover,
#content .portal-content .wp-block-list a:hover,
#content .login-page__form-content p a:hover,
#content .portal-restricted p a:hover {
	text-decoration-color: var( --fm-color-dark );
}

/* ---- Form fields — brand skin ------------------------------------------------ *
 * The plugin owns field SIZING and layout (widths, heights, padding, grids);
 * the theme owns the field LOOK: border, colour, focus ring, typography.
 * Selectors ride #content so they outrank the plugin's class-level rules
 * without touching sizing.
 */

#content input[type="text"],
#content input[type="email"],
#content input[type="password"],
#content input[type="number"],
#content input[type="search"],
#content input[type="tel"],
#content input[type="url"],
#content select,
#content textarea {
	border: 1px solid var( --fm-color-border );
	border-radius: var( --fm-radius );
	background: #fff;
	color: var( --fm-color-ink );
	font-family: var( --fm-font-body );
	font-size: var( --fm-text-base );
}

#content input:focus-visible,
#content select:focus-visible,
#content textarea:focus-visible {
	outline: 2px solid var( --fm-color-accent );
	outline-offset: 1px;
	border-color: var( --fm-color-ink );
}

#content ::placeholder {
	color: var( --fm-color-text-subtle );
}

/* Field labels: the body face, bold, sentence case. */
#content label {
	font-family: var( --fm-font-body );
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
}

/* ---- Never fake a weight -------------------------------------------------------- *
 * The Typekit kit ships din-condensed at 400 and 300 only, and ABC Synt at 400
 * only. Ask either for bold and the browser SYNTHESISES one, smearing the real
 * outline — which is exactly what makes a heading look wrong beside genuine
 * bold text.
 *
 * Switching synthesis off is the actual fix, rather than hunting down every
 * selector that might inherit `bold` from the user-agent stylesheet: a request
 * for a weight that does not exist now falls back to a real one. ABC Marfa is
 * unaffected — it ships real 400/500/700.
 *
 * Declared on the dialog as well: it is appended to <body>, outside #content,
 * so inheritance is the only thing that reaches it.
 */
body,
.fm-rsvp-modal {
	/* Shorthand first (it is what older engines understand), then the longhand
	   for engines that support it. Omitting `weight` from the list is what
	   switches weight synthesis off. */
	font-synthesis: style small-caps;
	font-synthesis-weight: none;
}

/* Headings are still pinned to normal, so they land on the real 400 rather than
 * "whatever is closest to bold", which would pick up the 300.
 *
 * This lives in the THEME because the weight belongs to the face, and the face
 * is the theme's to choose: the plugin declares no weight on any of these. The
 * last four selectors are unscoped for the same reason as above.
 */
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6,
#content .entry-title,
#content .sidebar,
#content .sidebar__nav a,
#content .portal-mobilebar,
#content .ff-table thead th,
.site-main--theme .entry-title,
.fm-rsvp-modal__title,
.fm-rsvp-modal__close,
.fm-rsvp-attendee__add,
.fm-rsvp-attendee__remove {
	font-weight: normal;
}

/* ---- Page header fallback ------------------------------------------------------ *
 * A page with a featured image gets it as an inline background-image on
 * .page-header, which naturally beats this stylesheet rule. A page WITHOUT one
 * falls through to this, so no page header is ever a bare colour field.
 *
 * The plugin scopes its scrim and white title to .page-header[style] -- i.e. only
 * when a featured image was set -- which is the right default for a theme that
 * has no fallback. This theme always has one, so it re-asserts both here for the
 * no-featured-image case as well; without that the title would sit lilac and
 * unscrimmed over a photograph.
 */
.page-header {
	background-image: url( "../img/hero-fallback.jpg" );
	background-size: cover;
	background-position: center;
	/* Size: the plugin's default hero is a shallow strip (34vh, capped at
	   360px), which reads as a banner rather than a picture. The 2027 brand
	   wants the photograph to carry the page: a 16:7 panel that grows with the
	   column. The plugin's min-height stays as the floor, so on a phone the hero
	   never drops below the height it has today; the cap comes off so the ratio
	   can win above it. */
	aspect-ratio: 16 / 7;
	max-height: none;
}

/* With the panel that wide, the plugin's 18ch title measure wraps a four-word
   page name onto three lines; widened to match. */

.page-header .entry-title {
	max-width: 30ch;
}

.page-header .overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.7 ) 0%, rgba( 0, 0, 0, 0 ) 70% );
}

#content .page-header .entry-title {
	color: #fff;
}

/* ---- Portal frame ------------------------------------------------------------ *
 * Cap the portal at --site-max-width, centred, on the brown page ground. Plugin
 * templates render into #content (its own rule is max-width: 100%); this later,
 * equal-specificity rule wins.
 */
#content {
	max-width: var( --site-max-width );
	width: 100%;
	margin: 0 auto;
	background: #fff;
	/* Takes all the space the chrome leaves. The plugin's own vh floor is
	   switched off in tokens.css (--fm-portal-min-height: 0) so the two do not
	   fight -- this is the more accurate of the two. */
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
}

/* The portal frame stretches to fill #content; .page-content stays a grid
   container, it is just also a flex ITEM here. */
#content > .page-content {
	flex: 1 0 auto;
}

/* Theme's own pages keep their reading measure — the --site-max-width frame is for the
   plugin's portal templates. */
#content.site-main--theme {
	max-width: 900px;
	background: transparent;
	color: #fff;
}