/* =========================================================
   Horyzont Miast — tech_futuristic theme
   Single stylesheet for all pages
   Constraints: Flexbox only (no CSS Grid/Columns)
   Fonts: Georgia (display), Verdana (body)
   ========================================================= */

/* -----------------------------
   1) RESET & NORMALIZE
------------------------------ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Verdana, Geneva, sans-serif; color: #E6ECF3; background-color: #0C1222; line-height: 1.6; }
img, svg { max-width: 100%; height: auto; display: inline-block; }
img { vertical-align: middle; }
a { color: #7DE5FF; text-decoration: none; }
a:hover { text-decoration: underline; }
button, a, input, textarea { font-family: inherit; }
ul, ol { margin: 0 0 16px 20px; padding: 0; }
p { margin: 0 0 16px 0; }

/* -----------------------------
   2) THEME TOKENS (CSS Vars + fallbacks)
------------------------------ */
:root {
  --brand-primary: #1E3A5F; /* navy */
  --brand-secondary: #8E3B2C; /* warm brown */
  --brand-accent: #F4F1E9; /* cream */
  --bg-900: #0C1222; /* deep night */
  --bg-800: #111827; /* slate */
  --bg-700: #172033; /* steel */
  --text-100: #F8FAFC;
  --text-200: #E6ECF3;
  --text-muted: #A8B3C7;
  --neon-cyan: #00E5FF;
  --neon-purple: #8B5CF6;
  --success: #10B981;
  --danger: #EF4444;
  --warning: #F59E0B;
  --shadow-strong: 0 10px 30px rgba(0,0,0,0.35);
  --shadow-soft: 0 6px 18px rgba(0,0,0,0.25);
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --gap-20: 20px;
  --gap-24: 24px;
  --gap-30: 30px;
  --gap-40: 40px;
}

/* -----------------------------
   3) TYPOGRAPHY
------------------------------ */
h1, h2, h3, h4 { font-family: Georgia, 'Times New Roman', serif; color: var(--text-100); line-height: 1.25; margin: 0 0 12px; }
h1 { font-size: 36px; letter-spacing: 0.2px; }
h2 { font-size: 28px; letter-spacing: 0.2px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
.tagline { color: var(--text-200); font-size: 18px; opacity: 0.95; }
strong { color: var(--text-100); }
small { font-size: 12px; color: var(--text-muted); }

/* Larger screens */
@media (min-width: 768px) {
  h1 { font-size: 48px; }
  h2 { font-size: 32px; }
  h3 { font-size: 20px; }
}
@media (min-width: 1024px) {
  h1 { font-size: 56px; }
  h2 { font-size: 36px; }
}

/* -----------------------------
   4) GLOBAL LAYOUT & CONTAINERS (Flex only)
------------------------------ */
main, header, footer { display: flex; flex-direction: column; width: 100%; }
section { display: flex; flex-direction: column; gap: 16px; margin-bottom: 60px; padding: 40px 20px; background-color: transparent; }
.container { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 1200px; margin: 0 auto; }
.content-wrapper { display: flex; flex-direction: column; gap: 20px; }
.text-section { display: flex; flex-direction: column; gap: 10px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* MANDATORY PATTERNS (exact class names) */
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; display: flex; flex-direction: column; gap: 12px; background: #0F162B; border: 1px solid rgba(125,229,255,0.25); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-soft); }
.content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; border-radius: var(--radius-lg); border: 1px solid #D8D5CC; background: var(--brand-accent); color: #0B1726; box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Responsiveness for text-image sections */
@media (max-width: 768px) { .text-image-section { flex-direction: column; align-items: center; } }

/* -----------------------------
   5) TECH FUTURISTIC SURFACE STYLING
------------------------------ */
/* Solid color fallback + subtle gradient for modern look */
body { background-color: var(--bg-900); background-image: linear-gradient(180deg, rgba(23,32,51,0.65) 0%, rgba(12,18,34,1) 100%); }
.hero { background-color: #0E1530; border-top: 2px solid rgba(0,229,255,0.35); border-bottom: 1px solid rgba(139,92,246,0.25); position: relative; overflow: hidden; }
.hero:before { content: ""; position: absolute; inset: -30%; background: radial-gradient(closest-side, rgba(0,229,255,0.18), transparent 70%) no-repeat 10% 20%, radial-gradient(closest-side, rgba(139,92,246,0.16), transparent 70%) no-repeat 90% 60%; z-index: 0; }
.hero .container, .hero .content-wrapper { position: relative; z-index: 1; }

/* Neon headline accent */
.hero h1 { text-shadow: 0 0 18px rgba(0,229,255,0.35), 0 2px 0 rgba(0,0,0,0.35); }

/* Dividers for sections */
section:not(.hero) { border-top: 1px solid rgba(125,229,255,0.12); }

/* -----------------------------
   6) HEADER & NAVIGATION
------------------------------ */
header { position: sticky; top: 0; z-index: 50; background: rgba(12,18,34,0.9); backdrop-filter: saturate(140%); border-bottom: 1px solid rgba(125,229,255,0.12); }
.top-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; max-width: 1200px; margin: 0 auto; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo img { height: 32px; filter: drop-shadow(0 0 10px rgba(0,229,255,0.25)); }

.main-nav { display: none; align-items: center; gap: 18px; }
.main-nav a { color: var(--text-200); padding: 8px 10px; border-radius: 8px; transition: color .2s ease, background-color .2s ease, transform .2s ease; }
.main-nav a:hover { color: #FFFFFF; background: rgba(125,229,255,0.08); transform: translateY(-1px); }

.cta-group { display: none; align-items: center; gap: 10px; }

/* Mobile menu button */
.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(125,229,255,0.35); background: transparent; color: #C6F7FF; border-radius: var(--radius-pill); cursor: pointer; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.mobile-menu-toggle:hover { background: rgba(125,229,255,0.12); box-shadow: 0 0 0 3px rgba(0,229,255,0.18) inset; }
.mobile-menu-toggle:active { transform: scale(0.96); }

/* Mobile menu overlay (off-canvas) */
.mobile-menu { position: fixed; inset: 0 0 0 auto; right: 0; top: 0; width: 100%; max-width: 100%; height: 100vh; display: flex; flex-direction: column; background: rgba(10,14,28,0.96); border-left: 1px solid rgba(125,229,255,0.2); transform: translateX(100%); transition: transform .35s ease; z-index: 100; }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-close { align-self: flex-end; margin: 14px 18px 0 0; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); border: 1px solid rgba(125,229,255,0.35); background: transparent; color: #C6F7FF; cursor: pointer; }
.mobile-nav { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.mobile-nav a { display: flex; align-items: center; padding: 12px 14px; border-radius: 10px; color: #E6ECF3; background: rgba(125,229,255,0.06); border: 1px solid rgba(125,229,255,0.18); }
.mobile-nav a:hover { background: rgba(139,92,246,0.12); border-color: rgba(139,92,246,0.35); }

/* Desktop nav */
@media (min-width: 992px) {
  .main-nav { display: flex; }
  .cta-group { display: flex; }
  .mobile-menu-toggle { display: none; }
}

/* -----------------------------
   7) BUTTONS
------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; border-radius: var(--radius-pill); border: 1px solid transparent; font-weight: 700; font-size: 14px; letter-spacing: .5px; text-transform: uppercase; transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease; cursor: pointer; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; }

.btn-primary { background: var(--brand-primary); color: #FFFFFF; border-color: rgba(125,229,255,0.45); box-shadow: 0 0 18px rgba(0,229,255,0.15); }
.btn-primary:hover { background: #24476F; box-shadow: 0 0 22px rgba(0,229,255,0.25); }

.btn-secondary { background: transparent; color: #C6F7FF; border-color: rgba(139,92,246,0.55); box-shadow: 0 0 12px rgba(139,92,246,0.18) inset; }
.btn-secondary:hover { background: rgba(139,92,246,0.15); color: #FFFFFF; }

/* Cookie buttons */
.btn-cookie-accept { background: var(--success); color: #04121F; border-color: rgba(4,18,31,0.1); }
.btn-cookie-accept:hover { background: #0AAA74; }
.btn-cookie-reject { background: #192132; color: #E6ECF3; border-color: rgba(230,236,243,0.2); }
.btn-cookie-reject:hover { background: #131B2C; }
.btn-cookie-settings { background: var(--brand-accent); color: #0B1726; border-color: #D8D5CC; }
.btn-cookie-settings:hover { background: #EAE6DA; }

/* -----------------------------
   8) LISTS, BADGES, BREADCRUMBS
------------------------------ */
.trust-badges ul { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; list-style: none; }
.trust-badges li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-pill); background: rgba(125,229,255,0.08); border: 1px solid rgba(125,229,255,0.25); color: #DDF7FF; }

[aria-label="okruszki chleba"] { display: flex; flex-wrap: wrap; gap: 8px; color: var(--text-muted); font-size: 14px; }
[aria-label="okruszki chleba"] a { color: #A6EFFF; }

/* Icon text lines */
.text-section p img { width: 18px; height: 18px; margin-right: 8px; opacity: 0.9; }

/* -----------------------------
   9) CARDS & UTILITIES (generic)
------------------------------ */
.card.emphasis { border-color: rgba(139,92,246,0.45); box-shadow: 0 8px 22px rgba(139,92,246,0.18); }
.content-grid > * { flex: 1 1 100%; }
@media (min-width: 768px) {
  .content-grid > * { flex: 1 1 calc(50% - 10px); }
}
@media (min-width: 1024px) {
  .content-grid > * { flex: 1 1 calc(33.333% - 14px); }
}

/* -----------------------------
   10) TESTIMONIALS (light background, dark text)
------------------------------ */
.testimonial-card p { margin: 0; color: #0B1726; }
.testimonial-card strong { color: #13233A; }

/* -----------------------------
   11) FOOTER
------------------------------ */
footer { background: #0A0F1E; border-top: 1px solid rgba(125,229,255,0.12); }
footer section { padding-top: 30px; padding-bottom: 30px; }
.footer-columns { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.footer-columns > .text-section { flex: 1 1 220px; background: rgba(125,229,255,0.04); border: 1px solid rgba(125,229,255,0.12); border-radius: var(--radius-md); padding: 16px; }
footer nav a { color: #CDEBFF; display: inline-flex; margin-right: 10px; margin-bottom: 8px; }
footer .container > p { color: #A8B3C7; padding: 0 20px 30px; }

/* -----------------------------
   12) RESPONSIVE LAYOUT REFINEMENTS
------------------------------ */
/* Convert some rows to columns by default (mobile-first) */
.text-image-section > * { flex: 1 1 100%; }
@media (min-width: 992px) {
  .top-bar { padding: 16px 24px; }
  .cta-row { gap: 16px; }
  .text-image-section { flex-wrap: nowrap; }
  .text-image-section > * { flex: 1 1 50%; }
}

/* -----------------------------
   13) ACCESSIBILITY STATES
------------------------------ */
:focus-visible { outline: 2px dashed var(--neon-cyan); outline-offset: 2px; }

/* -----------------------------
   14) PAGE-SPECIFIC TOUCHES
------------------------------ */
/* Hero paragraphs */
.hero p { color: #D7E7F7; }
/* Ordered lists in process sections */
ol { display: flex; flex-direction: column; gap: 10px; padding-left: 22px; }
ol li::marker { color: var(--neon-cyan); font-weight: bold; }

/* -----------------------------
   15) MOBILE MENU HIDING MAIN NAV ON MOBILE
------------------------------ */
/* Already hidden main-nav/cta-group until >=992px. Ensure spacing */
.main-nav a, .mobile-nav a { font-weight: 600; }

/* -----------------------------
   16) COOKIE CONSENT BANNER & MODAL
------------------------------ */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; display: none; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; background: #0B1328; color: #E6ECF3; border-top: 1px solid rgba(125,229,255,0.25); box-shadow: 0 -10px 30px rgba(0,0,0,0.35); z-index: 90; }
.cookie-banner.show { display: flex; }
.cookie-banner .cookie-text { display: flex; flex-direction: column; gap: 6px; max-width: 900px; }
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Modal */
.cookie-modal-backdrop { position: fixed; inset: 0; background: rgba(1,4,12,0.65); display: none; align-items: center; justify-content: center; z-index: 110; }
.cookie-modal-backdrop.open { display: flex; }
.cookie-modal { width: 92%; max-width: 720px; background: #0E1530; border: 1px solid rgba(125,229,255,0.25); border-radius: 14px; box-shadow: var(--shadow-strong); display: flex; flex-direction: column; gap: 16px; padding: 20px; transform: translateY(20px); transition: transform .25s ease; }
.cookie-modal-backdrop.open .cookie-modal { transform: translateY(0); }
.cookie-modal h3 { margin-bottom: 4px; }
.cookie-categories { display: flex; flex-direction: column; gap: 12px; }
.cookie-category { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border-radius: 10px; background: rgba(125,229,255,0.06); border: 1px solid rgba(125,229,255,0.18); }
.cookie-category .hint { color: var(--text-muted); font-size: 14px; }
.cookie-modal .modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 6px; }

/* -----------------------------
   17) BREADTH CLASSES REQUESTED BUT NOT IN HTML
------------------------------ */
/* These ensure future sections inherit the flex patterns without grid/columns */
.features { display: flex; flex-wrap: wrap; gap: 20px; }
.card-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.card-grid .card { flex: 1 1 calc(33.333% - 14px); }
@media (max-width: 1023px) { .card-grid .card { flex: 1 1 calc(50% - 10px); } }
@media (max-width: 640px) { .card-grid .card { flex: 1 1 100%; } }

/* -----------------------------
   18) LINKS & MICRO-INTERACTIONS
------------------------------ */
.content-wrapper a { transition: color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.content-wrapper a:hover { text-decoration: none; }

/* -----------------------------
   19) UTILITIES
------------------------------ */
.muted { color: var(--text-muted); }
.center { text-align: center; }
.space-y-16 > * + * { margin-top: 16px; }

/* -----------------------------
   20) IMAGE & ICON TWEAKS IN FOOTER
------------------------------ */
footer img[alt="Horyzont Miast"] { max-height: 36px; opacity: 0.9; }
footer p a { display: inline-flex; align-items: center; gap: 8px; }
footer p a img { width: 16px; height: 16px; }

/* -----------------------------
   21) ENSURE NO OVERLAPS
------------------------------ */
/* Maintain breathing room between stacked sections */
section + section { margin-top: 0; }

/* -----------------------------
   22) COLOR ROLES FOR BRAND INTEGRATION
------------------------------ */
/* Subtle brand accents for headings inside standard sections */
section h2 { border-left: 4px solid var(--brand-primary); padding-left: 10px; }
section h3 { color: #DCEBFA; }

/* -----------------------------
   23) FORMS (if added later)
------------------------------ */
input, select, textarea { background: #0F162B; border: 1px solid rgba(125,229,255,0.25); color: #E6ECF3; padding: 10px 12px; border-radius: 10px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--neon-cyan); box-shadow: 0 0 0 3px rgba(0,229,255,0.18); }

/* -----------------------------
   24) TABLES (generic safety if used in legal pages)
------------------------------ */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; border-bottom: 1px solid rgba(125,229,255,0.15); }
th { text-align: left; color: var(--text-100); }

/* -----------------------------
   25) PRINT SAFE
------------------------------ */
@media print {
  header, .mobile-menu, .cookie-banner, .cookie-modal-backdrop { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
}

/* =========================================================
   END — All layouts rely on flexbox only. No grid/columns used.
   ========================================================= */