/**
 * GIROPPONANDO — supplementary styles
 * Layout helpers, header behaviour, language switcher, hover effects.
 * Colors reference the theme.json CSS custom properties (--wp--preset--color--*).
 */

:root {
	--giroppo-transition: 0.3s ease;
}

/* ---------- Base smoothing ---------- */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ---------- Prevent horizontal overflow on all viewports ---------- */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}
html {
	scroll-behavior: smooth;
}
/* Smoother interactions; respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}
img,
.wp-block-cover__image-background {
	max-width: 100%;
}

/* ---------- Section eyebrow / label ---------- */
.giroppo-eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	/* keep labels readable over photos */
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* Thin gold rule used as a decorative divider */
.giroppo-rule {
	display: inline-block;
	width: 56px;
	height: 1px;
	background: var(--wp--preset--color--gold);
}

/* ---------- Header: FIXED, light translucent, overlaps the hero (no gap) ---------- */
.wp-site-blocks {
	position: relative;
}
.wp-site-blocks > header.wp-block-template-part {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	/* translucent navy (no backdrop blur — blur on a fixed header causes
	   repaint jank while scrolling) */
	background-color: rgba(14, 27, 51, 0.62);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	transition: background-color 0.3s ease;
}
.home .wp-site-blocks > header.wp-block-template-part {
	background-color: rgba(14, 27, 51, 0.24);
}
/* Header CTA must never wrap */
.wp-site-blocks > header .wp-block-button__link {
	white-space: nowrap;
}
/* Pages without a full-bleed hero: push content below the fixed header */
.blog:not(.home) .wp-site-blocks > main,
.search .wp-site-blocks > main {
	padding-top: 5rem;
}
/* Home: <main> is the 2nd child of wp-site-blocks, so WP's block-gap rule
   (:where(.wp-site-blocks) > * { margin-block-start:1.5rem }) pushes the
   full-bleed hero down — and since the header is fixed (out of flow), that
   1.5rem shows as a body-coloured strip above the hero. Remove it so the hero
   sits flush at the very top, under the fixed header. */
.home .wp-site-blocks > main {
	margin-block-start: 0;
}

/* ---------- Hero title divider: a simple, slightly transparent white line ---------- */
.giroppo-title-rule {
	width: 84px;
	height: 1px;
	background: rgba(255, 255, 255, 0.5);
	margin: 1.75rem auto 0;
	border: 0;
}

/* ---------- Translucent backing panel behind main photos (editorial framing) ---------- */
.giroppo-photo-panel {
	position: relative;
}
.giroppo-photo-panel::before {
	content: "";
	position: absolute;
	inset: -1.5rem;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 4px;
	z-index: 0;
	pointer-events: none;
}
.giroppo-photo-panel > * {
	position: relative;
	z-index: 1;
}

/* Framed cards: a faint translucent panel so the main content/photos stand out */
.giroppo-framed {
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 5px;
	padding: 0.85rem 0.85rem 1.4rem;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
	transition: background var(--giroppo-transition), transform var(--giroppo-transition), box-shadow var(--giroppo-transition);
}
.giroppo-framed:hover {
	background: rgba(255, 255, 255, 0.07);
}
.giroppo-framed .wp-block-post-featured-image {
	margin-bottom: 0.9rem;
}

/* SNS cards (bordered groups) also get a soft shadow */
.giroppo-card .wp-block-group.has-border-color {
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
}

/* ---------- Interactive category section ---------- */
.giroppo-cats__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4.5rem; /* 3× the previous spacing */
}
.giroppo-cat {
	position: relative;
	min-height: 460px;
	border: 0;
	margin: 0;
	padding: 2rem;
	border-radius: 3px;
	overflow: hidden;
	cursor: pointer;
	background-size: cover;
	background-position: center;
	color: var(--wp--preset--color--off-white);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	text-align: left;
	font-family: var(--wp--preset--font-family--sans);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38);
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.giroppo-cat:hover {
	box-shadow: 0 24px 56px rgba(0, 0, 0, 0.5);
}
.giroppo-cat::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(10, 18, 34, 0.45);
	transition: background 0.35s ease;
}
.giroppo-cat:hover::before {
	background: rgba(10, 18, 34, 0.62);
}
.giroppo-cat:hover {
	transform: translateY(-4px);
}
.giroppo-cat > * {
	position: relative;
	z-index: 1;
}
.giroppo-cat__num {
	position: absolute;
	top: 2rem;
	left: 2rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.giroppo-cat__title {
	display: block;
	font-size: 2rem;
	font-weight: 400;
	letter-spacing: -0.01em;
}
.giroppo-cat__desc {
	display: block;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	color: var(--wp--preset--color--champagne);
	font-size: 0.9rem;
	line-height: 1.6;
	transition: max-height 0.4s ease, opacity 0.35s ease, margin-top 0.35s ease;
}
.giroppo-cat:hover .giroppo-cat__desc,
.giroppo-cat:focus-visible .giroppo-cat__desc {
	max-height: 180px;
	opacity: 1;
	margin-top: 0.9rem;
}

/* Detail (expanded) mode: photo left, content right; others hidden. */
.giroppo-cats__panels {
	display: none;
}
.giroppo-cats.is-detail .giroppo-cats__grid {
	display: none;
}
.giroppo-cats.is-detail .giroppo-cats__panels {
	display: block;
}
.giroppo-panel {
	display: none;
}
.giroppo-panel.is-active {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 500px;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
	animation: giroppoFade 0.4s ease;
}
@keyframes giroppoFade {
	from { opacity: 0; transform: translateX(40px); }
	to { opacity: 1; transform: none; }
}
.giroppo-panel__photo {
	background-size: cover;
	background-position: center;
}
.giroppo-panel__body {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
	padding: clamp(2rem, 5vw, 4rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1rem;
}
.giroppo-panel__close {
	align-self: flex-start;
	background: none;
	border: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	cursor: pointer;
	padding: 0;
}
.giroppo-panel__close:hover {
	color: var(--wp--preset--color--gold);
}
.giroppo-panel__title {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 400;
	margin: 0;
}
.giroppo-panel__desc {
	color: var(--wp--preset--color--champagne);
	line-height: 1.8;
	margin: 0;
}
.giroppo-panel__cta {
	color: var(--wp--preset--color--gold);
	text-decoration: none;
	font-size: 0.95rem;
}
.giroppo-panel__cta:hover {
	color: var(--wp--preset--color--champagne);
}
@media (max-width: 781px) {
	.giroppo-cats__grid {
		grid-template-columns: 1fr;
		gap: 3rem;
	}
	.giroppo-cat {
		min-height: 380px;
	}
	.giroppo-panel.is-active {
		grid-template-columns: 1fr;
	}
	.giroppo-panel__photo {
		min-height: 220px;
	}
	/* No hover on touch: show the description by default */
	.giroppo-cat__desc {
		max-height: 200px;
		opacity: 1;
		margin-top: 0.9rem;
	}

	/* Mobile auto-rotation: stack vertically, show one card at a time,
	   JS advances to the next every 2s and loops. */
	.giroppo-cats.is-mobile-auto .giroppo-cats__grid {
		display: block;
	}
	.giroppo-cats.is-mobile-auto .giroppo-cat {
		display: none;
		width: 100%;
		min-height: 440px;
	}
	.giroppo-cats.is-mobile-auto .giroppo-cat.is-shown {
		display: flex;
		animation: giroppoFade 0.5s ease;
	}
}

/* Mobile carousel dots (shown only in mobile auto mode) */
.giroppo-cats__dots {
	display: none;
}
.giroppo-cats.is-mobile-auto .giroppo-cats__dots {
	display: flex;
	justify-content: center;
	gap: 0.55rem;
	margin-top: 1.3rem;
}
.giroppo-cats__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.3);
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease;
}
.giroppo-cats__dot.is-active {
	background: var(--wp--preset--color--gold);
	transform: scale(1.3);
}

/* ---------- Navigation underline animation ---------- */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding-bottom: 2px;
}
.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 0;
	height: 1px;
	background: var(--wp--preset--color--gold);
	transition: width var(--giroppo-transition);
}
.wp-block-navigation .wp-block-navigation-item__content:hover::after {
	width: 100%;
}

/* ---------- Language switcher ---------- */
.giroppo-lang-switcher {
	display: flex;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.giroppo-lang-switcher li {
	margin: 0;
}
.giroppo-lang-switcher a,
.giroppo-lang-switcher .lang-item span {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: color var(--giroppo-transition);
}
.giroppo-lang-switcher a:hover {
	color: var(--wp--preset--color--gold);
}
.giroppo-lang-switcher .current-lang a,
.giroppo-lang-switcher .current-lang span {
	color: var(--wp--preset--color--off-white);
	font-weight: 600;
}

/* ---------- Cards (categories / posts) hover lift ---------- */
.giroppo-card {
	transition: transform var(--giroppo-transition), box-shadow var(--giroppo-transition);
	will-change: transform;
}
.giroppo-card:hover {
	transform: translateY(-6px);
}

/* Zoom image inside cover/image blocks marked as cards */
.giroppo-card .wp-block-image img,
.giroppo-card .wp-block-cover__image-background {
	transition: transform 0.6s ease;
}
.giroppo-card:hover .wp-block-image img,
.giroppo-card:hover .wp-block-cover__image-background {
	transform: scale(1.06);
}
.giroppo-card .wp-block-image,
.giroppo-card .wp-block-cover {
	overflow: hidden;
}

/* ---------- Hero spacing on small screens ---------- */
@media (max-width: 781px) {
	.wp-site-blocks > header.wp-block-template-part {
		/* IMPORTANT: backdrop-filter makes the header a containing block for
		   position:fixed descendants, which traps the mobile navigation overlay
		   inside the header height. Disable it on mobile so the menu can open
		   full-screen. */
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
	/* Header row on phones: logo left, then language switcher, hamburger far right */
	.wp-site-blocks > header .wp-block-group.alignwide {
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		gap: 0.6rem;
	}
	.wp-site-blocks > header .wp-block-group.alignwide > .wp-block-site-title {
		margin-right: auto;
	}
	/* the right-hand group holds the language switcher (CTA is hidden on phones) */
	.wp-site-blocks > header .wp-block-group.alignwide > .wp-block-group:last-child {
		order: 2;
		margin: 0;
	}
	.wp-site-blocks > header .wp-block-navigation {
		order: 3;
		margin: 0;
	}
	.wp-site-blocks > header .wp-block-site-title {
		font-size: 1.05rem;
	}

	/* Mobile slide-out menu: centred, comfortable spacing (override core's
	   32px gap + right alignment with !important). */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		flex: 1 1 auto;
		justify-content: center !important;
		align-items: center !important;
		width: 100%;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: 1rem !important;
		width: 100% !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center;
		padding-right: 0 !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100% !important;
		justify-content: center !important;
		text-align: center !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		margin: 0 auto !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		font-size: 1.3rem;
		letter-spacing: 0.05em;
	}
}

/* Tour CTA inside the mobile menu overlay — only visible when the menu is open */
.giroppo-menu-cta {
	display: none;
}
.wp-block-navigation__responsive-container.is-menu-open .giroppo-menu-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 2.25rem;
	padding: 0.95rem 2.6rem;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 2px;
	white-space: nowrap;
	transition: background 0.3s ease;
}
.wp-block-navigation__responsive-container.is-menu-open .giroppo-menu-cta:hover {
	background: var(--wp--preset--color--champagne);
}

/* ---------- Language switcher: compact dropdown (IT ▾ → list) ---------- */
.giroppo-langsw {
	position: relative;
	display: inline-block;
	font-family: var(--wp--preset--font-family--sans);
}
.giroppo-langsw__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	height: 24px; /* match the hamburger icon height for aligned header controls */
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1;
	color: var(--wp--preset--color--off-white);
	transition: color 0.25s ease;
}
.giroppo-langsw__toggle:hover {
	color: var(--wp--preset--color--gold);
}
.giroppo-langsw__chev {
	transition: transform 0.25s ease;
}
.giroppo-langsw.is-open .giroppo-langsw__chev {
	transform: rotate(180deg);
}
.giroppo-langsw__list {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	min-width: 150px;
	list-style: none;
	margin: 0;
	padding: 0.4rem 0;
	background: var(--wp--preset--color--ink);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 4px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 200;
}
.giroppo-langsw.is-open .giroppo-langsw__list {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.giroppo-langsw__item {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0.55rem 1.1rem;
	font-family: inherit;
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: color 0.2s ease, background 0.2s ease;
}
.giroppo-langsw__item:hover {
	color: var(--wp--preset--color--off-white);
	background: rgba(255, 255, 255, 0.05);
}
.giroppo-langsw__item.is-active {
	color: var(--wp--preset--color--gold);
}

/* ---------- Segmented language buttons (IT | EN | JA) ---------- */
.giroppo-langbtns {
	display: inline-flex;
	align-items: stretch;
	height: 24px; /* match the hamburger icon height for aligned header controls */
	border: 1px solid rgba(255, 255, 255, 0.32);
	border-radius: 4px;
	overflow: hidden;
	font-family: var(--wp--preset--font-family--sans);
}
.giroppo-langbtns__item {
	display: inline-flex;
	align-items: center;
	padding: 0 0.55rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1;
	color: var(--wp--preset--color--off-white);
	text-decoration: none;
	background: transparent;
	border-right: 1px solid rgba(255, 255, 255, 0.2);
	transition: background-color 0.2s ease, color 0.2s ease;
}
.giroppo-langbtns__item:last-child {
	border-right: 0;
}
a.giroppo-langbtns__item:hover {
	background: rgba(255, 255, 255, 0.12);
}
.giroppo-langbtns__item.is-active {
	background: var(--wp--preset--color--off-white);
	color: var(--wp--preset--color--ink);
	cursor: default;
}

/* Current page: persistent underline in the header nav (artemisia-style) */
.wp-block-navigation .wp-block-navigation-item__content[aria-current]::after,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after {
	width: 100%;
}

/* ---------- Custom footer (translatable) ---------- */
.giroppo-footer {
	max-width: 1320px;
	margin: 0 auto;
}
.giroppo-footer__cols {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 3rem;
}
.giroppo-footer__logo {
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--off-white);
	text-decoration: none;
}
.giroppo-footer__tag {
	color: var(--wp--preset--color--muted);
	font-size: 0.85rem;
	line-height: 1.8;
	margin-top: 1rem;
	max-width: 360px;
}
.giroppo-footer__col ul,
.giroppo-footer__bar ul {
	list-style: none;
	padding: 0;
	margin: 0.6rem 0 0;
	line-height: 2;
}
.giroppo-footer__col a,
.giroppo-footer__brand a,
.giroppo-footer__bar a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}
.giroppo-footer__col a:hover,
.giroppo-footer__bar a:hover {
	color: var(--wp--preset--color--gold);
}
.giroppo-footer__cta {
	display: inline-block;
	margin-top: 1.2rem;
	color: var(--wp--preset--color--gold) !important;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.giroppo-footer__bar {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	color: var(--wp--preset--color--muted);
	font-size: 0.8rem;
}
.giroppo-footer__bar ul {
	display: flex;
	gap: 1.25rem;
	margin: 0;
}
@media (max-width: 781px) {
	.giroppo-footer__cols {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

/* On phones, hide the redundant header CTA (the menu + hero CTA cover it),
   which is what caused the header to overflow horizontally. */
@media (max-width: 600px) {
	.wp-site-blocks > header .wp-block-buttons {
		display: none;
	}
	.wp-block-site-title {
		letter-spacing: 0.06em;
	}

	/* ROOT FIX: inner content of covers/sections sets max-width up to 760–920px
	   (the constrained contentSize). On phones that exceeds the viewport, so long
	   lines never wrap and get clipped. Force everything inside to fit the screen. */
	.wp-block-cover__inner-container *,
	.wp-block-group.is-layout-constrained > * {
		max-width: 100% !important;
	}
	.wp-block-cover__inner-container,
	.wp-block-group.is-layout-constrained {
		max-width: 100%;
	}

	/* Full-bleed FIX: cover blocks are display:flex, so the negative-margin
	   full-width trick does NOT expand their width (they stayed 32px short on the
	   right, shifting content left). Force true full-viewport width, centered. */
	.wp-block-cover.alignfull,
	.wp-block-group.alignfull {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		box-sizing: border-box;
	}

	/* Display headings: scale down so they wrap nicely instead of overflowing. */
	.has-huge-font-size {
		font-size: 2.3rem !important;
		line-height: 1.1 !important;
	}
	.has-xx-large-font-size {
		font-size: 1.85rem !important;
	}
	.has-x-large-font-size {
		font-size: 1.5rem !important;
	}
	.has-large-font-size {
		font-size: 1.15rem !important;
	}

	/* Let any long word break rather than push the layout wider. */
	h1, h2, h3, p, a, li {
		overflow-wrap: break-word;
	}
}

/* ---------- Footer link rows ---------- */
.giroppo-sns-links {
	display: flex;
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.giroppo-sns-links li {
	margin: 0;
}

/* ---------- Buttons: equal height (filled + outline) ---------- */
/* Give every button a 1px border (transparent on the filled one) so the
   outline variant's border doesn't make it taller. Flex-center the label. */
.wp-block-button__link {
	border: 1px solid transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}
.wp-block-buttons.is-layout-flex {
	align-items: stretch;
}
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--off-white);
	border: 1px solid var(--wp--preset--color--gold);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

/* ---------- Contact Form 7 styling to match theme ---------- */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="date"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(201, 168, 106, 0.35);
	border-radius: 2px;
	color: var(--wp--preset--color--off-white);
	padding: 0.85rem 1rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	margin-top: 0.35rem;
}
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--gold);
	background: rgba(255, 255, 255, 0.07);
}
.wpcf7 label {
	display: block;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--champagne);
	margin-bottom: 1.1rem;
}
.wpcf7 input[type="submit"] {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	border: none;
	border-radius: 2px;
	padding: 0.9rem 2.5rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--giroppo-transition);
}
.wpcf7 input[type="submit"]:hover {
	background: var(--wp--preset--color--champagne);
}

/* ---------- Custom (plugin-free) tour request form ---------- */
.giroppo-form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
.giroppo-form .giroppo-field {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.giroppo-form .giroppo-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}
@media (max-width: 600px) {
	.giroppo-form .giroppo-field-row {
		grid-template-columns: 1fr;
	}
}
.giroppo-form label {
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--champagne);
}
.giroppo-form label .req {
	color: var(--wp--preset--color--gold);
}
.giroppo-form input[type="text"],
.giroppo-form input[type="email"],
.giroppo-form input[type="number"],
.giroppo-form textarea {
	width: 100%;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(201, 168, 106, 0.35);
	border-radius: 2px;
	color: var(--wp--preset--color--off-white);
	padding: 0.85rem 1rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
}
.giroppo-form input:focus,
.giroppo-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--gold);
	background: rgba(255, 255, 255, 0.07);
}
.giroppo-form .giroppo-submit {
	margin: 0.5rem 0 0;
}
.giroppo-form button[type="submit"] {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	border: none;
	border-radius: 2px;
	padding: 0.95rem 2.75rem;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--giroppo-transition);
}
.giroppo-form button[type="submit"]:hover {
	background: var(--wp--preset--color--champagne);
}
/* Honeypot — visually hidden from humans */
.giroppo-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
/* Notices */
.giroppo-form-notice {
	border-radius: 2px;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	font-size: 0.95rem;
	line-height: 1.6;
}
.giroppo-form-notice.is-success {
	background: rgba(201, 168, 106, 0.12);
	border: 1px solid var(--wp--preset--color--gold);
	color: var(--wp--preset--color--champagne);
}
.giroppo-form-notice.is-error {
	background: rgba(235, 0, 27, 0.10);
	border: 1px solid #e0746a;
	color: #f0b8b2;
}

/* ============================================================
   Editorial design polish (2026-06-27)
   ============================================================ */

/* Hero: clip the parallax image's translate+scale so it never pokes past the cover */
.giroppo-hero {
	overflow: hidden;
}

/* Hero: cinematic gradient depth (lighter top, darker bottom), plus a centred
   scrim so the copy stays readable.

   The original gradient thinned out to alpha 0.06 at 38% height — which is
   exactly where the centred hero copy sits. Over hero.jpg that band contains
   the white umbrella and the lit shop signs, so the eyebrow, the GIROPPONANDO
   wordmark and the champagne sub-heading were all set against near-white.
   The radial layer darkens only the middle, leaving the photo's edges intact. */
.giroppo-hero .wp-block-cover__background {
	background-image:
		radial-gradient( ellipse 62% 48% at 50% 50%, rgba( 10, 18, 34, 0.58 ) 0%, rgba( 10, 18, 34, 0.3 ) 55%, rgba( 10, 18, 34, 0 ) 100% ),
		linear-gradient( 180deg, rgba( 10, 18, 34, 0.3 ) 0%, rgba( 10, 18, 34, 0.22 ) 38%, rgba( 10, 18, 34, 0.68 ) 100% ) !important;
}

/* Hero: animated scroll-down cue */
.giroppo-scrolldown {
	position: absolute;
	left: 50%;
	bottom: 1.6rem;
	transform: translateX( -50% );
	width: 26px;
	height: 42px;
	border: 1px solid rgba( 255, 255, 255, 0.45 );
	border-radius: 14px;
	z-index: 2;
}
.giroppo-scrolldown span {
	position: absolute;
	left: 50%;
	top: 8px;
	width: 3px;
	height: 8px;
	margin-left: -1.5px;
	border-radius: 2px;
	background: rgba( 255, 255, 255, 0.85 );
	animation: giroppoScroll 1.7s ease-in-out infinite;
}
@keyframes giroppoScroll {
	0% { opacity: 0; transform: translateY( 0 ); }
	35% { opacity: 1; }
	100% { opacity: 0; transform: translateY( 15px ); }
}

/* Eyebrow labels: flanking gold hairlines for an editorial feel */
.giroppo-eyebrow {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.7rem;
}
.giroppo-eyebrow::before {
	content: "";
	flex: none;
	width: 26px;
	height: 1px;
	background: var( --wp--preset--color--gold );
	opacity: 0.85;
}
.has-text-align-center.giroppo-eyebrow {
	justify-content: center;
}
.has-text-align-center.giroppo-eyebrow::after {
	content: "";
	flex: none;
	width: 26px;
	height: 1px;
	background: var( --wp--preset--color--gold );
	opacity: 0.85;
}

/* Solid full-bleed sections: faint gold depth glow to break flatness */
.wp-block-group.alignfull.has-midnight-background-color {
	background-image: radial-gradient( 120% 75% at 50% -5%, rgba( 230, 192, 120, 0.06 ), rgba( 230, 192, 120, 0 ) 55% );
}
.wp-block-group.alignfull.has-navy-background-color {
	background-image: radial-gradient( 120% 80% at 50% 105%, rgba( 230, 192, 120, 0.07 ), rgba( 230, 192, 120, 0 ) 55% );
}

/* Cards: smoother, more refined motion */
.giroppo-cat {
	transition: transform 0.45s cubic-bezier( 0.22, 1, 0.36, 1 ), box-shadow 0.45s ease;
}
.giroppo-framed {
	transition: transform 0.4s cubic-bezier( 0.22, 1, 0.36, 1 ), background 0.3s ease, box-shadow 0.3s ease;
}
.giroppo-framed:hover {
	transform: translateY( -5px );
}

/* Display headings: tighter, more editorial tracking */
.wp-block-heading.has-x-large-font-size,
.wp-block-heading.has-xx-large-font-size {
	letter-spacing: -0.015em;
}

/* ============================================================
   CTA button groups: always side-by-side, never stacked
   (unifies the FV hero buttons + every other button pair on the site)
   ============================================================ */
.wp-block-buttons.is-layout-flex {
	flex-wrap: nowrap;
}
.wp-block-buttons.is-layout-flex .wp-block-button {
	flex: 1 1 auto;
	min-width: 0;
}
.wp-block-buttons.is-layout-flex .wp-block-button__link {
	width: 100%;
	white-space: nowrap;
}
@media (max-width: 480px) {
	/* Two buttons still fit side by side on small phones, just tighter. */
	.wp-block-buttons.is-layout-flex {
		gap: 0.6rem !important;
	}
	.wp-block-buttons.is-layout-flex .wp-block-button__link {
		padding-left: 1rem;
		padding-right: 1rem;
		font-size: 0.72rem;
	}
}

/* ============================================================
   Tour request form: new field types (select / checkboxes / date / note)
   ============================================================ */
.giroppo-form select,
.giroppo-form input[type="date"] {
	width: 100%;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(201, 168, 106, 0.35);
	border-radius: 2px;
	color: var(--wp--preset--color--off-white);
	padding: 0.85rem 1rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	appearance: none;
	-webkit-appearance: none;
}
.giroppo-form select {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23E6C078' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.5rem;
}
.giroppo-form select option {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--off-white);
}
.giroppo-form input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(80%) sepia(28%) saturate(453%) hue-rotate(358deg) brightness(101%) contrast(92%);
	cursor: pointer;
}
.giroppo-form select:focus,
.giroppo-form input[type="date"]:focus {
	outline: none;
	border-color: var(--wp--preset--color--gold);
	background-color: rgba(255, 255, 255, 0.07);
}
.giroppo-form .giroppo-field-note {
	margin: -0.6rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.8rem;
	line-height: 1.6;
}
.giroppo-form .giroppo-checkgroup {
	margin: 0;
	padding: 0;
	border: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.giroppo-form .giroppo-checkgroup legend {
	padding: 0;
	margin: 0 0 0.3rem;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--champagne);
}
.giroppo-form .giroppo-check {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	flex-direction: row;
	color: var(--wp--preset--color--off-white);
	font-size: 0.95rem;
	letter-spacing: normal;
	cursor: pointer;
}
.giroppo-form .giroppo-check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--wp--preset--color--gold);
	cursor: pointer;
}
@media (min-width: 601px) {
	.giroppo-form .giroppo-checkgroup {
		flex-direction: row;
		gap: 2rem;
	}
}

/* ============================================================
   Archive / hub pages: full-bleed themed header, spotlight first post,
   cross-links to the other themes, framed cards
   ============================================================ */
.giroppo-archive-hero {
	min-height: 46vh;
	display: flex;
	overflow: hidden;
}
.giroppo-archive-hero .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	width: 100%;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40);
	box-sizing: border-box;
}
.giroppo-archive-hero__desc {
	max-width: 620px;
	line-height: 1.8;
}
.giroppo-archive-hero img[data-giroppo-parallax] {
	will-change: transform;
}

/* ============================================================
   Post listing grid — one sizing rule for every card list on the
   site (category archive, area archive, blog home, search).

   Replaces two things that made cards look mismatched:

   1. A full-width 21:9 "spotlight" on the first card. With 6, 2 and 1
      posts in the three categories, that meant food showed one huge
      card next to a third-width one with two thirds of the row empty,
      and activity showed nothing but the spotlight.
   2. `columnCount: 3`, which WordPress emits as a flat
      `repeat(3, minmax(0, 1fr))` with no media query — so the grid
      stayed three columns on a phone, about 105px per card at 390px.

   Flex rather than grid on purpose: a grid keeps its empty tracks, so a
   two-post category would sit left of centre with a card-shaped hole
   beside it. Wrapping flex items with a fixed basis give every card the
   same width no matter how many there are, and centre short rows.
   Specificity is two classes so it beats WordPress's inline
   `.wp-container-core-post-template-is-layout-*` rule. */
.giroppo-post-grid.is-layout-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
}
.giroppo-post-grid.is-layout-grid > * {
	display: flex;
	flex: 1 1 300px;
	max-width: 360px;
}
.giroppo-post-grid.is-layout-grid > * > .giroppo-card {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Cards are the same height per row via flex stretch; these keep the
   *contents* aligned too, so the gap above the card's bottom edge doesn't
   swing about depending on how long the title happens to be. Each block
   holds its line count whether or not it fills it.

   The meta line carries .giroppo-eyebrow, which makes it a flex row for the
   gold hairline — so keep it on a single line and clip, rather than letting a
   long prefecture + category pair wrap and push one card's title down. */
.giroppo-post-grid .giroppo-card-meta {
	margin-top: var(--wp--preset--spacing--30);
	min-height: 1.5em;
	flex-wrap: nowrap;
	overflow: hidden;
}
.giroppo-post-grid .giroppo-card-meta a,
.giroppo-post-grid .giroppo-card-meta__sep {
	white-space: nowrap;
}
/* 2 lines at the card's line-height: 1.3. The hard min/max on the heading is
   what actually holds the box to two lines: the heading is a flex item of
   .giroppo-card, and a flex item's display is blockified, so `-webkit-box` on
   it silently computes to `flow-root` and -webkit-line-clamp never applies.
   The clamp goes on the inner link, which is not a flex item, for the ellipsis. */
.giroppo-post-grid .wp-block-post-title {
	min-height: 2.6em;
	max-height: 2.6em;
	overflow: hidden;
}
.giroppo-post-grid .wp-block-post-title > a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}
.giroppo-post-grid .wp-block-post-excerpt {
	margin-top: auto; /* pin to the bottom when a title runs short */
}
.giroppo-post-grid .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	/* Pinned rather than inherited (the global 1.75 would make this 3.5em) so
	   the two-line box is the same height on every card. */
	line-height: 1.6;
	min-height: 3.2em;
	margin: 0;
}

@media (max-width: 781px) {
	.giroppo-post-grid.is-layout-grid > * {
		flex-basis: 100%;
		max-width: 420px;
	}
}

.giroppo-archive-related {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--60);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}
.giroppo-archive-related__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(220px, 320px));
	gap: 1.5rem;
	width: 100%;
	justify-content: center;
}
.giroppo-archive-related__card {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 140px;
	padding: 1.25rem;
	border-radius: 3px;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.giroppo-archive-related__card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(10, 18, 34, 0.5);
	transition: background 0.3s ease;
}
.giroppo-archive-related__card:hover {
	transform: translateY(-4px);
}
.giroppo-archive-related__card:hover::before {
	background: rgba(10, 18, 34, 0.35);
}
.giroppo-archive-related__card span {
	position: relative;
	z-index: 1;
	color: var(--wp--preset--color--off-white);
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.85rem;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
@media (max-width: 600px) {
	.giroppo-archive-related__grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Area chips (browse-by-prefecture links) ---------- */
.giroppo-area-chips {
	max-width: 1240px;
	margin: var(--wp--preset--spacing--50) auto 0;
	padding: 0 var(--wp--preset--spacing--40);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}
.giroppo-area-chips__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
}
.giroppo-area-chips__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.4rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--off-white);
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.giroppo-area-chips__chip:hover {
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
	background: rgba(230, 192, 120, 0.08);
}
.giroppo-area-chips__count {
	font-size: 0.68rem;
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}
.giroppo-area-chips__chip:hover .giroppo-area-chips__count {
	color: inherit;
}

/* ---------- Area filter: button + modal (category archives) ---------- */
.giroppo-area-modal-wrap {
	max-width: 1240px;
	margin: var(--wp--preset--spacing--50) auto 0;
	padding: 0 var(--wp--preset--spacing--40);
	display: flex;
	justify-content: center;
}
.giroppo-area-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.65rem 1.4rem;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--off-white);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.giroppo-area-btn:hover {
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
	background: rgba(230, 192, 120, 0.08);
}
.giroppo-area-btn__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4em;
	padding: 0.1em 0.45em;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	font-size: 0.72rem;
	font-weight: 700;
}
.giroppo-area-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--40);
}
.giroppo-area-modal[hidden] {
	display: none;
}
.giroppo-area-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 12, 0.72);
}
.giroppo-area-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 640px;
	max-height: 80vh;
	overflow-y: auto;
	background: var(--wp--preset--color--ink);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 6px;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
	text-align: center;
}
.giroppo-area-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 0.9rem;
	background: none;
	border: none;
	color: var(--wp--preset--color--off-white);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.3rem;
}
.giroppo-area-modal__close:hover {
	color: var(--wp--preset--color--gold);
}
.giroppo-area-modal__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin-top: var(--wp--preset--spacing--40);
}
body.giroppo-modal-open {
	overflow: hidden;
}

/* Area tag on the single-post header (post-terms, "area" taxonomy) */
.giroppo-area-tag.wp-block-post-terms {
	display: inline-flex;
}
.giroppo-area-tag.wp-block-post-terms a {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--off-white);
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.giroppo-area-tag.wp-block-post-terms a:hover {
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
	background: rgba(230, 192, 120, 0.08);
}

/* ============================================================
   Scroll-reveal: fade + rise as sections/cards enter the viewport.
   JS toggles .is-visible via IntersectionObserver; CSS-only fallback
   (no JS / reduced motion) keeps everything visible.
   ============================================================ */
.giroppo-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.giroppo-reveal.is-visible {
	opacity: 1;
	transform: none;
}
/* .giroppo-cat / .giroppo-framed / .giroppo-card already animate transform+box-shadow
   on hover; merge that with the reveal transition here (higher specificity than
   the single-class rules above) so both coexist instead of one clobbering the other. */
.giroppo-cat.giroppo-reveal,
.giroppo-framed.giroppo-reveal,
.giroppo-card.giroppo-reveal {
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}
@media (prefers-reduced-motion: reduce), (scripting: none) {
	.giroppo-reveal {
		opacity: 1;
		transform: none;
	}
}

/* Hero: staggered entrance for eyebrow / title / rule / subtitle / buttons on load */
.giroppo-hero .wp-block-cover__inner-container > .wp-block-group > * {
	opacity: 0;
	animation: giroppoHeroIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.giroppo-hero .wp-block-cover__inner-container > .wp-block-group > *:nth-child(1) { animation-delay: 0.1s; }
.giroppo-hero .wp-block-cover__inner-container > .wp-block-group > *:nth-child(2) { animation-delay: 0.22s; }
.giroppo-hero .wp-block-cover__inner-container > .wp-block-group > *:nth-child(3) { animation-delay: 0.32s; }
.giroppo-hero .wp-block-cover__inner-container > .wp-block-group > *:nth-child(4) { animation-delay: 0.42s; }
.giroppo-hero .wp-block-cover__inner-container > .wp-block-group > *:nth-child(5) { animation-delay: 0.52s; }
@keyframes giroppoHeroIn {
	from { opacity: 0; transform: translateY(22px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.giroppo-hero .wp-block-cover__inner-container > .wp-block-group > * {
		opacity: 1;
		animation: none;
	}
}

/* [giroppo_spot_map] — address + open-in-Google/Apple-Maps buttons for one spot inside article content.
   __embed (shown only when lat/lng are given) is a self-hosted Leaflet map with a category-colored
   pin — see functions.php / assets/js/spot-map.js. [giroppo_area_map] (prefecture archive pages)
   shares the same Leaflet container sizing via .giroppo-area-map__embed below. */
.giroppo-spot-map {
	margin: 2rem 0;
	padding: 1.25rem;
	border: 1px solid rgba(201, 168, 106, 0.35);
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.03);
}
.giroppo-spot-map__name {
	margin: 0 0 0.25rem;
	font-family: var(--wp--preset--font-family--serif, var(--wp--preset--font-family--sans));
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--wp--preset--color--champagne);
}
.giroppo-spot-map__address {
	margin: 0 0 1rem;
	font-size: 0.9rem;
	color: var(--wp--preset--color--muted);
}
.giroppo-spot-map__embed {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	border-radius: 2px;
	overflow: hidden;
}
.giroppo-spot-map__embed .leaflet-container {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	font-family: inherit;
}
.giroppo-map-pin {
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.giroppo-area-map {
	margin: 0 auto 2.5rem;
	max-width: 1240px;
	padding: 0 1.5rem;
}
.giroppo-area-map__embed {
	position: relative;
	width: 100%;
	padding-top: 42%;
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid rgba(201, 168, 106, 0.35);
}
.giroppo-area-map__embed .leaflet-container {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	font-family: inherit;
}
.giroppo-spot-map__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1rem;
}
.giroppo-spot-map__btn {
	display: inline-block;
	padding: 0.6rem 1.25rem;
	border: 1px solid var(--wp--preset--color--gold);
	border-radius: 2px;
	color: var(--wp--preset--color--gold);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-decoration: none;
	transition: background var(--giroppo-transition), color var(--giroppo-transition);
}
.giroppo-spot-map__btn:hover,
.giroppo-spot-map__btn:focus-visible {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

/* Spot-database card ([giroppo_spot]) — the same frame as a hand-written
   spot map, plus the short description and the practical details stored on
   the record (hours, closed days, budget, phone…). */
.giroppo-spot__desc {
	margin: 0 0 1rem;
	font-size: 0.95rem;
	line-height: 1.8;
}
.giroppo-spot__meta {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.35rem 1rem;
	margin: 1rem 0 0;
	font-size: 0.9rem;
}
.giroppo-spot__meta dt {
	color: var(--wp--preset--color--muted);
	font-weight: 600;
	letter-spacing: 0.02em;
}
.giroppo-spot__meta dd {
	margin: 0;
}
.giroppo-spot__meta dd a {
	color: var(--wp--preset--color--gold);
}
@media (max-width: 560px) {
	.giroppo-spot__meta {
		grid-template-columns: 1fr;
		gap: 0 0;
	}
	.giroppo-spot__meta dd {
		margin: 0 0 0.6rem;
	}
}

/* Links inside article copy must be distinguishable by more than colour
   (WCAG 1.4.1 — Lighthouse "link-in-text-block"). Buttons and the spot-map
   actions are already shaped like controls, so they keep their own styling. */
.wp-block-post-content p > a:not(.wp-block-button__link):not(.giroppo-spot-map__btn),
.wp-block-post-content li > a:not(.wp-block-button__link):not(.giroppo-spot-map__btn),
.wp-block-post-content td > a:not(.wp-block-button__link):not(.giroppo-spot-map__btn) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

/* The social strip is authored as a row of cards. When only one account is
   listed, a lone column would stretch the full 1240px and read as a leftover
   from a two-column layout — keep it card-sized and centred instead. */
.giroppo-sns-cards > .wp-block-column:only-child {
	max-width: 520px;
	margin-inline: auto;
}

/* ============================================================
   Cookie consent banner (2026-09-24)
   ============================================================

   The banner's markup is identical for every visitor — WEXAL caches one HTML
   document per URL and ignores cookies, so it cannot be rendered conditionally
   in PHP. It ships with the `hidden` attribute and its own script removes that
   only when no decision is stored yet.
   ============================================================ */

.giroppo-consent {
	position: fixed;
	left: 50%;
	bottom: 1rem;
	transform: translateX( -50% );
	z-index: 60;
	width: min( 100% - 2rem, 640px );
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	padding: 1rem 1.25rem;
	border: 1px solid rgba( 201, 168, 106, 0.35 );
	border-radius: 4px;
	background: rgba( 10, 18, 34, 0.96 );
	box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.35 );
	color: #f4f1ea;
}

/* hidden 属性を確実に効かせる。UAスタイルシートの [hidden] { display: none } は
   詳細度が上の .giroppo-consent { display: flex } と同じ (0,1,0) で、同点なら
   作成者スタイルが勝つため、この規則が無いとバナーは hidden を無視して出続ける
   （決定済みの訪問者にも表示され、ボタンを押しても消えない）。 */
.giroppo-consent[hidden] {
	display: none;
}

.giroppo-consent__text {
	flex: 1 1 260px;
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.6;
}

.giroppo-consent__text a {
	color: #c9a86a;
	text-decoration: underline;
}

.giroppo-consent__actions {
	display: flex;
	flex: 0 0 auto;
	gap: 0.5rem;
	margin-left: auto;
}

.giroppo-consent__btn {
	padding: 0.5rem 1.1rem;
	border: 1px solid #c9a86a;
	border-radius: 2px;
	background: #c9a86a;
	color: #0a1222;
	font-size: 0.74rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.giroppo-consent__btn--ghost {
	background: transparent;
	color: #f4f1ea;
	border-color: rgba( 244, 241, 234, 0.4 );
}

.giroppo-consent__btn:hover {
	opacity: 0.85;
}

@media (max-width: 480px) {
	.giroppo-consent__actions {
		width: 100%;
		margin-left: 0;
	}

	.giroppo-consent__btn {
		flex: 1 1 0;
	}
}