/*
Theme Name: GuessWhere
Theme URI: https://guesswhere.ca
Author: ABX.ca
Author URI: https://abx.ca
Description: The game-first block theme for GuessWhere (guesswhere.ca), Canada's street-view guessing game. The game fills the first screen on every device, with fast self-hosted fonts, region play pages, how-to-play and FAQ sections, and share-ready metadata.
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Version: 2.1.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: guesswhere
Tags: block-theme, full-site-editing, dark, one-column, wide-blocks, custom-colors, custom-menu
*/

/* Most styling lives in theme.json. These rules cover what theme.json can't express. */

:root { --tn-header-h: 60px; }

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Skip link and focus */
.skip-link.screen-reader-text:focus { background: var(--wp--preset--color--sign); color: #fff; }
:where(a, button, input, select, summary):focus-visible { outline: 2px solid var(--wp--preset--color--lake); outline-offset: 3px; border-radius: 2px; }

/* Sticky header that stays slim so the game owns the screen.
   The sticky rule sits on the template-part wrapper, which is the element that spans the page. */
.tn-header-wrap { position: sticky; top: 0; z-index: 100; margin-block: 0 !important; }
.admin-bar .tn-header-wrap { top: var(--wp-admin--admin-bar--height, 32px); }
.tn-header {
	min-height: var(--tn-header-h); box-sizing: border-box;
	backdrop-filter: saturate(1.2) blur(8px);
	-webkit-backdrop-filter: saturate(1.2) blur(8px);
	background: color-mix(in srgb, var(--wp--preset--color--ink) 88%, transparent) !important;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* Highway-sign wordmark */
.tn-wordmark a {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--wp--preset--color--sign); color: #fff !important; text-decoration: none;
	border: 2px solid #fff; border-radius: 6px; padding: 5px 10px 4px;
	font-family: var(--wp--preset--font-family--display); font-weight: 800;
	text-transform: uppercase; letter-spacing: .02em; line-height: 1;
}
.tn-wordmark a::before {
	content: ""; width: 16px; height: 16px; flex: none; border-radius: 3px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d52b1e' d='M12 2l1.6 3.4 1.9-.9-.6 4.1 2.4-2.2.6 1.6 2.6-.5-.8 2.8 1.3.7-4.4 3.6.6 1.7-4.2-.6.1 4.3h-1.4l.1-4.3-4.2.6.6-1.7-4.4-3.6 1.3-.7-.8-2.8 2.6.5.6-1.6 2.4 2.2-.6-4.1 1.9.9z'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* The game hero: fills the screen below the header, edge to edge */
.tn-game-hero { margin-block: 0 !important; }
.tn-game-hero .tng-root {
	height: calc(100svh - var(--tn-header-h)) !important;
	min-height: 520px;
	max-height: 1100px;
	border-radius: 0;
	margin: 0 !important;
}
.admin-bar .tn-game-hero .tng-root { height: calc(100svh - var(--tn-header-h) - var(--wp-admin--admin-bar--height, 32px)) !important; }

/* A small cue that there's more below the game */
.tn-scroll-cue {
	display: flex; justify-content: center; gap: 8px; align-items: center;
	font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted);
	padding-block: 10px; margin: 0 !important;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.tn-scroll-cue a { color: inherit; text-decoration: none; }
.tn-scroll-cue a:hover { color: var(--wp--preset--color--paper); }

/* Section anchors land below the sticky header */
[id] { scroll-margin-top: calc(var(--tn-header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Eyebrow labels */
.tn-eyebrow {
	font-family: var(--wp--preset--font-family--display); font-weight: 700;
	text-transform: uppercase; letter-spacing: .14em; font-size: .85rem;
	color: var(--wp--preset--color--maple); margin-bottom: 0;
}

/* Steps: a real sequence, so they are numbered */
.tn-step-num {
	display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
	background: var(--wp--preset--color--sign); color: #fff;
	font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.3rem;
}

/* Region cards: sign-style tiles that are the whole link */
.tn-regions { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.tn-region {
	position: relative; display: grid; gap: 4px; padding: 18px 18px 16px;
	background: var(--wp--preset--color--panel); border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px; text-decoration: none; color: var(--wp--preset--color--paper);
	transition: border-color .15s ease, transform .15s ease;
}
.tn-region:hover { border-color: var(--wp--preset--color--sign); transform: translateY(-2px); }
.tn-region strong { font-family: var(--wp--preset--font-family--display); font-size: 1.5rem; font-weight: 700; text-transform: uppercase; line-height: 1.05; }
.tn-region span { color: var(--wp--preset--color--muted); font-size: .9rem; }
.tn-region em { font-style: normal; font-family: var(--wp--preset--font-family--display); font-weight: 700; letter-spacing: .1em; color: var(--wp--preset--color--lake); font-size: .8rem; }
@media (prefers-reduced-motion: reduce) { .tn-region { transition: none; } .tn-region:hover { transform: none; } }

/* Hero buttons and "Ways to play" */
.tn-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--wp--preset--spacing--40); }
.tn-cta {
	display: inline-block; padding: 12px 20px; border-radius: 8px; text-decoration: none;
	font-family: var(--wp--preset--font-family--display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
	color: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--panel);
}
.tn-cta:hover { border-color: var(--wp--preset--color--sign); }
.tn-cta-main { background: var(--wp--preset--color--maple); border-color: var(--wp--preset--color--maple); color: #fff; }
.tn-cta-main:hover { filter: brightness(1.08); border-color: var(--wp--preset--color--maple); }
.tn-modes { margin-top: var(--wp--preset--spacing--60); }
.tn-modes-title { margin: 0 0 var(--wp--preset--spacing--40); }
.tn-modes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.tn-mode {
	display: flex; flex-direction: column; gap: 6px; padding: 18px;
	background: var(--wp--preset--color--panel); border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px; text-decoration: none; color: var(--wp--preset--color--paper); transition: border-color .15s, transform .15s;
}
.tn-mode:hover { border-color: var(--wp--preset--color--sign); transform: translateY(-2px); }
.tn-mode strong { font-family: var(--wp--preset--font-family--display); font-size: 1.4rem; font-weight: 700; text-transform: uppercase; line-height: 1.05; }
.tn-mode span { color: var(--wp--preset--color--muted); font-size: .9rem; }
.tn-mode em { font-style: normal; font-family: var(--wp--preset--font-family--display); font-weight: 700; letter-spacing: .1em; color: var(--wp--preset--color--maple); font-size: .8rem; }
@media (prefers-reduced-motion: reduce) { .tn-mode { transition: none; } .tn-mode:hover { transform: none; } }

/* FAQ */
.tn-faq details { border-bottom: 1px solid var(--wp--preset--color--line); padding-block: 14px; }
.tn-faq summary {
	cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px;
	font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .01em;
}
.tn-faq summary::-webkit-details-marker { display: none; }
.tn-faq summary::after { content: "+"; color: var(--wp--preset--color--maple); font-size: 1.5rem; line-height: 1; }
.tn-faq details[open] summary::after { content: "–"; }
.tn-faq details p { margin: 10px 0 0; color: var(--wp--preset--color--muted); max-width: 65ch; }

/* Comparison table */
.tn-compare { overflow-x: auto; }
.tn-compare table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 520px; }
.tn-compare th, .tn-compare td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--wp--preset--color--line); }
.tn-compare thead th { font-family: var(--wp--preset--font-family--display); text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; color: var(--wp--preset--color--muted); }
.tn-compare td.yes { color: #6fd39b; font-weight: 600; }
.tn-compare td.no { color: var(--wp--preset--color--muted); }
.tn-compare tbody th { font-weight: 500; }

/* Footer */
.tn-footer a { text-decoration: none; }
.tn-footer a:hover { text-decoration: underline; }

/* Play pages: the game takes the whole page under the header */
.page-template-page-play .wp-site-blocks > main { padding: 0 !important; }

@media (max-width: 600px) {
	:root { --tn-header-h: 54px; }
	.tn-wordmark a { font-size: 1.05rem !important; }
	.tn-header nav .wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--paper); }
}

/* Language suggestion bar: shown only when the browser's language differs from the page, dismissible */
.tn-lang-hint {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px;
	padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
	background: var(--wp--preset--color--panel); color: var(--wp--preset--color--paper);
	border-top: 1px solid var(--wp--preset--color--line); font-size: var(--wp--preset--font-size--small);
}
.tn-lang-hint a {
	font-family: var(--wp--preset--font-family--display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
	background: var(--wp--preset--color--sign); color: #fff !important; text-decoration: none; padding: 6px 12px; border-radius: 6px;
}
.tn-lang-hint button { background: none; border: 0; color: var(--wp--preset--color--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 4px 8px; }
.tn-lang-switch a { border: 1px solid var(--wp--preset--color--line); border-radius: 999px; padding: 2px 10px !important; }

/* The header already shows the site name, so the game's own sign only appears in full screen,
   where the header is out of view. */
.tng-root:not(:fullscreen):not(.is-max) .tng-brand { visibility: hidden; }

/* The language suggestion sets display:flex, which would otherwise override its hidden attribute. */
.tn-lang-hint[hidden] { display: none !important; }

/* Keep the intro line under the heading aligned left, not centred by the constrained layout */
#how-to-play > p.has-large-font-size, #comment-jouer > p.has-large-font-size { margin-left: 0 !important; }