/*
Theme Name: GM Services
Theme URI: https://aidanbooth.co.uk
Author: Aidan Booth
Author URI: https://aidanbooth.co.uk
Description: Custom block theme for GM Services Cornwall. Authored code-first from Figma. No page builders.
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gm-services
Tags: full-site-editing, block-theme, custom-blocks
*/

/*
 * Global styles live in theme.json, not here.
 * Block styles live in each block's own stylesheet under /blocks.
 * Only add to this file if a style genuinely cannot live in either of those places,
 * and add a comment explaining why.
 *
 * The header and footer are template parts, not blocks, so their chrome layout
 * lives here. All design values are theme.json tokens. Fixed control geometry
 * (the 72px bar, the hamburger icon) is declared once as local custom properties
 * at the top of a rule, then referenced with var() — these are layout dimensions,
 * not design spacing, so they do not belong in the spacing scale.
 *
 * Responsive: one breakpoint switches the desktop chrome to the mobile chrome.
 *   --gm-bp-mobile: 900px  (documented here; CSS media queries cannot read a var,
 *   so the 900px literal below must be kept in step with this note.)
 */

/* ============================================================
   Site layout — full-bleed sections stack flush
   ============================================================ */

/*
 * The top-level blocks (header, main, footer) otherwise get a block-gap between
 * them, which shows the page background as a pale band above the hero and between
 * the last section and the footer. The header is a transparent overlay and the
 * sections are full-bleed, so they stack edge to edge with no gap.
 */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/*
 * Full-bleed sections stack flush with no block-gap between them. The two-class
 * selector outweighs WordPress's flow block-gap rule (`.is-layout-flow > * + *`),
 * which otherwise wins the same-specificity tie by source order and leaves a
 * pale band between sections. Add each new full-bleed section block to this list.
 * Prose blocks keep their normal spacing.
 */
.wp-block-post-content > .gm-hero,
.wp-block-post-content > .gm-statement {
	margin-block-start: 0;
}

/*
 * The header is position:fixed, so it is lifted out of the flow, and every page
 * opens with the bar transparent over the first section by design.
 *
 * Nothing is offset for it any more. Each page header already carries the 72 of
 * the bar inside its own top padding, which is why those paddings are 192 and
 * 264 rather than 120 and 192. Adding an offset here as well pushed every
 * interior page down by a second 72.
 *
 * The class is kept for anything dropped in later that is not one of the gm/
 * sections and does not account for the bar itself.
 */
.gm-has-fixed-header .wp-site-blocks > main {
	padding-block-start: var(--gm-header-h, 72px);
}

/* ============================================================
   Link hover convention (site-wide)
   ============================================================ */

/*
 * A plain link (not a button) hovers one step from its base: light text
 * (white) goes to Blue 4, dark text (Blue 1) goes to Blue 2. This keys off the
 * colour class WordPress puts on the link or its container. Component links that
 * use currentColor (e.g. the header nav) set their own hover alongside this.
 */
.has-white-color a:not(.wp-element-button):hover,
a.has-white-color:not(.wp-element-button):hover {
	color: var(--wp--preset--color--blue-4);
}

.has-blue-1-color a:not(.wp-element-button):hover,
a.has-blue-1-color:not(.wp-element-button):hover {
	color: var(--wp--preset--color--blue-2);
}

/* ============================================================
   Site header — fixed bar, transparent over the hero, solid on scroll
   ============================================================ */

.gm-site-header {
	--gm-header-h: 72px;
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 100;
	align-items: center;
	min-block-size: var(--gm-header-h);
	gap: var(--wp--preset--spacing--32);
	padding-block: 0;
	padding-inline: var(--wp--preset--spacing--32);
	/* Top of page: white content on the dark hero, transparent background. */
	color: var(--wp--preset--color--white);
	background-color: transparent;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 15%, transparent);
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/*
 * Solid state, added by site.js once the page is scrolled.
 *
 * Blue 1, not the Blue 5 the Header component draws. Aidan, 12 September 2026:
 * on a site this dark a light bar jumps out, so the bar keeps its white content
 * and white logo and only the background comes in behind it.
 */
.gm-site-header.is-scrolled {
	background-color: var(--wp--preset--color--blue-1);
}

/* Logo — light cut on the transparent bar, colour cut on the solid bar. */
.gm-site-header__logo {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.gm-site-header__logo-img {
	display: block;
	block-size: 20px;
	inline-size: auto;
}

/* The colour cut is no longer used: the bar is dark in both states. */
.gm-site-header__logo-img--solid {
	display: none;
}

.gm-site-header__end {
	align-items: center;
	gap: var(--wp--preset--spacing--32);
}

/* Nav and phone inherit the bar's current colour so they flip with the state. */
.gm-site-header__nav .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--32);
}

.gm-site-header__nav .wp-block-navigation-item__content {
	color: currentcolor;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

/*
 * Link hover convention: light text hovers to Blue 4. The bar is dark in both
 * states now, so one rule covers both.
 */
.gm-site-header__nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--blue-4);
}

.gm-site-header__phone {
	gap: 0;
}

/*
 * The number and the note sit tight together, as the Header component draws
 * them: no space between the two text boxes. Both inherited the body's 1.65
 * line height, which put 44 of height where the design has 37. `normal` on the
 * number and 1.5 on the note are the Heading S and Note - Serif Italic S values.
 */
.gm-site-header__phone-number {
	margin: 0;
	color: currentcolor;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/*
 * The number is a tel: link, so it picked up the global link colour (Blue 2,
 * underlined) and vanished against the photo. Two classes to beat that rule;
 * hover follows the nav convention above.
 */
.gm-site-header .gm-site-header__phone-number a {
	color: currentcolor;
	text-decoration: none;
}

.gm-site-header .gm-site-header__phone-number a:hover {
	color: var(--wp--preset--color--blue-4);
}

/* Note - Serif Italic S, in the bar's own colour as the Header component has it. */
.gm-site-header__phone-note {
	margin: 0;
	color: currentcolor;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--xs);
	font-style: italic;
	font-weight: 500;
	line-height: 1.5;
}

/*
 * The ENQUIRE button no longer inverts when the bar goes solid: the solid bar is
 * dark, so the light button reads on it as it does over the hero.
 *
 * The button block is an inline-block on a line box, so it inherited the body's
 * 1.65 line height and stood 50 tall inside a 42 button. That pushed it 4.5 high
 * in the bar, and the same wrapper shifted the whole phone menu up by 4.
 */
.gm-site-header .wp-block-button {
	line-height: 0;
}

/* ------------------------------------------------------------
   Mobile menu button (hamburger) — hidden above the breakpoint
   ------------------------------------------------------------ */

.gm-nav-toggle {
	--gm-burger-gap: var(--wp--preset--spacing--4);
	--gm-burger-pad: var(--wp--preset--spacing--12);
	--gm-burger-bar-w: 21px;
	--gm-burger-bar-h: 2px;
	position: relative;
	z-index: 1;
	display: none;
	flex-direction: column;
	gap: var(--gm-burger-gap);
	padding: var(--gm-burger-pad);
	background: transparent;
	border: 1px solid color-mix(in srgb, currentcolor 15%, transparent);
	border-radius: 4px;
	cursor: pointer;
	color: inherit;
}

.gm-nav-toggle__bar {
	inline-size: var(--gm-burger-bar-w);
	block-size: var(--gm-burger-bar-h);
	background: currentcolor;
	transition: transform 0.3s ease, opacity 0.2s ease;
}

/* ============================================================
   Site footer — dark Blue 1 block
   ============================================================ */

.gm-site-footer {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--96);
	padding-block-start: var(--wp--preset--spacing--96);
	padding-block-end: var(--wp--preset--spacing--32);
	padding-inline: var(--wp--preset--spacing--32);
	background-color: var(--wp--preset--color--blue-1);
	color: var(--wp--preset--color--white);
}

/*
 * WordPress's flow layout puts a 24 top margin on every child of the footer and
 * of its bottom group, which lands on top of the flex gaps and made the spacing
 * 120 and 88 where the design has 96 and 48.
 */
.gm-site-footer.gm-site-footer > *,
.gm-site-footer .gm-site-footer__bottom > * {
	margin-block-start: 0;
}

/* The number and its note are one pair, with no space between them. */
.gm-site-footer .gm-site-footer__contact {
	gap: 0;
}

.gm-site-footer__columns {
	align-items: flex-start;
	gap: var(--wp--preset--spacing--24);
}

/*
 * The Services + Menu group is a WordPress flex layout, which defaults to
 * vertical-centre. That left the shorter Menu column centred against the taller
 * Services column. Force top alignment so the two lists start on the same line.
 */
.gm-site-footer__links-group {
	flex: 1 1 0;
	min-width: 0;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--24);
}

.gm-site-footer__col {
	flex: 1 1 0;
	min-width: 0;
	gap: var(--wp--preset--spacing--12);
}

.gm-site-footer__note {
	margin: 0;
	color: var(--wp--preset--color--blue-4-light);
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--xs);
	font-style: italic;
	font-weight: 500;
	line-height: 1.5;
}

.gm-site-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
	/* body-s is a paragraph style and does not apply to this list, so set it here. */
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.55;
	/* The design sets the list on a 24 line: 20 of text and a 4 gap. */
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
}

.gm-site-footer__links li {
	margin: 0;
}

.gm-site-footer__links a,
.gm-site-footer__link a,
.gm-site-footer__policies a,
.gm-site-footer__col a {
	color: inherit;
	text-decoration: none;
}

.gm-site-footer__links a:hover,
.gm-site-footer__policies a:hover {
	color: var(--wp--preset--color--blue-4);
}

.gm-site-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--48);
}

.gm-site-footer__row {
	gap: var(--wp--preset--spacing--24);
	padding-block-start: var(--wp--preset--spacing--24);
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--blue-5) 18%, transparent);
}

.gm-site-footer__kiln .is-style-gm-intro-serif {
	max-width: 55rem;
	margin: 0;
}

.gm-site-footer__link {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.gm-site-footer__policies {
	gap: var(--wp--preset--spacing--24);
}

/* ============================================================
   Mobile — chrome switches to the mobile layout below 900px
   ============================================================ */

@media (max-width: 900px) {

	/* --- Header: collapse to logo + hamburger, nav becomes an overlay --- */

	.gm-nav-toggle {
		display: inline-flex;
	}

	.gm-site-header__end {
		position: fixed;
		inset: 0;
		z-index: 0;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		/*
		 * Figma: Nav + contact (911:1826). 24 margins; 48 from the links to the
		 * phone, 24 from the phone to the button. The 48 is this 24 plus the 24
		 * below the nav.
		 */
		gap: var(--wp--preset--spacing--24);
		padding-block: var(--wp--preset--spacing--96);
		padding-inline: var(--wp--preset--spacing--24);
		background-color: var(--wp--preset--color--blue-1);
		color: var(--wp--preset--color--white);
		/* Off-canvas until opened. */
		transform: translateX(100%);
		visibility: hidden;
		overflow-y: auto;
		transition: transform 0.3s ease, visibility 0s linear 0.3s;
	}

	.gm-site-header.gm-nav-open .gm-site-header__end {
		transform: translateX(0);
		visibility: visible;
		transition: transform 0.3s ease, visibility 0s;
	}

	/* Overlay is dark, so the bar reads as the light-content state while open. */
	.gm-site-header.gm-nav-open {
		background-color: transparent;
		color: var(--wp--preset--color--white);
		border-block-end-color: transparent;
	}

	/* Hamburger turns into a close (X) when open. */
	.gm-site-header.gm-nav-open .gm-nav-toggle__bar:nth-child(1) {
		transform: translateY(6px) rotate(45deg);
	}

	.gm-site-header.gm-nav-open .gm-nav-toggle__bar:nth-child(2) {
		opacity: 0;
	}

	.gm-site-header.gm-nav-open .gm-nav-toggle__bar:nth-child(3) {
		transform: translateY(-6px) rotate(-45deg);
	}

	/* Nav links in Heading M - Sans, flush left, 16 apart, as 911:1826 draws them. */
	/* Direct child only: the nav block repeats this class on its inner list. */
	.gm-site-header__end > .gm-site-header__nav {
		margin-block-end: var(--wp--preset--spacing--24);
	}

	.gm-site-header__end .wp-block-navigation__container {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--16);
	}

	.gm-site-header__end .wp-block-navigation-item__content {
		font-size: var(--wp--preset--font-size--xl);
		line-height: 1.05;
		letter-spacing: -0.03em;
		text-transform: none;
	}

	/* The overlay is always dark, so links hover to Blue 4 whatever the scroll state. */
	.gm-site-header.gm-nav-open .gm-site-header__nav .wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--blue-4);
	}

	.gm-site-header__phone {
		align-items: flex-start;
	}

	/* The overlay keeps the number at Heading S and tones the note to Blue 4. */
	.gm-site-header__end .gm-site-header__phone-note {
		color: var(--wp--preset--color--blue-4);
	}

	/* Body scroll is locked while the overlay is open (class set by site.js). */
	.gm-nav-lock,
	.gm-nav-lock body {
		overflow: hidden;
	}

	/* --- Footer: stack the columns --- */

	/*
	 * 64 above, 32 below, 24 in from the sides, and 192 from the company block
	 * down to the kiln rule, as the mobile footer draws it (153:291).
	 */
	.gm-site-footer {
		gap: var(--wp--preset--spacing--192);
		padding-block: var(--wp--preset--spacing--64) var(--wp--preset--spacing--32);
		padding-inline: var(--wp--preset--spacing--24);
	}

	.gm-site-footer__columns {
		flex-direction: column;
		gap: var(--wp--preset--spacing--48);
	}

	/* The kiln link sits 32 under its line on the phone. */
	.gm-site-footer__row {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--32);
	}

	/* The legal row keeps its pair close: 8 from the copyright to the links. */
	.gm-site-footer .gm-site-footer__legal {
		gap: var(--wp--preset--spacing--8);
	}

	.gm-site-footer .gm-site-footer__policies {
		flex-direction: row;
		gap: var(--wp--preset--spacing--16);
	}
}

/* ============================================================
   Phone — the true mobile footer (matches the 390 design)
   ============================================================ */

@media (max-width: 600px) {

	/*
	 * The mobile footer design drops the Services and Menu link columns, keeping
	 * company info, the kiln note and the legal row. Primary navigation is covered
	 * by the header overlay on mobile. Scoped to the footer to outweigh
	 * WordPress's .is-layout-flex{display:flex} on the same element.
	 */
	.gm-site-footer .gm-site-footer__links-group {
		display: none;
	}
}

/* ==========================================================================
   Component gallery (review scaffolding, not design)
   --------------------------------------------------------------------------
   The Component Gallery page stacks every block in order with a numbered
   label above each, mirroring the Figma review page so the two can be read
   side by side. It is a studio review harness: nothing here is client-facing
   and none of it should be reused in a real page.

   Scoped to the label class rather than a body class, because block themes do
   not emit a page-slug body class. The label carries the rhythm on its own
   margins, so no override of the flush-stacking rule is needed: adjacent
   sibling margins collapse to the larger of the two.

   The 120px rhythm is a review value, not a design token, so it lives here as
   a local custom property rather than in theme.json.
   ========================================================================== */
.wp-block-post-content > .gm-gallery-label {
	--gm-gallery-gap: 120px;

	/*
	 * Break out of the constrained content width and the root padding so the
	 * label spans the viewport like the sections it introduces. Without this the
	 * label sits in a 1440 column while the sections run full bleed, which makes
	 * the page read wrongly on a wide screen.
	 */
	max-width: none;
	width: auto;
	margin-inline: calc(-1 * var(--wp--style--root--padding-right)) calc(-1 * var(--wp--style--root--padding-left));
	margin-block-start: var(--gm-gallery-gap);
	margin-block-end: var(--wp--preset--spacing--24);
	padding-block-start: var(--wp--preset--spacing--16);
	padding-inline: var(--wp--preset--spacing--32);
	border-block-start: 1px solid var(--wp--preset--color--blue-4);
	color: var(--wp--preset--color--blue-3);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/*
 * The header is fixed, so the first label needs to clear it. Every other label
 * sits in the 120px rhythm and clears it naturally.
 */
.wp-block-post-content > .gm-gallery-label:first-child {
	margin-block-start: 0;
	padding-block-start: calc(var(--gm-header-h, 72px) + var(--wp--preset--spacing--32));
	border-block-start: 0;
}

@media (max-width: 900px) {

	.wp-block-post-content > .gm-gallery-label {
		--gm-gallery-gap: var(--wp--preset--spacing--64);

		padding-inline: var(--wp--preset--spacing--24);
	}
}

/* ============================================================
   Cookie consent — banner and preferences (inc/cookies.php)
   ============================================================ */

/*
 * Figma: Cookie banner (454:2063). A Blue 1 card, 528 wide, 24 in from the
 * bottom-left corner, 24 padding, 12 radius; on a phone it spans the screen
 * inside 24 margins, the radius drops to 8 and the buttons stack full width.
 * Text follows the site-wide switch to white for what the design has as Blue 5.
 */
.gm-cookies {
	position: fixed;
	inset-block-end: var(--wp--preset--spacing--24);
	inset-inline-start: var(--wp--preset--spacing--24);
	z-index: 200;
	inline-size: min(33rem, calc(100% - 2 * var(--wp--preset--spacing--24)));
}

.gm-cookies[hidden],
.gm-cookies__panel[hidden] {
	display: none;
}

.gm-cookies__panel {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--24);
	padding: var(--wp--preset--spacing--24);
	border-radius: 12px;
	background-color: var(--wp--preset--color--blue-1);
	box-shadow: 0 4px 20px var(--wp--custom--color--black-20);
	color: var(--wp--preset--color--white);
}

.gm-cookies__intro {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
}

.gm-cookies__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--16);
}

/* Body L - Sans. */
.gm-cookies__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--white);
}

.gm-cookies__title:focus {
	outline: none;
}

.gm-cookies__close {
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--body-m);
	line-height: 1.5;
	cursor: pointer;
}

.gm-cookies__close--muted {
	color: var(--wp--preset--color--blue-4-light);
}

.gm-cookies__close:hover,
.gm-cookies__close:focus-visible {
	color: var(--wp--preset--color--blue-4-light);
}

/* Body L - Serif in Blue 4. */
.gm-cookies__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--blue-4-light);
}

.gm-cookies__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--12);
}

.gm-cookies .gm-cookies__button {
	border: 0;
	cursor: pointer;
}

/* The third button is outlined in Blue 3 rather than filled. */
.gm-cookies .gm-cookies__button--outline {
	background-color: transparent;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--blue-3);
	color: var(--wp--preset--color--white);
}

.gm-cookies__categories {
	margin: 0;
	padding: 0;
	list-style: none;
	border-block-end: 1px solid var(--wp--preset--color--blue-3);
}

.gm-cookies__category {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--24);
	padding-block: var(--wp--preset--spacing--16);
	border-block-start: 1px solid var(--wp--preset--color--blue-3);
}

.gm-cookies__category-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
	min-inline-size: 0;
}

.gm-cookies__category-name {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
}

.gm-cookies__category-note {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.55;
	color: var(--wp--preset--color--blue-4-light);
}

/* A 40 by 24 switch: Blue 3 when off, white with a Blue 1 knob when on. */
.gm-cookies__toggle {
	position: relative;
	flex: none;
	inline-size: 40px;
	block-size: 24px;
	margin: 0;
	border-radius: 12px;
	background-color: var(--wp--preset--color--blue-3);
	appearance: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.gm-cookies__toggle::before {
	content: "";
	position: absolute;
	inset-block-start: 4px;
	inset-inline-start: 4px;
	inline-size: 16px;
	block-size: 16px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--white);
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.gm-cookies__toggle:checked {
	background-color: var(--wp--preset--color--white);
}

.gm-cookies__toggle:checked::before {
	background-color: var(--wp--preset--color--blue-1);
	transform: translateX(16px);
}

.gm-cookies__toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--blue-4);
	outline-offset: 2px;
}

.gm-cookies__links {
	display: flex;
	gap: var(--wp--preset--spacing--24);
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.55;
}

.gm-cookies .gm-cookies__links a {
	color: var(--wp--preset--color--blue-4-light);
	text-decoration: none;
}

.gm-cookies .gm-cookies__links a:hover {
	color: var(--wp--preset--color--white);
}

@media (max-width: 600px) {

	.gm-cookies__panel {
		border-radius: 8px;
	}

	.gm-cookies__panel--banner .gm-cookies__actions {
		flex-direction: column;
	}

	.gm-cookies__panel--banner .gm-cookies__button {
		inline-size: 100%;
		justify-content: center;
		text-align: center;
	}
}