/* Setting up Poppins font for the entire body */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff;
    color: #1f2937;
    /* Dark text for general content */
}

/* Custom class for the primary section spacing */
.main-container {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
}

/* Custom style for the large, bold headline (responsive) */
.bold-headline {
    /* Desktop base (>=1024px) */
    font-size: 3.5rem;
    /* base reference */
    line-height: 1;
    font-weight: 900;
    /* Extra bold */
    letter-spacing: -0.05em;
    /* Tighter spacing */
    margin-bottom: 0.5rem;
    /* Space below the headline */
}

/* Tablet: ~15–20% reduction (768–1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
    .bold-headline {
        font-size: 2.9rem;
    }
}

/* Mobile: ~30–35% reduction (<=767px) */
@media (max-width: 767px) {
    .bold-headline {
        font-size: 2.3rem;
    }
}

/* --- Section headers responsive font size --- */
.text-28px {
    font-size: 28px;
}

/* Desktop base */
@media (max-width: 1023px) and (min-width: 768px) {
    .text-28px {
        font-size: 24px;
    }

    /* ~15% smaller on tablet */
}

@media (max-width: 767px) {
    .text-28px {
        font-size: 19px;
    }

    /* ~32% smaller on mobile */
}

/* ----------------------------------------------- */
/* --- SendScore Meter Styles (Updated Colors) --- */
.progress-ring__circle {
    transition: stroke-dashoffset 0.35s;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

/* Base color for the background ring - light gray for contrast on white card */
.progress-ring__background {
    stroke: #e5e7eb;
    /* Light Gray 200 */
}

/* Define the 5 color classes for the active progress ring (METER COLORS) */
/* These are optimized for the ring/circle visualization */
.score-red {
    stroke: #f4496d;
}

/* 0-20% */
.score-orange {
    stroke: #ff9500;
}

/* 20-40% */
.score-yellow {
    stroke: #ffcd1e;
}

/* 40-60% */
.score-lime {
    stroke: #3BCA6D;
}

/* 60-80% */
.score-green {
    stroke: #00FF7F;
}

/* 80-100% */
/* Utility function to color the text based on score percentage (METER TEXT COLORS) */
/* These are also optimized for the ring/circle text */
.text-score-red {
    color: #f4496d;
}

.text-score-orange {
    color: #ff9500;
}

.text-score-yellow {
    color: #ffcd1e;
}

.text-score-lime {
    color: #3BCA6D;
}

.text-score-green {
    color: #00FF7F;
}

/* --- Text Colors specifically for the Table (Darker for Contrast) --- */
.text-table-red {
    color: #f4496d;
}

/* Darker Red */
.text-table-orange {
    color: #ff9500;
}

/* Darker Orange */
.text-table-yellow {
    color: #ffcd1e;
}

/* Darker Yellow/Olive */
.text-table-lime {
    color: #3BCA6D;
}

/* Darker Lime */
.text-table-green {
    color: #00FF7F;
}

/* Darker Emerald Green */
/* Custom style to hide scrollbar on horizontal scroll container for cleaner look */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* Forecast Score Pill Styling */
.forecast-score-pill {
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.forecast-score-pill:hover {
    transform: scale(1.05);
}

/* Pill background and border colors - independent of score text colors */
.pill-bg-red {
    background-color: #FDDBE2;
    border: 0px solid #f4496d40;
}

.pill-bg-orange {
    background-color: #FFEACC;
    border: 0px solid #ff950040;
}

.pill-bg-yellow {
    background-color: #FFF5D2;
    border: 0px solid #ffcd1e40;
}

.pill-bg-lime {
    background-color: #CDF1D8;
    border: 0px solid #3BCA6D40;
}

.pill-bg-green {
    background-color: #B3FFD9;
    border: 0px solid #00FF7F40;
}

/* Responsive font sizing for pills */
@media (min-width: 768px) {
    .forecast-score-pill {
        font-size: 0.9375rem; /* 15px */
        padding: 5px 14px;
    }
}

@media (min-width: 1024px) {
    .forecast-score-pill {
        font-size: 1rem; /* 16px */
        padding: 6px 16px;
    }
}

/* --- SendScore Row Styling (Crag Detail Forecast Table Only) --- */
/* Text colors for SendScore values in forecast table */
.sendscore-cell-text-red {
    color: #f4496d;
    font-weight: 700;
}

.sendscore-cell-text-orange {
    color: #ff9500;
    font-weight: 700;
}

.sendscore-cell-text-yellow {
    color: #eab308;
    font-weight: 700;
}

.sendscore-cell-text-lime {
    color: #35d2ad;
    font-weight: 700;
}

.sendscore-cell-text-green {
    color: #35C964;
    font-weight: 700;
}

.sendscore-cell-text-gray {
    color: #9ca3af;
    font-weight: 500;
}

/* Background colors for SendScore cells in crag detail forecast table */
/* Sendscore original: rgba(244, 73, 109, 0.5), rgba(255, 149, 0, 0.5), rgba(255, 205, 30, 0.5), rgba(59, 202, 109, 0.5), rgba(0, 255, 127, 0.5) */ 
/* Classic palette: #EF4444 (239,68,68), #FB923C (251, 146, 60), #FACC15 (250, 204, 21), #A3E635 (163, 230, 53), #10B981 (16, 185, 129)*/
/* Combined palette: #f4496d, #ff9500, #eab308, #35d2ad, #35C964 */


/* CSS Variables for SendScore gradient colors - adjust these to change the palette */
:root {
    --sendscore-red: rgb(244, 73, 109, 0.2);
    --sendscore-orange: rgb(255, 149, 0, 0.2);
    --sendscore-yellow: rgb(234, 179, 8, 0.2);
    --sendscore-lime: rgb(53, 210, 173, 0.2);
    --sendscore-green: rgb(53, 201, 100, 0.2);
    --sendscore-gray: rgba(229, 231, 235, 0.2);
}

.sendscore-cell-bg-red {
    background-color: var(--sendscore-red);
}

.sendscore-cell-bg-orange {
    background-color: var(--sendscore-orange);
}

.sendscore-cell-bg-yellow {
    background-color: var(--sendscore-yellow);
}

.sendscore-cell-bg-lime {
    background-color: var(--sendscore-lime);
}

.sendscore-cell-bg-green {
    background-color: var(--sendscore-green);
}

.sendscore-cell-bg-gray {
    background-color: var(--sendscore-gray);
}

/* --- Condensation Risk & Remaining Moisture Pill Colors in crag detail forecast table --- */
/* Condensation Risk Pill Colors */
.condensation-pill-high {
    background-color: #f4496d;
}

.condensation-pill-med {
    background-color: #eab308;
}

.condensation-pill-low {
    background-color: #35C964;
}

/* Remaining Moisture Pill Colors */
.moisture-pill-high {
    background-color: #f4496d;
}

.moisture-pill-med {
    background-color: #eab308;
}

.moisture-pill-low {
    background-color: #35C964;
}