/*
Theme Name: Hiking FixOps
Theme URI: https://hiking.fixops.pro
Author: FixOps
Author URI: https://fixops.pro
Description: Dark block theme for the FixOps hiking log. Shares its design tokens with fixops.pro and works with the FixOps Trails plugin.
Version: 0.1.0
Requires at least: 6.9
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fixops-hiking
*/

:root {
	color-scheme: dark;

	/* Accent transparency steps (design system, section 5). */
	--accent-a02: rgba(45, 217, 168, .02);
	--accent-a06: rgba(45, 217, 168, .06);
	--accent-a10: rgba(45, 217, 168, .10);
	--accent-a14: rgba(45, 217, 168, .14);
	--accent-a25: rgba(45, 217, 168, .25);
	--accent-a35: rgba(45, 217, 168, .35);

	/* Radii (design system, section 9). */
	--radius-12: 12px;
	--radius-16: 16px;
	--radius-28: 28px;
	--radius-36: 36px;
	--radius-pill: 999px;

	--line: rgba(255, 255, 255, .10);
	--line-bright: rgba(255, 255, 255, .18);
	--section-gap: 90px;
	--section-gap-s: 60px;

	/* The plugin blocks read these. */
	--fxt-accent: #2DD9A8;
	--fxt-ink: #F2ECE6;
	--fxt-dim: #9aa39d;
	--fxt-panel: #141a18;
	--fxt-line: rgba(255, 255, 255, .10);
}

body {
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

a { text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; border-radius: 4px; }

/* Header */
.fxh-sticky {
	position: sticky;
	top: 0;
	z-index: 50;
}
.fxh-header {
	position: relative;
	border-bottom: 1px solid var(--line);
}
/* The translucent blurred bar is a pseudo-element: a backdrop-filter on the header itself would trap the fixed mobile menu inside it. */
.fxh-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(12, 14, 13, .82);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}
.admin-bar .fxh-sticky { top: 32px; }
.fxh-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 15.5px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .04em;
	text-decoration: none;
}
.fxh-brand:hover { color: var(--wp--preset--color--accent); }
.fxh-brand svg { width: 28px; height: 28px; color: var(--wp--preset--color--accent); }
.fxh-header .wp-block-navigation { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--sm); letter-spacing: .02em; }
.fxh-header .wp-block-navigation a { color: var(--wp--preset--color--ink-dim); text-decoration: none; }
.fxh-header .wp-block-navigation a:hover { color: var(--wp--preset--color--ink); }
/* The opened mobile menu: core paints it white with black text, so force the dark palette (core loads later with equal specificity). */
.fxh-header .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--wp--preset--color--bg) !important; color: var(--wp--preset--color--ink) !important; }
.fxh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start; }
.fxh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0; width: 100%; align-items: stretch; }
.fxh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--line); }
.fxh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a { display: block; width: 100%; color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--xl); padding: 16px 0; text-decoration: none; }
.fxh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item { border-bottom-color: var(--wp--preset--color--accent); }
.fxh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item > a { color: var(--wp--preset--color--accent); }
.fxh-header .wp-block-navigation__responsive-container-open, .fxh-header .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--ink); }
.wp-block-navigation__responsive-container.is-menu-open { padding: 24px; }
.admin-bar .wp-block-navigation__responsive-container.is-menu-open { padding-top: 70px; }

/* Footer */
.fxh-footer { border-top: 1px solid var(--line); color: var(--wp--preset--color--ink-dim); font-size: var(--wp--preset--font-size--md); }
.fxh-footer a { color: var(--wp--preset--color--ink-dim); text-decoration: none; }
.fxh-footer a:hover { color: var(--wp--preset--color--accent); }
.fxh-footer__head { margin: 0 0 12px; font: 700 12.5px/1 var(--wp--preset--font-family--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--ink-dim); }
.fxh-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

/* Cards in query loops (archive, search, index) */
.fxh-card-grid .wp-block-post { border: 1px solid var(--line); border-radius: var(--radius-16); background: var(--wp--preset--color--panel); overflow: hidden; transition: border-color .2s, transform .2s; }
.fxh-card-grid .wp-block-post:hover { border-color: var(--wp--preset--color--accent); transform: translateY(-2px); }
.fxh-card-grid .wp-block-post-featured-image { margin: 0; }
.fxh-card-grid .wp-block-post-featured-image img { width: 100%; height: auto; display: block; }
.fxh-card-grid .wp-block-post-title,
.fxh-card-grid .wp-block-post-date { padding-left: 20px; padding-right: 20px; }
.fxh-card-grid .wp-block-post-title { margin-top: 16px; margin-bottom: 4px; font-size: var(--wp--preset--font-size--xl); }
.fxh-card-grid .wp-block-post-date { margin-top: 0; margin-bottom: 18px; }

/* Buttons: one box for the filled and the outline variant (core gives the outline one its own padding), mono like the main site */
.wp-block-button .wp-element-button { padding: 13px 25px; border: 1px solid transparent; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--sm); font-weight: 700; letter-spacing: .02em; line-height: 1.2; }
.wp-block-button.is-style-outline .wp-element-button { padding: 13px 25px; background: transparent; color: var(--wp--preset--color--ink); border: 1px solid var(--line-bright); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--sm); font-weight: 700; letter-spacing: .02em; line-height: 1.2; }
.wp-block-button.is-style-outline .wp-element-button:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); background: transparent; }

.fxh-main { padding-top: var(--section-gap-s); padding-bottom: var(--section-gap); }

@media (max-width: 782px) {
	.admin-bar .fxh-sticky { top: 46px; }
}

/* Current menu item */
.fxh-header .wp-block-navigation-item.current-menu-item > a,
.fxh-header .wp-block-navigation-item > a[aria-current="page"] { color: var(--wp--preset--color--accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }