/*
 * Flor Planner — shared stylesheet
 *
 * Single source of truth for brand tokens, typography, and cross-layout
 * primitives (language switcher, store badges, footer links, header/logo
 * anchors, social icons). Layout-specific visuals (landing hero, legal
 * article, page card) remain in per-layout <style> blocks to keep this
 * file small and predictable.
 *
 * TODO(design): brand primary is #0da84a. Secondary candidate #2f8e63 was
 * historically used in page.njk; reunified here pending design review.
 */

/* --- Self-hosted fonts (replaces Google Fonts for privacy + perf) ---
 * WOFF2 files live under /assets/fonts/ (passthrough from src/_assets/fonts).
 * unicode-range splits match Google's Latin / Latin-ext partitions so the
 * browser only fetches the latin-ext file when it encounters those glyphs
 * (e.g. Polish ąćęłńóśźż).
 */
@font-face {
  font-family: 'Agbalumo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/agbalumo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Agbalumo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/agbalumo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/lato-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/lato-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/lato-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/lato-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/lato-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/lato-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand palette */
  --color-brand-primary: #0da84a;
  --color-brand-primary-strong: #086d30;
  --color-brand-primary-soft: #86d4a4;
  --color-brand-primary-tint: rgba(13, 168, 74, 0.15);

  /* Neutral ink + surfaces */
  --color-ink: #111111;
  --color-text: #333333;
  --color-text-muted: #5f6772;
  --color-text-subtle: #999999;
  --color-surface-cream: #fef0db;
  --color-surface-cream-soft: rgba(255, 255, 255, 0.84);
  --color-surface-cream-tint: #d9eee4;
  --color-surface-mist: #fafafa;
  --color-border-subtle: #e5e5e5;

  /* Typography */
  --font-display: 'Agbalumo', cursive;
  --font-body: 'Lato', 'Segoe UI', sans-serif;
}

/* --- Reset (shared across all layouts) --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  color: var(--color-ink);
}

h1,
h2,
h3 {
  margin: 0;
}

/* --- Shared anchors --- */
a {
  color: var(--color-brand-primary);
}

/* --- Language switcher (used by landing, legal, page) --- */
.language-switcher {
  display: flex;
  gap: 14px;
}

.language-option {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--color-text-subtle);
  font-size: 0.8rem;
  font-weight: 400;
}

.language-option:hover {
  color: var(--color-ink);
}

.language-active {
  color: var(--color-ink);
  font-weight: 700;
}

/* --- Store badges (landing only, but defined once) --- */
.store-badges {
  display: flex;
  gap: 24px;
}

.store-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--color-ink);
}

.store-badge[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
}

.store-badge img,
.store-badge svg {
  width: 35px;
  height: 35px;
}

.store-badge-text {
  display: flex;
  flex-direction: column;
  font-size: clamp(0.85rem, 1.2vw, 17.3px);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.store-badge-text .label {
  font-weight: 400;
}

.store-badge-text .store {
  font-weight: 700;
}

/* --- Social icons --- */
.social {
  display: flex;
  gap: 8px;
}

.social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--color-ink);
  text-decoration: none;
}

.social a svg {
  width: 24px;
  height: 24px;
}

/* --- Legal / footer links --- */
.legal-links {
  display: flex;
  gap: 16px;
}

.legal-links a {
  font-size: 0.75rem;
  color: var(--color-text-subtle);
  text-decoration: none;
}

.legal-links a:hover {
  color: var(--color-ink);
  text-decoration: underline;
}

.legal-separator {
  font-size: 0.75rem;
  color: var(--color-text-subtle);
}

.footer-links {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.85rem;
}

.footer-links a {
  color: var(--color-brand-primary);
  text-decoration: none;
  font-weight: 700;
}

.footer-links a:hover {
  text-decoration: underline;
}

/* --- Consent banner ---
 * Hidden by default; `consent.js` reveals it when localStorage.consent is unset.
 * Minimal, no framework. Inline styles here avoid an extra stylesheet request.
 */
.consent-banner {
  display: none;
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 680px;
  margin: 0 auto;
  padding: 16px 20px;
  background: #ffffff;
  color: var(--color-ink);
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  font-size: 0.85rem;
  line-height: 1.5;
  z-index: 9999;
}

.consent-banner[data-visible="true"] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.consent-banner p {
  margin: 0;
  flex: 1 1 260px;
  min-width: 200px;
}

.consent-banner p a {
  color: var(--color-brand-primary);
}

.consent-banner .consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.consent-banner button {
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--color-border-subtle);
  background: #ffffff;
  color: var(--color-ink);
  font-weight: 700;
  font-size: 0.8rem;
  font-family: inherit;
}

.consent-banner button.consent-primary {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: #ffffff;
}

.consent-banner button:hover {
  opacity: 0.9;
}