/* ==========================================================================
   Whisky Returns theme — global styles (header, footer, nav, base, pages).
   Tokens + UI specs mirror the "WHISKY Design System" (Claude Design project):
   colors_and_type.css, ui_kits/website/Nav.jsx + Footer.jsx, preview/type-ui.html.
   Article-body styles live separately in uploads/wr/article_style.css (scoped to
   .wr-article) and are enqueued by the wr-article mu-plugin on cat-1 posts.
   ========================================================================== */

:root {
	/* -- Brand -- */
	--brand-cask: #5A2A15;   /* primary: buttons, links, active nav */
	--brand-amber: #C8912F;  /* secondary: hover/highlight */
	--brand-ink: #241A12;    /* warm near-black */
	--brand-cask-50: #F6EEE8;
	--brand-cask-100: #E7D4C6;
	--brand-amber-50: #FAF1DE;

	/* -- Neutrals (warm, oak-tinted) -- */
	--fg-1: #241A12;
	--fg-2: #3D332B;
	--fg-3: #6F655B;
	--fg-4: #9B9085;

	--bg-1: #FFFFFF;
	--bg-2: #FBF9F6;
	--bg-3: #F4EFE9;

	--border-1: #EBE4DA;
	--border-2: #D8CDBE;

	/* -- Type families -- */
	--font-headings: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-ui:       "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-body:     "PT Serif", Georgia, "Times New Roman", serif;
	--font-notes:    "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* -- Type scale -- */
	--fs-body: 20px;   --lh-body: 32px;
	--fs-menu: 16px;   --lh-menu: 24px;
	--fs-button: 20px; --lh-button: 30px;

	/* -- Radius / shadow / motion -- */
	--radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px;
	--shadow-2: 0 4px 14px rgba(58, 38, 22, 0.08);
	--ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
	--dur-fast: 120ms;

	/* -- Layout -- */
	--max-w-wide: 1200px;
	--max-w-content: 1040px;
	--header-h: 74px;
}

/* --- minimal reset (replaces hello-elementor's reset.css) --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--fg-1);
	background: var(--bg-1);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-headings); font-weight: 700; color: var(--fg-1);
	line-height: 1.2; letter-spacing: -0.01em;
}
img { max-width: 100%; height: auto; }
a {
	color: var(--brand-cask); text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--brand-amber); border-bottom-color: currentColor; }

.wr-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 1000;
	background: var(--brand-cask); color: #fff; padding: 10px 16px; border-radius: var(--radius-md);
}
.wr-skip-link:focus { left: 8px; top: 8px; color: #fff; }

/* --- header / nav (per Nav.jsx + type-ui.html) --- */
.wr-site-header {
	position: sticky; top: 0; z-index: 100;
	background: var(--bg-1);
	border-bottom: 1px solid var(--border-1);
}
.wr-header-inner {
	max-width: var(--max-w-wide); margin: 0 auto; padding: 14px 32px;
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.wr-logo { display: inline-flex; align-items: center; border: 0; }
.wr-logo:hover { border-bottom-color: transparent; }
.wr-logo img { width: auto; height: 44px; display: block; }

/* Menu: Poppins 16/24, weight 500, capitalize, no fills — active = cask + 2px underline. */
.wr-nav .wr-menu {
	list-style: none; margin: 0; padding: 0;
	display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
	font-family: var(--font-ui); font-size: var(--fs-menu); line-height: var(--lh-menu);
	font-weight: 500; text-transform: capitalize;
}
.wr-nav .wr-menu a {
	display: inline-block; color: var(--fg-1); border: 0;
	border-bottom: 2px solid transparent; padding-bottom: 4px;
	transition: color var(--dur-fast) var(--ease-standard);
}
.wr-nav .wr-menu a:hover { color: var(--brand-cask); }
.wr-nav .wr-menu .current-menu-item > a,
.wr-nav .wr-menu .current-menu-ancestor > a,
.wr-nav .wr-menu .current_page_item > a {
	color: var(--brand-cask); border-bottom-color: var(--brand-cask);
}

/* submenu (dropdown) */
.wr-nav .wr-menu li { position: relative; }
.wr-nav .wr-menu .sub-menu {
	list-style: none; margin: 0; padding: 8px; position: absolute; top: 100%; left: -8px;
	background: var(--bg-1); border: 1px solid var(--border-1);
	border-radius: var(--radius-md); box-shadow: var(--shadow-2);
	min-width: 220px; display: none; z-index: 20;
}
.wr-nav .wr-menu li:hover > .sub-menu { display: block; }
.wr-nav .wr-menu .sub-menu a {
	display: block; padding: 8px 10px; border-bottom: 0; border-radius: var(--radius-sm);
	text-transform: none; font-size: 15px;
}
.wr-nav .wr-menu .sub-menu a:hover { background: var(--brand-cask-50); color: var(--brand-cask); }

/* hamburger (hidden on desktop) */
.wr-nav-toggle {
	display: none; width: 44px; height: 44px; padding: 10px;
	background: none; border: 1px solid var(--border-1); border-radius: var(--radius-sm);
	cursor: pointer;
}
.wr-nav-toggle span {
	display: block; height: 2px; background: var(--fg-1); border-radius: 2px;
	margin: 4px 0; transition: transform .2s ease, opacity .2s ease;
}
.wr-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.wr-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.wr-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- main / page wrap --- */
.wr-site-main { min-height: 50vh; }
.wr-page-wrap { max-width: var(--max-w-content); margin: 0 auto; padding: 40px 32px 72px; }
.wr-page-title { font-size: 40px; line-height: 1.15; margin: 0 0 24px; }
.wr-page-content > *:first-child { margin-top: 0; }

/* --- post cards (archive/search/index) --- */
.wr-post-list { display: grid; gap: 20px; }
.wr-post-card { padding: 24px; border: 1px solid var(--border-1); border-radius: var(--radius-lg); background: var(--bg-2); }
.wr-post-card-title { font-size: 22px; margin: 0 0 8px; }
.wr-post-card-excerpt { color: var(--fg-3); font-family: var(--font-notes); font-size: 16px; }

.wr-pagination { margin-top: 32px; }
.wr-pagination a, .wr-pagination .current {
	display: inline-block; padding: 6px 12px; margin-right: 6px;
	border: 1px solid var(--border-1); border-radius: var(--radius-sm); font-family: var(--font-ui);
}
.wr-pagination .current { background: var(--brand-cask); color: #fff; border-color: var(--brand-cask); }

/* Buttons (per type-ui.html: Poppins 20/30, 600) */
.wr-btn {
	display: inline-block; font-family: var(--font-ui);
	font-size: var(--fs-button); line-height: var(--lh-button); font-weight: 600;
	padding: 10px 22px; border-radius: var(--radius-md); border: 0;
	background: var(--brand-cask); color: #fff !important;
	transition: background var(--dur-fast) var(--ease-standard);
}
.wr-btn:hover { background: var(--brand-amber); border-bottom-color: transparent; }
.wr-btn-secondary {
	background: #fff; color: var(--brand-cask) !important; border: 1px solid var(--brand-cask);
}
.wr-btn-secondary:hover { background: var(--brand-cask-50); }

.wr-404 { text-align: center; }
.wr-404 .search-form { margin: 24px auto; max-width: 440px; display: flex; gap: 8px; }
.wr-404 input[type="search"] { flex: 1; padding: 11px 14px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); font-family: var(--font-notes); }

/* --- footer (per Footer.jsx: white, centered column) --- */
.wr-site-footer {
	background: var(--bg-1); border-top: 1px solid var(--border-1);
	margin-top: 64px; padding: 44px 32px 32px;
}
.wr-footer-inner {
	max-width: var(--max-w-content); margin: 0 auto;
	display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center;
}
.wr-footer-inner > .wr-logo img { height: 40px; }
.wr-footer-links { display: flex; gap: 24px; font-family: var(--font-ui); font-size: 14px; }
.wr-footer-links a { color: var(--fg-3); border-bottom: 0; }
.wr-footer-links a:hover { color: var(--brand-cask); }
.wr-footer-meta {
	font-family: var(--font-notes); font-size: 13px; line-height: 1.6;
	color: var(--fg-4); max-width: 640px;
}
.wr-footer-meta .wr-footer-disclaimer { font-style: italic; display: block; margin-top: 6px; }

/* --- responsive --- */
@media (max-width: 768px) {
	:root { --fs-body: 18px; --lh-body: 28px; }
	.wr-page-title { font-size: 30px; }
}
@media (max-width: 900px) {
	.wr-header-inner { padding: 12px 20px; }
	.wr-nav-toggle { display: block; }
	.wr-nav {
		position: absolute; top: var(--header-h); left: 0; right: 0;
		background: var(--bg-1); border-bottom: 1px solid var(--border-1);
		max-height: 0; overflow: hidden; transition: max-height .25s ease;
	}
	.wr-nav.is-open { max-height: 85vh; overflow: auto; }
	.wr-nav .wr-menu { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 16px; }
	.wr-nav .wr-menu a { padding: 13px 4px; border-bottom: 1px solid var(--border-1); }
	.wr-nav .wr-menu .current-menu-item > a { border-bottom-color: var(--border-1); color: var(--brand-cask); }
	.wr-nav .wr-menu .sub-menu {
		position: static; display: block; box-shadow: none; border: 0; padding: 0 0 0 16px; min-width: 0;
	}
	.wr-page-wrap { padding: 28px 20px 56px; }
	.wr-site-footer { padding: 36px 20px 28px; }
}