/*
 * WordCamp Pune 2027 — site CSS
 * Theme: Twenty Twenty-Five (block theme).
 *
 * COLOURS LIVE IN THE EDITOR, NOT HERE.
 * Every colour below reads a Theme palette slot from Site Editor → Styles →
 * Colours, e.g. var(--wp--preset--color--accent-1). To change the look,
 * edit the slot's hex in the editor; this file never needs a hex.
 * (WordCamp's sanitiser strips `--name: value;` declarations, but reading
 * WordPress's own --wp--preset--… variables is fine.)
 *
 * THEME SLOTS (by colour)
 *   base       page background, text on maroon
 *   contrast   body text, text on buttons
 *   accent-1   maroon: brand, headings, links, footer
 *   accent-2   saffron: buttons, link underlines
 *   accent-3   peach today (header, hero); sand later
 *   accent-4   sand edge: borders on sand
 *   accent-5   sand: inputs, light panels
 *
 * PART A is layout only and changes no colours: safe in Additional CSS now.
 * PART B is the brand styling: it goes live with Remote CSS. It also moves
 * a few areas to a different slot (footer → maroon, buttons → saffron,
 * header → base), so switch day needs no block re-colouring.
 */
/* ===================================================================== */
/* PART A — layout fixes (copy into Appearance → Additional CSS now)      */
/* ===================================================================== */
/* Past WordCamps menu: years in a grid of 4 (two rows). The nav block
   has the class past-wc-nav (Advanced → Additional CSS class). */
.past-wc-nav .wp-block-navigation__container {
	display: grid;
	grid-template-columns: repeat(4, max-content);
	gap: .5rem 1.5rem;
}

/* Inner pages: the Pages template's Content block is full width with no
   inner width and no side padding, so content ran edge to edge. Give it
   the theme's side padding and widths: text at content width (640px),
   wide blocks and lists of posts (e.g. sponsor logos) at wide width.
   The homepage uses the same template but is designed full width. */
body:not(.home) .wp-block-post-content.alignfull.is-layout-flow {
	padding-left: var(--wp--style--root--padding-left) !important;
	padding-right: var(--wp--style--root--padding-right) !important;
}

body:not(.home) .wp-block-post-content.alignfull.is-layout-flow > :not(.alignfull):not(.alignwide):not(.wp-block-query) {
	max-width: var(--wp--style--global--content-size);
	margin-left: auto;
	margin-right: auto;
}

body:not(.home) .wp-block-post-content.alignfull.is-layout-flow > .alignwide,
body:not(.home) .wp-block-post-content.alignfull.is-layout-flow > .wp-block-query {
	max-width: var(--wp--style--global--wide-size);
	margin-left: auto;
	margin-right: auto;
}

/* Homepage: sections that aren't full width (e.g. "Learn Beyond
   Sessions") had no side padding and ran to the window edges. Give them
   the theme's side padding and wide width, like the header and footer.
   Groups are left alone: they manage their own padding, and one may wrap
   the full-width hero. */
body.home .wp-block-post-content.alignfull.is-layout-flow > :not(.alignfull):not(.wp-block-group) {
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size);
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--wp--style--root--padding-left) !important;
	padding-right: var(--wp--style--root--padding-right) !important;
}

/* The same template sets the space between blocks to 0; restore it,
   with extra room above headings. */
body:not(.home) .wp-block-post-content.alignfull.is-layout-flow > * + * {
	margin-top: var(--wp--preset--spacing--30);
}

body:not(.home) .wp-block-post-content.alignfull.is-layout-flow > .wp-block-heading {
	margin-top: var(--wp--preset--spacing--50);
}

/* Sponsor logos (Query Loop of sponsors): even tiles. WordPress forces each
   logo into a 16:9 box, which leaves wordmarks floating in empty space;
   a 3:1 box with padding fits them. Hover: the tile lifts and the border
   turns highlight colour. */
.wp-block-post-template {
	gap: 1rem;
}

body:not(.search) .wp-block-post-template > .wcb_sponsor {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem 2rem;
	border: 1px solid var(--wp--preset--color--accent-4);
	border-radius: 12px;
	background-color: var(--wp--preset--color--base);
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

body:not(.search) .wp-block-post-template > .wcb_sponsor .wp-block-post-featured-image {
	width: 100%;
	margin: 0;
}

body:not(.search) .wp-block-post-template > .wcb_sponsor img {
	aspect-ratio: 3 / 1 !important;
	width: 100% !important;
	height: auto;
	max-height: 90px;
	object-fit: contain;
}

body:not(.search) .wp-block-post-template > .wcb_sponsor:hover,
body:not(.search) .wp-block-post-template > .wcb_sponsor:focus-within {
	border-color: var(--wp--preset--color--accent-2);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

@media (prefers-reduced-motion: no-preference) {
	body:not(.search) .wp-block-post-template > .wcb_sponsor:hover {
		transform: translateY(-3px);
	}
}

/* Two logos per row on phones. */
@media (max-width: 600px) {
	.page-slug-sponsors .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	
	body:not(.search) .wp-block-post-template > .wcb_sponsor {
		padding: 1rem;
	}
}

/* Footer social icons: plain icons in the footer's text colour (no brand
   circles). On hover each shows its network's own badge: brand-coloured
   circle, white icon. The brand hexes are the only ones in this file:
   they are the networks' colours (as in WordPress's Social Icons block),
   not our palette. */
footer.wp-block-template-part .wp-block-social-links .wp-social-link {
	background-color: transparent !important;
	color: inherit !important;
	transition: background-color .15s ease, color .15s ease;
}

footer.wp-block-template-part .wp-block-social-links .wp-social-link svg {
	fill: currentColor;
}

footer.wp-block-template-part .wp-block-social-links .wp-social-link:hover,
footer.wp-block-template-part .wp-block-social-links .wp-social-link:focus-within {
	color: #FFFFFF !important;
}

footer.wp-block-template-part .wp-block-social-links .wp-social-link-whatsapp:hover,
footer.wp-block-template-part .wp-block-social-links .wp-social-link-whatsapp:focus-within {
	background-color: #25D366 !important;
}

footer.wp-block-template-part .wp-block-social-links .wp-social-link-meetup:hover,
footer.wp-block-template-part .wp-block-social-links .wp-social-link-meetup:focus-within {
	background-color: #F6405F !important;
}

footer.wp-block-template-part .wp-block-social-links .wp-social-link-instagram:hover,
footer.wp-block-template-part .wp-block-social-links .wp-social-link-instagram:focus-within {
	background-color: #F00075 !important;
}

footer.wp-block-template-part .wp-block-social-links .wp-social-link-linkedin:hover,
footer.wp-block-template-part .wp-block-social-links .wp-social-link-linkedin:focus-within {
	background-color: #0D66C2 !important;
}

footer.wp-block-template-part .wp-block-social-links .wp-social-link-x:hover,
footer.wp-block-template-part .wp-block-social-links .wp-social-link-x:focus-within {
	background-color: #000000 !important;
}

/* Search results: a grid of cards (type, title, date, a few lines of
   text). The Search Results template prints each result's full content
   (even the whole homepage); only a short trimmed description shows here.
   Swap its Content block for an Excerpt block when possible.
   A small label shows the result type. The whole card is the link.
   Only the main results (the full-width query), not "More posts". */
body.search .wp-block-query.alignfull > .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1rem;
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size);
	margin: var(--wp--preset--spacing--40) auto var(--wp--preset--spacing--60) !important;
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
}

body.search .wp-block-query.alignfull .wp-block-post {
	display: block;
	position: relative;
	margin: 0 !important;
	padding: 0;
	border: 1px solid var(--wp--preset--color--accent-4);
	border-radius: 12px;
	background-color: var(--wp--preset--color--base);
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

body.search .wp-block-query.alignfull .wp-block-post > .wp-block-group {
	box-sizing: border-box;
	height: 100%;
	padding: 1.25rem 1.5rem !important;
}

body.search .wp-block-query.alignfull .wp-block-post .wp-block-post-featured-image {
	display: none;
}

/* A few lines of description under the title. Best with an Excerpt block
   in the Search Results template; with the Content block, only its first
   paragraph shows. Either way, trimmed to 3 lines. */
body.search .wp-block-query.alignfull .wp-block-post .wp-block-post-excerpt,
body.search .wp-block-query.alignfull .wp-block-post .wp-block-post-content {
	margin: .6rem 0 0 !important;
	padding: 0 !important;
	font-size: .95rem !important;
	line-height: 1.5;
}

body.search .wp-block-query.alignfull .wp-block-post .wp-block-post-content > * {
	display: none;
}

body.search .wp-block-query.alignfull .wp-block-post .wp-block-post-excerpt__more-text {
	display: none;
}

body.search .wp-block-query.alignfull .wp-block-post .wp-block-post-excerpt__excerpt,
body.search .wp-block-query.alignfull .wp-block-post .wp-block-post-content > p:first-of-type {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	max-width: none;
	margin: 0;
}

body.search .wp-block-query.alignfull .wp-block-post .wp-block-post-title {
	margin: 0;
	font-size: 1.25rem !important;
	line-height: 1.3;
}

body.search .wp-block-query.alignfull .wp-block-post .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* Stretch the title link over the whole card. */
body.search .wp-block-query.alignfull .wp-block-post .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
}

body.search .wp-block-query.alignfull .wp-block-post .wp-block-post-date {
	margin-top: .5rem !important;
	color: var(--wp--preset--color--contrast);
	font-size: .85rem !important;
}

body.search .wp-block-query.alignfull .wp-block-post .wp-block-post-date a {
	color: inherit;
	text-decoration: none;
}

body.search .wp-block-query.alignfull .wp-block-post > .wp-block-group::before {
	display: block;
	margin-bottom: .4rem;
	color: var(--wp--preset--color--accent-1);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

body.search .wp-block-query.alignfull .type-page > .wp-block-group::before {
	content: "Page";
}

body.search .wp-block-query.alignfull .type-post > .wp-block-group::before {
	content: "News";
}

body.search .wp-block-query.alignfull .type-wcb_sponsor > .wp-block-group::before {
	content: "Sponsor";
}

body.search .wp-block-query.alignfull .type-wcb_speaker > .wp-block-group::before {
	content: "Speaker";
}

body.search .wp-block-query.alignfull .type-wcb_session > .wp-block-group::before {
	content: "Session";
}

body.search .wp-block-query.alignfull .type-wcb_organizer > .wp-block-group::before {
	content: "Organizer";
}

body.search .wp-block-query.alignfull .wp-block-post:hover,
body.search .wp-block-query.alignfull .wp-block-post:focus-within {
	border-color: var(--wp--preset--color--accent-2);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

body.search .wp-block-query.alignfull .wp-block-post:hover .wp-block-post-title a {
	color: var(--wp--preset--color--accent-1);
}

@media (prefers-reduced-motion: no-preference) {
	body.search .wp-block-query.alignfull .wp-block-post:hover {
		transform: translateY(-3px);
	}
}

/* Space above the footer on every page. The theme only leaves its 19px
   block gap, so pages ending in a photo or text sat close to the footer.
   Inner pages' content block can add its own bottom padding (70px on Code
   of Conduct); drop it so the space is the same everywhere. */
footer.wp-block-template-part {
	margin-top: clamp(3rem, 6vw, 5rem) !important;
}

body:not(.home) main .wp-block-post-content {
	padding-bottom: 0 !important;
}

/* Search Results template: its last section ("More posts") adds a large
   bottom padding of its own. */
body.search main > :last-child {
	padding-bottom: 0 !important;
}

/* Small phones: email field and Subscribe button full width, stacked. */
@media (max-width: 480px) {
	footer.wp-block-template-part .wp-block-jetpack-subscriptions__form-elements {
		flex-direction: column;
		gap: 10px;
	}
	
	footer.wp-block-template-part .wp-block-jetpack-subscriptions__form-elements p,
		footer.wp-block-template-part .wp-block-jetpack-subscriptions__form-elements input[type="email"],
		footer.wp-block-template-part .wp-block-jetpack-subscriptions__form-elements button {
		width: 100%;
		margin: 0 !important;
	}
}

/* ===================================================================== */
/* PART B — brand styling (goes live with Remote CSS)                     */
/* ===================================================================== */
/* ==== B1. Links ======================================================= */
/* Link text colour comes from Styles → Colours → Link. This adds the
   saffron underline, which the editor can't set. */
a:where(:not(.wp-element-button)) {
	text-decoration-color: var(--wp--preset--color--accent-2);
	text-decoration-thickness: 2px;
	text-underline-offset: .2em;
}

a:where(:not(.wp-element-button)):hover {
	text-decoration-color: var(--wp--preset--color--accent-1);
}

a:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

/* ==== B2. Header ====================================================== */
/* The header group uses Accent 3 (peach today, like the hero). In the
   brand look the header is page colour, with a maroon strip on top and
   one thin line underneath instead of the dotted box. */
/* Stays at the top while scrolling. Logged in, it sits below the admin
   bar, which is 32px tall, 46px under 783px, and scrolls away under 601px. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 18px rgba(0, 0, 0, 0.06);
}

body.admin-bar header.wp-block-template-part {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar header.wp-block-template-part {
		top: 46px;
	}
}

@media (max-width: 600px) {
	body.admin-bar header.wp-block-template-part {
		top: 0;
	}
}

header.wp-block-template-part .has-accent-3-background-color {
	background-color: var(--wp--preset--color--base) !important;
	border-top: 4px solid var(--wp--preset--color--accent-1);
}

header.wp-block-template-part .has-accent-1-border-color {
	border-style: none none solid !important;
	border-color: var(--wp--preset--color--accent-4) !important;
}

/* Site title: one line, capitals with light spacing. */
header.wp-block-template-part .wp-block-site-title {
	font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.25rem);
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.2;
	white-space: nowrap;
}

header.wp-block-template-part .wp-block-site-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* Menu: no permanent underline; a saffron bar grows in on hover and
   stays under the current page. */
header.wp-block-template-part .wp-block-navigation {
	font-size: var(--wp--preset--font-size--medium) !important;
}

header.wp-block-template-part .wp-block-navigation-item__content {
	text-decoration: none !important;
	padding-bottom: 4px;
	transition: background-size .2s ease, color .2s ease;
}

header.wp-block-template-part .wp-block-navigation-item__content:hover,
header.wp-block-template-part .wp-block-navigation-item__content:focus-visible,
header.wp-block-template-part .current-menu-item > .wp-block-navigation-item__content {
	background-size: 100% 3px;
	color: var(--wp--preset--color--accent-1);
}

/* Call-to-action menu item (Contact now, Tickets later): a small saffron
   button. Add the class nav-cta to that menu link (select it in the
   Navigation block → Advanced → Additional CSS class). */
header.wp-block-template-part .nav-cta > .wp-block-navigation-item__content {
	padding: .45em 1.1em;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	line-height: 1.2;
	transition: background-color .15s ease, color .15s ease;
}

header.wp-block-template-part .nav-cta > .wp-block-navigation-item__content:hover,
header.wp-block-template-part .nav-cta > .wp-block-navigation-item__content:focus-visible,
header.wp-block-template-part .nav-cta.current-menu-item > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
}

/* Phones: smaller logo so the title fits; bigger links in the menu overlay. */
@media (max-width: 600px) {
	header.wp-block-template-part .wp-block-site-logo img {
		width: 52px !important;
		height: auto;
	}
}

/* Phone menu overlay: a left-aligned list with dividers and large tap
   targets; the nav-cta item becomes a full-width button at the end.
   WordPress's overlay rules are very specific, hence the !important. */
header.wp-block-template-part .is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch !important;
	padding-top: var(--wp--preset--spacing--40) !important;
}

header.wp-block-template-part .is-menu-open .wp-block-navigation__container {
	align-items: stretch !important;
	gap: 0 !important;
	width: 100%;
}

header.wp-block-template-part .is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--wp--preset--color--accent-4);
}

header.wp-block-template-part .is-menu-open .wp-block-navigation-item__content {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: .9rem 0 !important;
	background: none;
	font-size: 1.375rem;
}

header.wp-block-template-part .is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent-1);
}

/* Opening the menu focuses the first link. Instead of the site-wide focus
   box, show a saffron underline (still visible for keyboard users). */
header.wp-block-template-part .is-menu-open .wp-block-navigation-item__content:focus-visible {
	outline: none;
	color: var(--wp--preset--color--accent-1);
	text-decoration-line: underline !important;
	text-decoration-color: var(--wp--preset--color--accent-2) !important;
	text-decoration-thickness: 3px !important;
	text-underline-offset: .3em;
}

header.wp-block-template-part .is-menu-open .nav-cta {
	margin-top: var(--wp--preset--spacing--30);
	border-bottom: 0;
}

header.wp-block-template-part .is-menu-open .nav-cta > .wp-block-navigation-item__content {
	padding: .85rem 1.25rem !important;
	background: var(--wp--preset--color--accent-2);
	text-align: center;
}

header.wp-block-template-part .is-menu-open .nav-cta > .wp-block-navigation-item__content:hover,
header.wp-block-template-part .is-menu-open .nav-cta > .wp-block-navigation-item__content:focus-visible,
header.wp-block-template-part .is-menu-open .nav-cta.current-menu-item > .wp-block-navigation-item__content {
	text-decoration: none !important;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
}

/* ==== B3. Buttons ===================================================== */
/* Saffron with text colour; maroon on hover. `body` outranks the block's
   own colour classes, which WordPress marks !important. */
body .wp-block-button__link,
body .wp-element-button {
	background-color: var(--wp--preset--color--accent-2) !important;
	color: var(--wp--preset--color--contrast) !important;
	border-color: var(--wp--preset--color--accent-2) !important;
	transition: background-color .15s ease, color .15s ease;
}

body .wp-block-button__link:hover,
body .wp-element-button:hover {
	background-color: var(--wp--preset--color--accent-1) !important;
	color: var(--wp--preset--color--base) !important;
	border-color: var(--wp--preset--color--accent-1) !important;
}

body .wp-block-button__link:focus-visible,
body .wp-element-button:focus-visible {
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

/* Outline style (Styles → Outline on a button): clear fill, maroon
   border and text; fills maroon on hover. */
body .is-style-outline > .wp-block-button__link {
	background-color: transparent !important;
	color: var(--wp--preset--color--accent-1) !important;
	border: 2px solid var(--wp--preset--color--accent-1) !important;
}

body .is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent-1) !important;
	color: var(--wp--preset--color--base) !important;
}

/* On the maroon footer a maroon hover would vanish. */
footer.wp-block-template-part .wp-block-button__link:hover,
footer.wp-block-template-part .wp-element-button:hover {
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--accent-1) !important;
	border-color: var(--wp--preset--color--base) !important;
}

/* ==== B4. Footer ====================================================== */
/* Sand with maroon text today; maroon with page-colour text here. */
footer.wp-block-template-part > .wp-block-group.has-background {
	background-color: var(--wp--preset--color--accent-1) !important;
}

footer.wp-block-template-part .has-text-color:not(.wp-element-button):not(.wp-block-button__link) {
	color: var(--wp--preset--color--base) !important;
}

footer.wp-block-template-part a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--base);
}

footer.wp-block-template-part a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--accent-2);
	text-decoration-color: var(--wp--preset--color--accent-2);
}

footer.wp-block-template-part a:focus-visible {
	outline-color: var(--wp--preset--color--accent-2);
}

/* Section labels: small tracked capitals. The first column's heading is
   the event name and stays large. */
footer.wp-block-template-part .wp-block-column:not(:first-child) > .wp-block-heading {
	font-size: .85rem !important;
	letter-spacing: .12em;
	text-transform: uppercase;
}

footer.wp-block-template-part .wp-block-site-tagline {
	color: var(--wp--preset--color--accent-2);
	font-weight: 500;
}

/* Past years as pills; saffron fill on hover. */
footer.wp-block-template-part .past-wc-nav .wp-block-navigation__container {
	gap: .6rem;
}

footer.wp-block-template-part .past-wc-nav .wp-block-navigation-item__content {
	display: inline-block;
	padding: .2em .9em;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: .95rem;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

footer.wp-block-template-part .past-wc-nav .wp-block-navigation-item__content:hover,
footer.wp-block-template-part .past-wc-nav .wp-block-navigation-item__content:focus-visible {
	background-color: var(--wp--preset--color--accent-2);
	border-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--contrast);
}

footer.wp-block-template-part .wp-social-link {
	transition: transform .15s ease;
}

footer.wp-block-template-part .wp-social-link:hover {
	transform: translateY(-2px);
}

/* Bottom row ("Designed with WordPress"): a thin divider above it. */
footer.wp-block-template-part .is-content-justification-space-between {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--accent-4);
}

footer.wp-block-template-part .is-content-justification-space-between p {
	font-size: .9rem !important;
}

/* The logo file already includes its ring. Radius only clips the
   transparent corners of the slightly rectangular PNG. */
footer.wp-block-template-part .wp-block-site-logo img {
	border-radius: 50%;
}

/* ==== B5. Inputs and borders ========================================== */
input[type="text"],
input[type="email"],
textarea {
	background-color: var(--wp--preset--color--accent-5);
	border: 1px solid var(--wp--preset--color--accent-4);
	color: var(--wp--preset--color--contrast);
}

/* Placeholder ("Type your email…"). Jetpack's subscribe form sets it to
   half-strength currentColor with a stronger selector, hence !important.
   0.8 keeps it readable on sand (about 4.8:1) yet lighter than real text. */
input[type="text"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder {
	color: var(--wp--preset--color--contrast) !important;
	opacity: .8 !important;
}

/* Logged in, Jetpack pre-fills the subscribe field with your email and
   disables it; its rule then fades the whole field to 50%, so on the
   maroon footer it turns pink and the text is unreadable. Visitors who
   aren't logged in never see this state. */
input[type="email"]:disabled {
	color: var(--wp--preset--color--contrast) !important;
	opacity: .85 !important;
	cursor: not-allowed;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 1px;
}

/* Sand borders (e.g. the hero photo) would vanish on the sand hero. */
body .has-accent-5-border-color {
	border-color: var(--wp--preset--color--accent-4) !important;
}

/* ==== B6. Homepage hero =============================================== */
/* The homepage hero group has the class hero-wrap
   (Advanced → Additional CSS class). The block stays on Accent 3
   (peach) until switch day. */
/* SWITCH: this is the only place in this file that needs a colour
   swatch changed. Sand is hardcoded so Remote CSS can show the hero
   before the palette swap. #F3EEE6 is deep enough to read on white;
   #F7F5F0 disappears. On switch day, set Accent 3 to #F3EEE6 in
   Site Editor → Styles → Colours, then delete this rule. */
body .hero-wrap {
	background-color: #F3EEE6 !important;
}

.hero-wrap {
	padding-block: clamp(3rem, 6vw, 6rem) clamp(4.5rem, 9vw, 8rem);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%);
}

/* Eyebrow: the first line above the title, as small maroon capitals. */
.hero-wrap .wp-block-column:first-child > p:first-child {
	margin-bottom: .25rem !important;
	color: var(--wp--preset--color--accent-1);
	font-size: var(--wp--preset--font-size--medium) !important;
	font-weight: 600 !important;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Day 1 / Day 2: soft chips. Give their group the class hero-days
   so they wrap on phones instead of squeezing. */
.hero-wrap .is-style-text-annotation {
	padding: .35em .9em;
	border: 1px solid var(--wp--preset--color--accent-4);
	border-radius: 999px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: .9rem;
	font-weight: 600 !important;
	white-space: nowrap;
}

.hero-wrap .hero-days {
	flex-wrap: wrap !important;
	gap: .5rem;
}

/* Same, without the class (browsers with :has). Kept as its own rule so
   a browser or sanitiser that rejects :has only drops this one. */
.hero-wrap .wp-block-group:has(> .is-style-text-annotation) {
	flex-wrap: wrap !important;
	gap: .5rem;
}

/* Date and venue icons in maroon. */
.hero-wrap .wp-block-icon {
	color: var(--wp--preset--color--accent-1);
}

.hero-wrap .wp-block-icon svg {
	fill: currentColor;
}

/* Buttons sit left, side by side; full width and stacked on phones.
   Contact Us is Fill, so the shared saffron button rules apply. */
.hero-wrap .wp-block-buttons {
	justify-content: flex-start;
	gap: .75rem;
}

/* Photo: rounded, soft shadow, caption in a small dark box. */
.hero-wrap .wp-block-cover {
	overflow: hidden;
	border-radius: 16px !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 18px 40px rgba(0, 0, 0, 0.14);
}

.hero-wrap .wp-block-cover__inner-container p {
	display: inline-block;
	padding: .3em .9em;
	border-radius: 12px;
	background-color: rgba(0, 0, 0, 0.45);
	text-align: left !important;
}

/* Hover for everyone: deeper shadow, and the light grey veil over the
   photo fades out so it brightens. */
.hero-wrap .wp-block-cover {
	transition: transform .35s ease, box-shadow .35s ease;
}

.hero-wrap .wp-block-cover__background {
	transition: opacity .35s ease;
}

.hero-wrap .wp-block-cover:hover {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08), 0 26px 50px rgba(0, 0, 0, 0.18);
}

.hero-wrap .wp-block-cover:hover .wp-block-cover__background {
	opacity: 0 !important;
}

/* Movement only when the visitor hasn't asked for reduced motion
   (macOS: System Settings → Accessibility → Display → Reduce motion). */
@media (prefers-reduced-motion: no-preference) {
	.hero-wrap .wp-block-cover__image-background {
		transition: transform .8s ease;
	}
	
	.hero-wrap .wp-block-cover:hover {
		transform: translateY(-4px);
	}
	
	.hero-wrap .wp-block-cover:hover .wp-block-cover__image-background {
		transform: scale(1.06);
	}
}

@media (max-width: 781px) {
	.hero-wrap {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 97%);
	}
	
	/* 4:3 photo instead of 496px tall. */
	.hero-wrap .wp-block-cover {
		min-height: 0 !important;
		aspect-ratio: 4 / 3 !important;
	}
}

@media (max-width: 480px) {
	.hero-wrap .wp-block-buttons,
		.hero-wrap .wp-block-button {
		width: 100%;
	}
	
	.hero-wrap .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

/* ==== B6b. Homepage sections (e.g. "More Than Talks") =============== */
/* Those paragraphs are coloured #000 in the block, so they stay pure
   black after the palette swap. Use the text colour instead. Headings
   keep their own maroon. */
body.home .wp-block-post-content > .wp-block-columns:not(.alignfull) p.has-text-color {
	color: var(--wp--preset--color--contrast) !important;
}

/* The photo zooms gently on hover (not for reduced motion). No scroll
   reveal: WordCamp's sanitiser strips animation-timeline. */
body.home .wp-block-post-content > .wp-block-columns:not(.alignfull) .wp-block-image {
	overflow: hidden;
	border-radius: 12px;
}

@media (prefers-reduced-motion: no-preference) {
	body.home .wp-block-post-content > .wp-block-columns:not(.alignfull) .wp-block-image img {
		transition: transform .6s ease;
	}
	
	body.home .wp-block-post-content > .wp-block-columns:not(.alignfull) .wp-block-image:hover img {
		transform: scale(1.04);
	}
}

/* ==== B7. Page-specific =============================================== */
/* Code of Conduct: room above each section, not above the first heading
   and not on the footer headings. */
.page-slug-code-of-conduct .entry-content > .wp-block-heading {
	margin-top: 2.5rem;
}

.page-slug-code-of-conduct .entry-content > h3.wp-block-heading:first-of-type {
	margin-top: 0;
}