/**
 * Ghost Note — base stylesheet.
 *
 * Intentionally unopinionated. This file provides structure, accessibility
 * primitives and the scroll-animation system. It avoids setting decorative
 * colours, type scales or spacing that would fight Elementor's Site Settings,
 * and it never styles Elementor's own class namespace.
 */

/* -------------------------------------------------------------------------
 * 1. Tokens
 * ---------------------------------------------------------------------- */

:root {
	--gn-container-width: 1200px;
	--gn-container-gutter: 20px;

	/* Brand palette. Elementor's Site Settings can still override anything
	   visual; these are the theme-level defaults the header/footer use. */
	--gn-bg: #ffffff;
	--gn-accent: #b89477;
	--gn-accent-dark: #a37f62;
	--gn-secondary: #091e38;
	--gn-text: #091e38;
	--gn-muted: rgba(9, 30, 56, 0.6);
	--gn-border: rgba(9, 30, 56, 0.1);
	--gn-surface: #f5f6f7;
	--gn-panel: #f2f3f4;

	/* Type */
	--gn-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--gn-tracking-tight: -0.03em;

	/* Shape — rounded, softly ringed cards rather than hard edges. */
	--gn-radius: 10px;
	--gn-radius-sm: 4px;
	--gn-radius-pill: 999px;
	--gn-ring: 0 0 0 1px rgba(9, 30, 56, 0.08), 0 5px 8px -2px rgba(9, 30, 56, 0.05);
	--gn-ring-hover: 0 0 0 1px rgba(9, 30, 56, 0.1), 0 14px 26px -8px rgba(9, 30, 56, 0.14);

	/* Motion */
	--gn-ease: cubic-bezier(0.165, 0.84, 0.44, 1);
	--gn-dur: 0.4s;
	--gn-dur-micro: 0.15s;

	/* Scroll animation tuning — override in Elementor custom CSS or a child theme. */
	--gn-anim-duration: 1.1s;
	--gn-anim-distance: 34px;
	--gn-anim-scale: 0.96;
	--gn-anim-easing: cubic-bezier(0.165, 0.84, 0.44, 1);
	--gn-anim-delay: 0ms;
}

/* -------------------------------------------------------------------------
 * 2. Minimal reset
 * ---------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--gn-font);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
	background: var(--gn-bg);
	color: var(--gn-muted);
}

/*
 * Display type: tight tracking and a firm weight, which is most of what gives
 * the reference design its character. Sizes fluid so they hold on mobile.
 */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	font-family: var(--gn-font);
	color: var(--gn-text);
	letter-spacing: var(--gn-tracking-tight);
	line-height: 1.22;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.25rem, 4.4vw, 3.5rem);
	font-weight: 300;
	line-height: 1.25;
}

h2 {
	font-size: clamp(1.875rem, 3.4vw, 3rem);
	font-weight: 600;
}

h3 {
	font-size: clamp(1.375rem, 2.4vw, 2.25rem);
	font-weight: 600;
}

h4 {
	font-size: clamp(1.125rem, 1.6vw, 1.5rem);
	font-weight: 600;
}

h5,
h6 {
	font-size: 1rem;
	font-weight: 600;
}

p {
	margin: 0 0 1.2em;
}

strong,
b {
	font-weight: 700;
}

img,
video,
svg,
iframe {
	max-width: 100%;
	height: auto;
}

img {
	display: block;
}

a {
	color: inherit;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

/* -------------------------------------------------------------------------
 * 3. Accessibility helpers
 * ---------------------------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 12px 20px;
	clip: auto;
	background: #fff;
	color: #000;
	text-decoration: none;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * 4. Structure
 * ---------------------------------------------------------------------- */

.gn-container {
	width: 100%;
	max-width: var(--gn-container-width);
	margin-inline: auto;
	padding-inline: var(--gn-container-gutter);
}

.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding-block: 16px;
}

.site-title {
	margin: 0;
	font-size: 1.25rem;
}

.site-title a {
	text-decoration: none;
}

.site-description {
	margin: 2px 0 0;
	font-size: 0.85rem;
	opacity: 0.7;
}

.main-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation a {
	text-decoration: none;
}

.main-navigation .sub-menu {
	display: none;
}

.menu-toggle {
	display: none;
	padding: 8px;
	background: none;
	border: 0;
	cursor: pointer;
}

.menu-toggle-bar,
.menu-toggle-bar::before,
.menu-toggle-bar::after {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
}

.menu-toggle-bar::before,
.menu-toggle-bar::after {
	content: "";
	transform: translateY(-7px);
}

.menu-toggle-bar::after {
	transform: translateY(5px);
}

.post-list > * + * {
	margin-top: 48px;
}

.entry-content > * + * {
	margin-top: 1em;
}

.site-footer {
	padding-block: 40px;
}

.site-info {
	margin: 16px 0 0;
	font-size: 0.85rem;
	opacity: 0.7;
}

@media (max-width: 782px) {
	.menu-toggle {
		display: block;
		order: 3;
	}

	.main-navigation {
		order: 4;
		width: 100%;
	}

	.main-navigation #primary-menu {
		display: none;
		flex-direction: column;
		gap: 12px;
		padding-block: 12px;
	}

	.main-navigation.is-open #primary-menu {
		display: flex;
	}
}

/* -------------------------------------------------------------------------
 * 5. Scroll animation system
 *
 * Add one of the effect classes to any element — a theme template, or an
 * Elementor widget/container via Advanced → CSS Classes. The Intersection
 * Observer in assets/js/animations.js adds .gn-in when the element enters the
 * viewport, which transitions it to its resting state.
 *
 * Per-element timing:   --gn-anim-delay: 200ms;  --gn-anim-duration: 1s;
 * Stagger children:     add .gn-stagger to the parent.
 * Replay on re-entry:   add .gn-anim-repeat.
 *
 * Elements are only hidden when the document has .gn-js, so a JS failure or a
 * no-JS visitor still sees all content.
 * ---------------------------------------------------------------------- */

.gn-js .gn-anim,
.gn-js .gn-fade-in,
.gn-js .gn-fade-up,
.gn-js .gn-fade-down,
.gn-js .gn-fade-left,
.gn-js .gn-fade-right,
.gn-js .gn-scale-in {
	opacity: 0;
	transition:
		opacity var(--gn-anim-duration) var(--gn-anim-easing) var(--gn-anim-delay),
		transform var(--gn-anim-duration) var(--gn-anim-easing) var(--gn-anim-delay);
}

.gn-js .gn-fade-up {
	transform: translate3d(0, var(--gn-anim-distance), 0);
}

.gn-js .gn-fade-down {
	transform: translate3d(0, calc(var(--gn-anim-distance) * -1), 0);
}

/* gn-fade-left enters from the left, gn-fade-right enters from the right. */
.gn-js .gn-fade-left {
	transform: translate3d(calc(var(--gn-anim-distance) * -1), 0, 0);
}

.gn-js .gn-fade-right {
	transform: translate3d(var(--gn-anim-distance), 0, 0);
}

.gn-js .gn-scale-in {
	transform: scale(var(--gn-anim-scale));
}

/* Resting state. */
.gn-js .gn-anim.gn-in,
.gn-js .gn-fade-in.gn-in,
.gn-js .gn-fade-up.gn-in,
.gn-js .gn-fade-down.gn-in,
.gn-js .gn-fade-left.gn-in,
.gn-js .gn-fade-right.gn-in,
.gn-js .gn-scale-in.gn-in {
	opacity: 1;
	transform: none;
}

/* Stagger direct children of a .gn-stagger parent. */
.gn-js .gn-stagger > *:nth-child(1) { --gn-anim-delay: 0ms; }
.gn-js .gn-stagger > *:nth-child(2) { --gn-anim-delay: 80ms; }
.gn-js .gn-stagger > *:nth-child(3) { --gn-anim-delay: 160ms; }
.gn-js .gn-stagger > *:nth-child(4) { --gn-anim-delay: 240ms; }
.gn-js .gn-stagger > *:nth-child(5) { --gn-anim-delay: 320ms; }
.gn-js .gn-stagger > *:nth-child(6) { --gn-anim-delay: 400ms; }
.gn-js .gn-stagger > *:nth-child(n + 7) { --gn-anim-delay: 480ms; }

/*
 * Never animate inside the Elementor editor preview, and never animate for
 * visitors who have asked for reduced motion.
 */
.elementor-editor-active .gn-anim,
.elementor-editor-active [class*="gn-fade"],
.elementor-editor-active [class*="gn-scale"] {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.gn-js .gn-anim,
	.gn-js [class*="gn-fade"],
	.gn-js [class*="gn-scale"] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}