/* =============================================================================
   NFCPT — Custom site CSS
   Tailwind is loaded via CDN in <head>; this file only holds custom rules
   that aren't Tailwind utilities.

   Anything that can be a Tailwind class should be a Tailwind class.
   This file is for:
     - @keyframes
     - complex gradients
     - scroll-margin offsets that depend on header height
     - Material Symbols defaults
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Material Symbols defaults
   -------------------------------------------------------------------------- */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined', sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* -----------------------------------------------------------------------------
   Reusable custom gradients / patterns
   -------------------------------------------------------------------------- */
.hero-gradient {
    background: linear-gradient(
        to right,
        rgba(5, 102, 173, 0.9) 0%,
        rgba(5, 102, 173, 0.4) 60%,
        transparent 100%
    );
}

.hero-gradient-bottom {
    background: linear-gradient(
        to bottom,
        rgba(5, 102, 173, 0.4) 0%,
        rgba(5, 102, 173, 0.9) 100%
    );
}

.hero-pattern {
    background-color: #0566ad;
    background-image: radial-gradient(
        circle at 2px 2px,
        rgba(255, 255, 255, 0.05) 1px,
        transparent 0
    );
    background-size: 24px 24px;
}

.glass-effect {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.dark .glass-effect {
    background: rgba(15, 23, 42, 0.95);
}

/* -----------------------------------------------------------------------------
   Logo marquee (partners strip on About page)
   -------------------------------------------------------------------------- */
.logo-track {
    width: max-content;
    animation: scroll-logos 25s linear infinite;
}

.logo-item {
    flex-shrink: 0;
    padding: 1rem;
}

@keyframes scroll-logos {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.logo-track:hover {
    animation-play-state: paused;
}

/* -----------------------------------------------------------------------------
   Misc helpers
   -------------------------------------------------------------------------- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Sticky offset for in-page anchors when the header is fixed/sticky */
[data-scroll-anchor] {
    scroll-margin-top: 160px;
}

/* Modal fade-in */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}
.animate-fadeIn { animation: fadeIn 0.25s ease-out; }

/* -----------------------------------------------------------------------------
   Line clamping (safety net; Tailwind core includes these in v3.3+)
   -------------------------------------------------------------------------- */
.line-clamp-2,
.line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* Portal details dropdown */
details > summary {
    list-style: none;
}
details > summary::-webkit-details-marker {
    display: none;
}
details[open] > summary > div > span.material-symbols-outlined:last-child {
    transform: rotate(180deg);
}
details > summary > div > span.material-symbols-outlined:last-child {
    transition: transform 0.2s ease;
}

/* Fade-in for hero bands */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-slide-up {
    animation: slideUp 0.4s ease-out;
}