/* Base Elements */
article img {
    max-width: 100%;
    height: auto;
    border-radius: 2rem;
  }

/* Images in talks content (but not profile images) */
.card-body img:not(.profile-image) {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    margin-top: 1rem;
    margin-bottom: 1rem;
}
  
  /* Typography */
  .day {
    line-height: 1;
  }
  
  /* Interactive Elements */
  .form-check-input,
  .theme-btn,
  .expand-header {
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
  }
  
  .theme-btn,
  .expand-header {
    background: none;
    border: none;
    padding: 8px;
    border-radius: var(--border-radius);
  }
  
  .theme-btn:hover,
  .expand-header:hover {
    background-color: var(--light-secondary);
  }
  
  /* Theme Toggle */
  .theme-toggle {
    position: relative;
  }
  
  .toggle-icon {
    width: 24px;
    height: 24px;
    stroke: var(--light);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }
  
  /* Timeline Component */
  .timeline {
    position: relative;
    padding-left: 30px;
  }
  
  .timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    height: calc(100% - 10px);
    width: 2px;
    background-color: var(--primary);
  }
  
  .timeline-item {
    position: relative;
    margin-bottom: 30px;
  }
  
  .timeline-marker {
    position: absolute;
    left: -34px;
    top: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    background-color: var(--primary);
    transition: transform 0.3s ease;
  }
  
  .timeline-marker:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 5px rgba(var(--primary), 0.2);
  }
  

  /* Layout Components */
  #expandable-header {
    transition: all 0.3s ease;
  }
  
  /* Media Queries */
  @media (max-width: 768px) {
    .toggle-icon {
      width: 20px;
      height: 20px;
    }
  }

  .disabled-card {
    opacity: 0.7;
    pointer-events: none;
  }

  .construction-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--primary);
    color: var(--light);
    padding: 2rem 4rem;
    z-index: 2;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    text-align: center;
    border-radius: var(--border-radius);
    white-space: nowrap;
  }

  .btn.disabled {
    pointer-events: none;
    opacity: 0.65;
  }
  .profile-image-wrapper {
    /* Mobile-first: larger circle, centered, no cropping */
    width: clamp(200px, 60vw, 400px); /* on small screens up to 60% viewport, min 200px */
    aspect-ratio: 1 / 1; /* ensures a perfect circle regardless of width */
    position: relative;
    background-color: var(--primary);
    border-radius: 50%;
    margin: 1rem auto; /* equal top and bottom spacing on mobile */
}

.profile-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* prevent cropping while keeping full image visible */
    border-radius: 50%;
}

/* Tablet & up: fill most of its column and offset slightly */
@media (min-width: 768px) {
    .profile-image-wrapper {
        width: clamp(200px, 90%, 400px); /* up to 90% of its column */
        margin: 0; /* reset centering */
        transform: translate(-10%, -5%); /* proportional offset to overlap card edges */
    }
}

/* Sticky header behaviour */
#site-header {
  position: sticky;
  top: 0;
  z-index: 1020; /* above content */
  transition: transform 0.3s ease-in-out;
}

#site-header.header-hidden {
  transform: translateY(-100%);
}

/* ---- Blog list styles (migrated from list.html) ---- */
.date-header {
    padding-bottom: 0.5rem;
    border-bottom: none; /* removed old underline */
    margin-top: 0.5rem;
    margin-bottom: 0.25rem !important; /* reduce gap to first time */
}

/* Tighter spacing for posts inside the list view */
.date-content .post {
    margin-top: 0.25rem !important; /* reduce gap between date and time */
    margin-bottom: 0.5rem !important; /* tighter gap before separator */
    padding-bottom: 0.5rem;
}

/* Reduce space between days by overriding Bootstrap mb-4 on the day container */
.day-card {
    margin-bottom: 0.5rem !important;
}

/* Subtle divider between days, placed above the date */
.day-sep {
    border: 0;
    height: 6px; /* match the dot diameter space */
    /* tiny circular dots, horizontally repeated */
    background-image: radial-gradient(circle, var(--promo) 2px, transparent 2.1px);
    background-size: 14px 6px; /* horizontal spacing 14px, vertical fits height */
    background-repeat: repeat-x;
    background-position: center center;
    opacity: 1;
    margin: 0.85rem 0 0.65rem;
}

.date-badge {
    font-size: 1rem;
    font-weight: 500;
}

.expand-button {
    background: transparent;
    border: none;
    color: var(--primary);
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border-radius: var(--border-radius);
}

.expand-button:hover {
    background-color: var(--promo);
}

.expand-icon {
    transition: transform 0.3s ease;
}

.expand-button.active .expand-icon {
    transform: rotate(180deg);
}

/* Global toggle-all button */
#toggle-all-button {
    position: relative;
    display: inline-block;
    width: 64px; /* track width */
    height: 32px; /* track height */
    padding: 0;
    border: none;
    border-radius: 32px;
    background-color: var(--promo);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#toggle-all-button.active {
    background-color: var(--primary);
}

#toggle-all-button .switch-handle {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 26px;
    height: 26px;
    background: var(--light);
    border-radius: 50%;
    transition: transform 0.3s ease;
    z-index: 2;
}

#toggle-all-button.active .switch-handle {
    transform: translateX(32px);
}

/* visually hide the legacy text node */
#toggle-all-button .expand-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Icon positioning */
#toggle-all-button .toggle-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    stroke-width: 2;
    pointer-events: none;
}

#toggle-all-button .icon-read {
    right: 8px;
}

#toggle-all-button .icon-compact {
    left: 8px;
}

/* Icon color behaviour */
#toggle-all-button:not(.active) .icon-compact,
#toggle-all-button.active .icon-read {
    stroke: var(--light);
}

#toggle-all-button.active .icon-compact,
#toggle-all-button:not(.active) .icon-read {
    stroke: var(--dark);
    opacity: 0.6;
}

/* Post transition */
.post-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    transition: max-height 0.5s ease, opacity 0.5s ease, margin 0.5s ease;
}

.date-content.expanded .post-content {
    max-height: 5000px;
    opacity: 1;
    margin-top: 1rem;
}

  /* Tiny circle separator between posts in list view */
  .date-content article.post + article.post::before {
      content: '• • •';
      display: block;
      text-align: center;
      color: var(--promo); /* keep existing accent color */
      font-size: 9px; /* tiny circles */
      letter-spacing: 0.35rem; /* a bit more space between them */
      line-height: 1;
      margin: 0.85rem 0 0.65rem; /* slight breathing room around separator */
      /* subtle strengthening without changing hue */
      opacity: 1;
  }

/* Post card spacing */
.post {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: none;
}

/* Day divider */
.date-content {
    padding-bottom: 1rem;
}

/* Sticky sidebar and tag spacing */
@media (min-width: 992px) {
    #blog-sidebar {
        position: sticky;
        top: 4rem;
    }
}

.sidebar-tags a {
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
}

/* Sidebar cards should size to their content rather than stretch */
#blog-sidebar .card {
    height: auto;
}

.sidebar-tags a {
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
}

/* Sidebar search adjustments */
#blog-sidebar #search {
    width: 100%;
}

#blog-sidebar #search-input {
    font-size: 18px;
    height: 38px;
}

/* Mobile controls styling */
.mobile-controls {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mobile-controls #toggle-all-button {
    margin-bottom: 1rem;
}

/* Desktop controls styling */
.desktop-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* width: 100%; */
}

.desktop-controls #toggle-all-button-desktop {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
}

/* Adjust sidebar spacing for mobile */
@media (max-width: 991px) {
    #blog-sidebar {
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: 1px solid var(--promo);
    }
}

/* Right-align the toggle button in the sidebar for all screen sizes */
.sidebar-toggle-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
}

.sidebar-toggle-right #toggle-all-button {
    display: inline-block;
    margin-right: 0;
    margin-bottom: 1rem;
}

  /* ---- NOW page: link badges and arrow appearance ---- */
  /* Remove border and use solid primary styling on NOW badges */
  .badge-with-arrow {
      border: none !important;
      background-color: var(--primary) !important;
      color: var(--light) !important;
      border-radius: 9999px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  }

  .badge-with-arrow:hover {
      background-color: var(--dark) !important;
      color: var(--light) !important;
  }

  /* Arrow reveal animation for badges */
  .badge-with-arrow .badge-arrow {
      display: inline-block;
      width: 0;            /* no space by default */
      margin-right: 0;     /* no gap by default */
      opacity: 0;
      overflow: hidden;    /* hide glyph until expanded */
      transition: width 280ms ease, margin-right 280ms ease, opacity 280ms ease;
    }

  .badge-with-arrow:hover .badge-arrow {
      opacity: 1;
      width: 0.6em;       /* smaller reveal to limit growth */
      margin-right: 10px; /* adjusted spacing for badges */
  }

  /* Arrow reveal animation for large buttons */
  .btn-with-arrow {
      display: inline-flex;           /* center contents vertically */
      align-items: center;
      line-height: 1;                 /* avoid extra height from line-height */
      gap: 0;                         /* spacing comes from arrow margin */
      vertical-align: middle;         /* align with surrounding text */
      padding-right: 1.5rem;          /* slightly tighter right padding */
  }

  .btn-with-arrow .btn-arrow {
      display: inline-block;
      width: 0;            /* no space by default */
      margin-right: 0;
      opacity: 0;
      overflow: hidden;
      transition: width 280ms ease, margin-right 280ms ease, opacity 280ms ease;
  }

  .btn-with-arrow:hover .btn-arrow {
      opacity: 1;
      width: 0.6em;       /* smaller reveal to limit growth */
      margin-right: 20px; /* way more space to label */
  }
 
  /* Tighter blockquote spacing across the site */
  blockquote {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    white-space: normal !important; /* avoid extra gaps from preserved newlines */
  }

  /* Extra-tight spacing for featured quotes in posts */
  article.post blockquote,
  blockquote.quote-text {
    margin-top: 0.4rem !important;
    margin-bottom: 0.4rem !important;
  }

  /* Reduce paragraph margins inside blockquotes to prevent large gaps */
  blockquote p {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }

  /* Remove outer padding margins on first/last paragraphs within blockquotes */
  blockquote > p:first-child { margin-top: 0 !important; }
  blockquote > p:last-child { margin-bottom: 0 !important; }