/* Greatbold Custom Styles — design system shared with gp-web (gbpass.net):
   brand palette #0078D4 + #3E3E3E, layered dark hero surface, elevated cards,
   blue CTA band, and a class-based dark theme. */

html {
    scroll-behavior: smooth;
}

/* Header scroll effect */
.header-scrolled {
    box-shadow: 0 4px 24px rgba(16, 24, 40, 0.07), 0 1px 0 rgba(16, 24, 40, 0.04);
}

/* Mobile menu animation */
#mobile-menu {
    transition: max-height 0.3s ease-out;
}

/* Material Symbols.
   font-family + ligature settings used to come from the Google Fonts CSS; now
   that the font is self-hosted (see static/css/fonts.css) they live here. The
   'liga' feature turns the icon-name text (e.g. "mail") into the glyph. */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    display: inline-block;
    vertical-align: middle;
    user-select: none;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.ms-filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Honeypot field: visually removed, still submitted by naive bots */
.hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

/* ============================================================
   Depth & elevation — 2026 redesign:
   light editorial pages with one dark band and one blue band.
   ============================================================ */

/* --- Dark band (replaces the old .hero-surface) ----------------- */
.dark-band {
    background-color: #1d2129;
    background-image:
        radial-gradient(90% 120% at 88% -10%, rgba(0, 120, 212, 0.38) 0%, rgba(0, 120, 212, 0) 58%),
        linear-gradient(150deg, #1b1e24 0%, #23272e 55%, #1c2a3a 100%);
}

/* --- Blue CTA band ---------------------------------------------- */
.blue-band {
    background-color: #0078D4;
    background-image:
        radial-gradient(110% 120% at 50% -25%, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 58%),
        linear-gradient(135deg, #0d88e6 0%, #0078D4 48%, #005FAA 100%);
}

/* --- Hairline list rows ----------------------------------------- */
.row-link { transition: background .2s ease; }
.row-link:hover { background: #F8F9FA; }
.row-link:hover .row-arrow { transform: translateX(4px); color: #0078D4; }
.row-arrow { transition: transform .2s ease, color .2s ease; }

/* --- Card lift --------------------------------------------------- */
.lift { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.lift:hover {
    transform: translateY(-2px);
    border-color: #cfd8e3;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.07);
}

/* Staggered fade-up on page load (hero copy) */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-up { animation: fadeUp 0.6s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
.fade-up-1 { animation-delay: 0.08s; }
.fade-up-2 { animation-delay: 0.16s; }
.fade-up-3 { animation-delay: 0.24s; }
.fade-up-4 { animation-delay: 0.32s; }

/* Scroll reveal: sections/cards start slightly lowered and fade in when they
   enter the viewport (IntersectionObserver in main.js adds .reveal-visible).
   Without JS, everything stays visible (opacity only drops once JS tags the
   root with .js-reveal). */
html.js-reveal .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
html.js-reveal .reveal.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Premium blue CTA surface (legacy, kept per handoff) -------- */
.cta-surface {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: #0078D4;
    background-image:
        radial-gradient(120% 120% at 50% -20%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 55%),
        linear-gradient(135deg, #0d88e6 0%, #0078D4 46%, #005FAA 100%);
}
.cta-surface::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(70% 130% at 100% 115%, rgba(0, 0, 0, 0.16) 0%, transparent 60%),
        radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px);
    background-size: auto, 22px 22px;
}
/* Lift white/outline buttons sitting on the CTA surface */
.cta-surface a {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    transition: transform .2s ease, box-shadow .25s ease;
}
.cta-surface a:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}

/* --- Card elevation -------------------------------------------- */
.gb-card {
    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.04),
        0 6px 18px rgba(16, 24, 40, 0.06);
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.gb-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 120, 212, 0.35);
    box-shadow:
        0 2px 4px rgba(16, 24, 40, 0.06),
        0 18px 36px rgba(0, 120, 212, 0.13);
}

/* --- Primary button polish ------------------------------------- */
a.bg-gb-blue,
button.bg-gb-blue {
    box-shadow: 0 1px 2px rgba(0, 95, 170, 0.22), 0 6px 16px rgba(0, 120, 212, 0.20);
    transition: background-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
a.bg-gb-blue:hover,
button.bg-gb-blue:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 95, 170, 0.24), 0 10px 24px rgba(0, 120, 212, 0.28);
}

/* --- Keyboard focus ring (brand blue) -------------------------- */
a:focus-visible,
button:focus-visible {
    outline: 2px solid rgba(0, 120, 212, 0.65);
    outline-offset: 2px;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .fade-up,
    .fade-up-1,
    .fade-up-2,
    .fade-up-3,
    .fade-up-4 {
        animation: none !important;
    }
    html.js-reveal .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .lift,
    .lift:hover,
    .row-link,
    .row-arrow,
    .row-link:hover .row-arrow,
    .gb-card,
    .gb-card:hover,
    a.bg-gb-blue,
    a.bg-gb-blue:hover,
    button.bg-gb-blue,
    button.bg-gb-blue:hover,
    .cta-surface a,
    .cta-surface a:hover {
        transform: none;
        transition: none;
    }
}

/* ============================================================
   Dark theme
   Toggled by adding .dark to <html> (boot script in base.html;
   toggleTheme() in main.js). Light is the default — dark is a
   manual, persisted choice only.

   Strategy: the templates are authored light-first with Tailwind
   utilities, so dark mode re-maps the small set of light-surface
   utilities here. This unlayered stylesheet wins over Tailwind's
   @layer utilities by cascade-layer rules. Sections that are
   always dark (hero-surface, cta-surface, footer) are untouched,
   with explicit exceptions where light artifacts inside them must
   stay light.

   Palette: page #1b1d21 · raised band #202226 · card #26282c ·
   hover #2c2e33 · text #f1f3f5 / #cfd3d8 / #9aa1a9 · accent
   #4DA3E8 (readable variant of gb-blue on dark).
   ============================================================ */

/* Logo + toggle-icon swaps (light defaults) */
.logo-dark { display: none; }
html.dark .logo-light { display: none; }
html.dark .logo-dark { display: block; }
.theme-icon-light { display: none; }
html.dark .theme-icon-dark { display: none; }
html.dark .theme-icon-light { display: inline-block; }

html.dark {
    color-scheme: dark;
}

/* --- Surfaces -------------------------------------------------- */
html.dark .bg-white { background-color: #26282c; }
html.dark .bg-gb-bg { background-color: #202226; }
html.dark .bg-gray-50 { background-color: #2c2e33; }
html.dark .bg-gray-100 { background-color: #2c2e33; }
html.dark .bg-white\/95 { background-color: rgba(27, 29, 33, 0.95); }
html.dark .hover\:bg-gray-50:hover { background-color: #2c2e33; }
html.dark .hover\:bg-gray-100:hover { background-color: rgba(255, 255, 255, 0.08); }

/* Tinted feature/status chips */
html.dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.12); }
html.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.12); }
html.dark .bg-gb-blue\/10 { background-color: rgba(0, 120, 212, 0.2); }

/* --- Text ------------------------------------------------------ */
html.dark .text-gb-gray-dark { color: #f1f3f5; }
html.dark .text-gb-gray { color: #cfd3d8; }
html.dark .text-gb-gray-light { color: #9aa1a9; }
html.dark .text-gb-blue { color: #4DA3E8; }
html.dark .hover\:text-gb-blue:hover { color: #4DA3E8; }
html.dark .text-gb-blue\/40 { color: rgba(77, 163, 232, 0.45); }
html.dark .text-green-500 { color: #4ade80; }
html.dark .text-red-700 { color: #f87171; }

/* --- Borders ---------------------------------------------------- */
html.dark .border-gray-100 { border-color: rgba(255, 255, 255, 0.08); }
html.dark .border-gray-200 { border-color: rgba(255, 255, 255, 0.12); }
html.dark .border-red-200 { border-color: rgba(239, 68, 68, 0.35); }

/* --- Forms (contact page) --------------------------------------- */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark select,
html.dark textarea {
    background-color: #26282c;
    color: #f1f3f5;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #7c828a;
}

/* --- Images ----------------------------------------------------- */
/* Client/tech logos sit bare on the page in the light design; in dark mode
   they get a light chip behind them so marks with dark text/linework
   (RSM, Efata, Gaya Teknik, ...) remain legible. */
html.dark .dark-logo-chip {
    background-color: #e9edf1;
    border-radius: 8px;
    padding: 4px 8px;
}
/* Technology-stack logo tiles keep a light face in dark mode so every mark
   stays in its brand colors and legible. */
html.dark .logo-tile {
    background-color: #e9edf1;
    border-color: transparent;
}

/* Partner logos are full-color on light; on dark, flatten to a light gray so
   mixed-color marks sit calmly on the dark surface (same trick as the old
   site's dark mode). Tech logos and gallery photos just dim slightly. */
html.dark img[src*="/team/"] { filter: brightness(0.8); }

/* --- Exceptions: light artifacts inside always-dark sections ----
   The blue CTA band keeps its white buttons with true gb-blue text. */
html.dark section.cta-surface .bg-white { background-color: #FFFFFF; }
html.dark section.cta-surface .text-gb-blue { color: #0078D4; }
html.dark section.cta-surface .hover\:bg-gray-100:hover { background-color: #f3f4f6; }
/* The featured GBpass shot panel is authored dark already */
html.dark .featured-shot { background-color: #1b1e24; }

/* Card elevation reads through borders (not shadows) on dark */
html.dark .gb-card {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.35);
}
html.dark .header-scrolled {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* --- 2026 redesign: hairlines, rows, bands on dark --------------- */
html.dark .border-gb-line { border-color: rgba(255, 255, 255, 0.08); }
html.dark .border-gb-line-2 { border-color: rgba(255, 255, 255, 0.12); }
html.dark .bg-gb-line-2 { background-color: rgba(255, 255, 255, 0.12); }
html.dark .border-gb-gray-dark { border-color: rgba(255, 255, 255, 0.35); }
html.dark .row-link:hover { background: #2c2e33; }
html.dark .lift:hover { border-color: rgba(255, 255, 255, 0.22); }
/* The blue CTA band keeps its white button with true gb-blue text */
html.dark section.blue-band .bg-white { background-color: #FFFFFF; }
html.dark section.blue-band .text-gb-blue { color: #0078D4; }
html.dark section.blue-band .hover\:bg-gb-bg:hover { background-color: #F8F9FA; }