/* assets/style.css */

/* ── Screenshot Fade Carousel ─────────────────────────── */
@keyframes pulse-fade-cycle {
    0%     { opacity: 0; }
    2%     { opacity: 1; }  /* ~1s fade in  */
    11%    { opacity: 1; }  /* hold visible */
    12.5%  { opacity: 0; }  /* ~1s fade out */
    100%   { opacity: 0; }  /* wait for next iteration */
}
.pulse-fadeshow-wrap {
    position: relative;
    height: 380px;
    overflow: hidden;
    border-radius: 16px;
}
.pulse-fadeshow-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    animation: pulse-fade-cycle 64s linear infinite;
    animation-fill-mode: both;
}
.pulse-fadeshow-card img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 16px 16px 0 0;
}
/* card 1 starts slightly past its fade-in so it's visible on page load */
.pulse-fadeshow-card:nth-child(1) { animation-delay:  -2s; }
.pulse-fadeshow-card:nth-child(2) { animation-delay:   6s; }
.pulse-fadeshow-card:nth-child(3) { animation-delay:  14s; }
.pulse-fadeshow-card:nth-child(4) { animation-delay:  22s; }
.pulse-fadeshow-card:nth-child(5) { animation-delay:  30s; }
.pulse-fadeshow-card:nth-child(6) { animation-delay:  38s; }
.pulse-fadeshow-card:nth-child(7) { animation-delay:  46s; }
.pulse-fadeshow-card:nth-child(8) { animation-delay:  54s; }

/* ── Hook Cards Grid ──────────────────────────────── */
.pulse-hook-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 768px) {
    .pulse-hook-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Hook Card Cycle (alongside GIF) ─────────────── */
@keyframes hook-card-cycle {
    0%    { opacity: 0; transform: translateY(12px); }
    4%    { opacity: 1; transform: translateY(0);    }
    13%   { opacity: 1; transform: translateY(0);    }
    17%   { opacity: 0; transform: translateY(-8px); }
    100%  { opacity: 0; transform: translateY(-8px); }
}
.pulse-hook-cycle-wrap {
    position: relative;
    flex: 0 0 44%;
    height: 200px;
    align-self: center;
}
.pulse-hook-cycle-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    animation: hook-card-cycle 24s linear infinite;
    animation-fill-mode: both;
}
.pulse-hook-cycle-card:nth-child(1) { animation-delay:  -2s; }
.pulse-hook-cycle-card:nth-child(2) { animation-delay:   2s; }
.pulse-hook-cycle-card:nth-child(3) { animation-delay:   6s; }
.pulse-hook-cycle-card:nth-child(4) { animation-delay:  10s; }
.pulse-hook-cycle-card:nth-child(5) { animation-delay:  14s; }
.pulse-hook-cycle-card:nth-child(6) { animation-delay:  18s; }

/* ---------------------------------------------------- */
/* 1. Fix container styles for the DatePicker          */
/* (These specific rules are still necessary)          */
/* ---------------------------------------------------- */

/* Remove the white background from inner containers */
.SingleDatePicker, .SingleDatePickerInput, .DateInput {
    background-color: transparent !important;
}

/* Remove the default border from the date picker's wrapper */
.SingleDatePickerInput__withBorder {
    border: none;
    border-radius: 0;
}

/* ---------------------------------------------------- */
/* 2. Combined Styling for ALL Input Fields            */
/* (This single rule replaces 3 of your old rules)     */
/* ---------------------------------------------------- */

/* Targets standard Bootstrap inputs AND the date picker's input */
.form-control,
.DateInput_input {
    height: 38px;
    background-color: #333333; /* Dark background */
    color: #f1f1f1;            /* Light text color */
    border: 1px solid #555555; /* Subtle border */
    border-radius: 4px;        /* Slightly rounded corners */
    padding: 8px 10px;         /* Internal spacing */
    font-family: sans-serif;   /* Ensures consistent font */
    box-sizing: border-box;    /* Ensures padding doesn't break layout */
}

/* ---------------------------------------------------- */
/* 3. Combined Styling for the :focus state            */
/* ---------------------------------------------------- */

.form-control:focus,
.DateInput_input:focus {
    outline: none; /* Removes the default browser outline */
    border-color: #0d6efd; /* Blue border on focus */
    box-shadow: 0 0 5px rgba(13, 110, 253, 0.5); /* Faint glow effect */
}

/* General container for the tabs */
.custom-tabs {
  /* Aligns tabs to the left as shown in the image, with a bottom border */
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid #444; /* Darker border for the container */
  padding-top: 10px;
}

/* The main container for the dcc.Tabs component */
.custom-tabs {
    /* Sets the line that the tabs sit on top of */
    border-bottom: 1px solid #444 !important;
    height: 42px; /* Helps with vertical alignment */
}

/* Base style for ALL tabs, targeting the default Dash class */
.custom-tabs .Tab {
    /* A dark background that matches your app's theme */
    background-color: #2c2c2c;
    color: grey; /* Standard color for unselected text */

    /* Basic border and layout settings */
    border: 1px solid #444;
    border-bottom: none; /* Remove bottom border to sit on the line */
    border-radius: 5px 5px 0 0;
    margin: 0 3px;
    padding: 8px 18px;

    /* Align text inside the tab */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Nudge the tabs down to sit perfectly on the container's border */
    position: relative;
    top: 1px;
}

/* Style for the hovered-over tab */
.custom-tabs .Tab:hover {
    background-color: #383838;
    cursor: pointer;
}

/* Style ONLY for the SELECTED tab */
.custom-tabs .custom-tab--selected {
    /* Make the selected tab a lighter grey, not white */
    background-color: #444;
    /* Use a brighter text color to show it's selected */
    color: #f1f1f1;
    font-weight: bold;
}

/* ================================================== */
/* MOBILE RESPONSIVE — phones < 768px                 */
/* ================================================== */

/* --- Tab bar: horizontal scroll on mobile --- */
.tab--container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;          /* Firefox */
}
.tab--container::-webkit-scrollbar {
    display: none;                  /* Chrome/Safari */
}

@media (max-width: 767px) {

    /* Main content wrapper */
    .pulse-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-bottom: 32px !important;
    }

    /* Overview 3-column grid → 1 column */
    .overview-grid-3col {
        grid-template-columns: 1fr !important;
    }

    /* Dash tab labels — smaller & no extra padding */
    .tab--container .tab {
        padding: 8px 12px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        min-width: fit-content !important;
    }

    /* Reduce inner card padding on all dark cards */
    [style*="border-radius: 24px"],
    [style*="borderRadius: 24px"] {
        padding: 16px !important;
    }

    /* Marketing hero text — clamp already handles h1; fix the paragraph */
    [style*="fontSize: 19px"] {
        font-size: 15px !important;
    }

    /* Page header large line */
    [style*="fontSize: 26px"] {
        font-size: 20px !important;
    }

    /* Flex rows with hard widths — let them wrap */
    [style*="display: flex"] {
        flex-wrap: wrap !important;
    }

    /* Options / futures header stat rows — stack cleanly */
    [style*="gap: 20px"] {
        gap: 10px !important;
    }

    /* Pricing cards — stack instead of side-by-side */
    [style*="minWidth: 220px"] {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Inputs full-width on mobile */
    #capture-email,
    #capture-name,
    #gate-email-input {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Upgrade form button rows — stack */
    [style*="maxWidth: 680px"],
    [style*="maxWidth: 820px"],
    [style*="maxWidth: 760px"] {
        max-width: 100% !important;
    }

    /* Charts — reduce fixed heights to fit screen */
    .js-plotly-plot {
        max-width: 100% !important;
    }

    /* Disclaimer banner — slightly smaller */
    [style*="padding: 9px 24px"] {
        padding: 8px 12px !important;
        font-size: 10.5px !important;
    }

    /* Gate / drought modal inner card — full width */
    [style*="maxWidth: 520px"] {
        max-width: calc(100vw - 48px) !important;
    }
}

/* Tablet: 768px – 1023px tweaks */
@media (min-width: 768px) and (max-width: 1023px) {
    .pulse-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .overview-grid-3col {
        grid-template-columns: 1fr 1fr !important;
    }
}