/*
Theme Name: GTA Map Guide
Theme URI: https://gtamapguide.com
Author: GTA Map Guide
Description: Interactive game maps and collectible trackers, built 100% with Gutenberg blocks. Games and collectible sets are managed from the dashboard, map art and pin locations are editable, and visitors tick items off with progress saved in their browser. Includes blocks for the interactive map, games grid, live stats, sets table, set cards, game header, countdown and map preview.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 2.3.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gtamapguide
Tags: full-site-editing, block-patterns, dark, custom-colors, wide-blocks, entertainment
*/

:root { --owm-header: 72px; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }
:where(.wp-site-blocks) :focus-visible { outline: 2px solid var(--wp--preset--color--teal); outline-offset: 2px; }
.wp-site-blocks { padding-top: 0; }
main.wp-block-group { margin-top: 0 !important; }

/* ---------- Header ---------- */
.owm-header {
	position: sticky; top: 0; z-index: 40;
	background: rgba(8, 12, 22, .9) !important;
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--line);
	min-height: var(--owm-header);
}
.owm-header:has(.is-menu-open) { backdrop-filter: none; -webkit-backdrop-filter: none; }
.admin-bar .owm-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .owm-header { top: 46px; } }
.owm-header .wp-block-navigation-item__content { padding: .7rem .8rem !important; border-radius: 10px; }
.owm-header .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--panel); }
.owm-header .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--light); box-shadow: inset 0 -2px 0 var(--wp--preset--color--teal); border-radius: 0; }
/* Menu badge: add the class "has-badge" to a menu link and put the badge text in its "Title attribute". */
.has-badge > .wp-block-navigation-item__content[title]::after {
	content: attr(title);
	margin-left: 6px; padding: 3px 6px; border-radius: 6px; background: #2A0F25; color: #FF8CC4;
	font: 700 10px/1 var(--wp--preset--font-family--mono); vertical-align: middle;
}
.owm-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--night) !important; color: var(--wp--preset--color--light) !important; }
@media (max-width: 860px) { .owm-header .wp-block-buttons { display: none; } }

/* ---------- Brand block ---------- */
.owm-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--wp--preset--color--light) !important; text-decoration: none; }
.owm-brand__mark { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--wp--preset--color--panel); box-shadow: 0 0 18px rgba(46, 230, 214, .45); overflow: hidden; flex: none; }
.owm-brand__mark:not(:has(img)) { border-radius: 50%; border: 2px solid var(--wp--preset--color--teal); }
.owm-brand__mark img { width: 100%; height: 100%; object-fit: cover; }
.owm-brand__name { font: 700 21px/1 var(--wp--preset--font-family--heading); letter-spacing: -.02em; white-space: nowrap; }
.owm-brand__name b { color: var(--wp--preset--color--teal); text-shadow: 0 0 10px rgba(46, 230, 214, .6); }

/* ---------- Text styles ---------- */
.is-style-owm-kicker { font-family: var(--wp--preset--font-family--mono) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .12em; text-transform: uppercase; line-height: 1 !important; }
.is-style-owm-glow mark, .owm-glow-t { background: transparent !important; text-shadow: 0 0 12px rgba(46, 230, 214, .55), 0 0 34px rgba(46, 230, 214, .25); }
.is-style-owm-glow mark.has-pink-color { text-shadow: 0 0 12px rgba(255, 79, 163, .55), 0 0 34px rgba(255, 79, 163, .25); }
.is-style-owm-badge { display: inline-flex !important; width: fit-content; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(46, 230, 214, .45); background: rgba(14, 20, 36, .7); font-size: 13px !important; font-weight: 600; }
.is-style-owm-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--teal); box-shadow: 0 0 10px var(--wp--preset--color--teal); }
.is-style-owm-icon { width: 48px; height: 48px; border-radius: 12px; display: grid !important; place-items: center; background: var(--wp--preset--color--night); border: 1px solid var(--wp--preset--color--line-2); font: 700 18px/1 var(--wp--preset--font-family--mono) !important; margin-bottom: 16px !important; }

/* ---------- Cards ---------- */
.is-style-owm-card, .is-style-owm-lift, .is-style-owm-step {
	background: var(--wp--preset--color--panel); border: 1px solid var(--wp--preset--color--line); border-radius: 18px; padding: 26px;
}
.is-style-owm-lift, .owm-lift { transition: transform .2s, border-color .2s, box-shadow .2s; }
.is-style-owm-lift:hover, .owm-lift:hover { transform: translateY(-4px); border-color: var(--wp--preset--color--teal) !important; box-shadow: 0 14px 44px rgba(46, 230, 214, .12); }
.is-style-owm-card h3, .is-style-owm-lift h3, .is-style-owm-step h3 { font-size: 20px; margin: 0 0 8px; }
.is-style-owm-card p:not(.is-style-owm-icon):not(.is-style-owm-kicker), .is-style-owm-lift p:not(.is-style-owm-icon):not(.is-style-owm-kicker), .is-style-owm-step p:not(.is-style-owm-kicker) { margin: 0; color: var(--wp--preset--color--muted); font-size: 15px; }
.is-style-owm-card > *, .is-style-owm-lift > * { margin-block-start: 0; }
/* Numbered steps: the number comes from the order of the cards. */
.owm-steps { counter-reset: owm-step; }
.is-style-owm-step { position: relative; overflow: hidden; counter-increment: owm-step; }
.is-style-owm-step::before { content: counter(owm-step); position: absolute; right: 18px; top: 4px; font: 700 92px/1 var(--wp--preset--font-family--heading); color: #182340; }
.is-style-owm-step > * { position: relative; }

/* ---------- Hero and page hero ---------- */
.owm-hero, .owm-page-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--wp--preset--color--line); }
.owm-hero::before, .owm-page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 78% 30%, rgba(46, 230, 214, .16), transparent 45%), radial-gradient(circle at 15% 85%, rgba(255, 79, 163, .14), transparent 45%); pointer-events: none; }
.owm-hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(#14304E 1px, transparent 1px), linear-gradient(90deg, #14304E 1px, transparent 1px); background-size: 56px 56px; opacity: .35; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); pointer-events: none; }
.owm-hero > *, .owm-page-hero > * { position: relative; z-index: 1; }

/* ---------- Buttons ---------- */
.wp-block-button__link { transition: transform .15s, box-shadow .2s, border-color .2s; }
.wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-button.is-style-owm-glow > .wp-block-button__link { box-shadow: 0 0 30px rgba(46, 230, 214, .35); }
.wp-block-button.is-style-outline > .wp-block-button__link { background: rgba(14, 20, 36, .6); color: var(--wp--preset--color--light); border: 1px solid var(--wp--preset--color--line-2); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: var(--wp--preset--color--teal); }

/* ---------- Band and CTA boxes ---------- */
.owm-band { border-radius: 24px; }
.owm-cta-box { border-radius: 24px; }

/* ---------- FAQ (Details block) ---------- */
.wp-block-details summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font-weight: 600; font-size: 17px; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; font: 700 20px/1 var(--wp--preset--font-family--mono); color: var(--wp--preset--color--teal); }
.wp-block-details[open] summary::after { content: "−"; }
.wp-block-details > :not(summary) { color: var(--wp--preset--color--soft); margin: 0 0 20px; }

/* ---------- Footer ---------- */
.owm-footer { margin-top: 110px; }
.owm-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.owm-footer a { color: var(--wp--preset--color--muted); font-size: 14px; }
.owm-footer a:hover { color: var(--wp--preset--color--light); }
.owm-footer h4 { font-family: var(--wp--preset--font-family--body); font-size: 14px; letter-spacing: 0; margin: 0 0 12px; }

/* ---------- Prose ---------- */
.owm-prose h2 { font-size: 30px; margin-top: 44px; }
.owm-prose p, .owm-prose li { color: var(--wp--preset--color--soft); font-size: 17px; }

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

/* =========================================================
   Dynamic block styles (same look as the static site)
   ========================================================= */
.owm-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.owm-grid { display: grid; gap: 16px; }
.owm-g-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.owm-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 12px; font-weight: 700; font-size: 13px; border: 1px solid transparent; white-space: nowrap; }
.owm-cta-teal { background: var(--wp--preset--color--teal); color: var(--wp--preset--color--night) !important; box-shadow: 0 0 30px rgba(46, 230, 214, .35); }

/* Stats */
.owm-stats { display: flex; flex-wrap: wrap; gap: 28px; }
.owm-stat b { display: block; font: 700 30px/1 var(--wp--preset--font-family--mono); }
.owm-stat span { font-size: 13px; color: var(--wp--preset--color--muted); }

/* Preview */
.owm-preview { position: relative; border-radius: 22px; border: 1px solid var(--wp--preset--color--line-2); background: #0A1A2E; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(46, 230, 214, .12); aspect-ratio: 1 / 1; }
.owm-preview svg { display: block; width: 100%; height: 100%; }
.owm-preview-card { position: absolute; left: 18px; bottom: 18px; right: 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(8, 12, 22, .9); border: 1px solid var(--wp--preset--color--line-2); }
.owm-preview-card b { display: block; font-family: var(--wp--preset--font-family--heading); font-size: 17px; }
.owm-preview-card span { font-size: 12px; color: var(--wp--preset--color--muted); }
.owm-pulse { animation: owm-pulse 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes owm-pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
.owm-float { animation: owm-float 6s ease-in-out infinite; }
@keyframes owm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Game cards */
.owm-game-card { display: flex; flex-direction: column; border-radius: 20px; background: var(--wp--preset--color--panel); border: 1px solid var(--wp--preset--color--line); overflow: hidden; color: var(--wp--preset--color--light) !important; text-decoration: none; }
.owm-game-art { position: relative; height: 150px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; }
.owm-yr { font: 700 46px/1 var(--wp--preset--font-family--heading); color: rgba(8, 12, 22, .5); }
.owm-pill { align-self: flex-end; padding: 4px 10px; border-radius: 999px; background: rgba(8, 12, 22, .8); font: 700 11px/1.4 var(--wp--preset--font-family--mono); color: var(--wp--preset--color--light); }
.owm-game-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.owm-game-body h3 { font-size: 22px; margin: 0; }
.owm-game-body p { margin: 0; font-size: 14px; color: var(--wp--preset--color--muted); flex: 1; }
.owm-prog { display: flex; align-items: center; gap: 10px; font: 700 12px/1 var(--wp--preset--font-family--mono); color: var(--wp--preset--color--soft); margin-top: 6px; }
.owm-prog-bar { flex: 1; height: 6px; border-radius: 999px; background: #1A2440; overflow: hidden; }
.owm-prog-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--wp--preset--color--teal); transition: width .4s; }
.owm-game-link { margin-top: 10px; font-weight: 700; font-size: 14px; color: var(--wp--preset--color--teal); }

/* Sets table */
.owm-sets-wrap { position: relative; max-width: 100%; min-width: 0; border: 1px solid var(--wp--preset--color--line); border-radius: 18px; overflow-x: auto; background: var(--wp--preset--color--panel); }
.owm-sets { width: 100%; border-collapse: collapse; }
.owm-sets th, .owm-sets td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--wp--preset--color--line); white-space: nowrap; }
.owm-sets th { font: 700 11px/1 var(--wp--preset--font-family--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted); background: var(--wp--preset--color--panel-2); }
.owm-sets tr:last-child td { border-bottom: 0; }
.owm-sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; vertical-align: middle; box-shadow: 0 0 8px currentColor; flex: none; }
.owm-sets td.n { font: 700 14px/1 var(--wp--preset--font-family--mono); }
.owm-sets .yes { color: var(--wp--preset--color--teal); font-weight: 600; }
.owm-sets .part { color: var(--wp--preset--color--gold); font-weight: 600; }
.owm-sets .no { color: var(--wp--preset--color--muted); }

/* Set cards */
.owm-sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 32px; }
.owm-sec-head h2 { font-size: clamp(30px, 4vw, 44px); margin: 10px 0 0; }
.owm-sec-head .is-style-owm-kicker { margin: 0; }
.owm-sec-text { margin: 10px 0 0; color: var(--wp--preset--color--muted); max-width: 620px; }
.owm-set-card { display: flex; flex-direction: column; gap: 10px; background: var(--wp--preset--color--panel); border: 1px solid var(--wp--preset--color--line); border-radius: 18px; padding: 26px; }
.owm-set-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.owm-set-name { display: flex; align-items: center; gap: 10px; }
.owm-set-name .owm-sw { width: 12px; height: 12px; margin: 0; }
.owm-set-name h3 { margin: 0; font-size: 19px; }
.owm-set-top b { font: 700 13px/1 var(--wp--preset--font-family--mono); color: var(--wp--preset--color--soft); }
.owm-set-card p { margin: 0; color: var(--wp--preset--color--muted); font-size: 15px; }
.owm-set-card button { align-self: flex-start; margin-top: auto; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--wp--preset--color--line-2); background: var(--wp--preset--color--night); color: var(--wp--preset--color--light); font: 600 13px/1 var(--wp--preset--font-family--body); cursor: pointer; }
.owm-set-card button:hover { border-color: var(--wp--preset--color--teal); }

/* Game hero */
.owm-game-hero { margin-top: 0 !important; }
.owm-hero-row { position: relative; padding-top: 44px; padding-bottom: 36px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.owm-crumbs { font-size: 14px; color: var(--wp--preset--color--muted); margin-bottom: 14px; }
.owm-crumbs a { color: var(--wp--preset--color--muted); }
.owm-crumbs a:hover { color: var(--wp--preset--color--light); }
.owm-game-hero h1 { font-size: clamp(34px, 5vw, 56px); margin: 0; }
.owm-glow-p { color: var(--wp--preset--color--pink); text-shadow: 0 0 12px rgba(255, 79, 163, .55), 0 0 34px rgba(255, 79, 163, .25); }
.owm-glow-t { color: var(--wp--preset--color--teal); }
.owm-lead { margin: 14px 0 0; color: var(--wp--preset--color--soft); font-size: 18px; max-width: 640px; }
.owm-hero-side { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.owm-switcher { display: flex; flex-wrap: wrap; gap: 8px; }
.owm-switcher a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--wp--preset--color--line-2); color: var(--wp--preset--color--soft); font-size: 14px; font-weight: 500; }
.owm-switcher a:hover { border-color: var(--wp--preset--color--teal); color: var(--wp--preset--color--light); }
.owm-switcher a[aria-current="page"] { background: var(--wp--preset--color--teal); border-color: var(--wp--preset--color--teal); color: var(--wp--preset--color--night); font-weight: 700; }

/* Countdown */
.owm-count { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.owm-count > div { text-align: center; padding: 16px 0; border-radius: 14px; background: rgba(8, 12, 22, .55); border: 1px solid rgba(255, 255, 255, .12); }
.owm-count b { display: block; font: 700 34px/1.1 var(--wp--preset--font-family--mono); text-shadow: 0 0 12px rgba(255, 79, 163, .8); }
.owm-count span { font-size: 12px; color: #F3C9DD; }
.owm-count .owm-count-done { grid-column: 1 / -1; font-weight: 700; font-size: 20px; }

/* Games list (footer) */
.owm-games-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 980px) { .owm-hero-cols { flex-direction: column; } }

/* Section pages (Home, Maps, map pages): sections sit flush, like the templates did. */
.wp-block-post-content.owm-flow > * { margin-block-start: 0; margin-block-end: 0; }