/*
Theme Name: FOTOWOLTAIKA SERWIS
Theme URI: https://fotowoltaika-serwis.pl
Description: Nowoczesny, techniczny motyw sklepu z fotowoltaiką inspirowany estetyką EcoFlow — czerń/biel + elektryczny błękit i solarny bursztyn. Child theme na Storefroncie, zoptymalizowany pod WooCommerce (inwertery, panele, konstrukcje). Zastępuje Kadence.
Author: ECM
Template: storefront
Version: 1.4.1
Requires PHP: 7.4
Text Domain: fotowoltaika-serwis
*/

/* =========================================================================
   FOTOWOLTAIKA SERWIS — Design System
   ========================================================================= */
:root{
  /* Ink / neutrals */
  --fv-ink:      #0A0E17;
  --fv-ink-2:    #10151F;
  --fv-ink-3:    #171D29;
  --fv-white:    #FFFFFF;
  --fv-bg:       #FFFFFF;
  --fv-bg-soft:  #F4F6F9;
  --fv-bg-muted: #ECEFF3;
  --fv-border:   #E3E7ED;
  --fv-border-2: #D5DBE3;
  --fv-text:     #0E1218;
  --fv-text-2:   #384150;
  --fv-muted:    #626C7A;

  /* Brand — żółty/bursztyn jak w logo (kolor główny) */
  --fv-primary:     #F5A300;   /* amber (logo) */
  --fv-primary-600: #E08E00;
  --fv-primary-700: #A96A00;   /* czytelny na białym (linki) */
  --fv-primary-050: #FFF4DD;
  --fv-on-primary:  #1b1300;   /* ciemny tekst na żółtym */
  --fv-accent:      #16C784;   /* energy green (sparingly) */
  --fv-solar:       #FFB020;   /* solar amber (highlights) */
  --fv-solar-050:   #FFF4DE;
  --fv-danger:      #E5484D;

  /* Radius */
  --fv-r-sm: 8px;
  --fv-r:    14px;
  --fv-r-lg: 20px;
  --fv-r-xl: 28px;
  --fv-pill: 999px;

  /* Shadow */
  --fv-shadow-sm: 0 1px 2px rgba(10,14,23,.06), 0 1px 3px rgba(10,14,23,.05);
  --fv-shadow:    0 6px 20px rgba(10,14,23,.08);
  --fv-shadow-lg: 0 18px 50px rgba(10,14,23,.14);
  --fv-shadow-primary: 0 10px 30px rgba(245,163,0,.32);

  /* Type */
  --fv-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fv-font-display: "Manrope", var(--fv-font);

  /* Layout */
  --fv-container: 1240px;
  --fv-container-wide: 1440px;
  --fv-gutter: 24px;
}

/* ---------- Reset-ish / base ---------- */
html{ scroll-behavior:smooth; }
body{
  font-family: var(--fv-font);
  color: var(--fv-text);
  background: var(--fv-bg);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body,
button,
input,
select,
textarea{ font-family: var(--fv-font); }

h1,h2,h3,h4,h5,.fv-display{
  font-family: var(--fv-font-display);
  color: var(--fv-ink);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
a{ color: var(--fv-primary-700); text-decoration: none; transition: color .18s ease; }
a:hover{ color: var(--fv-primary-600); }
img{ max-width:100%; height:auto; }

.fv-container{ max-width: var(--fv-container); margin-inline:auto; padding-inline: var(--fv-gutter); }
.fv-container-wide{ max-width: var(--fv-container-wide); margin-inline:auto; padding-inline: var(--fv-gutter); }

/* Kill Storefront's default wrapper widths so our layout controls width */
.site .col-full{ max-width: var(--fv-container); padding-left: var(--fv-gutter); padding-right: var(--fv-gutter); }
@media (min-width: 768px){ .site .col-full{ padding-left: var(--fv-gutter); padding-right: var(--fv-gutter); } }

/* ---------- Buttons ---------- */
.fv-btn,
.button,
button.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt{
  display: inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family: var(--fv-font);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  padding: 14px 26px;
  border-radius: var(--fv-pill);
  border: 1px solid transparent;
  background: var(--fv-primary);
  color: var(--fv-on-primary);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  text-align:center;
  box-shadow: var(--fv-shadow-sm);
}
.fv-btn:hover,
.button:hover,
button.button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover{
  background: var(--fv-primary-600);
  color: var(--fv-on-primary);
  transform: translateY(-2px);
  box-shadow: var(--fv-shadow-primary);
}
.fv-btn--lg{ padding: 17px 34px; font-size: 16px; }
.fv-btn--ghost,
.fv-btn--dark{
  background: var(--fv-ink);
  color:#fff;
}
.fv-btn--dark:hover{ background: var(--fv-ink-3); color:#fff; }
.fv-btn--outline{
  background: transparent;
  color: var(--fv-ink);
  border-color: var(--fv-border-2);
  box-shadow:none;
}
.fv-btn--outline:hover{ background: var(--fv-ink); color:#fff; border-color: var(--fv-ink); box-shadow:none; }
.fv-btn--light{ background:#fff; color:var(--fv-ink); }
.fv-btn--light:hover{ background:#fff; color:var(--fv-primary-600); }
.fv-btn--solar{ background: var(--fv-solar); color:#1a1200; }
.fv-btn--solar:hover{ background:#ffbe3d; color:#1a1200; }
.fv-btn--wide{ text-transform:uppercase; font-weight:800; letter-spacing:.05em; padding-inline: 30px; }

/* ---------- Section helpers ---------- */
.fv-section{ padding: 72px 0; }
.fv-section--tight{ padding: 48px 0; }
.fv-section--dark{ background: var(--fv-ink); color: #d9dee7; }
.fv-section--dark h1,.fv-section--dark h2,.fv-section--dark h3{ color:#fff; }
.fv-section--soft{ background: var(--fv-bg-soft); }
.fv-eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--fv-font);
  font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--fv-primary);
}
.fv-section--dark .fv-eyebrow{ color: var(--fv-solar); }
.fv-section-head{ max-width: 760px; margin-bottom: 44px; }
.fv-section-head.center{ margin-inline:auto; text-align:center; }
.fv-section-head h2{ font-size: clamp(28px, 4vw, 44px); margin: 12px 0 14px; }
.fv-section-head p{ color: var(--fv-muted); font-size: 18px; margin:0; }
.fv-section--dark .fv-section-head p{ color:#aab3c0; }

/* Utility */
.fv-muted{ color: var(--fv-muted); }
.fv-badge{
  display:inline-flex; align-items:center; gap:.4em;
  font-size:12px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  padding: 5px 10px; border-radius: var(--fv-pill);
  background: var(--fv-primary-050); color: var(--fv-primary-600);
}
.fv-badge--solar{ background: var(--fv-solar-050); color:#9a6400; }
.fv-badge--green{ background:#E4F8EF; color:#0d7a4f; }