/*
Theme Name: Fuel Prices
Theme URI: https://example.com/
Author: Double Seven Marketing
Description: Companion theme for the Fuel Prices plugin — forecourt signage typography, a global comparison home page, virtual country pages and a blog.
Version: 1.3.0
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: fuelprices
Tags: blog, news, custom-menu, translation-ready
*/

:root {
	--fp-color-ground: #F1F4F0;
	--fp-color-surface: #FFFFFF;
	--fp-color-surface-2: #E8EDE7;
	--fp-color-ink: #0F1A14;
	--fp-color-ink-2: #4B5B51;
	--fp-color-ink-3: #7A887F;
	--fp-color-line: #D3DCD4;
	--fp-color-sign: #0B5A3A;
	--fp-color-sign-2: #0E6B45;
	--fp-color-amber: #F2B400;
	--fp-color-up: #C0410E;
	--fp-color-down: #0B7285;
	--fp-font-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
	--fp-font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
	--fp-font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--fp-color-ground: #0B120E;
		--fp-color-surface: #121C16;
		--fp-color-surface-2: #1A261F;
		--fp-color-ink: #E6EEE8;
		--fp-color-ink-2: #A2B3A8;
		--fp-color-ink-3: #72847A;
		--fp-color-line: #26352C;
		--fp-color-sign: #0D5A3B;
		--fp-color-sign-2: #12714A;
		--fp-color-amber: #F5C22E;
		--fp-color-up: #F08A5D;
		--fp-color-down: #5CC3D3;
	}
}

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

body {
	margin: 0;
	background: var(--fp-color-ground);
	color: var(--fp-color-ink);
	font-family: var(--fp-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--fp-color-sign-2); }
img { max-width: 100%; height: auto; }

.fp-wrap { max-width: 1180px; margin: 0 auto; padding-inline: 20px; }
.fp-section { padding-block: 46px; }
.fp-section > header { margin-bottom: 22px; }

h1, h2, h3, h4 { font-family: var(--fp-font-display); font-weight: 700; line-height: 1.05; margin: 0 0 8px; text-wrap: balance; }
h1 { font-size: clamp(38px, 5.4vw, 64px); }
h2 { font-size: clamp(28px, 3.4vw, 40px); }
h3 { font-size: 24px; }
p { margin: 0 0 14px; }
.fp-lede { font-size: 18px; color: var(--fp-color-ink-2); max-width: 56ch; }

/* Header ------------------------------------------------------------------ */
.site-header {
	position: sticky; top: 0; z-index: 30;
	background: color-mix(in srgb, var(--fp-color-ground) 88%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--fp-color-line);
}
.site-header .fp-wrap { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.site-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.site-brand__mark { width: 34px; height: 34px; border-radius: 7px; background: var(--fp-color-sign); display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--fp-color-sign); }
.site-brand__mark span { font-family: var(--fp-font-display); font-weight: 700; color: var(--fp-color-amber); font-size: 17px; }
.site-brand b { font-family: var(--fp-font-display); font-size: 23px; }
.site-nav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.site-nav a { text-decoration: none; font-size: 15px; font-weight: 500; color: var(--fp-color-ink-2); padding: 7px 11px; border-radius: 7px; display: block; }
.site-nav a:hover, .site-nav .current-menu-item > a { background: var(--fp-color-surface-2); color: var(--fp-color-ink); }
.site-header__spacer { flex: 1; }
.country-bar { border-top: 1px solid var(--fp-color-line); background: var(--fp-color-surface-2); }
.site-header .country-bar .fp-wrap { min-height: 0; padding-top: 10px; padding-bottom: 10px; }
.country-bar__list { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; margin: 0; padding: 0; }
.country-bar__list a { display: block; padding: 6px 10px; border-radius: 6px; color: var(--fp-color-ink-2); font-size: 13px; font-weight: 600; line-height: 1.4; text-decoration: none; white-space: nowrap; }
.country-bar__list a:hover { background: var(--fp-color-ground); color: var(--fp-color-ink); }
.country-bar__list a[aria-current="page"] { background: var(--fp-color-ink); color: var(--fp-color-ground); }
.country-bar__list a:focus-visible { outline: 2px solid var(--fp-color-ink); outline-offset: 2px; }
@media (max-width: 600px) {
  .country-bar__list { gap: 3px; }
  .country-bar__list a { padding: 5px 8px; font-size: 12px; }
}
@media (max-width: 860px) { .site-nav { display: none; } }

/* Home hero --------------------------------------------------------------- */
.fp-hero { padding-block: 44px 30px; }
.fp-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: start; }
@media (max-width: 940px) { .fp-hero__grid { grid-template-columns: 1fr; gap: 28px; } }
.fp-hero h1 em { font-style: normal; color: var(--fp-color-sign-2); }

.fp-two { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 900px) { .fp-two { grid-template-columns: 1fr; } }
.fp-panel { background: var(--fp-color-surface); border: 1px solid var(--fp-color-line); border-radius: 14px; padding: 20px; }

/* Country page ------------------------------------------------------------ */
.fp-crumb { font-size: 14px; color: var(--fp-color-ink-2); margin-bottom: 14px; }
.fp-facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 15px; margin: 0; }
.fp-facts dt { color: var(--fp-color-ink-2); }
.fp-facts dd { margin: 0; font-weight: 500; }
.fp-conv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--fp-color-line); border: 1px solid var(--fp-color-line); border-radius: 10px; overflow: hidden; }
.fp-conv-grid div { background: var(--fp-color-surface); padding: 12px; }
.fp-conv-grid b { display: block; font-family: var(--fp-font-display); font-size: 26px; line-height: 1.1; }
.fp-conv-grid span { font-size: 12px; color: var(--fp-color-ink-2); }

/* Blog -------------------------------------------------------------------- */
.fp-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) { .fp-posts { grid-template-columns: 1fr; } }
.fp-post { display: flex; flex-direction: column; gap: 10px; }
.fp-post a { text-decoration: none; color: inherit; }
.fp-post a:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.fp-post__meta { font-family: var(--fp-font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--fp-color-ink-3); }
.fp-post__thumb img { border-radius: 12px; display: block; }
.entry-content { max-width: 68ch; }
.entry-content h2, .entry-content h3 { margin-top: 28px; }

/* Footer ------------------------------------------------------------------ */
.site-footer { border-top: 1px solid var(--fp-color-line); margin-top: 30px; padding-block: 34px 50px; font-size: 14px; color: var(--fp-color-ink-2); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: 24px; }
@media (max-width: 800px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
.site-footer h4 { font-family: var(--fp-font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--fp-color-ink-3); font-weight: 500; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.site-footer a { text-decoration: none; color: inherit; }
.site-footer a:hover { text-decoration: underline; }
.fp-attribution { margin-top: 24px; font-size: 12.5px; color: var(--fp-color-ink-3); }

.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--fp-color-amber); outline-offset: 2px; border-radius: 4px; }

/* Global fuel index and local market explorer */
.atlas-hero { padding-top: 72px; padding-bottom: 20px; }
.atlas-hero h1 { font-size: clamp(62px,8.6vw,112px); line-height: .95; letter-spacing: -2px; margin: 18px 0 28px; max-width: 900px; }
.atlas-hero h1 em,.atlas-local-hero h1 em { color: var(--fp-color-sign-2); font-style: normal; }
.atlas-hero .fp-lede { max-width: 670px; }
.atlas-summary { display:grid;grid-template-columns:.7fr 1.4fr 1fr; gap:24px; margin-top:40px; border-block:1px solid var(--fp-color-line); padding:28px 0; }
.atlas-summary span,.atlas-summary strong { display:block; }
.atlas-summary span { color:var(--fp-color-ink-2);font-size:13px; }
.atlas-summary strong { font-family:var(--fp-font-display);font-size:44px;line-height:1.4; }
.atlas-summary small { font-family:var(--fp-font-body);font-size:16px;font-weight:400; }
.atlas-section { padding-top:48px;padding-bottom:24px; }
.atlas-section-head { display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:20px; }
.atlas-section-head h2 { font-size:clamp(32px,4vw,46px);line-height:1.1;margin:6px 0; }
.atlas-unit { border:1px solid var(--fp-color-line);border-radius:30px;padding:8px 14px;font-size:12px;white-space:nowrap; }
.atlas-muted { color:var(--fp-color-ink-2);font-size:14px;max-width:950px; }
.atlas-method { margin-top:20px;line-height:1.7; }
.atlas-ranking { background:var(--fp-color-surface);border:1px solid var(--fp-color-line);border-radius:20px;padding:10px 24px; }
.atlas-rank { display:grid;grid-template-columns:28px 190px 1fr 110px 16px;align-items:center;gap:18px;min-height:76px;padding:14px 0;border-bottom:1px solid var(--fp-color-line);text-decoration:none;color:var(--fp-color-ink); }
.atlas-rank:last-child { border:0; }
.atlas-rank__num { font:12px var(--fp-font-mono);color:var(--fp-color-ink-3); }
.atlas-rank__name { font-size:16px;font-weight:600;line-height:1.25; }
.atlas-rank__name small { display:block;font-size:10px;font-weight:400;color:var(--fp-color-ink-2);margin-top:7px; }
.atlas-rank__track { height:24px;background:var(--fp-color-surface-2);border-radius:5px;overflow:hidden; }
.atlas-rank__track i { display:block;height:100%;width:var(--bar);background:linear-gradient(90deg,#245944,#76a97c);border-radius:5px;transition:filter .2s; }
.atlas-rank:first-child .atlas-rank__track i { background:linear-gradient(90deg,#538a46,#b5db6c); }
.atlas-rank:hover .atlas-rank__track i { filter:brightness(1.2); }
.atlas-rank strong { font:500 18px var(--fp-font-mono);text-align:right; }
.atlas-arrow { color:var(--fp-color-ink-3); }
.atlas-country-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; }
.atlas-country { display:block;padding:24px;background:var(--fp-color-surface);border:1px solid var(--fp-color-line);border-radius:18px;text-decoration:none;color:var(--fp-color-ink);transition:transform .2s,border-color .2s; }
.atlas-country:hover { transform:translateY(-4px);border-color:var(--fp-color-sign-2); }
.atlas-country__top { display:flex;align-items:center;justify-content:space-between; }
.atlas-country h3 { font:600 24px var(--fp-font-body);margin:20px 0 2px; }
.atlas-country p { font-size:12px;color:var(--fp-color-ink-2);margin:0 0 20px; }
.atlas-country__price strong { font:600 35px var(--fp-font-display); }
.atlas-country__price>span { font-size:12px;margin-left:5px;color:var(--fp-color-ink-2); }
.atlas-spark { display:block;width:100%;height:85px;margin:12px 0;color:var(--fp-color-sign-2); }
.atlas-country__foot { border-top:1px solid var(--fp-color-line);padding-top:12px;font:500 14px var(--fp-font-mono); }
.atlas-country small { font:11px var(--fp-font-body);color:var(--fp-color-ink-2); }
.atlas-local-hero { padding-top:40px; }
.atlas-back { display:inline-block;color:var(--fp-color-ink-2);text-decoration:none;font-size:14px;margin-bottom:32px; }
.atlas-local-hero h1 { font-size:clamp(58px,7vw,92px);line-height:1;margin:14px 0;letter-spacing:-1px; }
.atlas-local-hero h1 em { display:block;font-size:.55em;margin-top:12px;letter-spacing:0; }
.atlas-country-code { font:700 clamp(65px,12vw,150px) var(--fp-font-display);color:var(--fp-color-ink-3);opacity:.25; }
.atlas-price-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:12px;margin-top:32px; }
.atlas-price-card { padding:24px;background:var(--fp-color-surface);border:1px solid var(--fp-color-line);border-radius:14px; }
.atlas-price-card>span { font-size:14px;font-weight:600; }
.atlas-price-card strong { display:block;font:600 42px var(--fp-font-display);margin:10px 0; }
.atlas-price-card small { font:11px var(--fp-font-body);color:var(--fp-color-ink-2); }
.atlas-price-card strong small { font-size:14px;margin-left:7px; }
.atlas-chart { background:radial-gradient(ellipse at 70% 20%,#224d39 0%,#102c22 70%);color:#e8f4e4;border-radius:24px;padding:28px 32px;box-shadow:0 18px 50px #102c221a; }
.atlas-chart__toolbar { display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap; }
.atlas-tabs { display:flex;flex-wrap:wrap;gap:4px;padding:4px;background:#ffffff0c;border:1px solid #ffffff15;border-radius:10px; }
.atlas-tabs button { cursor:pointer;background:none;border:0;color:#bfcebF;font:500 13px var(--fp-font-body);padding:9px 13px;border-radius:7px; }
.atlas-tabs button[aria-pressed=true] { background:#d0f29b;color:#172a1d; }
.atlas-chart__headline { display:flex;align-items:center;justify-content:space-between;gap:15px;margin:30px 0 10px; }
.atlas-chart__headline span { display:block;font-size:12px;color:#b3c8b9; }
.atlas-chart__headline strong { display:block;font:600 56px var(--fp-font-display);line-height:1.25; }
.atlas-chart__headline strong small { font:14px var(--fp-font-body);color:#b3c8b9; }
.atlas-delta { text-align:right;font:500 25px var(--fp-font-mono);color:#f8d477; }
.atlas-delta small { display:block;font:12px var(--fp-font-body);color:#b3c8b9;margin-top:4px; }
.atlas-chart__plot svg { display:block;width:100%;overflow:visible; }
.atlas-chart__plot { outline-offset:5px;touch-action:pan-y; }
.atlas-chart__readout { text-align:center;font:12px var(--fp-font-mono);min-height:32px;color:#f8d477;padding:8px 0; }
.atlas-chart__stats { display:grid;grid-template-columns:repeat(3,1fr);gap:16px;border-top:1px solid #ffffff20;margin-top:16px;padding-top:22px; }
.atlas-chart__stats span { font-size:12px;color:#b3c8b9;display:block; }
.atlas-chart__stats strong { display:block;font:500 23px var(--fp-font-mono);margin-top:6px; }
.atlas-data { margin-top:22px;font-size:12px;color:#bfd2c3; }
.atlas-data summary { cursor:pointer;padding:8px 0; }
.atlas-data__table { max-height:240px;overflow:auto; }
.atlas-data table { width:100%;border-collapse:collapse;text-align:left; }
.atlas-data th,.atlas-data td { padding:8px;border-bottom:1px solid #ffffff20; }
.atlas-source-grid { display:grid;grid-template-columns:1fr 1fr;gap:40px;border-top:1px solid var(--fp-color-line);margin-top:32px; }
.atlas-source-grid h2 { font-size:30px;line-height:1.2; }
.atlas-source-link { display:inline-block;margin-top:12px; }
.atlas-compare-link { display:flex;align-items:center;justify-content:space-between;font:600 clamp(28px,4vw,46px) var(--fp-font-display);text-decoration:none;border-block:1px solid var(--fp-color-line);padding:24px 0; }
.atlas-footer { border-top:1px solid var(--fp-color-line);margin-top:60px;padding:36px 0; }
.atlas-footer-links { display:flex;flex-wrap:wrap;gap:10px 22px;margin:20px 0;font-size:13px; }
.atlas-footer-links a { color:var(--fp-color-ink-2);text-decoration:none; }
.atlas-chart button:focus-visible,.atlas-country:focus-visible,.atlas-rank:focus-visible { outline:2px solid #91bd55;outline-offset:4px; }
@media(min-width:1100px){.atlas-country-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(max-width:700px){
 .atlas-hero{padding-top:40px}.atlas-summary{grid-template-columns:1fr;gap:15px}.atlas-summary>div{display:flex;justify-content:space-between;align-items:center;gap:20px}.atlas-summary strong{font-size:32px;white-space:nowrap}.atlas-summary span{max-width:190px}
 .atlas-section-head{align-items:flex-start;flex-direction:column;gap:10px}.atlas-country-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.atlas-country{padding:18px}.atlas-country h3{font-size:20px}.atlas-country__price strong{font-size:30px}
 .atlas-ranking{padding:6px 14px}.atlas-rank{grid-template-columns:20px 1fr 95px;gap:8px;min-height:90px}.atlas-rank__name{font-size:14px}.atlas-rank__track{grid-column:2/4;grid-row:2;height:10px}.atlas-rank strong{grid-column:3;grid-row:1;font-size:16px}.atlas-arrow{display:none}
 .atlas-local-hero .atlas-section-head{flex-direction:row;align-items:center}.atlas-chart{padding:18px 14px;border-radius:16px}.atlas-chart__headline strong{font-size:42px}.atlas-chart__stats strong{font-size:17px}.atlas-chart__stats span{font-size:11px}.atlas-tabs button{padding:8px;font-size:12px}.atlas-chart__plot{overflow-x:auto}.atlas-chart__plot svg{min-width:550px}.atlas-chart__readout{font-size:10px}.atlas-source-grid{grid-template-columns:1fr;gap:12px}.atlas-country-code{font-size:65px}.site-header{position:relative}
}
@media(prefers-reduced-motion:reduce){.atlas-country,.atlas-rank__track i{transition:none}.atlas-country:hover{transform:none}}
.atlas-price-converted { font:13px var(--fp-font-mono);color:var(--fp-color-ink-2);margin-bottom:10px; }
/* Country navigation and three-currency comparison. */
.atlas-flag { display:inline-block; margin-right:8px; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; font-size:1.15em; line-height:1; vertical-align:-.06em; }
.atlas-country__top .atlas-flag { font-size:30px; }
.atlas-local-hero h1>.atlas-flag { font-size:.62em;vertical-align:.05em; }
.atlas-rank { grid-template-columns:24px 190px minmax(70px,1fr) 270px 16px;gap:14px; }
.atlas-rank__currencies { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }
.atlas-rank__currencies>span { display:flex;flex-direction:column;align-items:flex-end;gap:4px; }
.atlas-rank__currencies small { font:10px var(--fp-font-mono);color:var(--fp-color-ink-2); }
.atlas-rank__currencies strong { font-size:15px; }
.atlas-rank:first-child .atlas-rank__track i { background:linear-gradient(90deg,#245944,#76a97c); }
.atlas-footer__single { display:flex;justify-content:space-between;align-items:center;gap:20px; }
.atlas-footer__single a { color:var(--fp-color-ink);text-decoration:none;font-weight:600; }
@media(max-width:900px){
 .atlas-rank{grid-template-columns:20px minmax(0,1fr) 240px;gap:10px;}
 .atlas-rank__track{grid-column:2/4;grid-row:2;height:12px;}
 .atlas-rank__currencies{grid-column:3;grid-row:1;}
 .atlas-arrow{display:none;}
}
@media(max-width:540px){
 .atlas-rank{grid-template-columns:20px minmax(0,1fr);gap:10px;padding:18px 0;}
 .atlas-rank__currencies{grid-column:2;grid-row:2;gap:12px;}
 .atlas-rank__currencies>span{align-items:flex-start;}
 .atlas-rank__currencies strong{font-size:14px;}
 .atlas-rank__track{grid-column:2;grid-row:3;}
}
/* Mobile country selector: native disclosure works without JavaScript. */
.country-picker { display:none; }
@media(max-width:700px){
 .country-bar .country-bar__list { display:none; }
 .site-header .country-bar .fp-wrap { display:block;padding-top:10px;padding-bottom:10px; }
 .country-picker { display:block;width:100%;border:1px solid var(--fp-color-line);border-radius:12px;background:var(--fp-color-surface);overflow:hidden; }
 .country-picker summary { display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 16px;list-style:none;cursor:pointer; }
 .country-picker summary::-webkit-details-marker { display:none; }
 .country-picker__icon { font-size:25px;line-height:1; }
 .country-picker__icon .atlas-flag { margin:0; }
 .country-picker__text { flex:1;display:flex;flex-direction:column;gap:3px; }
 .country-picker__text strong { font-size:15px;line-height:1.3; }
 .country-picker__text small { color:var(--fp-color-ink-2);font-size:12px;line-height:1.3; }
 .country-picker__arrow { display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--fp-color-surface-2);font-size:23px;line-height:1; }
 .country-picker[open] .country-picker__arrow { transform:rotate(180deg); }
 .country-picker[open] summary { border-bottom:1px solid var(--fp-color-line); }
 .country-picker__list { list-style:none;padding:6px;margin:0;max-height: min(55vh,420px);overflow-y:auto; }
 .country-picker__list a { display:flex;align-items:center;gap:10px;min-height:46px;padding:10px;border-radius:7px;text-decoration:none;color:var(--fp-color-ink);font-size:14px; }
 .country-picker__list a>span:nth-child(2) { flex:1; }
 .country-picker__list a:hover,.country-picker__list a[aria-current] { background:var(--fp-color-surface-2); }
 .country-picker summary:focus-visible,.country-picker__list a:focus-visible { outline:2px solid var(--fp-color-sign-2);outline-offset:-3px; }
}

.atlas-check { font-size:11px; color:var(--fp-color-ink-2); margin:12px 0 0; }
.atlas-check--attention { color:#935414; background:#efc47a20; padding:8px 10px; border-radius:6px; }

html[lang="hi"] h1,html[lang="hi"] h2,html[lang="hi"] h3 { font-family:var(--fp-font-body);line-height:1.4; }