/*
Theme Name: gTime
Theme URI: https://gtime.travel
Author: gTime
Description: Block theme for gTime — Global Travel Industry Marketing Events. Every page is built from standard WordPress blocks so content can be edited without a page builder, and navigation uses the core menu system.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gtime
Tags: block-theme, full-site-editing, business, one-column, custom-colors, custom-menu, editor-style, block-patterns
*/

/*
 * Design tokens live in theme.json, not here. This file carries only the
 * handful of rules that theme.json cannot express.
 */

/* Skip link — visible only once focused. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	font-weight: 600;
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
}

/* Give focus rings a consistent, visible treatment site-wide. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

/*
 * Kill the root flow gap WordPress inserts between the header, main and
 * footer template parts (.wp-site-blocks > * + * gets block-gap by default).
 * Sections carry their own padding; the page should butt its bands together.
 */
.wp-site-blocks > * + * {
	margin-block-start: 0 !important;
}

/* Content begins flush under the header: the first band owns its own space. */
.wp-site-blocks main {
	margin-block: 0;
}

/* An eyebrow and its headline belong together — pull them tight. */
.is-style-gtime-eyebrow + h1,
.is-style-gtime-eyebrow + h2,
.is-style-gtime-eyebrow + h3 {
	margin-block-start: 0.5rem !important;
}

/*
 * ...and a section heading needs real air before the content it introduces.
 * Block gap alone left the events list sitting on the headline.
 */
h2 + .gtime-events,
h2 + .wp-block-columns,
h2 + .wp-block-details,
h2 + .gtime-quote-grid,
h2 + .wp-block-buttons {
	margin-block-start: 2.5rem !important;
}

h1 + .gtime-events,
h1 + .wp-block-columns {
	margin-block-start: 2.5rem !important;
}

/* Paragraph immediately under a heading stays closer than a content block. */
h2 + p:not(.is-style-gtime-eyebrow) {
	margin-block-start: 1.25rem !important;
}

/* ---------------------------------------------------------------- header -- */

.gtime-header__inner {
	max-width: 1400px;
	margin-inline: auto;
	gap: clamp(1.5rem, 4vw, 3rem);
}

.gtime-header .wp-block-site-logo img {
	display: block;
	width: 128px;
}

/*
 * Navigation. The link list is the one place this site was visibly failing:
 * thirteen equal-weight items wrapped onto three lines. Grouping them into
 * submenus is the structural fix; these rules make the result read cleanly.
 */
/*
 * Nine items with long labels ("Q&A / Terms & Conditions") have to survive on
 * one line, so the desktop nav runs tighter than a typical menu.
 */
.gtime-nav .wp-block-navigation__container {
	gap: clamp(0.55rem, 0.95vw, 1rem);
	/* Ten labels, one line, always — wrapping to a second row is never OK. */
	flex-wrap: nowrap !important;
}

.gtime-nav .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.35rem;
	font-size: clamp(0.65rem, 0.75vw, 0.75rem);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

@media (min-width: 783px) {
	.gtime-header .wp-block-site-logo img {
		width: clamp(78px, 6vw, 96px);
	}

	.gtime-header__inner {
		gap: clamp(0.75rem, 1.5vw, 1.5rem);
	}
}

/*
 * Below 1100px ten labels cannot fit on one line at any legible size, so the
 * hamburger takes over early instead of letting the menu wrap. Core hides the
 * open button above 600px; both overrides need !important.
 */
@media (max-width: 1099px) {
	.gtime-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	.gtime-nav .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}
}

/* Underline grows from the left on hover instead of a colour-only change. */
.gtime-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--wp--preset--color--brand);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.gtime-nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.gtime-nav .wp-block-navigation-item__content:focus-visible::after,
.gtime-nav .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Submenu panel */
.gtime-nav .wp-block-navigation__submenu-container {
	min-width: 15rem;
	padding: 0.5rem 0;
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 12px 32px rgba(20, 16, 14, 0.1);
}

.gtime-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.6rem 1.1rem;
	letter-spacing: 0.04em;
	white-space: normal;
}

.gtime-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}

.gtime-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--brand);
}

/* (no CTA treatment on the last item — the live menu has none) */

@media (max-width: 900px) {
	.gtime-nav .wp-block-navigation-item__content {
		font-size: 1rem;
		letter-spacing: 0.04em;
	}
}

/* Mobile header: smaller logo, tighter row, clean overlay. */
@media (max-width: 782px) {
	.gtime-header {
		padding-top: 0.85rem !important;
		padding-bottom: 0.85rem !important;
	}

	.gtime-header .wp-block-site-logo img {
		width: 84px;
	}

	.gtime-header__inner {
		gap: 1rem;
		flex-wrap: nowrap;
	}

	/* Hamburger sized as a proper touch target. */
	.gtime-nav .wp-block-navigation__responsive-container-open {
		padding: 0.6rem;
	}

	.gtime-nav .wp-block-navigation__responsive-container-open svg {
		width: 28px;
		height: 28px;
	}
}

/* ============================================ mobile menu: slide-in panel ==
 *
 * A light panel that slides in from the right over a dimmed page, with
 * submenus collapsed behind a chevron. WordPress renders:
 *
 *   .responsive-container      <- backdrop
 *     .responsive-close        <- wrapper
 *       .responsive-dialog     <- the panel that slides
 *         button.close
 *         .responsive-container-content > ul.navigation__container
 */

/*
 * Extra specificity on purpose: core's Navigation stylesheet is printed after
 * the theme stylesheet, so an equally-specific !important rule loses to it and
 * the backdrop stayed opaque white.
 */
body .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open {
	background: rgba(20, 16, 14, 0.45) !important;
	background-color: rgba(20, 16, 14, 0.45) !important;
	animation: gtime-backdrop 0.2s ease-out;
	padding: 0 !important;
	z-index: 100000;
	display: block !important;
	align-items: stretch !important;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-close {
	height: 100%;
	max-width: none;
	padding: 0;
}

/* The panel itself. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-dialog {
	position: absolute;
	inset-block: 0;
	right: 0;
	width: min(86%, 380px);
	margin: 0;
	padding: 4.25rem 1.5rem 2rem;
	background: var(--wp--preset--color--base);
	box-shadow: -14px 0 40px rgba(20, 16, 14, 0.18);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	/* No transform animation here: core positions the panel with left/right/
	   inset, so animating translateX made it slide from off-screen then snap
	   to core's spot — the "slide in then jump" bug. A plain fade never fights
	   core's positioning. */
	animation: gtime-fade-in 0.22s ease-out;
}

@keyframes gtime-backdrop {
	from { background-color: rgba(20, 16, 14, 0); }
	to   { background-color: rgba(20, 16, 14, 0.45); }
}

@keyframes gtime-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	width: 100%;
	padding: 0;
	align-items: stretch !important;
}

/* Rows -------------------------------------------------------------------- */

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	gap: 0 !important;
	width: 100%;
	align-items: stretch !important;
	justify-content: flex-start !important;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* A parent is a row flex container; stack it so the submenu sits beneath. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item.has-child {
	flex-direction: column !important;
	align-items: stretch !important;
	width: 100% !important;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100% !important;
	padding: 1.05rem 0 !important;
	font-size: 0.9375rem !important;
	font-weight: 600;
	letter-spacing: 0.06em !important;
	text-transform: uppercase;
	text-align: left !important;
	color: var(--wp--preset--color--ink) !important;
	background: none !important;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content::after {
	display: none;
}

/* Chevron on parents, injected by the theme script. */
/*
 * The toggle sits beside the link, so the parent row must lay them out as a
 * two-column row with the submenu on its own line beneath.
 */
.wp-block-navigation__responsive-container.is-menu-open
	.gtime-has-sub {
	display: grid !important;
	grid-template-columns: 1fr auto;
	align-items: center;
}

.wp-block-navigation__responsive-container.is-menu-open
	.gtime-has-sub > .wp-block-navigation__submenu-container {
	grid-column: 1 / -1;
}

.gtime-subtoggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -0.6rem;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--wp--preset--color--brand);
	flex: none;
}

.gtime-subtoggle::before {
	content: "";
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.25s ease;
}

.gtime-has-sub.is-open > .gtime-subtoggle::before,
.gtime-has-sub.is-open .gtime-subtoggle::before {
	transform: rotate(-135deg) translate(-2px, -2px);
}

/* Submenu: collapsed by default, expands on tap. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container {
	position: static !important;
	width: 100% !important;
	min-width: 0;
	border: 0 !important;
	box-shadow: none !important;
	background: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	justify-content: flex-start !important;
	align-items: flex-start !important;
	overflow: hidden;
	max-height: 0;
	padding: 0 0 0 1rem !important;
	transition: max-height 0.3s ease, padding 0.3s ease;
}

body .wp-block-navigation__responsive-container.is-menu-open
	.gtime-has-sub.is-open > .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container.is-menu-open
	.gtime-has-sub.is-open > .wp-block-navigation__submenu-container {
	max-height: 420px !important;
	padding-bottom: 0.6rem !important;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-bottom: 0;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.6rem 0 !important;
	font-size: 0.9rem !important;
	font-weight: 500;
	letter-spacing: 0 !important;
	text-transform: none;
	color: var(--wp--preset--color--muted) !important;
}


/* Close button: real 44px target, top-right of the panel. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close {
	position: absolute;
	top: 1rem;
	right: 1.25rem;
	width: 44px;
	height: 44px;
	padding: 0.5rem;
	color: var(--wp--preset--color--ink);
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close svg {
	width: 26px;
	height: 26px;
}

body.has-modal-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-dialog {
		animation: none;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__submenu-container {
		transition: none;
	}
}


/* ------------------------------------------------------------ components -- */

/* Accordion (Q&A, terms) */
.wp-block-details {
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base);
	padding: 0;
	margin-bottom: 0.75rem;
}

.wp-block-details summary {
	list-style: none;
	cursor: pointer;
	padding: 1.1rem 3rem 1.1rem 1.4rem;
	font-weight: 600;
	position: relative;
	color: var(--wp--preset--color--ink);
	transition: color 0.15s ease;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: 1.4rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--wp--preset--color--brand);
	transition: transform 0.2s ease;
}

.wp-block-details[open] summary::after {
	content: "–";
}

.wp-block-details summary:hover {
	color: var(--wp--preset--color--brand);
}

.wp-block-details > :not(summary) {
	padding: 0 1.4rem;
}

.wp-block-details > p:last-child,
.wp-block-details > ul:last-child {
	padding-bottom: 1.25rem;
}

/* Testimonial cards (Referrals) */
.gtime-quote-grid {
	column-count: 2;
	column-gap: 1.5rem;
}

.gtime-quote-grid .wp-block-quote {
	break-inside: avoid;
	margin: 0 0 1.5rem;
	padding: 1.75rem;
	border: 1px solid var(--wp--preset--color--line);
	border-left: 3px solid var(--wp--preset--color--brand);
	background: var(--wp--preset--color--base);
	font-size: 0.9375rem;
	line-height: 1.7;
}

.gtime-quote-grid .wp-block-quote p {
	margin: 0;
}

.gtime-quote-grid .wp-block-quote p::before {
	content: "\201C";
	display: block;
	font-size: 2.5rem;
	line-height: 1;
	color: var(--wp--preset--color--tan);
	margin-bottom: 0.5rem;
}

@media (max-width: 782px) {
	.gtime-quote-grid {
		column-count: 1;
	}
}

/* City invitation grid (Travel Advisor Invitations) */
.gtime-btn-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	gap: 0.6rem;
}

.gtime-btn-grid .wp-block-button__link {
	width: 100%;
	font-size: 0.8125rem;
	padding: 0.85em 1em;
	text-align: center;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	transition: border-color 0.15s ease, color 0.15s ease;
}

.gtime-btn-grid .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--base);
}

/*
 * The mobile navigation overlay inherits the brand palette rather than the
 * WordPress defaults.
 */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base) !important;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	padding-top: 2rem;
}

/* Site logo should never overflow a narrow header. */
.wp-block-site-logo img {
	height: auto;
	max-width: 100%;
}

/*
 * Section heading rule — a short brand rule ABOVE the title. Sitting above
 * reads more editorial than an underline, and it doesn't fight the tight
 * leading the display sizes use.
 */
.is-style-gtime-underline {
	position: relative;
	padding-top: 1.25rem;
}

.is-style-gtime-underline::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 3.5rem;
	height: 3px;
	background: var(--wp--preset--color--brand);
}

.has-text-align-center.is-style-gtime-underline::before {
	left: 50%;
	transform: translateX(-50%);
}

/*
 * Eyebrow — the small letterspaced label that sits above a headline. Applied
 * to a paragraph via the "Eyebrow" block style.
 */
.is-style-gtime-eyebrow {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
	margin-bottom: 0.75rem;
}

/*
 * Keep long-form copy at a readable measure. Without this, body text on a
 * 1140px container runs to ~110 characters a line. The paragraphs live inside
 * band groups, so targeting only direct children of post-content missed them.
 */
.wp-block-post-content p:not([class*="has-text-align-center"]),
.wp-block-group > p,
.wp-block-group > .wp-block-list {
	max-width: 70ch;
	/* Align narrow elements to the SAME left rail as full-width (1140px)
	   siblings. margin 0 was wrong: it pulled them to the padding edge, which
	   is a different rail than centred 1140 content. This formula computes
	   exactly where the 1140 column starts inside any wider container. */
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 1140px)) / 2)) !important;
	margin-right: auto !important;
}

.has-text-align-center {
	margin-inline: auto !important;
}

/* Supplier logo band (Home): a tidy row of small tiles, not stacked images. */
.gtime-logo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 1.25rem 2rem;
	align-items: center;
	margin-top: 1.25rem;
}

.gtime-logo-grid .wp-block-image {
	margin: 0;
}

.gtime-logo-grid img {
	max-height: 52px;
	width: auto;
	max-width: 100%;
	margin-inline: auto;
	display: block;
	object-fit: contain;
	opacity: 0.85;
}

/* Founder headshots (About): contained, softly cropped, never full-bleed. */
.gtime-headshot img {
	width: 180px;
	height: 180px;
	object-fit: cover;
	border-radius: 2px;
	border: 1px solid var(--wp--preset--color--line);
}

/* Inside multi-column layouts the column already sets the measure. */
.wp-block-column p,
.wp-block-cover p,
.gtime-quote-grid p,
.wp-block-details p {
	max-width: none;
}

/*
 * ONE LEFT RAIL. Hero copy, band headings and body prose all start at the
 * same x — the content container's left edge. The earlier centred 46rem hero
 * block put hero text on a different rail from everything below it, which
 * read as "nothing lines up".
 */
.wp-block-cover .wp-block-cover__inner-container > * {
	max-width: 52rem;
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 1140px)) / 2)) !important;
	margin-right: auto !important;
}

/* Links in body copy get a restrained underline rather than a colour-only cue. */
.wp-block-post-content p a:not(.wp-element-button),
.entry-content p a:not(.wp-element-button) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--brand) 40%, transparent);
	transition: text-decoration-color 0.18s ease;
}

.wp-block-post-content p a:not(.wp-element-button):hover,
.entry-content p a:not(.wp-element-button):hover {
	text-decoration-color: currentColor;
}

/*
 * Outline button — the secondary action beside a primary CTA. On the dark hero
 * it needs to read against a photo, so it borrows currentColor rather than a
 * fixed value.
 */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	border: 1px solid currentColor;
	color: inherit;
	/* Core's outline style ships smaller padding than theme.json's button
	   padding, so an outline button rendered ~10px shorter than the solid one
	   beside it. Match them, and subtract the 1px border so both end up the
	   exact same height (box-sizing is border-box). */
	padding-top: calc(1.05em - 1px);
	padding-bottom: calc(1.05em - 1px);
	padding-left: calc(1.6em - 1px);
	padding-right: calc(1.6em - 1px);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1;
}

.wp-block-cover .wp-block-button.is-style-outline > .wp-block-button__link {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.55);
}

.wp-block-cover .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: #fff;
	color: var(--wp--preset--color--brand);
	border-color: #fff;
}

/* (hero copy measure/alignment lives in the ONE LEFT RAIL rule above —
   a second rule here silently overrode it and broke hero alignment) */

/* Buttons get a touch of motion on hover, consistent with the events list. */
.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.18s ease, transform 0.18s ease;
}

/* Separators become true hairlines rather than the default heavy rule. */
.wp-block-separator:not(.is-style-dots) {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--line);
	opacity: 1;
}

/* Tables in the Terms & Conditions content need to survive small screens. */
.wp-block-table {
	overflow-x: auto;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}