/*
 * GoFlowAI shared stylesheet.
 *
 * Design tokens below are ported 1:1 from the source React app's
 * tailwind.config.ts + src/index.css (lovable-source) — same custom
 * property names, same HSL values, same font stack, same glow/gradient
 * utilities. There is no Tailwind here (plain PHP, no build step), so the
 * "hsl(var(--x))" consumption pattern is written directly in plain CSS
 * instead of through Tailwind's color config.
 *
 * The --gf-* aliases below are NOT from the source app — they're this
 * site's own naming, already referenced as var(--gf-x, <light-fallback>)
 * throughout every page's inline <style> block (header.php, index.php,
 * services/*, blog/*, clinics.php, kliniki.php, etc.) from earlier
 * sessions, before this stylesheet existed. Defining them here means
 * every one of those existing var() fallbacks now resolves to the real
 * dark theme without editing each page.
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Raleway:wght@300;400;500;600;700&display=swap');

:root {
    /* ---- Source design tokens (1:1 from lovable-source/src/index.css) ---- */
    --background: 0 0% 2%;
    --foreground: 210 20% 98%;

    --card: 0 0% 7%;
    --card-foreground: 210 20% 98%;

    --popover: 0 0% 7%;
    --popover-foreground: 210 20% 98%;

    --primary: 239 84% 67%;
    --primary-foreground: 0 0% 100%;

    --secondary: 220 13% 12%;
    --secondary-foreground: 210 20% 98%;

    --muted: 220 13% 12%;
    --muted-foreground: 218 11% 65%;

    --accent: 239 84% 67%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 215 14% 16%;
    --input: 0 0% 4%;
    --ring: 239 84% 67%;

    --radius: 0.75rem;
    --radius-md: calc(var(--radius) - 2px);
    --radius-sm: calc(var(--radius) - 4px);

    --font-display: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Raleway', sans-serif;

    --glow-primary: 0 0 80px 20px hsl(239 84% 67% / 0.15);
    --glow-card: 0 0 40px 10px hsl(239 84% 67% / 0.08);

    --sidebar-background: 0 0% 4%;
    --sidebar-foreground: 210 20% 98%;
    --sidebar-primary: 239 84% 67%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 220 13% 12%;
    --sidebar-accent-foreground: 210 20% 98%;
    --sidebar-border: 215 14% 16%;
    --sidebar-ring: 239 84% 67%;

    /* ---- This site's --gf-* aliases, mapped onto the tokens above ----
       (names match what every page's inline <style> already expects as
       its var(--gf-x, <fallback>) first argument) */
    --gf-bg: hsl(var(--background));
    --gf-bg-muted: hsl(var(--muted));
    --gf-fg: hsl(var(--foreground));
    --gf-muted: hsl(var(--muted-foreground));
    --gf-border: hsl(var(--border));
    --gf-card: hsl(var(--card));
    --gf-primary: hsl(var(--primary));
}

/* ------------------------------- Base ------------------------------- */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-image: linear-gradient(180deg, hsl(0 0% 100% / 0.03) 0%, hsl(0 0% 100% / 0.08) 50%, hsl(0 0% 100% / 0.03) 100%);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
}

a {
    color: inherit;
}

img, video {
    max-width: 100%;
}

/* --------------------------- Glow / gradient utilities (1:1 from source) --------------------------- */

.glow-primary {
    box-shadow: var(--glow-primary);
}
.glow-card {
    box-shadow: var(--glow-card);
}
.gradient-glow {
    background: radial-gradient(ellipse at 50% 0%, hsl(239 84% 67% / 0.12) 0%, transparent 60%);
}
.card-hover {
    transition: all 0.2s ease;
    border-color: hsl(var(--border));
}
.card-hover:hover {
    border-color: hsl(var(--primary) / 0.4);
    box-shadow: var(--glow-card);
}
.text-gradient {
    background: linear-gradient(to right, hsl(var(--primary)), hsl(280 80% 65%));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ------------------------- Base utility classes -------------------------
   These match the class names/values already duplicated near-identically
   across header.php, footer.php, index.php, services.php, clinics.php,
   kliniki.php, blog.php and the shared includes/*.php templates (verified
   via grep before writing this) — centralized here instead of redeclared
   per page. Pages may still layer page-specific overrides in their own
   <style> block; those come later in the document and win ties, so this
   is additive, not a breaking change. */

.gf-container {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.gf-container--narrow { max-width: 48rem; }
.gf-container--wide { max-width: 64rem; }

.gf-section {
    padding: 4rem 0;
}
.gf-section--muted {
    background: var(--gf-bg-muted);
}

.gf-hero {
    padding: 6rem 0 4rem;
    text-align: center;
}

.gf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    cursor: pointer;
}
.gf-btn--primary {
    background: var(--gf-primary);
    color: hsl(var(--primary-foreground));
    border: none;
}
.gf-btn--outline {
    background: transparent;
    border: 1px solid var(--gf-border);
    color: var(--gf-fg);
}

.gf-card {
    display: block;
    border: 1px solid var(--gf-border);
    border-radius: var(--radius-sm);
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    background: var(--gf-card);
}
.gf-card:hover {
    border-color: var(--gf-primary);
}

/* New generic grid primitives (not yet used by any existing page — the
   per-page `.gf-cards--2col`/`--3col` etc. are untouched; these are
   available for new work without redeclaring the same media query). */
.gf-grid-2,
.gf-grid-3 {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .gf-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .gf-grid-3 { grid-template-columns: repeat(3, 1fr); }
}