/* Import a handwritten font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&display=swap');

/* =======================
   dl-events-hub.css — List-only (no FullCalendar)
   ======================= */

/* ---- Banner ---- */
.dl-list-inline-banner{
  margin:.4rem 0 .6rem !important;
  text-align:center;
  line-height:1.25;
  font-weight:400;
}
.dl-list-inline-banner a{
  color:#111827;
  text-decoration:none;
  border-bottom:1px dotted #9ca3af
}
.dl-list-inline-banner strong{font-weight:700}

/* ---- Container ---- */
.dl-events-mount{ 
  width:100%;
  /* CRITICAL ANCHOR POINT for absolute/fixed elements */
  position: relative !important;
  /* *** DESKTOP PADDING: Placeholder. Will be set more accurately below. *** */
  padding-top: 150px; 
}
.dl-no-events{ color:#6b7280; margin:.75rem 0 }

/* ==========================
   DAY HEADER BAR (flat grey)
   ========================== */
.dl-day-bar{
  background:#f3f4f6;
  border-top:1px solid #e5e7eb;
  border-bottom:1px solid #e5e7eb;
  padding:.55rem .75rem;
  margin:.5rem 0 .25rem;
  display:flex;
  align-items:center;
  gap:.75rem;
}
.dl-day-date{
  font-weight:700;
  color:#111827;
  white-space:nowrap;
  flex:1 1 auto;
  text-align:left;
}
.dl-day-weekday{
  color:#111827;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
  flex:0 0 auto;
  margin-left:auto;
  text-align:right;
}

/* ==========================
   LIST ROWS (dot → image → main)
   ========================== */
.dl-event-row{
  position:relative;
  display:grid;
  grid-template-columns:auto 56px 1fr; /* dot | image | main */
  align-items:center;
  gap:.7rem;
  padding:.55rem .75rem;
  border:0;
  background:transparent;
}
.dl-event-row + .dl-event-row{
  border-top:1px solid #e5e7eb; /* single thin divider between events */
}

/* Dot (availability) */
.dl-list-dot{width:.65rem;height:.65rem;border-radius:999px;display:inline-block}
.dl-list-dot.ok{background:#16a34a}   /* available = green */
.dl-list-dot.bad{background:#9ca3af}  /* sold out = grey */

/* Image */
.dl-list-img{width:56px;height:56px;border-radius:.4rem;overflow:hidden}
.dl-list-img img{width:100%;height:100%;object-fit:cover;display:block}

/* Main (title + time) */
.dl-list-main{
  display: flex;
  flex-direction: column;
}
.dl-list-title{
  font-weight:600;line-height:1.2;margin-bottom:.15rem;display:inline-block;
  text-decoration:none;color:#111827;border-bottom:0;background-image:none;box-shadow:none;
  border: none !important;
  background: none !important;
}
.dl-list-time{
  color:#6b7280;font-size:.92em;
  border: none !important;
  background: none !important;
  margin-top: 2px;
}

/* Sold-out (strike + subtle dim) */
.is-soldout .dl-list-title{ text-decoration: line-through; color:#6b7280; }
.is-soldout{ opacity:.95; }

/* Sold-out badge (far right, overlay) - Unified Styling */
.dl-soldout-badge{
  position: absolute;
  right: 8px; 
  top: 50%;
  transform: translateY(-50%);
  padding: 0.18rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffffff; 
  background: #4b5563; 
  border: 1px solid #4b5563;
  border-radius: 0.4rem;
  pointer-events: none;
  z-index: 1;
}

/* Kill the animated background underline on event titles only */
.dl-list-title,
.dl-list-title:before,
.dl-list-title:after{
  background-image: none !important;
  background-size: 0 0 !important;
  box-shadow: none !important;
  text-decoration: none; 
}

/* Keep a subtle hover highlight without grey fill */
.dl-event-row:hover .dl-list-title{
  text-decoration: underline;            
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* (Optional) Minor row hover feedback without bars */
.dl-event-row:hover{
  background: transparent;
  filter: brightness(0.98);
}


/* ==========================
   MONTH TOOLBAR (Unified Large Version)
   ========================== */
.dl-events-toolbar.dl-toolbar-lg{
  /* *** CRITICAL: Make the toolbar float and stick to the top *** */
  position: fixed; 
  /* DESKTOP TOP POSITION: Increased aggressively to clear theme header */
  top: 150px; /* Try a higher value to ensure it clears the desktop header/breadcrumbs */
  left: 0;
  right: 0; 
  width: 100%; 
  /* Extremely high z-index to ensure it is visible on top of all other elements */
  z-index: 999999; /* Even more aggressive Z-Index for the theme conflict */
  background: #ffffff; 
  border-bottom:1px solid #e5e7eb;
  /* --- Existing Flexbox styles --- */
  display:flex; 
  align-items:center; 
  justify-content:space-between;
  gap:12px; 
  padding:12px 8px;
}

/* Month Title Styled as a Button */
.dl-toolbar-title{
  font-size: 1.35rem !important;
  font-weight:600; line-height:1.2; text-align:center; flex:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  cursor: pointer;
  user-select: none;
  /* NEW: Style to look like a button / clickable area */
  padding: 8px 10px;
  border: 1px solid #d1d5db; 
  border-radius: 10px;
  background: #f9fafb; 
  transition: background 0.15s ease-in-out;
}
.dl-toolbar-title:hover {
  border-color: #9ca3af; 
  background: #f3f4f6; 
}
/* New Styles for Abbreviated/Bold Month */
.dl-toolbar-title .dl-month-abbr {
  font-weight: bold;
  font-size: 1.4em;
  padding-right: 0.25em; 
}

.dl-toolbar-left, .dl-toolbar-right{ 
  display:flex; align-items:center; gap:8px; 
}

/* Button Styles (Dark Gray Background, White Arrow) */
.dl-btn{
  min-width: 48px !important;
  min-height: 44px !important;
  padding: 8px 14px !important;
  border:1px solid #4b5563; 
  background: #4b5563; 
  color: #ffffff; 
  border-radius:10px; cursor:pointer;
  font-size: 1.25rem !important; 
  font-weight: 800; 
  line-height:1; 
}

/* Hover/Active State: Darker Gray */
.dl-btn:hover,
.dl-btn:active,
.dl-btn:focus{ 
  background: #374151; 
  border-color: #374151;
}

/* The 'Today' button should stand out slightly different, keeping the hover/active state the same */
.dl-btn-today{ 
  background: #374151;
  border-color: #374151;
} 
.dl-btn-today:hover{ 
  background: #1f2937;
  border-color: #1f2937;
}

/* Disabled State: Light Grey with no active/hover effects */
.dl-btn-today.is-disabled,
.dl-btn:disabled,
.dl-btn.is-disabled{
  background: #e5e7eb; 
  border-color: #d1d5db; 
  color: #9ca3af; 
  cursor:default; pointer-events:none; opacity:1; 
  font-weight: 600; 
}

/* ==========================
   MONTH PICKER DROP-DOWN STYLES
   ========================== */
.dl-month-picker {
    /* Anchor to the closest positioned ancestor, which is .dl-events-mount */
    position: absolute;
    /* The JS handles the 'top' position to place it right below the floating toolbar */
    left: 0;
    right: 0;
    width: 100%;
    
    max-height: 250px; 
    overflow-y: auto;
    background: #ffffff; 
    border: 1px solid #e5e7eb;
    border-top: none;
    z-index: 10; /* Lower than the toolbar's z-index but higher than normal content */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.dl-picker-month {
    width: 100%;
    padding: 10px 15px;
    text-align: center; 
    background: transparent;
    border: none;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    font-size: 1rem;
    color: #111827;
    font-weight: 500;
}

.dl-picker-month:hover {
    background: #f3f4f6; 
    font-weight: 600;
}

.dl-picker-month.is-current {
    background: #eef2f7; 
    font-weight: 700;
    color: #374151;
}

/* Hides the list scroll bars in browsers that support it */
.dl-month-picker::-webkit-scrollbar {
    width: 5px;
}
.dl-month-picker::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 5px;
}


/* ==========================
   DAY BARS & LIST ROWS (Unified)
   ========================== */
.dl-day-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 8px; background:#f3f4f6; color:#111827;
  border:1px solid #e5e7eb; border-radius:6px; margin:12px 0 8px;
}
.dl-day-date{ font-weight:600; }
.dl-day-weekday{ color:#374151; }

/* List rows */
.dl-event-row{ display:grid; grid-template-columns: 10px 80px 1fr; gap:12px; align-items:center; padding:10px 0; position:relative; }
.dl-list-img{ width:80px; height:80px; } 
.dl-list-img img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:6px; }

/* Sold-out badge positioning refinement */
.dl-soldout-badge{ right:8px; top:50%; transform: translateY(-50%); }

.dl-list-dot{ width:10px; height:10px; border-radius:999px; display:inline-block; }
.dl-list-dot.ok{ background:#10b981; }
.dl-list-dot.bad{ background:#9CA3AF; }
.dl-list-title{ display:block; font-weight:600; line-height:1.25; }
.dl-list-time{ font-size:.95rem; color:#6b7280; margin-top:4px; }


/* ====================================
   MOBILE SPECIFIC STYLES AND OVERRIDES
   ==================================== */

/* Hide theme elements for max space */
.site-inner .entry-header {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.site-inner .entry-header .entry-title {
  display: none;
}
.breadcrumb { 
  display: none !important; 
  height: 0 !important;
  overflow: hidden !important;
}


@media (max-width: 768px) {
    /* MOBILE TOOLBAR POSITION: Clear the mobile header (estimated 50px tall) */
    .dl-events-toolbar.dl-toolbar-lg {
        /* NEW: Set top to clear the site's main mobile menu/header */
        top: 65px !important; 
    }
    
    /* *** CRITICAL MOBILE PADDING FIX: Reduce the padding on the content container *** */
    .dl-events-mount {
        /* Set to a value that clears the 65px top offset plus toolbar height (approx 46px) 
           65 + 46 = 111px. Let's use 115px for safety. */
        padding-top: 115px !important; 
    }


    /* WP container resets (Mobile focus) */
    .entry-header,  
    .site-inner,
    .site-container,
    .content,
    .content-sidebar-wrap {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Mobile list row tweaks */
    .dl-event-row{
      grid-template-columns: 10px 64px 1fr;
      gap:10px;
    }
    .dl-list-img{
      width:64px;
      height:64px;
    }
}