/* ==========================================================================
   ΤΕΧΝΟ...λογικά — Global Styles
   ========================================================================== */

/* --- Material Symbols --- */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-filled,
.fill-icon {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* --- Glass Player (homepage) --- */
.glass-player {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}

/* --- Text Glow --- */
.text-glow {
    text-shadow: 0 0 30px rgba(255, 214, 57, 0.4);
}

/* --- Fade-in Animation (homepage hero) --- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fadeInUp {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
}
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }

/* --- Hide Scrollbar --- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* --- Custom Select Arrow --- */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%235c5c5c' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25em;
    -webkit-appearance: none;
    appearance: none;
}

/* --- Date Input Picker --- */
input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.5;
    cursor: pointer;
}

/* --- Transcript Toggle --- */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] .transcript-arrow { transform: rotate(90deg); }
.transcript-arrow { transition: transform 0.25s ease; }

/* --- Transcript Scrollbar --- */
.transcript-scroll::-webkit-scrollbar { width: 4px; }
.transcript-scroll::-webkit-scrollbar-track { background: transparent; }
.transcript-scroll::-webkit-scrollbar-thumb { background: #e5e2e1; border-radius: 99px; }

/* --- Profile Link Arrow Animation --- */
.profile-link { gap: 0.375rem; }
.profile-link:hover { gap: 0.625rem; }

/* --- Page Header Background --- */
.header-gradient {
    background: linear-gradient(135deg, #5244bf 0%, #1a1040 25%, #5e259a 50%, #1a2a6c 75%, #0D0D1A 100%);
}

/* --- Navbar --- */
.nav-bar {
    background-color: rgb(13 13 26 / 48%);
    filter: drop-shadow(2px 4px 6px black);
}
.nav-bar.nav-fixed {
    background-color: rgb(13 13 26 / 73%);
}

/* --- Host Profile Photo Frame --- */
.host-photo-frame {
    position: relative;
}
.host-photo-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 6px solid rgba(255, 214, 57, 0.5);
    transform: translate(12px, 12px);
    z-index: 2;
    pointer-events: none;
}
.host-photo-frame--reverse::before {
    transform: translate(-12px, 12px);
    border-color: rgba(178, 254, 219, 0.5);
}
.host-photo-frame img,
.host-photo-frame > div {
    position: relative;
    z-index: 0;
}
.guests-section{
    background: linear-gradient(135deg, #5244bf0d 0% 0%, #1a10402e 25%, #5e259a3b 50%, #1a2a6c3d 75%, #0d0d1a2e 100%);
}
#guests-track .text-primary {
    color:white
}

/* --- About Preview: Dotted Grid Animation --- */
@keyframes dotFloat {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(8px, -6px); }
    50% { transform: translate(-4px, -10px); }
    75% { transform: translate(6px, 4px); }
}
.dot-grid-animated {
    background-image: radial-gradient(circle, rgb(0 0 0 / 38%) 1.5px, transparent 1.5px);
    background-size: 20px 20px;
    animation: dotFloat 8s ease-in-out infinite;
}

/* --- About Preview: Host Circle Reveal --- */
.host-circle {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 1s ease-out, transform 1s ease-out;
}
.host-circle.visible {
    opacity: 1;
    transform: scale(1);
}
.host-circle-delay {
    transition-delay: 0.3s;
}

/* --- Episode Card --- */
.episode-card {
    --tw-shadow: 0 1px 7px 0 rgb(0 0 0 / 18%);
    --tw-shadow-colored: 0 1px 7px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #00000000), var(--tw-ring-shadow, 0 0 #00000000), var(--tw-shadow);
    background: #f6f6f6;
    height: 100%;
    display: flex;
    flex-direction: column;
}
div#episodes-carousel > .overflow-hidden {
    padding-bottom:20px
}
/* --- ΤΕΧΝΟ Labels --- */
#texno-texno, #texno-logika {
    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.padtb1rem{    padding-top: 1rem;
    padding-bottom: 1rem;
}
.border-\[\#333\] {
    --tw-border-opacity: 0.5;
    border-color: rgb(51 51 51 / var(--tw-border-opacity, 1));
}
.mb-1{
    margin-bottom: 10px;
}
footer a.rounded-full {
    border: 1px solid #b2feda;
}
span#texno-texno ,
span#texno-logika {  
    bottom: 55px;
    right: -50px;
}
.guests-grid .cursor-pointer {
        border: 1px solid #e5e5e5;
}
.sticky-guest-list-wrap {    border: 1px solid #ffd639;}


#mobile-menu-drawer {
    right: 280px;
    width: 280px;
}

/* =============================================
   Responsive Adjustments
   ============================================= */

/* Section header links: stack below title on small screens */
@media (max-width: 767px) {
    .section-header,
    .flex.justify-between.items-end {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .section-header__link {
        margin-top: 0.25rem;
    }
}

/* Guests carousel: responsive items */
@media (max-width: 470px) {
    #guests-track > div {
        width: 100% !important;
        flex: 0 0 100%;
    }
}

@media (min-width: 471px) and (max-width: 639px) {
    #guests-track > div {
        width: 50% !important;
        flex: 0 0 50%;
    }
}

/* Guests section + About preview: reduced padding at <=900px */
@media (max-width: 900px) {
    .guests-section,
    .about-preview {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
}

/* Topics grid: 2 columns 550px-1099px, 1 column <=549px */
@media (max-width: 1099px) and (min-width: 550px) {
    .topics-section .grid,
    .topics-grid .grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 549px) {
    .topics-section .grid,
    .topics-grid .grid {
        grid-template-columns: 1fr !important;
    }
}

/* Guests carousel: button padding from screen edges */
.guests-section .guests-carousel {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

/* Guests carousel: arrows spacing from screen edges */
#guests-prev {
    left: 0.5rem;
}

#guests-next {
    right: 0.5rem;
}
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    flex-wrap: nowrap;
  }
.pagination-pages {
    display: flex;
    align-items: center;
    gap: .5rem;
}
  .pagination-stacked {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .pagination-stacked .pagination-prev,
  .pagination-stacked .pagination-next {
      flex: 0 0 100%;
      width: 100%;
      justify-content: center;
  }
  
.pagination-stacked .pagination-pages {
    flex: 0 0 auto;
    justify-content: center;
}

  #ajax-filter-form {
    grid-template-columns: repeat(5, 1fr);
  }
  .about-platforms .flex.flex-wrap.gap-4 {    justify-content: center;}
  .sidebar-guest div > p:nth-child(2) {color:#ffd639}
  .episode-transcript summary{background: #ffec9d;}
  .episode-transcript span.border{background: #aef6d2;}
  .episode-number-badge {
    height: 42px;
    background: #ffd639;
    color: black;
    display: inline-flex;
    align-items: center;
}
/* Fade-in staggered animation for cards */
.fade-in-card {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.transcript-scroll p {
    margin-bottom: 20px;
    min-height: 15px;
}
/* Episodes carousel: tighter padding */
.episodes-carousel {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
}
/* Guest header photo shadow */
.guest-header .border-secondary {
    filter: drop-shadow(2px 4px 6px #f9d845);
}
.hero-section .text-primary{margin-bottom: 10px;}

/* Filter bar toggle for mobile */
.filter-toggle-wrap {
    display: none;
}
/* Guest search bar toggle for mobile */
.guest-filter-toggle-wrap {
    display: none;
}
.guest-search-bar{top:96px}

.guest-excerpts blockquote .exerp-episode {
    margin-left: 40px;
}
.filter-bar {
    top: 96px;
}
.developedby a span {
    margin: -2px;
}





@media(min-width:616px){
    div#filter-form-wrap {
        padding: 1.5rem;
    }
}
/* Guests carousel: 5 items at 1021-1299px */
@media (min-width: 1021px) and (max-width: 1299px) {
    #guests-track > div {
        width: 20% !important;
        flex: 0 0 20%;
    }
}
@media(max-width:1249px){
    .md\:col-span-5.relative.group.order-1.md\:order-2 {margin-left: -7px;}
    .host-profile.host-profile--secondary .md\:col-span-5.relative.group.order-1.md\:order-2 > div:first-child{right:-1.5rem}
    }
    
@media (max-width: 1199px) {
    .topics-section {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}
@media (max-width: 1129px) {
    #ajax-filter-form {
      grid-template-columns: repeat(2, 1fr);
    }
    #ajax-filter-form > div:first-child {
        grid-column: span 2; /* search full width */
      }
    }
    
  

    
@media(max-width:1100px){
    h2.text-4xl{
        font-size: 2.5rem;
    }    
    }
@media(max-width:975px) and (min-width:768px)
{
span#texno-logika {bottom: 257px;}
.about-preview__photo-secondary.host-circle {bottom: -100px;}
.kalesmenoi-contact-promt a { width: 250px;}
}
@media(max-width:940px){
        .nav-inner .nav-social svg{width: 1rem;height: 1rem;}
        .nav-inner .nav-social.gap-4 { gap:0.5rem}
        .nav-inner {padding-left: 2rem;padding-right: 2rem;}
        }
@media(max-width:940px) and (min-width:768px){
        .nav-inner a img {min-width:140px}
        #main-nav .nav-links a{font-size:12px;}
        #main-nav .nav-links {gap: 1.5rem;}
        }    
@media(max-width:810px){
    h2.text-4xl{
        font-size: 2rem;
    }    
    }
@media(max-width:767px){
        .kalesmenoi-contact-promt,.themata-contact-promt{align-items: center;}
        .page-header {            padding-top: 7rem !important;        }
        .filter-bar {
            top: 80px;
        }
    }
        
@media(max-width:640px){
    h2.text-5xl{        font-size: 2.5rem;    }    
    }
@media (max-width: 615px) {
        #ajax-filter-form {
          grid-template-columns: repeat(1, 1fr);
        }
      
        #ajax-filter-form > div:first-child {
          grid-column: span 1;        }
          .filter-toggle-wrap {
            display: flex;
            justify-content: center;
        }
    
        .filter-form-wrap {
            max-height: 0;
            overflow: hidden;
            margin: 0;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
            border: none;
            transition: max-height 0.3s ease, padding 0.3s ease;
        }
    
        .filter-form-wrap.filter-open {
            max-height: 500px;
            padding-top: 0.75rem;
            padding-bottom: 0.75rem;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }
    
        .filter-form-wrap .flex {
            flex-direction: column;
            gap: 0.5rem;
        }
     
        .filter-form-wrap .flex > * {
            width: 100%;
        }
    
        .filter-form-wrap .relative {
            min-width: 100%;
        }
          .guest-filter-toggle-wrap {
            display: flex;
            justify-content: center;
        }
        #ajax-filter-form button {
            display: flex;
            flex-direction: row;
            justify-content: center;
        }
        
        .guest-filter-form-wrap {
            max-height: 0;
            overflow: hidden;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            margin: 0;
            transition: max-height 0.3s ease, padding 0.3s ease;
        }
    
        .guest-filter-form-wrap.filter-open {
            max-height: 500px;
            padding-top: 0.75rem !important;
            padding-bottom: 0.75rem !important;
        }
    
        .guest-filter-form-wrap .flex {
            flex-direction: column;
            gap: 0.5rem;
        }
    
        .guest-filter-form-wrap .flex > * {
            width: 100%;
            max-width: 100%;
        }
        .guest-search-bar{top:80px}


      }
@media(max-width:527px){
        .platforms-buttons a{width:100%;justify-content: center;}
        form#ajax-filter-form {
            display: flex;
            flex-direction: column;
        }
        form#ajax-filter-form div,
        form#ajax-filter-form button{width:100%;max-width: unset;}
       .guest-excerpts blockquote .exerp-episode {
            margin-left: 0px;padding-top:15px;
        }
         .guest-excerpt-footer.flex{display:flex;flex-direction: column;align-items: flex-start;}      
         .latest-episodes {
            padding-left: 1.5rem !important;
            padding-right: 1.5rem !important;
        }
    
        .episodes-carousel {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
    
        .episodes-carousel-nav {
            position: static;
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin-top: 1.5rem;
        }
    
        .episodes-carousel-nav #carousel-prev,
        .episodes-carousel-nav #carousel-next {
            position: static !important;
            transform: none !important;
        }      
        .episodes-carousel-episode .px-4 {padding-left: 0.3rem;
            padding-right: 0.3rem;
        }        
        }
        
        
        
@media(max-width:470px){
        .kalesmenoi-contact-promt .flex.items-start.gap-6,
        .themata-contact-promt .flex.items-start.gap-6{display:flex;flex-direction: column;}
        .about-platforms .flex.flex-wrap.gap-4 a{width:100%; justify-content: center;}
        h2.text-5xl{font-size: 2rem;} 
        h2.text-4xl{font-size: 1.5rem;}
        
        }
@media(max-width:440px){
        .host-profile.host-profile--primary .md\:col-span-5.relative.group > div:first-child,
        .host-profile.host-profile--secondary .md\:col-span-5.relative.group.order-1.md\:order-2 > div:first-child{display:none}
        }

/* Section labels — readable on light backgrounds */
.section-label {
    color: rgb(0 0 0) !important;
    background: #f6f3f2;
    padding: 5px;
    display: inline-block;
    border-radius: 4px;
}

/* Legal pages (privacy, terms) */
.legal-content {
    color: #1c1b1b;
}

.legal-content .lead {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: #4a4746;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(121, 119, 118, 0.15);
    margin-bottom: 2.5rem;
}

.legal-content h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.375rem;
    letter-spacing: -0.02em;
    margin-top: 3rem;
    margin-bottom: 1rem;
    padding-left: 1rem;
    border-left: 4px solid #ffd639;
}

.legal-content h2:first-child {
    margin-top: 0;
}

.legal-content p {
    line-height: 1.8;
    margin-bottom: 1.125rem;
    color: #4a4746;
}

.legal-content ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.5rem;
}

.legal-content ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.625rem;
    line-height: 1.7;
    color: #4a4746;
}

.legal-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffd639;
}

.legal-content dl {
    margin-bottom: 1.5rem;
}

.legal-content dt {
    font-weight: 700;
    color: #1c1b1b;
    margin-top: 1.25rem;
    margin-bottom: 0.375rem;
}

.legal-content dd {
    margin-left: 0;
    line-height: 1.8;
    color: #4a4746;
    padding-left: 1rem;
    border-left: 2px solid rgba(121, 119, 118, 0.15);
}

.legal-content a {
    color: #1c1b1b;
    text-decoration: underline;
    text-decoration-color: #ffd639;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s ease;
}

.legal-content a:hover {
    text-decoration-color: #1c1b1b;
}

.legal-footer-note {
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(121, 119, 118, 0.15);
    font-size: 0.875rem;
}

.legal-footer-note p {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .legal-content h2 {
        font-size: 1.25rem;
        margin-top: 2.25rem;
    }
}