/*
Theme Name: Maynooth Medical
Theme URI: https://www.maynoothmedical.com
Description: Calm, task-first block theme for Maynooth Medical. Building-red palette sampled from the practice shopfront; teal and blue style variations included.
Version: 1.7.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
Author: —
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: maynooth-medical
*/

/* Wordmark webfont, SELF-HOSTED and never loaded from Google - a remote font
   request is a third-party call on every page view, which is exactly what the
   click-to-load policy exists to avoid (convention 7).

   Windows machines have genuine Monotype Corsiva and get it through local().
   PHONES HAVE NEITHER, which is why this file has to exist: for nine months it
   was referenced and absent, so desktop looked right, mobile fell through to
   whatever generic cursive the device had, and nothing anywhere said so.
   Tangerine is OFL-licensed, so self-hosting it is permitted; Monotype Corsiva
   is not, which is why it is reached through local() and never shipped. */
@font-face {
	font-family: "Tangerine";
	src: local("Monotype Corsiva"), local("Apple Chancery"),
	     url("assets/fonts/tangerine-700.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}

.mm-wordmark { line-height: 1.05; }
.mm-card { border: 1px solid var(--wp--preset--color--line); border-radius: 10px; padding: 20px; background: var(--wp--preset--color--tint); }
.mm-check li { list-style: none; position: relative; padding-left: 22px; margin-bottom: 4px; }
.mm-check li::before { content: "\2713"; position: absolute; left: 0; color: var(--wp--preset--color--brand); font-weight: 700; }
.mm-check { padding-left: 0; }

/* ---------------------------------------------------------------------------
   Fluent Forms — brand styling.
   Fluent Forms ships its own blue and knows nothing about theme.json, so it is
   restyled here using the theme's own palette tokens rather than hard-coded
   hex. Change the palette in theme.json and the forms follow.
   Kept in the THEME, not practice-core: this is the client's look, and
   practice-core is shared by every practice (convention 5).
   --------------------------------------------------------------------------- */
/* !important is deliberate and confined to the colour properties. Fluent Forms
   sets the submit button's colours from its OWN per-form styling settings,
   emitted after the theme stylesheet and sometimes inline on the element, so a
   plain rule loses regardless of load order. The alternative is setting the
   colour by hand in every form's button settings on every practice site, which
   is exactly the kind of per-client manual step this codebase avoids. */
.fluentform form.frm-fluent-form .ff-btn-submit,
.fluentform .ff-btn-submit,
.fluentform .ff_btn_style,
.fluentform button[type="submit"],
.fluentform input[type="submit"] {
	background-color: var(--wp--preset--color--brand) !important;
	border: 1px solid var(--wp--preset--color--brand) !important;
	color: var(--wp--preset--color--base) !important;
	border-radius: 6px;
	padding: 12px 26px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
.fluentform form.frm-fluent-form .ff-btn-submit:hover,
.fluentform .ff-btn-submit:hover,
.fluentform .ff_btn_style:hover,
.fluentform button[type="submit"]:hover,
.fluentform input[type="submit"]:hover {
	background-color: var(--wp--preset--color--brand-dark) !important;
	border-color: var(--wp--preset--color--brand-dark) !important;
}
/* Keyboard focus must stay clearly visible — patients using keyboard or
   screen-reader navigation are exactly who this form has to work for. */
.fluentform .ff-btn-submit:focus-visible,
.fluentform .ff_btn_style:focus-visible,
.fluentform button[type="submit"]:focus-visible {
	outline: 3px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

/* Inputs: match the card styling used elsewhere on the site. */
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform input[type="date"],
.fluentform select,
.fluentform textarea {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	padding: 10px 12px;
}
.fluentform input:focus,
.fluentform select:focus,
.fluentform textarea:focus {
	border-color: var(--wp--preset--color--brand);
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 1px;
}
.fluentform .ff-el-input--label label { font-weight: 600; color: var(--wp--preset--color--ink); }
.fluentform .ff-el-is-error .text-danger { color: var(--wp--preset--color--brand-dark); }

/* ------------------------------------------------------------------
   Mobile menu button: three bars, not two.

   WordPress core's navigation block draws its own icon, and it is TWO bars:

     <path d="M4 7.5h16v1.5H4z"/><path d="M4 15h16v1.5H4z"/>

   That is core's design choice rather than anything this theme does, and it
   cannot be changed by configuration - the SVG is hardcoded in the block's
   render. A practice recognises a hamburger as three lines, and being told
   "that is how WordPress draws it" does not make their site look less odd.

   So the two paths are hidden and three bars are drawn on the button instead.
   The SVG element itself is kept, because it is what gives the button its
   24x24 size; removing it would collapse the tap target.

   Nothing changes for assistive technology: the SVG is already
   aria-hidden="true" and the button keeps its aria-label="Open menu". The
   close button is a different class and is untouched.
   ------------------------------------------------------------------ */
.wp-block-navigation__responsive-container-open > svg > path { display: none; }

.wp-block-navigation__responsive-container-open { position: relative; }

.wp-block-navigation__responsive-container-open::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* Core's own bar geometry, so the weight matches the rest of the chrome. */
	width: 16px;
	height: 1.5px;
	background: currentColor;
	/* The other two bars. 6px apart rather than core's 7.5, so three fit in the
	   same 24px box without looking cramped against the edges. */
	box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}