/* =========================================================
   GameReon — Design Registry
   Palette: storm teal / sand / terracotta / sage
   Display font: Fraunces · Body font: Karla
   ========================================================= */

:root {
	--gr-teal: #2C4A52;
	--gr-teal-dark: #1D3238;
	--gr-sand: #F4E9D8;
	--gr-sand-dark: #E8D9BF;
	--gr-terracotta: #D97B4F;
	--gr-terracotta-dark: #B85F37;
	--gr-sage: #7A9B8E;
	--gr-cream: #FBF6EC;
	--gr-ink: #2A2622;

	--gr-font-display: 'Fraunces', Georgia, serif;
	--gr-font-body: 'Karla', -apple-system, BlinkMacSystemFont, sans-serif;

	--gr-radius: 10px;
	--gr-max-width: 1180px;
}

html, body {
	overflow-x: hidden; /* prevents the 100vw full-bleed technique from shifting the page left */
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--gr-font-body);
	color: var(--gr-ink);
	background: var(--gr-cream);
	line-height: 1.6;
}

h1, h2, h3, h4 {
	font-family: var(--gr-font-display);
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 0.5em;
}

p { margin: 0 0 1em; }

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
}

.gr-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--gr-teal);
	color: #fff;
	padding: 10px 16px;
	z-index: 1000;
}
.gr-skip-link:focus { left: 10px; }

.gr-container {
	max-width: var(--gr-max-width);
	margin: 0 auto; /* NEVER "0" only — that kills inherited centering */
	padding: 0 24px;
}

/* ---------- Buttons ---------- */
.gr-btn {
	display: inline-block;
	padding: 12px 26px;
	border-radius: 999px;
	font-family: var(--gr-font-body);
	font-weight: 700;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform .15s ease, background .2s ease;
}
.gr-btn--primary {
	background: var(--gr-terracotta);
	color: #fff;
}
.gr-btn--primary:hover { background: var(--gr-terracotta-dark); transform: translateY(-1px); }

.gr-btn--ghost {
	background: transparent;
	border-color: var(--gr-teal);
	color: var(--gr-teal);
}
.gr-btn--ghost-light {
	border-color: #fff;
	color: #fff;
}
.gr-btn--ghost:hover { background: rgba(0,0,0,0.06); }

.gr-link-arrow {
	color: var(--gr-terracotta-dark);
	font-weight: 700;
	text-decoration: none;
}
.gr-link-arrow:hover { text-decoration: underline; }

/* ---------- Header ---------- */
.gr-header {
	position: relative;
	background: var(--gr-sand);
	z-index: 50;
}
.gr-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 24px;
}
.gr-logo__text {
	font-family: var(--gr-font-display);
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--gr-teal);
	text-decoration: none;
}
.gr-logo { text-decoration: none; }

.gr-nav__list {
	list-style: none;
	display: flex;
	gap: 28px;
	margin: 0;
	padding: 0;
}
.gr-nav__list a {
	color: var(--gr-teal-dark); /* explicit link color on light bg */
	text-decoration: none;
	font-weight: 700;
}
.gr-nav__list a:hover { color: var(--gr-terracotta); }

.gr-nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
}
.gr-nav-toggle span {
	width: 26px;
	height: 3px;
	background: var(--gr-teal);
	border-radius: 2px;
}

/* ---------- Wave dividers ---------- */
.gr-wave-divider { line-height: 0; }
.gr-wave-divider svg { display: block; width: 100%; height: 40px; }
.gr-wave-divider--header svg path { fill: var(--gr-sand); }
.gr-wave-divider--footer svg path { fill: var(--gr-teal); }
.gr-wave-divider--hero { position: absolute; bottom: -1px; left: 0; width: 100%; }
.gr-wave-divider--hero svg path { fill: var(--gr-sand); }

/* ---------- Hero (full-bleed) ---------- */
.gr-hero {
	position: relative;
	max-width: none; /* explicit — prevents inherited container max-width clipping the bg */
	width: 100%;
	min-height: 640px;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	color: #fff;
}
.gr-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(44,74,82,0.55) 0%, rgba(29,50,56,0.75) 100%);
}
.gr-hero__overlay--teal { background: linear-gradient(180deg, rgba(44,74,82,0.65) 0%, rgba(29,50,56,0.85) 100%); }

.gr-hero__inner {
	position: relative;
	padding: 120px 24px 100px;
}
.gr-hero__title {
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	max-width: 720px;
	color: #fff;
}
.gr-hero__subtitle {
	font-size: 1.15rem;
	max-width: 560px;
	color: #F4E9D8; /* explicit light color on dark bg */
}
.gr-hero__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 28px; }

/* ---------- Tide widget ---------- */
.gr-tide-widget {
	position: absolute;
	right: 32px;
	bottom: 64px;
	width: 220px;
	background: rgba(244,233,216,0.92);
	border-radius: var(--gr-radius);
	padding: 12px 14px 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.25);
	z-index: 5;
}
.gr-tide-widget__board { fill: var(--gr-sand); }
.gr-tide-widget__line { fill: none; stroke: var(--gr-terracotta); stroke-width: 3; }
.gr-tide-widget__dot { fill: var(--gr-teal); }
.gr-tide-widget__label {
	margin: 6px 0 0;
	font-size: 0.85rem;
	color: var(--gr-teal-dark);
	text-align: center;
}

/* ---------- Sections ---------- */
.gr-section { position: relative; padding: 80px 0; }
.gr-section--sand { background: var(--gr-sand); }
.gr-section--cream { background: var(--gr-cream); }
.gr-section--teal {
	max-width: none;
	width: 100%;
	background-size: cover;
	background-position: center;
	color: #fff;
	padding: 100px 0;
}
.gr-section__inner--overlay { position: relative; z-index: 2; text-align: center; }
.gr-section__title { text-align: center; font-size: 2rem; margin-bottom: 40px; }
.gr-section__title--light { color: #fff; }
.gr-section__text { max-width: 640px; margin: 0 auto; }
.gr-section__text--light { color: var(--gr-sand); }
.gr-section__cta { text-align: center; margin-top: 32px; }

/* ---------- Feature grid ---------- */
.gr-feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin: 0 auto;
}
.gr-feature-card {
	background: #fff;
	border-radius: var(--gr-radius);
	padding: 28px;
	box-shadow: 0 4px 16px rgba(44,74,82,0.08);
	border-top: 4px solid var(--gr-sage);
}
.gr-feature-card h3 { color: var(--gr-teal); margin-bottom: 10px; }
.gr-feature-card--photo img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	border-radius: 8px;
	margin-bottom: 16px;
}

.gr-gallery-strip {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 8px;
}
.gr-gallery-strip img {
	width: 100%;
	height: 320px;
	object-fit: cover;
	border-radius: var(--gr-radius);
	box-shadow: 0 6px 18px rgba(44,74,82,0.15);
}
@media (max-width: 880px) {
	.gr-gallery-strip { grid-template-columns: 1fr; }
}

/* ---------- Ship's log review cards ---------- */
.gr-review-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}
.gr-review-grid--preview { grid-template-columns: repeat(3, 1fr); }

.gr-log-card {
	background: var(--gr-sand);
	padding: 28px 24px 22px;
	position: relative;
	font-family: var(--gr-font-body);
	box-shadow: 0 6px 18px rgba(44,74,82,0.12);
	clip-path: polygon(
		0% 2%, 4% 0%, 10% 1.5%, 16% 0%, 22% 1.2%, 28% 0%, 34% 1.5%, 40% 0%,
		46% 1.2%, 52% 0%, 58% 1.5%, 64% 0%, 70% 1.2%, 76% 0%, 82% 1.5%, 88% 0%,
		94% 1.2%, 100% 0%, 100% 100%, 0% 100%
	);
}
.gr-log-card__date {
	font-family: var(--gr-font-display);
	font-style: italic;
	color: var(--gr-sage);
	font-size: 0.85rem;
	margin-bottom: 6px;
}
.gr-log-card__stars { color: var(--gr-terracotta); letter-spacing: 2px; margin-bottom: 8px; }
.gr-log-card__body { color: var(--gr-teal-dark); }
.gr-log-card__author {
	font-family: var(--gr-font-display);
	font-weight: 700;
	color: var(--gr-teal);
	margin: 0;
}
.gr-log-card__author span { font-weight: 400; color: var(--gr-sage); }

/* ---------- Page hero (interior pages) ---------- */
.gr-page-hero {
	position: relative;
	max-width: none;
	width: 100%;
	min-height: 260px;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	color: #fff;
}
.gr-page-hero__inner { position: relative; padding: 70px 24px; }
.gr-page-hero__inner h1 { color: #fff; font-size: 2.6rem; }
.gr-page-hero__lead { color: var(--gr-sand); font-size: 1.1rem; }

/* ---------- Content ---------- */
.gr-content { max-width: 760px; margin: 0 auto; }
.gr-content h2 { color: var(--gr-teal); margin-top: 1.6em; }
.gr-content a { color: var(--gr-terracotta-dark); }

/* ---------- Address ---------- */
.gr-address { font-style: normal; line-height: 1.8; }
.gr-address a { color: var(--gr-terracotta-dark); text-decoration: none; } /* explicit on light bg */
.gr-address a:hover { text-decoration: underline; }
.gr-address--footer a { color: var(--gr-sand); } /* explicit on dark footer bg */
.gr-address--footer .gr-address__name { color: #fff; font-weight: 700; }
.gr-address--contact a { color: var(--gr-terracotta-dark); }

/* ---------- Footer ---------- */
.gr-footer { background: var(--gr-teal); color: var(--gr-sand); }
.gr-footer__inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 32px;
	padding: 20px 24px 40px;
}
.gr-footer h3 { color: #fff; font-size: 1rem; }
.gr-logo__text--footer { color: #fff; font-size: 1.4rem; }
.gr-footer__tagline { color: var(--gr-sand); margin-top: 10px; }
.gr-footer__list, .gr-footer__legal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.gr-footer__list a, .gr-footer__legal a {
	color: var(--gr-sand); /* explicit link color on dark bg */
	text-decoration: none;
}
.gr-footer__list a:hover, .gr-footer__legal a:hover { color: #fff; }
.gr-footer__bottom {
	border-top: 1px solid rgba(255,255,255,0.15);
	padding: 16px 0;
	font-size: 0.85rem;
	color: var(--gr-sage);
}

/* ---------- Forms ---------- */
.gr-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 48px;
}
.gr-form__row { margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
.gr-form__row label { font-weight: 700; color: var(--gr-teal-dark); }
.gr-form__row input, .gr-form__row textarea {
	padding: 12px 14px;
	border: 1px solid var(--gr-sand-dark);
	border-radius: 8px;
	font-family: var(--gr-font-body);
	font-size: 1rem;
}
.gr-form__row--checkbox { flex-direction: row; align-items: flex-start; gap: 10px; }
.gr-form__row--checkbox label { display: flex; gap: 8px; font-weight: 400; }
.gr-form__honeypot { position: absolute; left: -9999px; top: -9999px; }
.gr-form-notice { padding: 14px 18px; border-radius: 8px; margin-bottom: 20px; }
.gr-form-notice--success { background: #E4EEE8; color: #1D3238; }
.gr-form-notice--error { background: #F7E3DA; color: #7A3419; }
.gr-form-notice--error ul { margin: 0; padding-left: 18px; }

/* ---------- News ---------- */
.gr-news-list { max-width: 760px; margin: 0 auto; }
.gr-news-item { padding: 28px 0; border-bottom: 1px solid var(--gr-sand-dark); }
.gr-news-item__date { color: var(--gr-sage); font-size: 0.9rem; }

/* ---------- Cookie banner ---------- */
.gr-cookie-banner {
	position: fixed;
	left: 20px;
	right: 20px;
	bottom: 20px;
	max-width: 640px;
	margin: 0 auto;
	background: var(--gr-teal-dark);
	color: var(--gr-sand);
	border-radius: var(--gr-radius);
	padding: 20px 24px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.3);
	z-index: 999;
}
.gr-cookie-banner a { color: #fff; } /* explicit link color on dark banner */
.gr-cookie-banner__actions { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
	.gr-feature-grid, .gr-review-grid { grid-template-columns: 1fr; }
	.gr-footer__inner { grid-template-columns: 1fr 1fr; }
	.gr-contact-grid { grid-template-columns: 1fr; }
	.gr-nav-toggle { display: flex; }
	.gr-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--gr-sand);
		padding: 20px 24px;
	}
	.gr-nav.is-open { display: block; }
	.gr-nav__list { flex-direction: column; gap: 16px; }
	.gr-tide-widget { right: 16px; bottom: 24px; width: 170px; }
}

@media (max-width: 560px) {
	.gr-footer__inner { grid-template-columns: 1fr; }
}