/* IHTP EVENT CALENDAR — v3.7
   (multi-category colors + halo fix + NEW event-card look:
    gradient dark-left -> light-right, white glow on the right edge)

   v3.7 — GLOW ANIMATION ONLY ON HOVER (Aug 2026)
     The glow circle used to animate constantly by default. Client
     Fix: the animation declaration was removed from the base
     .ihtp-cal-event-card::before rule and moved to
     .ihtp-cal-event-card:hover::before (desktop + mobile variants).
     At rest the glow now sits still in its static position; nothing
     else about size/position/color changed. */

/* -----------------------------------------------------------
   FONT — "Nexa"
   -----------------------------------------------------------
   Upload the actual Nexa font files into:
       wp-content/themes/YOUR-THEME/fonts/
   and keep these filenames, or update the paths below.
   If Nexa is ALREADY loaded elsewhere on the site (e.g. via
   Elementor Global Fonts), delete this @font-face block.
------------------------------------------------------------ */
@font-face {
    font-family: 'Nexa';
    src: url('../fonts/Nexa-Regular.woff2') format('woff2'),
         url('../fonts/Nexa-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nexa';
    src: url('../fonts/Nexa-Bold.woff2') format('woff2'),
         url('../fonts/Nexa-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.ihtp-events-calendar-wrap { padding: 40px 0; }

/* Force Nexa on every element inside the calendar */
.ihtp-events-calendar-wrap,
.ihtp-events-calendar-wrap * {
    font-family: 'Nexa', sans-serif !important;
}

.ihtp-cal-title { text-align: center; font-size: 32px; font-weight: 700; margin: 0 0 40px 0; }
.ihtp-cal-empty, .ihtp-cal-no-events { text-align: center; color: #aaa; font-size: 12px; padding: 10px 0; }

/* ===========================================================
   CAROUSEL LAYOUT
   Desktop: 3 slides | Tablet: 2 | Mobile: 1 (arrows on top)
   =========================================================== */
.ihtp-cal-carousel {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}
.ihtp-cal-viewport {
    flex: 1;
    /* Only clip horizontally so off-screen slides stay hidden for the
       carousel — clipping vertically too was cutting off the corner
       glow on the event cards, since the glow bleeds past the card's
       edge and the viewport's box hugs the content tightly. */
    overflow-x: hidden;
    overflow-y: visible;
    min-width: 0;
}
.ihtp-cal-track {
    display: flex;
    align-items: stretch;              /* equal height slides */
    gap: 24px;
    transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.35, 1);
    will-change: transform;
}
.ihtp-cal-slide {
    flex: 0 0 calc((100% - 48px) / 3); /* desktop: 3 per view */
    display: flex;
    min-width: 0;
}
.ihtp-cal-slide .ihtp-cal-card { width: 100%; }

/* Round arrow buttons */
.ihtp-cal-nav {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid #E4E2DD;
    background: #ffffff;
    color: #0F1829;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 4px 14px rgba(15, 24, 41, 0.08);
    transition: background 0.2s, color 0.2s, opacity 0.2s, transform 0.15s;
}
.ihtp-cal-nav:hover:not(:disabled) {
    background: #0F1829;
    color: #ffffff;
    transform: scale(1.06);
}
.ihtp-cal-nav:disabled { opacity: 0.35; cursor: default; }
.ihtp-cal-nav svg { pointer-events: none; }

/* (Legacy) old 3-month grid — harmless to keep */
.ihtp-cal-months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
}

/* ===========================================================
   MONTH CARD
   =========================================================== */
.ihtp-cal-card {
    background: #ffffff;
    color: #0F1829;
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 24px rgba(15, 24, 41, 0.06);
}

.ihtp-cal-header { text-align: center; padding-bottom: 14px; border-bottom: 1px solid #E4E2DD; margin-bottom: 18px; }
.ihtp-cal-month-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #0F1829;
    text-transform: uppercase;
}

.ihtp-cal-weekdays { display: grid; grid-template-columns: repeat(7,1fr); text-align: center; font-size: 12px; font-weight: 600; color: #B3B0A8; margin-bottom: 10px; }

.ihtp-cal-grid { display: grid; grid-template-columns: repeat(7,1fr); row-gap: 6px; margin-bottom: 8px; }

/* Day cell: max-width prevents the last column from being
   cut off when the card gets narrow */
.ihtp-cal-day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    width: 34px;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 400;
    color: #0F1829;
    transition: box-shadow 0.15s;
    /* Halo/ring fix: kill any inherited border/shadow/filter on the base cell too,
       not just the link states below — theme globals were leaking a ring here. */
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
}
.ihtp-cal-day::before,
.ihtp-cal-day::after {
    content: none !important;
    box-shadow: none !important;
    border: none !important;
}
.ihtp-cal-day-muted { color: #D5D2CB; }
.ihtp-cal-day-start, .ihtp-cal-day-end, .ihtp-cal-day-range { font-weight: 700; color: #fff; }

/* ===========================================================
   EVENT TYPE COLORS  (matches Figma: node 2157-5071)
   Color is decided by which product category the item belongs
   to (see ihtp_get_event_type() in the PHP):
     certificacao                                -> certificado (golden brown)
     eventos                                      -> evento      (green)
     curso / cursos-de-desenvolvimento-pessoal... -> curso       (navy)
     audiobook / ferramentas / anything else      -> outro       (neutral)

   Per Figma, within one event's date range:
     - START day            -> solid, full brand color
     - MIDDLE ("range") days -> a LIGHT tint of that same color
     - END day               -> the SAME light tint (not solid)
     - a ONE-DAY event (start === end) stays solid, full color

   NOTE: no glow/halo/border on the DAY CELLS — plain flat fill only,
   as confirmed against Figma. (The glow lives on the event cards.)

   ---------------------------------------------------------------
   ORDERING FIX (Aug 2026): the PHP can put BOTH "ihtp-cal-day-start"
   AND "ihtp-cal-day-range"/"ihtp-cal-day-end" classes on the same
   span (same as it already does for one-day events). Because both
   selectors below have identical specificity (0,2,0), whichever
   rule is declared LAST in the stylesheet wins the cascade.
   Previously "start" was declared first and "range/end" second, so
   the light tint was silently overriding the solid start color —
   that's why the start day was rendering light instead of solid.
   Fix: declare "range/end" FIRST, then "start" so start always wins,
   and keep the same-day (start+end) override last of all so a
   one-day event still wins over everything.

   ---------------------------------------------------------------
   NOTE: the EVENT CARD backgrounds are NOT defined here — they live
   in the "EVENT CARDS" section further down (flat color + a corner
   glow), and are duplicated inline in the PHP shortcode.
   =========================================================== */

/* ---- Certificado — golden brown #6F4F1D / light #DBD3C6 ---- */
.ihtp-cal-day-range.ihtp-cal-type-certificado,
.ihtp-cal-day-end.ihtp-cal-type-certificado {
    background: #DBD3C6;
    color: #6F4F1D;
}
.ihtp-cal-day-start.ihtp-cal-type-certificado {
    background: #6F4F1D;
}

/* ---- Evento — green #6F7559 / light #DBDCD6 ---- */
.ihtp-cal-day-range.ihtp-cal-type-evento,
.ihtp-cal-day-end.ihtp-cal-type-evento {
    background: #DBDCD6;
    color: #6F7559;
}
.ihtp-cal-day-start.ihtp-cal-type-evento {
    background: #6F7559;
}

/* ---- Curso / Cursos de desenvolvimento pessoal — navy #0F1829 / light #C3C5CA ---- */
.ihtp-cal-day-range.ihtp-cal-type-curso,
.ihtp-cal-day-end.ihtp-cal-type-curso {
    background: #C3C5CA;
    color: #0F1829;
}
.ihtp-cal-day-start.ihtp-cal-type-curso {
    background: #0F1829;
}

/* ---- Outro (Audiobook / Ferramentas / anything else) — neutral #0F182940 ---- */
/* Client only supplied one (already translucent) color for this group,
   so start/range/end all share it — no separate light variant needed. */
.ihtp-cal-day-start.ihtp-cal-type-outro,
.ihtp-cal-day-range.ihtp-cal-type-outro,
.ihtp-cal-day-end.ihtp-cal-type-outro {
    background: #0F182940;
    color: #0F1829;
}

/* ---- ONE-DAY events (start === end, same <span> gets BOTH classes) ----
   Must come AFTER every rule above (including the reordered "start"
   rules) so it always wins and stays solid/dark, instead of falling
   back to either the light "end/range" tint OR losing to "start". ---- */
.ihtp-cal-day-start.ihtp-cal-day-end.ihtp-cal-type-certificado {
    background: #6F4F1D; color: #fff;
}
.ihtp-cal-day-start.ihtp-cal-day-end.ihtp-cal-type-evento {
    background: #6F7559; color: #fff;
}
.ihtp-cal-day-start.ihtp-cal-day-end.ihtp-cal-type-curso {
    background: #0F1829; color: #fff;
}
.ihtp-cal-day-start.ihtp-cal-day-end.ihtp-cal-type-outro {
    background: #0F182940; color: #0F1829;
}

/* Reset EVERY state hard with !important — the theme's global
   link/button styles were leaking a white ring/halo onto these
   spans (visible in the live site vs. Figma, which has none).
   Because .ihtp-cal-day-link is just a <span onclick="...">, not a
   real <button>, this ring was coming from a theme-wide selector
   with higher specificity or later source order, so plain (non-
   !important) resets weren't enough.

   Halo fix (v2.1): also killing `filter` (drop-shadow can produce
   a soft ring that box-shadow resets don't touch) and the
   pseudo-elements, since some themes render focus/hover rings via
   ::before/::after rather than box-shadow. */
.ihtp-cal-day-link,
.ihtp-cal-day-link::before,
.ihtp-cal-day-link::after,
.ihtp-cal-day-link:hover,
.ihtp-cal-day-link:focus,
.ihtp-cal-day-link:focus-visible,
.ihtp-cal-day-link:active,
.ihtp-cal-day-link:visited {
    cursor: pointer;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
.ihtp-cal-day-link::before,
.ihtp-cal-day-link::after { content: none !important; }
.ihtp-cal-day-link:hover { opacity: 0.85; transform: scale(1.12); transition: all 0.15s; }
/* Selected/clicked day: no border box, no glow — just plain fill,
   matching Figma exactly (no special "active" decoration). */
.ihtp-day-active,
.ihtp-day-active:hover,
.ihtp-day-active:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    filter: none !important;
    -webkit-filter: none !important;
}

.ihtp-cal-divider-line { border: none; border-top: 1px solid #E4E2DD; margin: 16px 0 12px; }

/* ===========================================================
   EVENT CARDS — v3.7
   Flat base color is printed inline on each card by
   ihtp_card_bg(), together with --ihtp-glow / --ihtp-glow-a.
   The glow is a blurred circle (::before) that travels
   DIAGONALLY across the card and back — but ONLY on hover now.
   At rest it stays still in its static Figma position.
   =========================================================== */
.ihtp-cal-event-card{
    position:relative;
    overflow:hidden;          /* keeps the glow strictly inside the card */
    isolation:isolate;
    margin-top:10px;
    border-radius:8px;
    padding:14px 16px;
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    transition:transform .25s ease;
}

/* The glow. Sits just past the bottom-right corner (static Figma
   look) and stays still at rest. Animation only kicks in on hover
   (see .ihtp-cal-event-card:hover::before below). */
.ihtp-cal-event-card::before{
    content:"";
    position:absolute;
    width:240px;
    height:240px;
    border-radius:50%;
    right:-90px;
    bottom:-140px;
    background:radial-gradient(circle,
        rgba(var(--ihtp-glow), var(--ihtp-glow-a)) 0%,
        rgba(var(--ihtp-glow), calc(var(--ihtp-glow-a) * 0.55)) 45%,
        rgba(var(--ihtp-glow), 0) 70%);
    filter:blur(45px);
    z-index:0;
    pointer-events:none;
}
.ihtp-cal-event-card:hover::before{
    animation:ihtpGlowDiag 8s ease-in-out infinite;
}
@keyframes ihtpGlowDiag{
    0%   { transform:translate(0, 0); }
    50%  { transform:translate(-70%, -20%); }
    100% { transform:translate(0, 0); }
}
@media (prefers-reduced-motion: reduce){
    .ihtp-cal-event-card:hover::before{animation:none;}
}

/* Content sits above the glow */
.ihtp-cal-event-card > *{position:relative;z-index:2;}

/* Every bit of text on a card is white, in every state. */
.ihtp-cal-event-card,
.ihtp-cal-event-card *,
.ihtp-cal-event-card:hover,
.ihtp-cal-event-card:hover *,
.ihtp-cal-event-card:focus,
.ihtp-cal-event-card:visited{
    color:#fff !important;
}

/* Hover: a small lift, nothing else. No shadow, no shine, no blur. */
.ihtp-cal-event-card:hover{
    transform:translateY(-2px);
    box-shadow:none !important;
}

/* Card contents */
.ihtp-cal-event-date{
    flex-shrink:0;
    background:rgba(255,255,255,.18);
    border-radius:999px;
    padding:5px 12px;
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
}
.ihtp-cal-event-info{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:3px;
    font-size:13px;
    line-height:1.4;
}
.ihtp-cal-event-info strong{font-size:13px;font-weight:700;}
.ihtp-cal-event-desc{opacity:.85;font-size:11px;}
.ihtp-cal-event-arrow{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:30px; height:30px;
    border-radius:50%;
    background:rgba(255,255,255,.14);
    transition:background .2s;
}
.ihtp-cal-event-card:hover .ihtp-cal-event-arrow{background:rgba(255,255,255,.30);}

/* Mobile: smaller circle, shorter travel — still hover-only */
@media (max-width:768px){
    .ihtp-cal-event-card::before{
        width:170px;
        height:170px;
        right:-60px;
        bottom:-100px;
        filter:blur(32px);
    }
    .ihtp-cal-event-card:hover::before{
        animation-name:ihtpGlowDiagMobile;
    }
    @keyframes ihtpGlowDiagMobile{
        0%   { transform:translate(0, 0); }
        50%  { transform:translate(-60%, -18%); }
        100% { transform:translate(0, 0); }
    }
}

/* Detail panel animation */
/* .ihtp-cal-detail-panel { animation: ihtpSlide 0.2s ease; } */
@keyframes ihtpSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
/* Tablet: 2 months per view */
@media (max-width: 900px) {
    .ihtp-cal-months { grid-template-columns: repeat(2,1fr); }
    .ihtp-cal-slide { flex: 0 0 calc((100% - 24px) / 2); }
}

/* Mobile: NO arrows — swipe with your finger instead.
   Native horizontal scroll + scroll-snap = pure CSS,
   works even if the carousel JavaScript never runs.
   !important beats the inline <style> in the PHP shortcode
   AND the inline transform that JS puts on the track. */
@media (max-width: 600px) {
    .ihtp-events-calendar-wrap { padding: 24px 12px !important; }
    .ihtp-cal-months { grid-template-columns: 1fr; }

    .ihtp-cal-carousel {
        display: block !important;
        position: relative !important;
    }

    /* Arrows: small, overlaid on top of the calendar card, not
       pushed outside the layout */
    .ihtp-cal-nav {
        display: flex !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 30px !important;
        height: 30px !important;
        z-index: 5 !important;
        box-shadow: 0 3px 10px rgba(0,0,0,.18) !important;
    }
    .ihtp-cal-nav svg { width: 14px !important; height: 14px !important; }
        .ihtp-cal-nav-prev { left: 6px !important; }
    .ihtp-cal-nav-next { right: 6px !important; }
 

    /* Viewport becomes a native swipe-scroller */
    .ihtp-cal-viewport {
        overflow-x: auto !important;
        overflow-y: visible !important;     /* let the glow bleed, only clip sideways */
        width: 100% !important;
        max-width: 100% !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;              /* hide scrollbar (Firefox) */
    }
    .ihtp-cal-viewport::-webkit-scrollbar { display: none; } /* Chrome/Safari */

    .ihtp-cal-track {
        transform: none !important;         /* cancel JS transform */
        transition: none !important;
        gap: 16px !important;
    }

    /* Each month = full width, snaps into place while swiping */
    .ihtp-cal-slide {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .ihtp-cal-card { padding: 18px 14px !important; width: 100% !important; }
    .ihtp-cal-day { height: 32px; width: 32px; }
}