/* =============================
   PowerZet Shield Kariera — style.css
   Vibrant Energetic Theme — Mobile-first, Flexbox-only
   Fonts: Trebuchet MS (display), Verdana (body)
   ============================= */

/* 1) Reset & Normalize */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: Verdana, Tahoma, sans-serif; color: #0B1220; background-color: #FFFFFF; line-height: 1.6; font-size: 16px; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0 0 16px 24px; padding: 0; }
p { margin: 0 0 16px; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 12px; line-height: 1.2; font-family: "Trebuchet MS", Verdana, Tahoma, sans-serif; font-weight: 800; letter-spacing: 0.2px; }
button { font: inherit; background: none; border: none; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 3px solid #00E5FF; outline-offset: 2px; }
::selection { background: #FF1F7D; color: #FFFFFF; }

/* 2) CSS Variables (Brand + Vibrant Accents) */
:root {
  /* Brand core */
  --color-primary: #1E3A8A; /* deep brand blue */
  --color-secondary: #0E7490; /* teal */
  --color-accent: #F5F7FB; /* light accent */
  --color-text: #0B1220; /* near-black */
  --color-muted: #6B7280; /* gray */
  --color-surface: #FFFFFF;

  /* Vibrant energetic accents */
  --color-electric-pink: #FF1F7D;
  --color-electric-cyan: #00E5FF;
  --color-electric-amber: #FFB800;
  --color-lime: #16DB65;

  /* Surfaces */
  --bg-hero: #152A6A; /* darker variant of primary */
  --bg-footer: #0D1324;
  --bg-card: #FFFFFF;
  --bg-soft: #F8FAFF;

  /* Shadows & radii */
  --shadow-1: 0 6px 14px rgba(30, 58, 138, 0.15);
  --shadow-2: 0 10px 24px rgba(14, 116, 144, 0.18);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;

  /* Spacing scale */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-60: 60px;
}

/* 3) Typography Scale */
.h1, h1 { font-size: 32px; }
.h2, h2 { font-size: 24px; }
.h3, h3 { font-size: 20px; }
.h4, h4 { font-size: 18px; }
.subheadline { font-size: 16px; color: var(--color-accent-ink, #E8ECF8); opacity: 0.95; }

/* 4) Layout Containers (Flexbox-only) */
.container {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-20);
  width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--sp-20);
}
.content-wrapper {
  display: flex; flex-direction: column; gap: var(--sp-20); align-items: flex-start; justify-content: flex-start;
}
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; }
.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; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Ensure minimum spacing between all cards/sections */
section { margin: 0 0 var(--sp-32); }
section > .container > .content-wrapper > * { margin-bottom: var(--sp-20); }
.job-card, .card, .testimonial-card, .text-section, .badge { margin-bottom: var(--sp-20); }

/* 5) Header & Navigation */
header { position: relative; z-index: 1000; background: var(--color-surface); border-bottom: 4px solid var(--color-electric-pink); }
header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-16); padding: var(--sp-12) 0; }
.logo { display: flex; align-items: center; }
.logo img { height: 36px; width: auto; }

.main-nav { display: none; align-items: center; gap: var(--sp-16); }
.main-nav a { padding: 10px 12px; border-radius: var(--radius-sm); color: var(--color-text); font-weight: 700; }
.main-nav a[aria-current="page"] { color: var(--color-primary); background: var(--color-accent); }
.main-nav a:hover { color: var(--color-electric-pink); }

.header-cta { display: none; align-items: center; gap: var(--sp-12); }

.mobile-menu-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 10px; background: var(--color-primary); color: #FFF;
  box-shadow: var(--shadow-1); transition: transform 0.2s ease, background 0.2s ease;
}
.mobile-menu-toggle:hover { transform: translateY(-2px); background: #2143A4; }
.mobile-menu-toggle:active { transform: translateY(0); }

/* Mobile menu overlay */
.mobile-menu {
  position: fixed; inset: 0 0 0 auto; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--sp-16);
  background: #0B0F1E; color: #FFFFFF; padding: var(--sp-20);
  transform: translateX(100%); transition: transform 0.35s ease; z-index: 9999;
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu-close { align-self: flex-end; width: 44px; height: 44px; border-radius: 10px; background: var(--color-electric-pink); color: #FFF; }
.mobile-nav { display: flex; flex-direction: column; gap: var(--sp-12); margin-top: var(--sp-12); }
.mobile-nav a { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,0.06); color: #FFFFFF; font-weight: 700; }
.mobile-nav a[aria-current="page"] { background: var(--color-secondary); }
.mobile-nav a:hover { background: rgba(255,255,255,0.12); }

/* 6) Hero Section */
.hero { background: var(--bg-hero); color: #0E7490; position: relative; overflow: hidden; }
.hero .content-wrapper { padding: var(--sp-32) 0; }
.hero h1 { font-size: 32px; letter-spacing: 0.3px; }
.hero .subheadline { color: #434950; font-size: 16px; max-width: 720px; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-12); }

/* Energetic stripes (decorative only) */
.hero::before, .hero::after {
  content: ""; position: absolute; pointer-events: none; opacity: 0.2; z-index: 0;
}
.hero::before { top: -40px; right: -80px; width: 220px; height: 220px; border-radius: 20px; background: var(--color-electric-pink); transform: rotate(22deg); }
.hero::after { bottom: -60px; left: -60px; width: 280px; height: 280px; border-radius: 24px; background: var(--color-electric-cyan); transform: rotate(-18deg); }
.hero .container, .hero .content-wrapper, .hero * { position: relative; z-index: 1; }

/* 7) Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border-radius: 12px; font-weight: 800; letter-spacing: 0.3px;
  background: var(--color-electric-pink); color: #FFFFFF; box-shadow: var(--shadow-2);
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255,31,125,0.35); }
.btn:active { transform: translateY(0); }
.btn--secondary { background: var(--color-secondary); }
.btn--ghost { background: transparent; color: #FFFFFF; border: 2px solid rgba(255,255,255,0.6); }

/* 8) Links */
a:hover { color: var(--color-secondary); }
.hero a.btn + a.btn { background: var(--color-electric-cyan); color: #07111F; box-shadow: 0 12px 28px rgba(0,229,255,0.35); }

/* 9) Lists like stats / trust */
.stats ul, .trust ul { display: flex; flex-wrap: wrap; gap: var(--sp-12); list-style: none; margin: 0; padding: 0; }
.stats li, .trust li { background: rgba(255,255,255,0.08); color: #434950; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.2); }
.stats strong { color: #0E7490; font-size: 18px; }
.trust li { display: flex; align-items: center; gap: 10px; }
.trust img { width: 20px; height: 20px; filter: brightness(100%) contrast(110%); }

/* 10) Cards — Job items, text blocks, articles */
.job-card, .text-section, .card {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  background: var(--bg-card); border: 2px solid #434950; border-radius: var(--radius-md);
  padding: var(--sp-20); box-shadow: var(--shadow-1);
}
.job-card { border-left: 6px solid var(--color-electric-pink); }
.job-card h3 { font-size: 20px; color: var(--color-primary); }
.job-card p { color: #374151; }
.job-card a { color: var(--color-secondary); font-weight: 700; }
.job-card a:hover { color: var(--color-electric-pink); }

/* 11) Badges */
.badge { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; background: var(--color-lime); color: #042611; font-weight: 800; letter-spacing: 0.2px; }

/* 12) Testimonial Cards (high-contrast, light background) */
.testimonial-card {
  background: var(--color-accent); color: var(--color-text);
  border: 2px solid #E2E8F0; border-radius: var(--radius-md); box-shadow: var(--shadow-1);
}
.testimonial-card p { margin: 0; }
.testimonial-card strong { color: var(--color-primary); }

/* 13) Footer */
footer { background: var(--bg-footer); color: #434950; padding: var(--sp-32) 0; }
footer .content-wrapper { gap: var(--sp-24); }
footer nav { display: flex; flex-wrap: wrap; gap: var(--sp-12); }
footer nav a { color: #434950; background: rgba(255,255,255,0.04); padding: 10px 12px; border-radius: 10px; }
footer nav a:hover { background: rgba(255,255,255,0.12); color: #FFFFFF; }
.footer-top { display: flex; flex-wrap: wrap; gap: var(--sp-12); width: 100%; }

/* 14) Utilities */
.hidden { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.muted { color: var(--color-muted); }

/* 15) Cookie Consent Banner + Modal */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998;
  display: flex; flex-direction: column; gap: var(--sp-12);
  background: #0B0F1E; color: #FFFFFF; padding: var(--sp-16) var(--sp-20);
  box-shadow: 0 -10px 28px rgba(0,0,0,0.35);
  transform: translateY(110%); transition: transform 0.35s ease;
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner .cookie-row { display: flex; flex-direction: column; gap: var(--sp-12); }
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: var(--sp-12); }
.cookie-banner .btn-accept { background: var(--color-lime); color: #06210E; }
.cookie-banner .btn-reject { background: #EF4444; color: #FFF; }
.cookie-banner .btn-settings { background: var(--color-electric-cyan); color: #06121C; }

.cookie-modal {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.6); opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.cookie-modal.is-open { opacity: 1; pointer-events: auto; }
.cookie-modal .cookie-modal-content {
  display: flex; flex-direction: column; gap: var(--sp-16);
  width: 92%; max-width: 680px; background: #FFFFFF; color: var(--color-text);
  border-radius: var(--radius-lg); padding: var(--sp-24); box-shadow: var(--shadow-2);
}
.cookie-modal .cookie-categories { display: flex; flex-direction: column; gap: var(--sp-12); }
.cookie-modal .row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); padding: 10px 0; border-bottom: 1px solid #434950; }
.cookie-modal .row:last-child { border-bottom: none; }
.cookie-modal .actions { display: flex; flex-wrap: wrap; gap: var(--sp-12); justify-content: flex-end; }
/* Toggle switch styling (for future inputs) */
.cookie-switch { position: relative; width: 48px; height: 28px; background: #CBD5E1; border-radius: 28px; transition: background 0.2s ease; }
.cookie-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; transition: transform 0.2s ease; }
.cookie-switch.is-on { background: var(--color-secondary); }
.cookie-switch.is-on::after { transform: translateX(20px); }

/* 16) Content specifics & helpers */
.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-12); }
.text-section p a { color: var(--color-secondary); font-weight: 700; border-bottom: 2px solid rgba(14,116,144,0.25); }
.text-section p a:hover { color: var(--color-electric-pink); border-color: rgba(255,31,125,0.35); }

/* Headings visual cues */
h2 { display: flex; align-items: center; gap: 10px; }
h2::before { content: ""; display: inline-flex; width: 10px; height: 10px; background: var(--color-electric-pink); border-radius: 2px; }

/* 17) Page-specific light sections */
section:nth-of-type(odd) .content-wrapper > h2 + * { }
section:nth-of-type(odd) { background: var(--color-accent); }

/* Ensure readability for legal pages */
.hero p, .hero li { color: #434950; }

/* 18) Forms (basic base styles) */
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 2px solid #434950; background: #FFFFFF;
}
input:focus, textarea:focus, select:focus { border-color: var(--color-secondary); box-shadow: 0 0 0 4px rgba(14,116,144,0.15); }

/* 19) Responsive — Mobile-first up, switch to row on wider screens */
@media (min-width: 480px) {
  .h1, h1 { font-size: 36px; }
  .h2, h2 { font-size: 26px; }
}

@media (min-width: 768px) {
  .container { gap: var(--sp-24); }
  .content-wrapper { gap: var(--sp-24); }

  /* Header: show desktop nav */
  .main-nav { display: flex; }
  .header-cta { display: flex; }
  .mobile-menu-toggle { display: none; }

  .hero .content-wrapper { padding: var(--sp-48) 0; }
  .hero h1 { font-size: 40px; }
  .subheadline { font-size: 18px; }

  .text-image-section { flex-direction: row; }

  /* Distribute list items more widely */
  .stats ul, .trust ul { gap: var(--sp-16); }

  /* Multi-column-like via flex-wrap */
  .content-grid { justify-content: flex-start; }

  /* Footer compact grid via flex */
  footer .content-wrapper { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  footer nav { max-width: 60%; }
}

@media (min-width: 1024px) {
  .h1, h1 { font-size: 48px; }
  .h2, h2 { font-size: 32px; }
  .h3, h3 { font-size: 22px; }

  .content-wrapper { flex-direction: column; }
  /* Specific wrappers with row layout */
  header .content-wrapper { flex-direction: row; }

  /* Create dynamic card flows with flex-basis */
  .card-container > * { flex: 1 1 calc(33% - 24px); }
  .content-grid > * { flex: 1 1 calc(32% - 20px); }
  .text-section { flex: 1 1 48%; }
}

/* 20) Micro-interactions */
.card:hover, .text-section:hover, .job-card:hover { box-shadow: 0 16px 34px rgba(30,58,138,0.18); transform: translateY(-2px); transition: transform 0.18s ease, box-shadow 0.22s ease; }
.card, .text-section, .job-card { transition: transform 0.18s ease, box-shadow 0.22s ease; }

/* 21) Accessibility: high-contrast in testimonials and review sections */
/* Already using light backgrounds and dark text above; reinforce link colors here */
.testimonial-card a { color: var(--color-secondary); font-weight: 700; }
.testimonial-card a:hover { color: var(--color-primary); }

/* 22) Spacing safety to prevent overlaps */
section .container .content-wrapper > *:not(:last-child) { margin-bottom: var(--sp-12); }

/* 23) Page nav helpers */
[aria-current="page"] { position: relative; }
[aria-current="page"]::after { content: ""; display: inline-flex; width: 6px; height: 6px; background: var(--color-electric-amber); border-radius: 50%; margin-left: 6px; }

/* 24) Additional component styles (not yet in HTML, for future use) */
.alert { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #FEF3C7; color: #92400E; border: 2px solid #F59E0B; }

/* 25) Ensure no unintended absolute positioning on content cards */
/* Decorative pseudo-elements allowed; no changes needed here */

/* End of file */