/* Employers Guide — technopark.ps brand override.
   Loaded after employers-guide.css. Rewrites the CSS custom properties
   that the Tailwind bundle consumes (primary / secondary / accent / radius)
   so shadcn-style utility classes pick up the Techno Park palette without
   regenerating the 70 KB Tailwind output. */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap');

:root {
    /* Techno Park palette (HSL triples, as used by Tailwind shadcn theme).
       #283b3c → hsl(184 19% 19%)
       #419496 → hsl(181 39% 42%)
       #66999a → hsl(181 20% 50%)
       #f7f5f5 → hsl(0 11% 96%) */
    --background: 0 0% 100%;
    --foreground: 195 7% 33%;             /* #525a5c */

    --card: 0 0% 100%;
    --card-foreground: 195 7% 33%;

    --popover: 0 0% 100%;
    --popover-foreground: 195 7% 33%;

    --primary: 184 19% 19%;               /* #283b3c deep teal */
    --primary-foreground: 0 0% 100%;

    --secondary: 181 39% 42%;             /* #419496 accent teal */
    --secondary-foreground: 0 0% 100%;

    --muted: 0 11% 96%;                   /* #f7f5f5 */
    --muted-foreground: 195 7% 45%;

    --accent: 181 39% 42%;                /* #419496 */
    --accent-foreground: 0 0% 100%;

    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;

    --border: 0 0% 88%;
    --input: 0 0% 88%;
    --ring: 181 39% 42%;

    /* Flat corners to match Techno Park. Keep small radius for softness. */
    --radius: 0.25rem;
}

/* Body typography */
.eg-root,
.eg-root body,
.eg-root h1, .eg-root h2, .eg-root h3, .eg-root h4, .eg-root h5, .eg-root h6,
.eg-root p, .eg-root span, .eg-root a, .eg-root button, .eg-root li {
    font-family: 'Source Sans Pro', 'Segoe UI', Tahoma, sans-serif;
}

/* Techno Park uses squared-off elements. Tailwind's rounded-lg/md/xl feel too
   playful next to the main site — tighten them. */
.eg-root .rounded-lg,
.eg-root .rounded-md,
.eg-root .rounded-xl,
.eg-root .rounded-2xl {
    border-radius: var(--radius) !important;
}
.eg-root .rounded-full {
    /* Keep circular badges / icon wells round — only flatten card corners. */
    border-radius: 9999px !important;
}

/* The React source uses a purple→teal gradient on hero heading span. On the
   live site this would clash with the teal palette, so render it as a solid
   accent instead. */
.eg-root .bg-gradient-to-br.from-primary.to-secondary,
.eg-root .bg-gradient-to-r.from-primary.to-secondary,
.eg-root .bg-gradient-to-b.from-primary.to-secondary {
    background: hsl(var(--primary));
    background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--secondary)) 100%);
}

/* Shadows — keep them visible enough to read as elevated cards, but tinted
   with the Techno Park deep teal so they don't look bright-blue on white. */
.eg-root .shadow-sm  { box-shadow: 0 1px 3px  rgba(40, 59, 60, 0.08) !important; }
.eg-root .shadow-md  { box-shadow: 0 4px 10px rgba(40, 59, 60, 0.10) !important; }
.eg-root .shadow-lg  { box-shadow: 0 10px 25px rgba(40, 59, 60, 0.14), 0 4px 10px rgba(40, 59, 60, 0.08) !important; }
.eg-root .shadow-xl  { box-shadow: 0 20px 40px rgba(40, 59, 60, 0.18), 0 8px 16px rgba(40, 59, 60, 0.10) !important; }

/* Nav underline: use the accent teal instead of primary so it pops against
   the dark header style used on the main site. */
.eg-root .eg-nav-link.eg-nav-active { color: hsl(var(--secondary)); }
.eg-root .eg-nav-link.eg-nav-active::after { background-color: hsl(var(--secondary)); }

/* ===== Animations ===================================================== */

@keyframes eg-fade-in     { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes eg-fade-in-sm  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes eg-scale-in    { from { opacity: 0; transform: scale(0.95); }       to { opacity: 1; transform: scale(1); } }
@keyframes eg-slide-right { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes eg-pulse       { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Bind Tailwind's animate-fade-in class to our keyframe. */
.eg-root .animate-fade-in { animation: eg-fade-in 0.7s ease-out both; }

/* Sections that haven't been scrolled to yet keep their inner animated
   children invisible. When the section becomes active the JS adds
   .eg-entered and we stagger the children in. */
.eg-root section:not(.eg-entered) [data-eg-reveal] { opacity: 0; transform: translateY(24px); }
.eg-root section.eg-entered       [data-eg-reveal] { animation: eg-fade-in 0.7s ease-out both; }
.eg-root section.eg-entered       [data-eg-reveal][data-eg-reveal="2"] { animation-delay: 0.08s; }
.eg-root section.eg-entered       [data-eg-reveal][data-eg-reveal="3"] { animation-delay: 0.16s; }
.eg-root section.eg-entered       [data-eg-reveal][data-eg-reveal="4"] { animation-delay: 0.24s; }
.eg-root section.eg-entered       [data-eg-reveal][data-eg-reveal="5"] { animation-delay: 0.32s; }
.eg-root section.eg-entered       [data-eg-reveal][data-eg-reveal="6"] { animation-delay: 0.40s; }
.eg-root section.eg-entered       [data-eg-reveal][data-eg-reveal="7"] { animation-delay: 0.48s; }
.eg-root section.eg-entered       [data-eg-reveal][data-eg-reveal="8"] { animation-delay: 0.56s; }

/* Stagger children via :nth-child — used when the parent gets
   [data-eg-stagger] and children are in a grid. */
.eg-root section:not(.eg-entered) [data-eg-stagger] > * { opacity: 0; transform: translateY(16px); }
.eg-root section.eg-entered       [data-eg-stagger] > * { animation: eg-fade-in-sm 0.6s ease-out both; }
.eg-root section.eg-entered       [data-eg-stagger] > *:nth-child(1) { animation-delay: 0.05s; }
.eg-root section.eg-entered       [data-eg-stagger] > *:nth-child(2) { animation-delay: 0.10s; }
.eg-root section.eg-entered       [data-eg-stagger] > *:nth-child(3) { animation-delay: 0.15s; }
.eg-root section.eg-entered       [data-eg-stagger] > *:nth-child(4) { animation-delay: 0.20s; }
.eg-root section.eg-entered       [data-eg-stagger] > *:nth-child(5) { animation-delay: 0.25s; }
.eg-root section.eg-entered       [data-eg-stagger] > *:nth-child(6) { animation-delay: 0.30s; }
.eg-root section.eg-entered       [data-eg-stagger] > *:nth-child(7) { animation-delay: 0.35s; }
.eg-root section.eg-entered       [data-eg-stagger] > *:nth-child(8) { animation-delay: 0.40s; }
.eg-root section.eg-entered       [data-eg-stagger] > *:nth-child(n+9) { animation-delay: 0.45s; }

/* Hero scroll-indicator bounce. */
.eg-root .eg-pulse { animation: eg-pulse 1.8s ease-in-out infinite; }

/* Card hover polish — Tailwind's hover:-translate-y-1 / hover:shadow-lg are
   already in the bundle, so we just make the transition curve nicer. */
.eg-root .hover\:shadow-lg,
.eg-root .hover\:-translate-y-1,
.eg-root .transition-all,
.eg-root .transition-shadow,
.eg-root .transition-colors,
.eg-root .transition-transform {
    transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Buttons pop a bit on hover. */
.eg-root .bg-primary.hover\:bg-primary\/90:hover,
.eg-root .bg-secondary.hover\:bg-secondary\/90:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    transition: transform 0.15s ease, filter 0.15s ease;
}

/* Dot-nav active state gets a teal ring like the main site accents. */
.eg-root [data-eg-dot].eg-active {
    background: hsl(var(--secondary)) !important;
    box-shadow: 0 0 0 4px rgba(65, 148, 150, 0.25);
    transform: scale(1.25);
}
.eg-root [data-eg-dot] { transition: all 0.25s cubic-bezier(0.22, 0.61, 0.36, 1); }

/* Progress bar smoother. */
.eg-root #eg-progress { transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) !important; }

/* ===== Section sizing (no 2-level scroll) =============================
   Sections are min-h-screen in the layout. Each section's first-child
   content wrapper originally used `h-full` (= 100%) + an inner
   `flex-1 overflow-y-auto` to give the section its own internal scroll.
   That creates a two-level scroll trap. Override so:
     - the content wrapper can grow past the viewport
     - inner scrollable wrappers flow naturally in the page
   Only the outer `#eg-fullpage` container scrolls. */
.eg-root #eg-fullpage > section > .h-full {
    height: auto !important;
    min-height: 100vh;
}
.eg-root #eg-fullpage > section .flex-1.overflow-y-auto {
    overflow: visible !important;
    flex: 1 1 auto;
}

/* ===== CMS rich-text prose (About section body) ======================== */

.eg-root .eg-prose h2 {
    font-size: clamp(1.75rem, 2.5vw + 1rem, 3rem);
    font-weight: 700;
    line-height: 1.15;
    color: hsl(var(--foreground));
    margin: 0 0 1rem;
}
.eg-root .eg-prose h2 span,
.eg-root .eg-prose h2 em {
    color: hsl(var(--primary));
    font-style: normal;
}
.eg-root .eg-prose p {
    font-size: 1.125rem;
    line-height: 1.7;
    color: hsl(var(--muted-foreground));
    margin: 0 0 1rem;
}
.eg-root .eg-prose p strong {
    color: hsl(var(--foreground));
    font-weight: 600;
}
.eg-root .eg-prose blockquote {
    margin: 1.5rem 0 0;
    padding: 1.25rem 1.5rem;
    border: 1px solid hsla(var(--primary), 0.20);
    border-radius: var(--radius);
    background: hsla(var(--primary), 0.05);
}
.eg-root .eg-prose blockquote p {
    font-size: 1.125rem;
    font-style: italic;
    color: hsl(var(--foreground));
    margin: 0;
}
.eg-root .eg-prose blockquote cite,
.eg-root .eg-prose blockquote footer {
    display: block;
    font-size: 0.875rem;
    font-style: normal;
    color: hsl(var(--muted-foreground));
    margin-top: 0.5rem;
}
.eg-root .eg-prose a {
    color: hsl(var(--secondary));
    text-decoration: underline;
    text-underline-offset: 2px;
}
.eg-root .eg-prose ul, .eg-root .eg-prose ol {
    padding-left: 1.25rem;
    margin: 0 0 1rem;
    color: hsl(var(--muted-foreground));
}

/* Respect reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    .eg-root *, .eg-root *::before, .eg-root *::after {
        animation: none !important;
        transition: none !important;
    }
}