/* Custom Styles for Delhi Diary — "Terracotta Almanac" editorial theme */

html {
    scroll-behavior: smooth;
}

body {
    font-feature-settings: "liga" 1;
}

/* Diagonal hatch pattern used as a photo placeholder texture */
.stripe-a {
    background-image: repeating-linear-gradient(
        115deg,
        oklch(55% 0.14 35 / 0.16),
        oklch(55% 0.14 35 / 0.16) 2px,
        transparent 2px,
        transparent 10px
    );
}

/* Line clamp utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Event card hover */
.event-card {
    transition: transform 0.25s ease;
}

.event-card:hover {
    transform: translateY(-4px);
}

.event-image {
    display: block;
}

.event-card:hover .event-image {
    filter: saturate(1.08);
}

/* Editorial select boxes (legacy filter controls, kept for any page that still uses them) */
.editorial-select {
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 2px solid oklch(24% 0.045 35);
    font: 500 14px/1 "Work Sans", sans-serif;
    color: oklch(24% 0.045 35);
    padding: 6px 22px 6px 0;
    cursor: pointer;
}

.editorial-select:focus {
    outline: none;
    border-color: oklch(55% 0.14 35);
}

/* Footer links */
.footer-link {
    transition: color 0.2s ease;
}

/* Custom scrollbar, tuned to the ink/paper palette */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: oklch(97% 0.012 50);
}

::-webkit-scrollbar-thumb {
    background: oklch(55% 0.14 35);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: oklch(45% 0.14 35);
}

/* Loading spinner */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid oklch(92% 0.02 50);
    border-top: 3px solid oklch(55% 0.14 35);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    h1 {
        line-height: 1.1;
    }
}

/* ============================================================ */
/* Dark hero sections (masthead + each page's own hero block)    */
/* ============================================================ */

/* Search input placeholder legibility on the dark hero */
.hero-dark input::placeholder {
    color: oklch(97% 0.012 50 / 0.4);
}

/* ============================================================ */
/* Section Index — category icon tiles (homepage)                */
/* ============================================================ */

.category-tile {
    background: oklch(97% 0.012 50);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.category-tile:hover {
    transform: translateY(-2px);
}

.category-tile-icon {
    transition: background-color 0.2s ease;
}

/* ============================================================ */
/* Filter pills — date-range tabs (homepage Featured Events)     */
/* ============================================================ */

.filter-tab {
    cursor: pointer;
}

/* ============================================================ */
/* My Delhi Table — passport cards + map                        */
/* ============================================================ */

.passport-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.passport-card:hover {
    transform: translateY(-3px);
    box-shadow: 6px 6px 0 oklch(24% 0.045 35 / 0.08);
}

.passport-flash {
    animation: passport-flash-kf 1.6s ease;
}

@keyframes passport-flash-kf {
    0%, 100% { box-shadow: none; border-color: oklch(24% 0.045 35); }
    15% { box-shadow: 0 0 0 3px oklch(55% 0.14 35 / 0.35); border-color: oklch(55% 0.14 35); }
}

/* Verdict dots (score visualization) */
.verdict-dots {
    display: inline-flex;
    gap: 3px;
    align-items: center;
}

.verdict-dots .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: oklch(92% 0.02 50);
    border: 1px solid oklch(24% 0.045 35 / 0.25);
    display: inline-block;
}

.verdict-dots .dot.filled {
    background: oklch(55% 0.14 35);
    border-color: oklch(55% 0.14 35);
}

/* Leaflet map container */
#delhi-map {
    background: oklch(92% 0.02 50);
    filter: sepia(12%) saturate(90%) hue-rotate(-4deg);
}

#delhi-map .leaflet-control-attribution {
    font-family: "Work Sans", sans-serif;
    font-size: 10px;
    background: oklch(97% 0.012 50 / 0.85);
}

.leaflet-marker-icon {
    filter: hue-rotate(320deg) saturate(1.4);
}

/* Passport-styled map popup */
.passport-popup .leaflet-popup-content-wrapper {
    background: oklch(97% 0.012 50);
    border: 2px solid oklch(24% 0.045 35);
    border-radius: 0;
    box-shadow: 4px 4px 0 oklch(24% 0.045 35 / 0.15);
}

.passport-popup .leaflet-popup-tip {
    background: oklch(97% 0.012 50);
    border: 2px solid oklch(24% 0.045 35);
}

.passport-popup .leaflet-popup-content {
    margin: 14px 16px;
    font-family: "Work Sans", sans-serif;
    line-height: 1.4;
}

.pp-stamp .pp-name {
    font-family: "Fraunces", serif;
    font-weight: 700;
    font-size: 16px;
    color: oklch(24% 0.045 35);
    margin-bottom: 2px;
}

.pp-stamp .pp-area {
    font-size: 12px;
    color: oklch(24% 0.045 35 / 0.6);
    margin-bottom: 8px;
}

.pp-stamp .pp-verdict {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 8px;
}

.pp-stamp .pp-score {
    font-family: "Fraunces", serif;
    font-weight: 700;
    font-size: 20px;
    color: oklch(55% 0.14 35);
}

.pp-stamp .pp-out {
    font-size: 11px;
    color: oklch(24% 0.045 35 / 0.4);
}

.pp-stamp .pp-dots {
    font-size: 10px;
    color: oklch(55% 0.14 35);
    letter-spacing: 1px;
}

.pp-stamp .pp-quote {
    font-family: "Source Serif 4", serif;
    font-style: italic;
    font-size: 13px;
    color: oklch(24% 0.045 35 / 0.75);
    margin-bottom: 8px;
}

.pp-stamp .pp-more {
    font-size: 12px;
    font-weight: 600;
    color: oklch(55% 0.14 35);
    text-decoration: none;
}

.pp-stamp .pp-more:hover {
    color: oklch(24% 0.045 35);
}