/*
 * Header and footer (RPG Starter).
 * Every color and font is an Elementor global: change them in Elementor > Site Settings.
 * Text, logo and links are set in Appearance > Header & Footer and Appearance > Menus.
 */

html body .rpg-header, html body .rpg-footer {
	--rpg-ink: var(--e-global-color-text, #2B2B2B);
	--rpg-soft: var(--e-global-color-ink_soft, #5E5A52);
	--rpg-line: var(--e-global-color-line, #E2D9C8);
	--rpg-card: var(--e-global-color-card, #FBF8F2);
	--rpg-paper: var(--e-global-color-paper, #F7F2E8);
	--rpg-primary: var(--e-global-color-primary, #D4A537);
	--rpg-primary-ink: var(--e-global-color-primary_ink, #7A5A10);
	--rpg-accent: var(--e-global-color-accent, #56783A);
	--rpg-accent-hover: var(--e-global-color-accent_hover, #476432);
	--rpg-dark: var(--e-global-color-secondary, #27301F);
	--rpg-on-dark: var(--e-global-color-on_dark, #EDE6D6);
	--rpg-on-dark-soft: var(--e-global-color-on_dark_soft, #B9B39F);
	--rpg-body-font: var(--e-global-typography-text-font-family, system-ui), system-ui, sans-serif;
	--rpg-head-font: var(--e-global-typography-primary-font-family, system-ui), system-ui, sans-serif;
	--rpg-wrap: 1140px;
	font-family: var(--rpg-body-font);
}
html body .rpg-header *, html body .rpg-footer * { box-sizing: border-box; }

/* Buttons */
html body .rpg-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: var(--rpg-body-font); font-weight: 600; font-size: 16px; line-height: 1;
	padding: 15px 24px; border-radius: 8px; border: 1.5px solid transparent;
	text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
	white-space: nowrap;
}
html body .rpg-btn--cta { background: var(--rpg-accent); border-color: var(--rpg-accent); color: var(--e-global-color-white, #fff); }
html body .rpg-btn--cta:hover, html body .rpg-btn--cta:focus-visible { background: var(--rpg-accent-hover); border-color: var(--rpg-accent-hover); color: var(--e-global-color-white, #fff); }
html body .rpg-btn--cta[aria-current="page"] { box-shadow: 0 0 0 3px var(--e-global-color-tint_accent, rgba(86,120,58,.3)); }
html body .rpg-btn--ghost-dark { background: transparent; border-color: var(--e-global-color-on_dark_border, rgba(237,230,214,.55)); color: var(--rpg-on-dark); }
html body .rpg-btn--ghost-dark:hover { background: var(--e-global-color-on_dark_hover, rgba(237,230,214,.1)); color: var(--rpg-on-dark); }
html body .rpg-btn--sm { padding: 12px 22px; }

/* ---------------------------------------------------------------- Header */

html body .rpg-header {
	position: relative; z-index: 50;
	background: var(--e-global-color-header_bg, rgba(247,242,232,.96));
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--rpg-line);
	color: var(--rpg-ink);
}
html body .rpg-header.is-sticky { position: sticky; top: 0; }
html body.admin-bar .rpg-header.is-sticky { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { html body.admin-bar .rpg-header.is-sticky { top: 0; } }

html body .rpg-header__inner {
	max-width: calc(var(--rpg-wrap) + 40px); margin: 0 auto; padding: 0 20px;
	min-height: 84px; display: flex; align-items: center; gap: 24px;
}
html body .rpg-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; color: inherit; }
html body .rpg-logo__img { display: block; width: var(--rpg-logo-w, 248px); max-width: 100%; height: auto; }
html body .rpg-logo__text { font-family: var(--rpg-head-font); font-weight: 500; font-size: 22px; letter-spacing: .08em; }

html body .rpg-nav { margin-left: auto; display: flex; align-items: center; }
html body .rpg-menu, html body .rpg-menu ul { list-style: none; margin: 0; padding: 0; }
html body .rpg-menu { display: flex; align-items: center; gap: 4px; }
html body .rpg-menu > li { position: relative; }
html body .rpg-menu a {
	display: block; white-space: nowrap; text-decoration: none; color: var(--rpg-ink);
	font-family: var(--e-global-typography-nav-font-family, var(--rpg-body-font)), sans-serif;
	font-weight: 500; font-size: 15.5px; line-height: 1.2;
	padding: 10px 12px; border-radius: 6px;
}
html body .rpg-menu a:hover, html body .rpg-menu a:focus-visible { background: var(--e-global-color-ink_hover, rgba(43,43,43,.06)); color: var(--rpg-ink); }
html body .rpg-menu > .current-menu-item > a,
html body .rpg-menu > .current-menu-ancestor > a,
html body .rpg-menu > .current-menu-parent > a { color: var(--rpg-primary-ink); box-shadow: inset 0 -2px 0 var(--rpg-primary); }
html body .rpg-menu > .menu-item-has-children > a::after { content: " ▾"; font-size: .85em; }
html body .rpg-menu > .menu-item-has-children > a[href="#"] { cursor: default; }

/* Dropdown */
html body .rpg-menu .sub-menu {
	position: absolute; top: 100%; left: 0; min-width: 300px;
	background: var(--rpg-card); border: 1px solid var(--rpg-line); border-radius: 10px;
	padding: 8px; box-shadow: 0 14px 34px rgba(0,0,0,.12);
	display: none; flex-direction: column;
}
html body .rpg-menu > li:hover > .sub-menu,
html body .rpg-menu > li:focus-within > .sub-menu { display: flex; }
html body .rpg-menu .sub-menu a { white-space: normal; }
html body .rpg-menu .sub-menu a small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--rpg-soft); }
html body .rpg-menu .dot-accent > a::before, html body .rpg-menu .dot-primary > a::before {
	content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px;
}
html body .rpg-menu .dot-accent > a::before { background: var(--rpg-accent); }
html body .rpg-menu .dot-primary > a::before { background: var(--rpg-primary); }
html body .rpg-menu .dot-accent > a small, html body .rpg-menu .dot-primary > a small { padding-left: 16px; }

html body .rpg-header__right { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 0; flex-shrink: 0; }
html body .rpg-header__right .rpg-btn { padding: 12px 22px; }
html body .rpg-header__lang { font-size: 12.5px; font-weight: 500; color: var(--rpg-soft); text-decoration: underline; text-underline-offset: 3px; }
html body .rpg-header__lang:hover { color: var(--rpg-ink); }

html body .rpg-header__toggle {
	display: none; margin-left: auto; background: none; color: var(--rpg-ink);
	border: 1.5px solid var(--rpg-ink); border-radius: 8px; padding: 9px 14px;
	font-family: var(--rpg-body-font); font-weight: 600; font-size: 15px; line-height: 1.2; cursor: pointer;
}
html body .rpg-header__toggle:hover, html body .rpg-header__toggle:focus { background: var(--e-global-color-ink_hover, rgba(43,43,43,.06)); color: var(--rpg-ink); }
html body .rpg-nav__extra, html body .rpg-menu .mobile-only { display: none; }

@media (max-width: 1060px) {
	html body .rpg-header__toggle { display: inline-flex; }
	html body .rpg-nav, html body .rpg-header__right { display: none; }
	html body .rpg-header.is-open .rpg-nav {
		display: flex; flex-direction: column; align-items: stretch; gap: 2px;
		position: absolute; top: 100%; left: 0; right: 0;
		background: var(--rpg-paper); border-bottom: 1px solid var(--rpg-line);
		padding: 12px 20px 20px; max-height: calc(100vh - 84px); overflow-y: auto;
	}
	html body .rpg-header.is-open .rpg-menu { flex-direction: column; align-items: stretch; }
	html body .rpg-header.is-open .rpg-menu .sub-menu { display: flex; position: static; box-shadow: none; border: 0; padding: 0 0 0 12px; background: none; min-width: 0; }
	html body .rpg-header.is-open .rpg-menu .mobile-only { display: block; }
	html body .rpg-header.is-open .rpg-nav__extra { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 12px 12px 0; }
	html body .rpg-header.is-open .rpg-nav__extra .rpg-btn { padding: 14px 24px; }
	html body .rpg-header.is-open .rpg-nav__extra .rpg-header__lang { font-size: 14px; }
	html body .rpg-logo__img { width: calc(var(--rpg-logo-w, 248px) * .8); }
}
@media (max-width: 600px) { html body .rpg-header__inner { min-height: 72px; } }

/* ---------------------------------------------------------------- Footer */

html body .rpg-footer { background: var(--rpg-dark); color: var(--rpg-on-dark); }
html body .rpg-footer__inner { max-width: calc(var(--rpg-wrap) + 40px); margin: 0 auto; padding: 72px 20px 32px; }
html body .rpg-footer__grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr); gap: 48px; }
@media (max-width: 820px) { html body .rpg-footer__grid { grid-template-columns: 1fr; } html body .rpg-footer__inner { padding-top: 56px; } }
html body .rpg-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
html body .rpg-footer h2 {
	font-family: var(--rpg-head-font); font-weight: 500; font-size: 22px; line-height: 1.1;
	margin: 0 0 16px; color: var(--rpg-on-dark);
}
html body .rpg-footer p, html body .rpg-footer li { margin: 0; color: var(--rpg-on-dark-soft); font-size: 17px; line-height: 1.6; }
html body .rpg-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
html body .rpg-footer a { color: inherit; text-decoration: none; }
html body .rpg-footer a:hover { color: var(--rpg-on-dark); text-decoration: underline; }
html body .rpg-footer .rpg-btn { margin-top: 16px; }
html body .rpg-footer .rpg-btn--cta { color: var(--e-global-color-white, #fff); }
html body .rpg-footer .rpg-btn:hover { text-decoration: none; }
html body .rpg-footer__brand .rpg-btn { margin-top: 0; font-size: 15px; padding: 11px 20px; }
html body .rpg-footer__brand .rpg-btn--cta:hover, html body .rpg-footer .rpg-btn--cta:hover { color: var(--e-global-color-white, #fff); }
html body .rpg-footer__copy { margin-top: 44px !important; text-align: center; font-size: 14px !important; }
html body .rpg-footer__legal {
	margin-top: 18px; padding-top: 24px; border-top: 1px solid var(--e-global-color-on_dark_line, rgba(237,230,214,.16));
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
	font-size: 14px; color: var(--rpg-on-dark-soft);
}
html body .rpg-footer__legal a { text-decoration: underline; text-underline-offset: 3px; }
html body .rpg-footer__credit { margin-left: auto; text-align: right; font-size: 13px; color: var(--rpg-on-dark) !important; }
html body .rpg-footer__credit:hover { color: var(--rpg-primary) !important; }