/* ============================================================
   Donalda Feith AI Consulting — main.css
   Global styles, card interactions, animations, dark/light mode
   ============================================================ */

/* ─── Base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Material Symbols defaults */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    line-height: 1;
}

/* ─── Glass Panel ────────────────────────────────────────────── */
.glass-panel {
    background: rgba(16, 30, 34, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(13, 185, 242, 0.15);
}

/* ─── Cards — Hover / Rollover Effects ──────────────────────── */

/* Standard service card */
.card {
    position: relative;
    border-radius: 1rem;
    border: 1px solid rgba(255,255,255,0.05);
    background: #192428;
    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        border-color 0.3s ease,
        box-shadow 0.35s ease;
    overflow: hidden;
    will-change: transform;
}

.card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(13, 185, 242, 0.08) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

.card:hover {
    transform: translateY(-6px) scale(1.01);
    border-color: rgba(13, 185, 242, 0.45);
    box-shadow: 0 20px 60px -15px rgba(13, 185, 242, 0.2);
}

.card:hover::before { opacity: 1; }

.card > * { position: relative; z-index: 1; }

/* Card icon glow on hover */
.card .card-icon {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.card:hover .card-icon {
    transform: scale(1.2) rotate(-5deg);
    box-shadow: 0 0 20px rgba(13, 185, 242, 0.4);
}

/* Image cards (services overview) */
.img-card {
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.07);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.img-card:hover {
    transform: translateY(-4px);
    border-color: rgba(13, 185, 242, 0.5);
    box-shadow: 0 16px 48px -12px rgba(13, 185, 242, 0.18);
}
.img-card .card-img {
    transition: transform 0.5s ease, filter 0.5s ease;
    filter: grayscale(20%);
}
.img-card:hover .card-img {
    transform: scale(1.06);
    filter: grayscale(0%);
}
.img-card .card-arrow {
    transition: gap 0.25s ease, opacity 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.img-card:hover .card-arrow { gap: 0.75rem; }

/* Stat cards */
.stat-card {
    border-radius: 1rem;
    border: 1px solid rgba(13, 185, 242, 0.06);
    background: rgba(16, 30, 34, 0.5);
    transition: transform 0.3s ease, border-color 0.3s ease;
    text-align: center;
}
.stat-card:hover {
    transform: translateY(-4px);
    border-color: rgba(13, 185, 242, 0.3);
}

/* Process/step cards */
.process-step {
    transition: transform 0.3s ease;
}
.process-step:hover { transform: translateY(-4px); }
.process-step .step-icon {
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.process-step:hover .step-icon {
    box-shadow: 0 0 24px rgba(13, 185, 242, 0.35);
    background-color: rgba(13, 185, 242, 0.25);
}

/* ─── Buttons ────────────────────────────────────────────────── */
.btn-primary {
    position: relative;
    overflow: hidden;
}
.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.btn-primary:hover::after { opacity: 1; }

/* Ripple effect */
.ripple-btn { position: relative; overflow: hidden; }
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    transform: scale(0);
    animation: ripple-anim 0.6s linear;
    pointer-events: none;
}
@keyframes ripple-anim {
    to { transform: scale(4); opacity: 0; }
}

/* ─── Scroll-reveal Animations ───────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ─── Counter animation ──────────────────────────────────────── */
.counter { font-variant-numeric: tabular-nums; }

/* ─── Skill / Cert Tooltip Overlay ──────────────────────────── */
/*
 * Add class  tip-card  alongside  .card  to enable.
 * A semi-transparent panel fades + slides up on hover,
 * revealing the .card-tip description without disturbing layout.
 */
.tip-card { cursor: default; }
.tip-card .card-tip {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    border-radius: inherit;
    background: rgba(13, 185, 242, 0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(13, 185, 242, 0.28);
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    transition: opacity 0.22s ease, transform 0.22s ease;
    pointer-events: none;
}
.tip-card:hover .card-tip {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.card-tip p {
    color: #e2e8f0;
    font-size: 0.72rem;
    line-height: 1.55;
    text-align: center;   /* overridden inline where left-align is better */
    font-weight: 500;
    margin: 0;
}

/* ─── Header Scroll State ────────────────────────────────────── */
#site-header.scrolled {
    box-shadow: 0 4px 40px rgba(0,0,0,0.4);
}

/* ─── Nav Links ──────────────────────────────────────────────── */
.nav-link {
    position: relative;
    padding-bottom: 2px;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #0db9f2;
    transition: width 0.25s ease;
}
.nav-link:hover::after,
.nav-link.text-primary::after { width: 100%; }

/* ─── Pulse Dot ──────────────────────────────────────────────── */
@keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 0.75; }
    50%       { transform: scale(1.6); opacity: 0; }
}
.animate-ping { animation: pulse-dot 1.4s cubic-bezier(0,0,0.2,1) infinite; }

/* ─── Hero Gradient Blob ─────────────────────────────────────── */
.hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.07;
    animation: blob-float 8s ease-in-out infinite;
    pointer-events: none;
}
@keyframes blob-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%       { transform: translate(30px, -20px) scale(1.05); }
    66%       { transform: translate(-20px, 15px) scale(0.95); }
}

/* ─── Mobile Menu Transition ─────────────────────────────────── */
#mobile-menu {
    transition: max-height 0.35s ease, opacity 0.3s ease;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
}
#mobile-menu.open {
    max-height: 600px;
    opacity: 1;
}

/* ─── Form Focus Glow ────────────────────────────────────────── */
input:focus, textarea:focus, select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 185, 242, 0.2);
}

/* ─── Toast Notifications ────────────────────────────────────── */
#toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
}
.toast {
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    max-width: 360px;
    pointer-events: all;
    transform: translateX(120%);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}
.toast.show { transform: translateX(0); }
.toast-success { background: #0db9f2; color: #101e22; }
.toast-error   { background: #ef4444; color: #fff; }
.toast-info    { background: #1e293b; color: #cbd5e1; border: 1px solid rgba(13,185,242,0.3); }

/* ─── Calendar Page ──────────────────────────────────────────── */
.session-option input[type="radio"]:checked ~ .session-label {
    border-color: #0db9f2;
    background: rgba(13, 185, 242, 0.08);
}
.session-option {
    cursor: pointer;
    transition: border-color 0.25s, background 0.25s;
}
.session-option:has(input:checked) {
    border-color: #0db9f2 !important;
    background: rgba(13, 185, 242, 0.08) !important;
}

/* ─── Booking Calendar Grid ──────────────────────────────────── */
.cal-day {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.2s ease, color 0.2s ease;
}
.cal-day:hover   { background: rgba(13, 185, 242, 0.2); }
.cal-day.today   { background: #0db9f2; color: #101e22; font-weight: 700; }
.cal-day.selected { background: #0db9f2; color: #101e22; font-weight: 700; }
.cal-day.inactive { opacity: 0.3; cursor: default; pointer-events: none; }
.cal-day.booked   { opacity: 0.4; text-decoration: line-through; cursor: not-allowed; }

.time-slot {
    padding: 0.5rem 1rem;
    border: 2px solid rgba(13, 185, 242, 0.3);
    border-radius: 0.5rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.time-slot:hover   { background: rgba(13, 185, 242, 0.15); border-color: #0db9f2; }
.time-slot.selected { background: #0db9f2; color: #101e22; border-color: #0db9f2; }

/* ─── Gradient text ──────────────────────────────────────────── */
.gradient-text {
    background: linear-gradient(135deg, #0db9f2, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ─── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #101e22; }
::-webkit-scrollbar-thumb { background: #2d4a52; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #0db9f2; }

/* ─── Light Mode Overrides ───────────────────────────────────── */
html:not(.dark) .glass-panel {
    background: rgba(245, 248, 248, 0.9);
    border-color: rgba(13, 185, 242, 0.2);
}
html:not(.dark) .card { background: #ffffff; }

/* ─── Print ──────────────────────────────────────────────────── */
@media print {
    #site-header, footer, #toast-container { display: none !important; }
}

/* ─── Google Calendar Iframe Dark Mode ──────────────────────── */
/*
 * invert(1)           white → black, dark text → light text
 * hue-rotate(180deg)  Google's blue (~210°) swings to cyan (~30° inverted → ~210°)
 *                     net result is very close to our #0db9f2 primary
 * brightness(0.85)    softens the result to match our dark background tone
 */
.gcal-iframe-wrap iframe {
    filter: invert(1) hue-rotate(180deg) brightness(0.85);
    display: block;
}

/* ─── Google Scheduling Button Override ─────────────────────── */
/* Target whatever button/link Google injects into #gcal-btn-target */
#gcal-btn-target {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
#gcal-btn-target button,
#gcal-btn-target a {
    background-color: #0db9f2 !important;
    color: #101e22 !important;
    font-family: Inter, sans-serif !important;
    font-weight: 700 !important;
    border-radius: 0.75rem !important;
    padding: 0.6rem 1.2rem !important;
    font-size: 0.875rem !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(13, 185, 242, 0.3) !important;
    letter-spacing: 0.01em !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}
#gcal-btn-target button:hover,
#gcal-btn-target a:hover {
    opacity: 0.9 !important;
    transform: scale(1.02) !important;
}
/* Keep any SVG icon in the button black so it reads on our cyan background */
#gcal-btn-target button svg,
#gcal-btn-target a svg {
    filter: brightness(0) !important;
}

/* ─── Reduced Motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}