/*
Theme Name: Amperlo
Theme URI: https://amperlo.com
Author: Amperlo
Author URI: https://amperlo.com
Description: A mobile-first logbook for EV drivers who want the real cost per mile — every charge, every mile, every receipt. This is the official Amperlo classic WordPress theme: light and dark with a switch in the header, emerald accent, Instrument Sans typography.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: amperlo
Tags: light, dark, one-column, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

Amperlo WordPress theme is distributed under the terms of the GNU GPL v2 or later.
*/

:root {
	/* Tells the browser to render native UI — form controls, scrollbars, the
	   canvas behind the page — in the palette actually in use. Overridden
	   below once the reader has made an explicit choice. */
	color-scheme: light dark;

	/* The brand green. Fixed in both palettes: it is the mark's colour and the
	   fill behind buttons, and it carries near-black text either way. */
	--amperlo-emerald: #10b981;
	--amperlo-on-accent: #09090b;

	/* The interactive green used for text, borders and focus rings. Unlike the
	   fill above this has to change with the palette: the brand green is only
	   about 2.5:1 against white, so light mode uses a deeper shade for anything
	   that has to be *read*. */
	--amperlo-accent: #047857;

	/* Neutrals — light.

	   Designed rather than inverted. Two things do not survive flipping a dark
	   scale over: the page is a faintly warm near-white, not #fff, so the large
	   empty areas of an article do not glare; and `surface` swaps meaning. In
	   the dark palette a raised thing is *lighter* than the page, so `surface`
	   is both the card colour and the hover tint. In light a card is lighter
	   than the page and a hover tint is darker, so the two cannot be one token.
	   `surface` is now the card (white, lifting off the page) and
	   `surface-hover` the tint under a hovered nav item — which is why the
	   already-declared but unused `surface-hover` finally gets a job.

	   Warm neutrals against a cool near-black dark mode is deliberate: emerald
	   sits better on a warm grey than on a blue one. */
	--amperlo-bg: #fafaf9;
	--amperlo-surface: #ffffff;
	--amperlo-surface-hover: #efefec;
	--amperlo-border: #e3e3df;
	--amperlo-text: #1c1c1a;
	--amperlo-text-muted: #57534e;

	/* Code has to separate from the page, not just from the body copy: inline
	   code carries no border, so on a near-white page the card tone would be
	   invisible behind it. */
	--amperlo-code-bg: #eeeeea;
	--amperlo-header-bg: rgba(250, 250, 249, 0.92);
	--amperlo-shadow-md: 0 12px 24px rgba(28, 28, 26, 0.1);

	/* Which theme-switch glyph is visible; swapped with the palette so the
	   button always offers the mode you are not in. */
	--amperlo-icon-sun: none;
	--amperlo-icon-moon: inline-flex;

	--amperlo-font: "Instrument Sans", Helvetica, Arial, sans-serif;
	--amperlo-content-width: 720px;
	--amperlo-wide-width: 1120px;
	--amperlo-radius: 14px;
	--amperlo-radius-sm: 8px;
}

/* Dark palette. Declared twice on purpose, and never only inside the media
   query: the media query is the default (follow the operating system), while
   the [data-theme] rule is an explicit choice by the reader, which has to be
   able to win in both directions. The :not() guard is what lets a reader on a
   dark OS choose light. None of this is decided server-side — the site runs
   full-page caching, so the palette is picked entirely in the browser. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--amperlo-accent: #10b981;

		--amperlo-bg: #09090b;
		--amperlo-surface: #18181b;
		--amperlo-surface-hover: #202024;
		--amperlo-border: #27272a;
		--amperlo-text: #f4f4f5;
		--amperlo-text-muted: #a1a1aa;
		--amperlo-code-bg: #18181b;
		--amperlo-header-bg: rgba(9, 9, 11, 0.92);
		--amperlo-shadow-md: 0 12px 24px rgba(0, 0, 0, 0.4);

		--amperlo-icon-sun: inline-flex;
		--amperlo-icon-moon: none;
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;

	--amperlo-accent: #10b981;

	--amperlo-bg: #09090b;
	--amperlo-surface: #18181b;
	--amperlo-surface-hover: #202024;
	--amperlo-border: #27272a;
	--amperlo-text: #f4f4f5;
	--amperlo-text-muted: #a1a1aa;
	--amperlo-code-bg: #18181b;
	--amperlo-header-bg: rgba(9, 9, 11, 0.92);
	--amperlo-shadow-md: 0 12px 24px rgba(0, 0, 0, 0.4);

	--amperlo-icon-sun: inline-flex;
	--amperlo-icon-moon: none;
}

:root[data-theme="light"] {
	color-scheme: light;
}

*,::after,::before{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--amperlo-bg);color:var(--amperlo-text);font-family:var(--amperlo-font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}img{max-width:100%;height:auto;display:block;border-radius:var(--amperlo-radius-sm)}a{color:var(--amperlo-accent);text-decoration:none}a:focus,a:hover{text-decoration:underline}ol,ul{padding-left:1.25em}hr{border:0;border-top:1px solid var(--amperlo-border);margin:2.5em 0}table{width:100%;border-collapse:collapse;margin:1.5em 0}td,th{text-align:left;padding:.6em .8em;border-bottom:1px solid var(--amperlo-border)}blockquote{margin:1.5em 0;padding:.2em 1.25em;border-left:3px solid var(--amperlo-accent);color:var(--amperlo-text-muted);font-style:italic}code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--amperlo-code-bg);border-radius:var(--amperlo-radius-sm)}code{padding:.15em .4em;font-size:.9em}pre{padding:1em 1.25em;overflow-x:auto;border:1px solid var(--amperlo-border)}pre code{background:0 0;padding:0}h1,h2,h3,h4,h5,h6{font-family:var(--amperlo-font);font-weight:700;line-height:1.2;color:var(--amperlo-text);margin:1.4em 0 .5em}h1{font-size:2.25rem;letter-spacing:-.03em}h2,h3,h4,h5,h6{letter-spacing:-.02em}h2{font-size:1.75rem}h3{font-size:1.375rem}h4{font-size:1.125rem}p{margin:0 0 1.25em}.amperlo-eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--amperlo-accent);margin-bottom:.5em}.amperlo-skip-link{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--amperlo-emerald);color:var(--amperlo-on-accent);padding:.75em 1.25em;font-weight:700;border-radius:0 0 var(--amperlo-radius-sm)0}.amperlo-skip-link:focus{left:0}.amperlo-site{display:flex;flex-direction:column;min-height:100vh}.amperlo-container{width:100%;max-width:var(--amperlo-wide-width);margin:0 auto;padding:0 24px}.amperlo-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;padding:48px 0 80px}.amperlo-layout.has-sidebar{grid-template-columns:minmax(0,1fr) 300px}.amperlo-main{min-width:0;max-width:var(--amperlo-content-width)}.amperlo-layout:not(.has-sidebar) .amperlo-main{max-width:var(--amperlo-content-width);margin:0 auto;width:100%}.amperlo-header{border-bottom:1px solid var(--amperlo-border);padding:20px 0;position:sticky;top:0;z-index:100;background:var(--amperlo-header-bg);backdrop-filter:blur(8px)}.amperlo-header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}.amperlo-branding{display:flex;align-items:center;gap:12px;min-width:0}.amperlo-branding a{display:flex;align-items:center;gap:10px;color:var(--amperlo-text)}.amperlo-branding a:focus,.amperlo-branding a:hover{text-decoration:none}.amperlo-logo-mark{width:32px;height:32px;flex-shrink:0}.amperlo-logo-mark img,.amperlo-logo-mark svg{width:100%;height:100%;border-radius:22%}.amperlo-wordmark{font-size:1.15rem;font-weight:700;letter-spacing:-.03em;color:var(--amperlo-text);white-space:nowrap}.amperlo-primary-nav,.amperlo-primary-nav ul{display:flex;align-items:center}.amperlo-primary-nav ul{list-style:none;gap:4px;margin:0;padding:0;flex-wrap:wrap}.amperlo-primary-nav li{position:relative}.amperlo-primary-nav a{display:block;padding:8px 14px;border-radius:999px;color:var(--amperlo-text-muted);font-weight:500;font-size:.95rem}.amperlo-primary-nav a:focus,.amperlo-primary-nav a:hover{color:var(--amperlo-text);background:var(--amperlo-surface-hover);text-decoration:none}.amperlo-entry-meta a:hover,.amperlo-primary-nav .current-menu-item>a,.amperlo-primary-nav .current_page_item>a{color:var(--amperlo-accent)}.amperlo-primary-nav ul ul{display:none;position:absolute;top:100%;left:0;flex-direction:column;background:var(--amperlo-surface);border:1px solid var(--amperlo-border);border-radius:var(--amperlo-radius-sm);padding:6px;min-width:200px;box-shadow:var(--amperlo-shadow-md)}.amperlo-primary-nav li:focus-within>ul,.amperlo-primary-nav li:hover>ul{display:flex}.amperlo-menu-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--amperlo-radius-sm);background:var(--amperlo-surface-hover);border:1px solid var(--amperlo-border);color:var(--amperlo-text);cursor:pointer}.amperlo-menu-toggle svg{width:20px;height:20px}.amperlo-entry{margin-bottom:56px;padding-bottom:56px;border-bottom:1px solid var(--amperlo-border)}.amperlo-entry:last-child,.amperlo-widget li:last-child{border-bottom:none}.amperlo-entry-title{margin-top:0;font-size:1.9rem}.amperlo-empty-state h1,.amperlo-entry-title a{color:var(--amperlo-text)}.amperlo-entry-thumbnail{margin:0 0 24px;border-radius:var(--amperlo-radius);overflow:hidden;border:1px solid var(--amperlo-border)}.amperlo-entry-thumbnail img{border-radius:0;width:100%}.amperlo-entry-summary{color:var(--amperlo-text-muted)}.amperlo-entry-content>:first-child{margin-top:0}.amperlo-entry-content a{text-decoration:underline;text-underline-offset:2px}.amperlo-read-more{display:inline-flex;align-items:center;gap:6px;font-weight:700}.amperlo-page-title{font-size:2rem;margin-bottom:.3em}.amperlo-archive-title,.amperlo-page-header{margin-bottom:40px}.amperlo-archive-description,.amperlo-author-box p,.amperlo-entry-meta,.amperlo-entry-meta a,.amperlo-post-nav span{color:var(--amperlo-text-muted)}.amperlo-entry-meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:.85rem;margin-bottom:14px}.amperlo-entry-categories{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0}.amperlo-author-box,.amperlo-entry-categories a{background:var(--amperlo-surface);border:1px solid var(--amperlo-border)}.amperlo-entry-categories a{display:inline-block;padding:4px 12px;border-radius:999px;color:var(--amperlo-text-muted);font-size:.8rem}.amperlo-entry-categories a:hover{color:var(--amperlo-accent);border-color:var(--amperlo-accent);text-decoration:none}.amperlo-author-box{display:flex;gap:16px;align-items:flex-start;margin-top:40px;padding:20px;border-radius:var(--amperlo-radius)}.amperlo-author-box img{border-radius:50%;width:56px;height:56px;flex-shrink:0}.amperlo-author-box h2{font-size:1rem;margin:0 0 4px}.amperlo-author-box p{margin:0;font-size:.9rem}.amperlo-post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}.amperlo-post-nav .amperlo-nav-next{text-align:right}.amperlo-pagination .page-numbers,.amperlo-post-nav a{border:1px solid var(--amperlo-border);color:var(--amperlo-text)}.amperlo-post-nav a{display:block;padding:16px;border-radius:var(--amperlo-radius)}.amperlo-post-nav span{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}.amperlo-pagination{display:flex;flex-wrap:wrap;gap:8px;margin-top:48px}.amperlo-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;border-radius:var(--amperlo-radius-sm);background:var(--amperlo-surface);font-weight:500}.amperlo-pagination .page-numbers.current{background:var(--amperlo-emerald);border-color:var(--amperlo-emerald);color:var(--amperlo-on-accent)}.amperlo-pagination .page-numbers:hover,.amperlo-post-nav a:hover{border-color:var(--amperlo-accent);text-decoration:none}.amperlo-comments{margin-top:56px}.amperlo-comments-title{margin-bottom:24px}.amperlo-comment-list,.amperlo-widget ul{list-style:none;margin:0;padding:0}.amperlo-comment-list .children,.amperlo-footer-nav ul{list-style:none;margin:0 0 0 32px;padding:0}.amperlo-comment-body,.amperlo-widget li{border-bottom:1px solid var(--amperlo-border)}.amperlo-comment-body{display:flex;gap:14px;padding:20px 0}.amperlo-comment-avatar img{border-radius:50%;width:44px;height:44px}.amperlo-comment-meta{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}.amperlo-comment-author{font-weight:700}.amperlo-comment-date{font-size:.8rem;color:var(--amperlo-text-muted)}.amperlo-comment-date a{color:inherit}.amperlo-comment-reply-link{font-size:.8rem;font-weight:700}.amperlo-comment-awaiting-moderation{font-size:.85rem;color:var(--amperlo-text-muted);font-style:italic}.amperlo-comment-respond{margin-top:32px;padding:24px;background:var(--amperlo-surface);border:1px solid var(--amperlo-border);border-radius:var(--amperlo-radius)}.amperlo-sidebar{display:flex;flex-direction:column;gap:32px}.amperlo-widget{background:var(--amperlo-surface);border:1px solid var(--amperlo-border);border-radius:var(--amperlo-radius);padding:20px}.amperlo-widget-title{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--amperlo-text-muted);margin:0 0 14px}.amperlo-widget li{padding:8px 0}.amperlo-footer{border-top:1px solid var(--amperlo-border);background:var(--amperlo-surface);margin-top:auto;padding:48px 0 32px}.amperlo-footer-widgets{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;margin-bottom:32px}.amperlo-footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:24px;border-top:1px solid var(--amperlo-border)}.amperlo-footer-branding{display:flex;align-items:center;gap:10px}.amperlo-footer-branding .amperlo-logo-mark{width:20px;height:20px}.amperlo-footer-nav ul{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0}.amperlo-footer-branding,.amperlo-footer-nav a{color:var(--amperlo-text-muted);font-size:.85rem}.amperlo-footer-nav a:hover{color:var(--amperlo-accent)}input[type=email],input[type=number],input[type=password],input[type=search],input[type=text],input[type=url],select,textarea{width:100%;padding:12px 14px;font-family:var(--amperlo-font);font-size:1rem;background:var(--amperlo-bg);color:var(--amperlo-text);border:1px solid var(--amperlo-border);border-radius:var(--amperlo-radius-sm);min-height:44px}textarea{min-height:120px}input:focus,select:focus,textarea:focus{outline:2px solid var(--amperlo-accent);outline-offset:1px}label{display:block;font-size:.9rem;color:var(--amperlo-text-muted);margin-bottom:6px}.amperlo-search-form{display:flex;gap:8px}.amperlo-search-form input[type=search]{flex:1}.amperlo-button,button,input[type=submit]{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 22px;background:var(--amperlo-emerald);color:var(--amperlo-on-accent);font-family:var(--amperlo-font);font-weight:700;font-size:.95rem;border:0;border-radius:999px;cursor:pointer;transition:transform .15s ease,opacity .15s ease}.amperlo-button:hover,button:hover,input[type=submit]:hover{opacity:.9;text-decoration:none}.amperlo-button:focus-visible,a:focus-visible,button:focus-visible,input[type=submit]:focus-visible{outline:2px solid var(--amperlo-accent);outline-offset:2px}.amperlo-button-outline{background:0 0;color:var(--amperlo-text);border:1px solid var(--amperlo-border)}.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}.amperlo-empty-state{text-align:center;padding:80px 20px;color:var(--amperlo-text-muted)}.alignwide{max-width:var(--amperlo-wide-width)}.alignfull{max-width:none;width:100vw;margin-left:calc(50% - 50vw)}.aligncenter{margin-left:auto;margin-right:auto}.wp-caption,figure{margin:1.5em 0}.wp-caption-text,figcaption{font-size:.85rem;color:var(--amperlo-text-muted);margin-top:8px}@media (max-width:782px){.amperlo-layout.has-sidebar{grid-template-columns:minmax(0,1fr)}.amperlo-sidebar{order:2}}@media (max-width:640px){body{font-size:16px}.amperlo-container{padding:0 18px}.amperlo-menu-toggle{display:inline-flex}.amperlo-primary-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--amperlo-bg);border-bottom:1px solid var(--amperlo-border);padding:12px 18px 20px}.amperlo-primary-nav.is-open{display:block}.amperlo-primary-nav ul{flex-direction:column;align-items:stretch;gap:0}.amperlo-primary-nav ul ul{position:static;border:0;box-shadow:none;padding-left:12px}.amperlo-primary-nav a{padding:12px 10px;min-height:44px}.amperlo-post-nav{grid-template-columns:1fr}.amperlo-post-nav .amperlo-nav-next{text-align:left}.amperlo-entry-title,h1{font-size:1.6rem}}

/* Light/dark switch.

   Grouped with the menu button so the two sit together at the right-hand end
   of the header on every viewport, rather than the switch drifting into the
   middle of the bar once the menu button is hidden. Kept before the nav in
   source order so tabbing from the menu button lands in the menu it opened;
   `order` moves it visually without moving it in the tab sequence.

   The class rules beat the generic `button` rule above on specificity, which
   is what keeps the switch from inheriting the filled emerald pill. */
.amperlo-header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	order: 1;
}

.amperlo-header-inner > .amperlo-branding {
	margin-right: auto;
}

.amperlo-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-height: 44px;
	padding: 0;
	border-radius: var(--amperlo-radius-sm);
	background: transparent;
	border: 1px solid var(--amperlo-border);
	color: var(--amperlo-text-muted);
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.amperlo-theme-toggle:hover,
.amperlo-theme-toggle:focus {
	background: var(--amperlo-surface-hover);
	border-color: var(--amperlo-accent);
	color: var(--amperlo-text);
	opacity: 1;
}

.amperlo-theme-toggle svg {
	width: 20px;
	height: 20px;
	display: block;
}

/* Which glyph shows is a function of the palette in force, so it follows the
   OS, an explicit choice, and a mid-visit OS change with no JavaScript. The
   button always offers the mode you are not in. */
.amperlo-theme-toggle .amperlo-icon-sun {
	display: var(--amperlo-icon-sun);
}

.amperlo-theme-toggle .amperlo-icon-moon {
	display: var(--amperlo-icon-moon);
}

@media (prefers-reduced-motion: reduce) {
	.amperlo-theme-toggle {
		transition: none;
	}
}