/*
Theme Name: Con High P&C
Theme URI: https://conhighpandc.org.au
Description: Child theme of Twenty Twenty-Five for the Conservatorium High School P&C Association website. Design lives in theme.json; this file is for the small amount theme.json cannot express.
Author: Con High P&C Webmasters
Template: twentytwentyfive
Version: 0.1.15
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: conhigh-pandc
*/

/* Block themes load this file automatically. No functions.php enqueue is needed.
   Prefer theme.json for anything it can express, so the design stays reviewable as data. */

/* Dropdowns sit against the light blue bar, so they need a soft edge to read as
   floating above it rather than merging into it. Only while they actually float:
   inside the mobile overlay the submenus are already expanded in place, where a
   panel edge and shadow would draw boxes around plain indented lists. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
	box-shadow: 0 6px 16px rgba(34, 39, 43, 0.30);
	border-color: #dee3e5;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background-color: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	/* Indent alone carries the hierarchy once the panel styling is gone. */
	padding-left: var(--wp--preset--spacing--30);
}

/* Two hand-written titles instead of the site-title block: the wide screen gets
   the association name in full, the phone gets the short form, and the monogram
   sits beside either one. Settings > General still holds the association's legal
   name, which belongs in browser tabs and outgoing mail. Declared before the
   mobile rules further down, which override at equal specificity: source order
   decides, not the media query. */
.site-title-long {
	display: block;
	margin: 0;
}

.site-title-short {
	display: none;
	margin: 0;
}

.site-title-long a,
.site-title-short a {
	text-decoration: none;
}

/* The P&C monogram sits between the hamburger and the name. It is decorative:
   the name it stands for is spelled out right beside it, so an empty ::before
   is more accurate than an <img> with repeated alt text. The asset is a 96px
   copy of design/BlueLogo.png, which is 2323px square and far too heavy to ship
   for a 28px slot. */
.site-title-long::before,
.site-title-short::before {
	background-image: url("assets/blue-logo.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: inline-block;
	height: 1.6em;
	margin-right: 0.5rem;
	vertical-align: -0.35em;
	width: 1.6em;
}

/* The menu's Become a Member and Contact items exist for phones, where the
   actions row holding the header's own join button and Contact link is hidden.
   On a wider screen those are visible, so the menu would repeat them. */
.wp-block-navigation-item.nav-phone-only {
	display: none;
}

@media (max-width: 599px) {
	/* One blue bar on a phone instead of two stacked rows: the header itself takes
	   the blue, the nav band gives up its own background and padding, and it moves
	   ahead of the title row so the hamburger leads. Desktop keeps both rows.

	   The 599px breakpoint matches where the navigation block swaps to its overlay
	   menu, so the bar and the hamburger appear together.

	   WordPress writes its preset background classes with !important and puts the
	   nav band's padding in an inline style, so plain overrides lose to both. That
	   is what the !important declarations below are for. */
	header.wp-block-group.has-base-background-color {
		align-items: center;
		background-color: var(--wp--preset--color--accent) !important;
		display: flex;
		gap: var(--wp--preset--spacing--30);
		/* White breathing room between the bar and the pale blue hero below, so the
		   two blues do not run together. */
		margin-bottom: var(--wp--preset--spacing--30);
		/* An explicit height rather than padding alone: the group's own padding is
		   contested by core's block-supports rules, and the bar has one job here,
		   which is to be a consistent height with its contents centred. */
		min-height: 3.8125rem;
		padding-bottom: var(--wp--preset--spacing--30) !important;
		padding-top: var(--wp--preset--spacing--30) !important;
	}

	header > .wp-block-group.has-accent-background-color {
		background-color: transparent !important;
		flex: 0 0 auto;
		order: -1;
		padding: 0 !important;
	}

	header > .wp-block-group:not(.has-accent-background-color) {
		flex: 1 1 auto;
		min-width: 0;
		padding-bottom: 0 !important;
		padding-top: 0 !important;
	}

	/* No room for Contact or the join button beside a hamburger and the title.
	   The menu carries Become a Member and Contact items for these widths; the
	   footer has Contact too.

	   The class is repeated to outrank core's own `.wp-block-group.is-layout-flex`
	   display rule, which a single class would lose to. */
	.wp-block-group.header-actions.header-actions {
		display: none;
	}

	/* Enquiries only go one place, so Contact cannot be footer-only on the screen
	   most people read the site on, and joining is the action the site most wants
	   people to take. */
	.wp-block-navigation-item.nav-phone-only {
		display: block;
	}

	/* Core's open-menu icon draws two bars and offers no setting for a third, so
	   the SVG is replaced with a drawn one: a repeating gradient of a 2px line
	   every 8px over 18px gives bars at 0, 8 and 16. currentColor keeps it in step
	   with the navigation's text colour. */
	.wp-block-navigation__responsive-container-open svg {
		display: none;
	}

	.wp-block-navigation__responsive-container-open {
		background-image: repeating-linear-gradient(
			to bottom,
			currentColor 0 2px,
			transparent 2px 8px
		);
		background-repeat: no-repeat;
		background-size: 24px 18px;
		height: 18px;
		width: 24px;
	}

	/* The full school name wraps in a bar this narrow, so the phone gets the short
	   form instead. */
	.site-title-long {
		display: none;
	}

	.site-title-short {
		display: block;
	}
}

/* Home page cards: the columns are already full height, so stretching the card
   inside each one squares off the row when the middle card carries less text.
   The closing link is pinned to the bottom so the three read as a set. */
.feature-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.feature-card > :last-child {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
}

/* Events strip: one row that scrolls sideways instead of wrapping. The Query
   Loop has no horizontal layout of its own, so the post template becomes the
   scroll container here. Cards keep a fixed width so a partial card stays
   visible at the right edge — the cue that there is more to scroll to. */
.events-feed .wp-block-post-template {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	overflow-x: auto;
	padding-bottom: var(--wp--preset--spacing--20);
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
}

.events-feed .wp-block-post-template > li {
	/* Grow to share the row while the cards still fit, but never shrink below a
	   readable width — that floor is what makes the row overflow and scroll once
	   there are more events than fit across. */
	flex: 1 0 min(15rem, 100%);
	max-width: 100%;
	scroll-snap-align: start;
}

.events-feed .wp-block-post-title {
	margin-top: var(--wp--preset--spacing--20);
}

/* WPForms ships a 24px top margin on its container, which lands on top of the
   theme's own block gap and leaves the form floating below the page title. The
   `div` prefix matches the specificity of the plugin's own rule. */
div.wpforms-container,
div.wpforms-container-full {
	margin-top: 0;
}

/* Google's form embed code fixes the frame at 640px wide, which runs off the side
   of a phone. Capping it at the column width lets the committee paste the code
   unchanged. */
iframe[src*="docs.google.com/forms"] {
	max-width: 100%;
}