/* Bulma Overrides for Talk Python To Me */

/* Custom color variables to match Talk Python branding */
:root {
    --bulma-primary: #286090;
    --bulma-primary-h: 208deg;
    --bulma-primary-s: 57%;
    --bulma-primary-l: 36%;
}

/* Global h1 styling */
h1 {
    font-size: 36px;
    font-weight: 500;
    margin-top: 18px;
    margin-bottom: 18px;
    line-height: 1.1;
}

/* Apply custom primary color to buttons */
.button.is-primary {
    background-color: var(--bulma-primary) !important;
    border-color: var(--bulma-primary) !important;
    color: white !important;
}

.button.is-primary:hover,
.button.is-primary:focus,
.button.is-primary:active {
    background-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), calc(var(--bulma-primary-l) - 5%)) !important;
    border-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), calc(var(--bulma-primary-l) - 5%)) !important;
    color: white !important;
}

/* Apply proper colors to other button types */
.button.is-danger {
    background-color: #e74c3c !important;
    border-color: #e74c3c !important;
    color: white !important;
}

.button.is-danger:hover,
.button.is-danger:focus,
.button.is-danger:active {
    background-color: #c0392b !important;
    border-color: #c0392b !important;
    color: white !important;
}

.button.is-success {
    background-color: #27ae60 !important;
    border-color: #27ae60 !important;
    color: white !important;
}

.button.is-success:hover,
.button.is-success:focus,
.button.is-success:active {
    background-color: #229954 !important;
    border-color: #229954 !important;
    color: white !important;
}

.button.is-light {
    background-color: #f5f5f5 !important;
    border-color: #f5f5f5 !important;
    color: #363636 !important;
}

.button.is-light:hover,
.button.is-light:focus,
.button.is-light:active {
    background-color: #e8e8e8 !important;
    border-color: #e8e8e8 !important;
    color: #363636 !important;
}

/* Reset base font-size to ensure px values work correctly */
html {
    font-size: 16px !important;
    background-color: #131313 !important;
}

/* Override html background for Bulma pages */
html:has(body.bulma-page) {
    background-color: #0a0a0a !important;
}

/* Fallback for browsers without :has() support */
.bulma-page::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0a0a0a;
    z-index: -9999;
}

body {
    font-size: 16px !important;
}

body.bulma-page {
    background-color: #0a0a0a !important;
    color: #eee;
    min-height: 100vh;
}

/* Ensure all containers on Bulma pages have correct background */
.bulma-page .container,
.bulma-page .section,
.bulma-page .columns,
.bulma-page .column {
    background-color: transparent !important;
}

/* Navbar Customizations */
.navbar {
    background-color: #222 !important;
    border-bottom: 1px solid #080808;
    min-height: 50px;
    padding: 0;
    box-shadow: none;
    font-size: 14px !important;
    position: relative;
}

.navbar.is-dark {
    background-color: #222 !important;
}

/* The Episodes dropdown (All episodes, Guides): dark like the bar in every color scheme. Bulma paints
   each dropdown item with hsl(dark-h, dark-s, --bulma-navbar-dropdown-item-background-l), and that
   lightness defaults to the light scheme's 100%, so the items came out as white boxes behind the
   bar's #9d9d9d text. Setting the lightness on the bar (13% with no saturation is #222) fixes the items, the panel and
   the mobile burger menu together, without fighting Bulma's item selector. */
.navbar.is-dark {
    --bulma-navbar-dropdown-item-s: 0%;
    --bulma-navbar-dropdown-item-background-l: 13%;
    --bulma-navbar-dropdown-border-color: #080808;
}

.navbar .navbar-dropdown {
    background-color: #222;
    border-top: 1px solid #080808;
}

/* Spacing: the dropdown wrapper is itself a .navbar-item, so it took the site's 15px item padding on top
   of Bulma's link padding plus 2.5em reserved for the arrow, and Bulma pads each dropdown item 3rem on
   the right. Together Episodes sat far from its neighbours and the menu came out oddly wide. The wrapper
   now has no padding and the link uses the site's 15px, with just enough room for the arrow. In the
   burger menu the same wrapper padding inset the whole Episodes group, so there it lines up with the
   other items and its two links are indented one step as sub-items. */
@media screen and (max-width: 1023px) {
    .navbar .navbar-item.has-dropdown {
        padding: 0;
    }

    .navbar .navbar-item.has-dropdown > .navbar-link {
        padding-left: 20px;
    }

    .navbar .navbar-dropdown .navbar-item {
        padding-left: 36px;
    }
}

@media screen and (min-width: 1024px) {
    .navbar .navbar-item.has-dropdown {
        padding: 0;
    }

    .navbar .navbar-item.has-dropdown > .navbar-link:not(.is-arrowless) {
        padding: 15px 30px 15px 15px;
    }

    .navbar .navbar-item.has-dropdown > .navbar-link:not(.is-arrowless)::after {
        inset-inline-end: 12px;
    }

    .navbar .navbar-dropdown .navbar-item {
        padding-inline: 15px 24px;
    }
}

.navbar .navbar-item.has-dropdown:hover .navbar-link,
.navbar .navbar-link:hover,
.navbar .navbar-link:focus {
    background-color: transparent;
}

.navbar.is-fixed-top {
    top: 0;
}

/* Make navbar more compact like Bootstrap */
.navbar-brand {
    min-height: 50px;
}

.navbar-menu {
    box-shadow: none;
}

.navbar-item {
    padding: 15px 15px;
    line-height: 20px;
    height: 50px;
    display: flex;
    align-items: center;
}



.navbar-brand .navbar-item {
    padding: 5px 0;
    height: 50px;
}

/* Logo image in navbar */
.navbar-item img {
    max-height: 40px;
}

/* Ensure logo image is properly centered vertically */
.navbar-brand .navbar-item img.logo-image {
    margin-top: 0 !important;
    align-self: center;
}

/* Ensure container doesn't add extra padding */
.navbar > .container {
    min-height: 50px;
    align-items: stretch;
}

/* Logo Styling */
.navbar-brand .navbar-item {
    font-family: "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 500;
}

.navbar .navbar-item .logo-var {
    color: #1FC75F;
    font-weight: 300;
}

.navbar .navbar-item .logo-operator {
    color: #fff;
    font-weight: 300;
}

.navbar .navbar-item .logo-key {
    color: #F0DB4F !important;
    font-weight: 300;
}

.navbar-item, .navbar-link {
    gap: 0px;
}



/* Base font styling for ALL navbar items */
.navbar-item,
a.navbar-item,
.navbar-link,
.navbar-item span,
a.navbar-item span {
    color: #9d9d9d !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    font-family: "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: color 0.2s ease;
}

/* Hover states for all navbar items */
.navbar-item:hover,
.navbar-item:focus,
a.navbar-item:hover,
a.navbar-item:focus {
    color: #fff !important;
    background-color: transparent !important;
}

/* Override ONLY the logo text to be larger */
.navbar-brand .navbar-item:nth-child(2),
.navbar-brand .navbar-item:nth-child(2) span {
    font-size: 22px !important;
    font-weight: normal !important;
}

/* Remove Bulma's default navbar padding/margin */
.navbar > .container {
    padding: 0 15px;
    margin: 0;
    display: flex;
    align-items: stretch;
    min-height: 50px;
}

/* Ensure navbar-brand is properly aligned */
.navbar-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: auto;
}

/* Make sure the logo text is on the same line */
.navbar-brand .navbar-item:nth-child(2) {
    padding-left: 0;
}

/* Tighten up the spacing between navbar items */
@media screen and (min-width: 1024px) {
    .navbar-end .navbar-item {
        padding: 15px 10px;
    }
    
    .navbar-brand .navbar-item:first-child {
        padding-right: 15px;
        padding-left: 15px;
    }
    
    .navbar-brand .navbar-item:nth-child(2) {
        padding-left: 0;
        padding-right: 15px;
    }
}

/* Override Bulma's default navbar behavior */
.navbar.is-fixed-top {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 30;
}

/* Desktop navbar styling */
@media screen and (min-width: 1024px) {
    .navbar-menu {
        background-color: transparent !important;
        display: flex !important;
        position: static !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    
    .navbar-burger {
        display: none !important;
    }
}

/* Hero/Intro Header Section */
.intro-message {
    position: relative;
    padding-top: 150px !important;
    padding-bottom: 150px !important;
}

.intro-message > h1 {
    margin: 0;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
    font-size: 5em;
    color: #f8f8f8;
}

.intro-message > h2 {
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
    color: #f8f8f8;
}

/* Button Group Styling */
.intro-social-buttons {
    margin-top: 25px;
    font-weight: 500;
}

/* Section Styling */
.content-section-a {
    padding: 50px 0;
    background-color: #f8f8f8;
}

.content-section-b {
    padding: 50px 0;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
}

/* Latest Episode Section */
.latest-episode {
    padding: 50px 0;
}

.guests {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.guests.singular .guest {
    margin: 0;
}

.guest {
    text-align: center;
    margin: 0 20px;
}

.guest img {
    display: block;
    margin: 0 auto;
}

.guest-name {
    margin-top: 5px;
    font-weight: 500;
}

/* Player Styling */
.player {
    margin-top: 20px;
}

.player audio {
    width: 100%;
    max-width: 400px;
}

/* Course Images */
.course-img {
    display: inline-block;
    /* margin: 10px; */
}

.course-img img {
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.course-img a {
    display: block;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    margin-top: 5px;
}

/* Upcoming Episodes */
.upcoming-episodes {
    margin-bottom: 30px;
}

.upcoming-episode {
    margin-bottom: 30px;
}

.upcoming-details {
    padding-left: 20px;
}

/* Reviews Section */
.reviews .section-heading {
    margin-top: 40px;
}

/* Suggest a show section - email contact link */
.has-text-centered[style*="font-size: 24px"] {
    margin-top: 20px;
}

.review-text {
    font-style: normal;
    margin-bottom: 20px;
    border-left: 3px solid #1FC75F;
    padding-left: 28px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.review-title {
    font-weight: bold;
    font-style: normal;
    margin-bottom: 5px;
}

.review-attribution {
    font-style: normal;
    text-align: right;
    color: #aaa;
    margin-top: -5px;
    padding-top: 0;
}

/* Override footer padding from home.css for tighter spacing */
blockquote.review-text footer.review-attribution {
    padding: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: -3px;
    background-color: transparent !important;
}

/* Host Image Area */
.host-image-area {
    text-align: center;
}

.host-image {
    margin: 0 auto;
    display: block;
}

.host-image-caption {
    margin-top: 15px;
    text-align: center !important;
    display: block !important;
}

.host-name {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 5px;
    text-align: center !important;
}

.host-links {
    text-align: center !important;
}

.host-links a {
    color: #1FC75F;
}

/* Banner Section */
.banner {
    padding: 50px 0 0 0 !important;
    color: #f8f8f8;
    background-color: #f8f8f8;
    background: url('../img/banner-bg-min.jpg') no-repeat center center;
    background-size: cover;
}

.connect-title {
    color: #333;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 400;
}

/* Alternating Row Classes */
.content-section-a {
    background-color: #f8f8f8;
}

.content-section-b {
    background-color: #fff;
}

/* Light Access Links */
.light-access-link {
    color:rgb(22, 126, 199);
    text-decoration: none;
}

.light-access-link:hover {
    color:rgb(29, 157, 249);
    text-decoration: underline;
}

/* Reviews Section Text - Match Original Gray */
.reviews .has-text-grey {
    color: #aaa !important;
}

/* Reviews Section Links - Match Original Light Blue */
.reviews .has-text-grey a,
.reviews a {
    color: #5BC0DE !important;
    text-decoration: none;
}

.reviews .has-text-grey a:hover,
.reviews a:hover {
    color: #5BC0DE !important;
    text-decoration: underline;
}

/* Network Name in Buttons */
.network-name {
    margin-left: 5px;
}

/* Section Headings */
.section-heading {
    margin-bottom: 30px;
    font-size: 2em;
    font-weight: 500;
}

/* Lead Text Styling */
p.lead,
.lead {
    font-family: "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
}

/* Course Section Header */
.kickstarter h3 {
    font-family: "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: 500 !important;
}

/* Mobile navbar styling for all screens where hamburger is visible (up to 1023px) */
@media(max-width: 1023px) {
    /* Ensure navbar container can contain positioned elements */
    .navbar > .container {
        position: relative;
    }
    
    .navbar-burger {
        color: #fff;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 31; /* Above the dropdown menu */
        width: 3.25rem;
        height: 3.25rem;
    }
    
    .navbar-burger:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }
    
    /* Ensure hamburger stays clickable when active (X state) */
    .navbar-burger.is-active {
        color: #fff;
        z-index: 32; /* Even higher when active */
    }
    
    /* Mobile dropdown menu styling */
    .navbar-menu {
        background-color: #222 !important;
        box-shadow: 0 8px 16px rgba(0,0,0,.1);
        padding: 0;
        position: absolute;
        left: 0;
        right: 0;
        top: 50px;
        display: none;
    }
    
    .navbar-menu.is-active {
        display: block;
    }
    
    /* Style mobile menu items */
    .navbar-menu .navbar-item {
        padding: 15px 20px;
        border-bottom: 1px solid #333;
        display: block !important;
        height: auto;
        width: 100%;
        text-align: left;
        justify-content: flex-start;
    }
    
    .navbar-menu .navbar-item:hover {
        background-color: #333 !important;
    }
    
    .navbar-menu .navbar-item:last-child {
        border-bottom: none;
    }
    
    /* Ensure navbar-end items display properly in mobile */
    .navbar-menu .navbar-end {
        flex-direction: column;
        width: 100%;
    }
    
    .navbar-menu .navbar-end .navbar-item {
        width: 100%;
    }
}

/* Responsive Adjustments */
@media(max-width: 767px) {
    .intro-message {
        padding-bottom: 15%;
    }

    .intro-message > h1 {
        font-size: 3em;
    }

    .intro-divider {
        width: 100%;
    }
}

/* Fix for Bulma navbar-burger styling */
.navbar-burger span {
    background-color: #fff;
}

/* And Then Text for Upcoming Episodes */
.and-then {
    font-size: 0.8em;
    color: #666;
    font-style: italic;
}

/* Footer adjustments */
footer {
    background-color: #222;
    color: #9d9d9d;
    margin-top: 0px;
    font-weight: normal;
}

/* Override footer background for Bulma pages specifically - but not review attribution footers */
.bulma-page > footer,
.bulma-page > footer .copyright-footer,
.bulma-page > footer * {
    background-color: #0a0a0a !important;
}

footer a {
    color: #1FC75F;
}

footer a:hover {
    color: #19a34a;
}

/* Remove default Bulma box shadows on buttons */
.button {
    box-shadow: none !important;
}

.button:hover,
.button:focus {
    box-shadow: 0 0 0 0.125em rgba(31, 199, 95, 0.25) !important;
}

/* Ensure Font Awesome icons display properly */
.button i,
.navbar-item i {
    margin-right: 0.25em;
}

.bulma-page #global-sponsor-message {
    margin-top: 0px;
}

/* Episodes Table Dark Styling - Override Bulma defaults */
.table.episodes {
    font-size: 15px;
    background-color: #0a0a0a;
    color: #fff;
    border: none !important;
    border-collapse: collapse !important;
}

.table.episodes th,
.table.episodes td {
    border: none !important;
    border-top: 1px solid #222 !important;
    background-color: #0a0a0a !important;
    color: #fff !important;
    padding: 0.4em !important;
}

.table.episodes th {
    border-bottom: 1px solid #222 !important;
    border-top: none !important;
}

.table.episodes tbody > tr:first-child > td,
.table.episodes tbody > tr:first-child > th {
    border-top: none !important;
}

.table.episodes.is-hoverable tbody tr:hover td,
.table.episodes.is-hoverable tbody tr:hover th {
    background-color: #222 !important;
    border-top: 1px solid #222 !important;
}

.table.episodes a {
    color: #5BC0DE;
}

/* Remove any remaining Bulma table styling */
.table.episodes thead td,
.table.episodes thead th {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    color: #fff !important;
}

.table.episodes tbody tr:last-child td,
.table.episodes tbody tr:last-child th {
    border-bottom: none !important;
}

/* Override any Bulma bordered table styles */
.table.episodes.is-bordered td,
.table.episodes.is-bordered th {
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
}

.all-episodes-page .subscribe-buttons {
    background-color: transparent;
    border: none;
    margin-top: 10px;
    margin-bottom: 30px;
    padding-top: 0px;
}

.all-episodes-page h1 {
    text-align: center;
    font-size: 36px;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 20px;
}

/* Live streaming page h1 styling */
.streaming-page h1 {
    margin-top: 10px;
}

.show-episode-page h1 {
    font-size: 36px;
    font-weight: 500;
    margin-top: 10px;
}

.title-area {
    font-size: 16px;
    font-weight: 500;
}

/* WebVTT button styling */
a.button[href*=".vtt"] {
    background-color: rgb(40, 96, 144) !important;
    color: white !important;
    border-color: rgb(40, 96, 144) !important;
}

a.button[href*=".vtt"]:hover {
    background-color: #204d7a !important;
    border-color: #204d7a !important;
}

/* GitHub transcripts button styling */
a.button[href*="github.com"] {
    color: black !important;
}

/* Clean Bulma design for guests and sponsors section */
.guest-row {
    margin: 40px 0 0 0 !important;
    padding: 0 !important;
}

.guest-and-sponsor-section {
    display: inline-block;
    text-align: center;
    padding: 15px 20px;
    margin: 0 auto;
}

.guest-and-sponsor-section > div:first-child {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 500;
}

/* Horizontal layout for guest and sponsors */
.guest-and-sponsor-section .guest,
.guest-and-sponsor-section .sponsor-header {
    display: inline-block;
    vertical-align: top;
    margin: 0 10px;
    text-align: center;
}

.guest-and-sponsor-section .guest img,
.guest-and-sponsor-section .sponsor-header img {
    margin-bottom: 2px;
}

.guest-and-sponsor-section .guest-name,
.guest-and-sponsor-section .sponsor-header span {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #eee !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block;
}

/* Align guest name with sponsor names */
.guest-and-sponsor-section .guest-name {
    margin-top: -10px !important;
}

/* Make guest image circular */
.guest img.image.is-rounded {
    border-radius: 50% !important;
    border: 2px solid gray !important;
}

/* Episode Deep Dive h2 styling */
.show-episode-page h2 {
    font-size: 30px;
    font-weight: 500;
}

/* Episode h3 styling */
.show-episode-page h3 {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 10px;
    margin-top: 20px;
}

/* Strong elements white everywhere on episode page */
.show-episode-page strong {
    color: white !important;
}

/* Strong elements in takeaways section get additional styling */
.takeaways strong {
    text-decoration: underline;
    font-weight: 400 !important;
}

/* List styling on episode page */
.show-episode-page ul,
.show-episode-page ol {
    margin-left: 20px;
    margin-bottom: 15px;
    padding-left: 20px;
}

.show-episode-page ul {
    list-style-type: disc;
}

.show-episode-page ol {
    list-style-type: decimal;
}

.show-episode-page li {
    margin-bottom: 5px;
    line-height: 1.5;
}

.episodes .date-text {
    white-space: nowrap;
}

/* Restore default ordered list styling */
ol {
    list-style-type: decimal;
}

/* Restore default unordered list styling */
ul {
    list-style-type: disc;
}

ol, ul {
    margin-top: 0px;
    margin-bottom: 10px;
    padding-left: 40px;
}

/* Disable font smoothing and text rendering optimization */
body, * {
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
    text-rendering: auto !important;
}