/* 
 * Talk Python Training - Site CSS (Bulma Version)
 * Adapted from Bootstrap 3 to Bulma
 */

html {
    background: #0a0a0a;
}

body {
    color: #eee;
    background: #0a0a0a;
    font-family: "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.65em;
    font-weight: 500;
    padding-top: 3.25rem; /* Account for fixed navbar */
}

/* Strong text - pure white with semi-bold weight */
strong, b {
    color: #fff;
    font-weight: 620;
}

/* Override Bulma's light-themed defaults for dark theme */
.section {
    background-color: #0a0a0a !important;
}

.content {
    color: #eee !important;
}

.content h1, .content h2, .content h3, .content h4, .content h5, .content h6,
.title, .subtitle {
    color: #eee !important;
}

/* Restore paragraph spacing (Bulma resets these) */
p {
    margin-top: 0;
    margin-bottom: 1em;
}

/* Restore list styling (Bulma resets these) */
ul {
    list-style: disc;
    margin-left: 1.5em;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-left: 0;
}

ol {
    list-style: decimal;
    margin-left: 1.5em;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-left: 0;
}

ul ul {
    list-style-type: circle;
}

ul ul ul {
    list-style-type: square;
}

/* Bulma columns inherit from body, but ensure they don't have light backgrounds */
.columns {
    background-color: transparent !important;
}

.column {
    background-color: transparent !important;
}

/* Ensure container doesn't have a background */
.container {
    background-color: transparent !important;
}

nav {
    min-width: 375px;
}

body nav {
    font-family: 'IBM Plex Sans', "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Bulma navbar customization */
.navbar.topnav {
    font-family: 'IBM Plex Sans', "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    min-height: 50px;
}

.navbar.topnav .container {
    min-height: 50px;
}

/* Navbar brand section - logo + name together */
.navbar.topnav .navbar-brand {
    min-height: 50px;
    align-items: center;
}

/* Logo image container - minimal padding, don't stretch */
.navbar-item.image-brand {
    padding: 0;
    padding-left: 0.75rem;
    padding-right: 0.25rem;
}

/* Prevent Bulma from stretching images inside navbar-item */
.navbar-item.image-brand img {
    max-height: 40px;
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* Brand name text - override Bulma's flex display to prevent spacing issues */
.navbar-item.name-brand {
    display: inline-block; /* Override Bulma's flex to keep text together */
    font-size: 22px;
    font-weight: normal;
    letter-spacing: 1.1px;
    padding-left: 0.5rem;
    padding-right: 1rem;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

/* Override Bulma's default navbar-item hover background for brand items */
.navbar-item.image-brand:hover,
.navbar-item.name-brand:hover {
    background-color: transparent;
}

/* Navbar burger (hamburger menu) - white color to match navbar text */
.navbar.topnav .navbar-burger {
    color: #fff;
}

.navbar.topnav .navbar-burger:hover {
    background-color: transparent;
    color: #fff;
}

.navbar.topnav .navbar-burger span {
    background-color: #fff;
}

/* Transparent navbar - for pages with gradient backgrounds like login */
body.has-transparent-navbar .navbar.is-dark {
    background-color: transparent !important;
    box-shadow: none;
    transition: background-color 0.3s ease;
}

body.has-transparent-navbar .navbar.is-dark .navbar-brand,
body.has-transparent-navbar .navbar.is-dark .navbar-menu {
    background-color: transparent !important;
}

/* Navbar scrolled state - fades in background after scrolling 20px */
body.has-transparent-navbar .navbar.is-dark.navbar-scrolled {
    background-color: rgba(34, 34, 34, 0.65) !important;
}

body.has-transparent-navbar .navbar.is-dark.navbar-scrolled .navbar-brand,
body.has-transparent-navbar .navbar.is-dark.navbar-scrolled .navbar-menu {
    background-color: transparent !important;
}

/* Gradient background for all Bulma pages */
/* Override Bulma's html background which defaults to light/white */
html:has(body.has-gradient-background) {
    background-color: #000;
}

body.has-gradient-background {
    background-color: #000;
    background-image: linear-gradient(180deg, #333 0%, #000 100vh);
    background-repeat: no-repeat;
    min-height: 100vh;
}

/* Ensure content sections can define their own backgrounds on top of the page gradient */
body.has-gradient-background .full-page-content {
    background: transparent;
}

/* Hide footer on login/register pages */
body.hide-footer footer {
    display: none !important;
}

/* Progressive navbar item hiding - hide on horizontal navbar, show in hamburger menu */
/* hide-tablet-only: hidden on tablet (769px-1023px), visible on mobile menu and desktop */
@media screen and (min-width: 769px) and (max-width: 950px) {
    .navbar-menu:not(.is-active) .hide-tablet-only {
        display: none !important;
    }
}

/* hide-until-widescreen: hidden until widescreen (1216px+), visible in mobile menu */
@media screen and (min-width: 769px) and (max-width: 1215px) {
    .navbar-menu:not(.is-active) .hide-until-widescreen {
        display: none !important;
    }
}

/* When hamburger menu is active (expanded), show ALL items */
.navbar-menu.is-active .navbar-item {
    display: flex !important;
}

/* Mobile navbar menu background - ensure dark background when expanded */
@media screen and (max-width: 1023px) {
    /* Apply background to navbar when menu is active */
    body.has-transparent-navbar .navbar.is-dark:has(.navbar-menu.is-active) {
        background-color: rgba(34, 34, 34, 0.65) !important;
    }
    
    /* Keep the navbar-menu itself transparent to avoid doubling */
    .navbar.is-dark .navbar-menu.is-active,
    body.has-transparent-navbar .navbar.is-dark .navbar-menu.is-active {
        background-color: transparent !important;
    }
}

/* Right side nav items */
.navbar.topnav .navbar-end .navbar-item {
    font-size: 15px;
    font-weight: 500;
    padding-left: 9px;
    padding-right: 9px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.navbar.topnav .navbar-end .navbar-item:hover {
    font-weight: 700;
    background-color: transparent;
}

/* Logo image styles */
.logo-image {
    height: 40px;
    width: 40px;
    border-radius: 50%;
}

.logo-key {
    color: #fffd82;
}

.logo-operator {
    color: #fff;
}

.logo-var {
    color: #fff;
}

/* Button adjustments for Bulma */
.button {
    font-size: 16px;
}

.button.is-small {
    font-size: 0.75rem; /* 12px - Bulma's default small button size */
}

/* Add spacing between button text and icons */
.button i,
a.button i,
button.button i {
    margin-left: 0.5em !important;
}

.button i:first-child,
a.button i:first-child,
button.button i:first-child {
    margin-left: 0 !important;
    margin-right: 0.5em !important;
}

/* Success Green button - Bootstrap 3 success color */
.button.is-success-green {
    color: #fff !important;
    background-color: #5cb85c;
    border-color: #4cae4c;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.button.is-success-green:hover {
    background-color: #449d44;
    border-color: #398439;
}

/* Success Green tag - Bootstrap 3 success color for tags */
.tag.is-success-green {
    color: #fff !important;
    background-color: #5cb85c;
    border-color: #4cae4c;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

/* Info Blue button - Bootstrap 3 info/primary color for buy buttons */
.button.is-info-blue,
.btn.btn-primary.buy-course-btn {
    color: #fff !important;
    background-color: #337ab7;
    border-color: #2e6da4;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    /* Consistent button height */
    height: 2.5em;
    line-height: 1.5;
    padding-top: calc(0.5em - 1px);
    padding-bottom: calc(0.5em - 1px);
}

.button.is-info-blue:hover,
.btn.btn-primary.buy-course-btn:hover {
    background-color: #286090;
    border-color: #204d74;
}

/* Info Blue tag - Bootstrap 3 info/primary color for tags */
.tag.is-info-blue {
    color: #fff !important;
    background-color: #337ab7;
    border-color: #2e6da4;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

/* Team button styling - ensure same height as buy button */
.button.is-success-green.team-button {
    height: 2.5em;
    line-height: 1.5;
    padding-top: calc(0.5em - 1px);
    padding-bottom: calc(0.5em - 1px);
}

/* Danger button - consistent styling with other buttons */
.button.is-danger {
    color: #fff !important;
    background-color: #c9302c;
    border-color: #ac2925;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.button.is-danger:hover {
    background-color: #ac2925;
    border-color: #761c19;
}

/*----------------------------------*/
/*      BUTTON COMPATIBILITY        */
/* Make btn btn-primary look the same as button is-info-blue */
.btn.btn-primary {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    height: 2.5em;
    line-height: 1.5;
    padding-top: calc(0.5em - 1px);
    padding-bottom: calc(0.5em - 1px);
    padding-left: 1em;
    padding-right: 1em;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn.btn-primary:hover {
    background-color: #286090;
    border-color: #204d74;
    text-decoration: none;
}



.fa, .fab, .fa-solid, .fa-duotone {
    font-size: .85em;
    margin-left: 0.5em;
    margin-right: 0.5em;
}

/* But in buttons, ensure proper spacing */
.button .fa,
.button .fab, 
.button .fa-solid, 
.button .fa-duotone,
.button .fad,
a.button .fa,
a.button .fab,
a.button .fa-solid,
a.button .fa-duotone,
a.button .fad {
    margin-left: 0.5em;
}

.button .fa:first-child,
.button .fab:first-child,
.button .fa-solid:first-child,
.button .fa-duotone:first-child,
.button .fad:first-child,
a.button .fa:first-child,
a.button .fab:first-child,
a.button .fa-solid:first-child,
a.button .fa-duotone:first-child,
a.button .fad:first-child {
    margin-left: 0;
    margin-right: 0.5em;
}

/* Box is Bulma's equivalent to Bootstrap's well */
/* Dark theme boxes to match the site's navbar aesthetic */
.box {
    color: #eee;
    font-weight: 400;
    background-color: #3a3a3a;
    border: 1px solid #4a4a4a;
}

/* Ensure all text content inside boxes is readable */
.box p,
.box li,
.box strong,
.box em,
.box i,
.box span {
    color: #eee;
}

/* Override grey-light text inside boxes to be more readable */
.box .has-text-grey-light,
.box .has-text-grey {
    color: #aaa !important;
}

/* Code elements inside boxes */
.box code {
    background-color: #2a2a2a;
    color: #f14668;
}

/* Card dark styling to match site theme */
.card {
    color: #eee;
    background-color: #2a2a2a;
    border: 1px solid #4a4a4a;
}

.card-header {
    background-color: #3a3a3a;
    border-bottom: 1px solid #4a4a4a;
}

.card-header-title {
    color: #eee;
}

.card-header-icon {
    color: #aaa;
}

.card-header-icon:hover {
    color: #eee;
}

/* Card content with light text for dark background */
.card-content {
    color: #ddd;
}

.card-content .content {
    color: #ddd !important;
}

.card-content .content p {
    color: #ddd;
}

.card-content .content small {
    color: #999;
}

/* Card footer - prevent padding scaling from body font-size */
.card-footer {
    padding: 0;
    border-top: 1px solid #4a4a4a;
    background-color: #333;
}

/* Card footer items - clean link style for dark theme */
.card-footer-item {
    color: #5bc0de;
    padding: 0.6rem 0.85rem;
    font-size: 21px;
    transition: background-color 0.15s ease;
    border-color: #3a3a3a;
}

/* Subtle vertical dividers between footer items */
.card-footer-item:not(:last-child) {
    border-right-color: #555;
}

.card-footer-item:hover {
    color: #7dcde8;
}

/* Card footer action hover colors (position-based: Save, Edit, Delete) */
.card-footer-item:first-child:hover {
    background-color: rgba(72, 199, 142, 0.2); /* Faint green for Save */
    color: #48c78e;
}

.card-footer-item:nth-child(2):hover {
    background-color: rgba(255, 166, 0, 0.2); /* Faint orange for Edit */
    color: #ffb347;
}

.card-footer-item:last-child:hover {
    background-color: rgba(241, 70, 104, 0.2); /* Faint red for Delete */
    color: #f47c7c;
}

/* Notification components - keep Bulma defaults, they work well */

/* Modal dark theme styling */
.modal-card {
    background-color: #363636;
    border-radius: 10px;
    overflow: hidden;
}

.modal-card-head {
    background-color: #3a3a3a;
    border-bottom: 1px solid #4a4a4a;
    border-radius: 10px 10px 0 0;
}

.modal-card-title {
    color: #eee;
}

.modal-card-body {
    background-color: #363636;
    color: #ddd;
}

.modal-card-body p {
    color: #ddd;
}

.modal-card-body .label {
    color: #eee;
}

.modal-card-foot {
    background-color: #3a3a3a;
    border-top: 1px solid #4a4a4a;
    border-radius: 0 0 10px 10px;
    justify-content: flex-end;
}

/* Form elements need dark theme handling */
.label {
    color: #eee;
}

.help {
    color: #aaa;
}

/* Select wrapper */
.select select {
    color: #363636;
    background-color: #fff;
}

/* Input/textarea keep light backgrounds for visibility */
.input, .textarea {
    color: #363636;
    background-color: #fff;
}

/* Placeholder text - darker for better readability on white backgrounds */
.input::placeholder,
.textarea::placeholder {
    color: #7a7a7a;
    opacity: 1;
}

/* Form validation help text - lighter colors for dark background legibility */
.help.is-success {
    color: #48c78e; /* Lighter green for dark backgrounds */
}

.help.is-danger {
    color: #f47c7c; /* Lighter red for dark backgrounds */
}

/* Checkbox and radio labels */
.checkbox, .radio {
    color: #eee;
}

/* Hero section - use dark variant by default */
.hero:not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):not(.is-link):not(.is-light):not(.is-dark) {
    background-color: #1a1a1a;
}

.hero:not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):not(.is-link):not(.is-light):not(.is-dark) .title,
.hero:not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):not(.is-link):not(.is-light):not(.is-dark) .subtitle {
    color: #eee;
}

body.light-page {
    color: #111;
    background: #FFF;
}

.has-text-grey-light {
    color: #aaa;
}

.right {
    float: right;
}

.left {
    float: left;
}

.clear {
    clear: both;
}

.centered {
    text-align: center;
}

.padded-form {
    padding: 10px;
}

.padded-form input, .padded-form .button {
    margin: 10px;
}

.content-section-a,
.content-section-b {
    background: #0a0a0a;
    color: #ddd;
    border-top: 1px solid #222;
    border-bottom: none;
}

.content-section-b {
    background: #1a1a1a;
}

.text-sm {
    font-size: .85em;
}

/* Row hover is a dark tint, set via --bulma-table-row-hover-background-color further down.
   This used to force a light-blue (#e8f4f8) background, which was the only thing making the
   near-black td text readable -- so the missing td color fix was invisible until you moved
   the mouse away. Fixing the cell color without retiring this rule just relocates the
   invisibility to the hover state. */

.full-page-content {
    padding: 40px;
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
    max-width: 900px;
    color: #ddd;
    font-size: 16px;
}

.full-page-content.mobile_embedded {
    padding-top: 0;
    margin-top: 0;
    max-width: 100%;
}

.full-page-content .top {
    padding-left: 20px;
}

.show-side {
    text-align: center;
}

.guest {
    float: left;
    text-align: center;
    margin-right: 20px;
    margin-top: 10px;
}

.guests.singular .guest {
    padding-left: 60px;
}

.guest .guest-name {
    font-size: 18px;
    padding-top: 10px;
}

.guest .img {
    height: 150px;
}

.title {
    font-size: 24px;
}

.player {
    float: left;
    margin-top: 0px;
}

.player .button {
    font-size: 20px;
    display: block;
    margin-top: 20px;
}

.host-image {
    height: 200px;
    max-width: none;
    margin-top: 40px;
    margin-bottom: 10px;
}

.host-image-area.about .host-image {
    margin-top: 0px;
}

.host-image-area.about {
    font-size: 18px;
}

.host-image-area {
    text-align: center;
    font-size: 24px;
}

.contact .contact-side img {
    width: 400px;
    margin-top: 20px;
}

.contact .main-text {
    font-size: 20px;
    text-align: left;
}

.friends .main-text {
    font-size: 20px;
    text-align: left;
}

.friends .twitter {
    font-size: 36px;
    margin-left: 100px;
}

.main-text a,
.about a,
.episodes a,
a.light-access-link {
    color: #5BC0DE;
}

.explore-page .main-text a {
    color: #4e829c;
}

.contact .contact-types {
    font-size: 20px;
    margin-left: 0px;
}

.contact .contact-types a {
    color: #5BC0DE;
    display: inline-block;
    padding: 5px;
}

.main-text {
    text-align: left;
    color: white;
}

.large-content-text {
    font-size: 20px;
    color: white;
}

.main-text,
.large-content-text {
    font-weight: 300;
}

#account-login {
    margin-left: auto;
    margin-right: auto;
}

#account-login input,
#account-login textarea {
    color: black;
    width: 500px;
    padding: 5px;
    font-size: 16px;
}

#account-login input,
#account-login .button {
    margin-top: 10px;
}

.show-episode-page .download-coming {
    text-align: center;
}

.show-episode-page .guest-bio {
    text-align: left;
    font-weight: 300;
    padding-top: 20px;
    font-size: 15px;
}

.show-episode-page-placement.patreon-section {
    margin-top: 0px;
}

.episode-buttons .button {
    width: 300px;
}

.sponsor-area-show-page {
    text-align: center;
    font-size: inherit;
    margin-top: 20px;
    margin-bottom: 10px;
    padding-right: 25px;
}

.sponsor-area-show-page.e2 {
    padding-right: 0px;
}

.sponsor-area-show-page img {
    width: 250px;
}

.error-content-section {
    margin-left: auto;
    margin-right: auto;
    margin-top: 125px;
    margin-bottom: 150px;
    width: 700px;
}

.error-content-section img {
    height: 50px;
}

.error-content-section h1 {
    text-align: left;
}

.patreon-section {
    font-weight: 300;
    line-height: 2em;
    width: 490px;
    margin: 50px auto 0px;
}

.patreon-section .text {
    margin-left: 0px;
}

.full-page-content.comments {
    padding-top: 5px;
    margin-top: 0px;
}

.transcript-main {
    line-height: 2.2em;
}

.transcript-main p {
    padding: 10px;
    padding-bottom: 20px;
    font-size: 20px;
}

.active-transcript-segment {
    background-color: lightblue;
    color: black;
}

.transcript-episode-page .filter-section {
    display: block;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
}

#transcript-player-top {
    background-color: black;
    position: fixed;
    height: 50px;
    top: 50px;
    width: 100%;
    z-index: 1000;
    padding-left: 10px;
    padding-right: 10px;
}

#transcript-player-top audio {
    width: 100%;
    height: 40px;
}

.highlight {
    background-color: #FF8;
    color: black;
}

#filter-msg {
    color: #777;
    font-size: 14px;
    padding: 20px;
    padding-bottom: 0px;
    text-align: center;
}

.fa-heart {
    color: red;
}

.copyright,
.made-with-love {
    line-height: 1.5em;
    letter-spacing: 2px;
}

.published-date {
    font-weight: 200;
}

.recorded-date {
    color: #999;
    font-weight: 200;
}

#global-sponsor-message {
    display: block;;
    text-align: center;
    padding: 10px;
    background-color: #444444;
    color: #FFFAA4;
    margin-top: 50px;
    margin-bottom: -50px;
    font-weight: normal;
    font-size: 14px;
    letter-spacing: 2px;
}

#global-sponsor-message #name_text {
    color: white;
}

#ad-second-slot {
    margin-top: 1em;
}

.sponsor-area-show-page img {
    border-radius: 3px;
}

h1 {
    text-align: center;
}

/* Match Bootstrap's larger h1 size for courses page */
.courses-page h1 {
    font-size: 2.25rem;
}

/* Override bundle background to match course cards */
.bundle-in-list {
    background-color: #282828;
}

/* ===== Courses Page Heading Spacing =====
 * Bulma adds more default margin to headings than Bootstrap.
 * These overrides restore the tighter spacing.
 */
.bundle-in-list h2 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.course-in-list h3 {
    margin-top: 0;
    margin-bottom: 0.25rem;
    font-weight: 600;
    line-height: 1.2;
}

/* "Newest Courses" section heading */
.courses-page .recent-courses h2 {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.modal h4 {
    text-align: center;
}

/* ************** Pricing *************** */
.pricing-page, .about-page, .dark-theme {
    line-height: 1.35em;
    letter-spacing: 1.1px;
}

.dark-theme {
    font-size: 16px;
}

.dark-theme h1 {
    margin-bottom: 1em;
}

.dark-theme h2 {
    margin-top: 1.5em;
}

.pricing-page p,
.dark-theme p {
    margin-bottom: 1em;
}

/* Dark theme specific CSS has been moved to dark-theme.css */
/* That file is loaded only by cms/dark.pt template */

.error-msg, .reset-error {
    color: #ff626b;
    font-weight: bold;
}

.success-msg, .reset-success {
    color: green;
}

/* ****** Welcome page ******** */
.welcome-page {
    letter-spacing: .75px;
}

.welcome-page .large-content-text {
    font-size: 16px;
}

/* ***************  HOME PAGE PITCH SECTIONS ************************ */
.intro-summary .pitch {
    text-align: center;
}

.intro-summary .pitch h3 {
    text-align: center;
    margin-bottom: 1.5rem;
}

.intro-summary .pitch .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 1.5rem;
    font-size: 3rem;
}

.intro-summary .pitch .icon.big {
    font-size: 4rem;
}

.intro-summary .pitch .icon.sm {
    font-size: 1.5rem;
    gap: 0.1rem;
}

.intro-summary .pitch .icon .spacer {
    display: none;
}

.intro-summary .pitch .icon.red {
    color: #ff626b;
}

.intro-summary .pitch .icon.green {
    color: #28a745;
}

.intro-summary .pitch .icon.yellow {
    color: #ffc107;
}

.intro-summary .pitch .pitch-content {
    text-align: center;
}

/* ***************  NEWSLETTERS ************************ */
.newsletter-signup {

}

.newsletter-signup .pitch {
    text-align: center;
}

.newsletter-signup .pitch h3 {
    text-align: center;
}

.newsletter-signup form {
    margin-top: 40px;
}

.newsletter-signup .email-notified {
    display: inline-block;
    width: 350px;
    font-weight: bold;
    margin-right: 10px;
    vertical-align: middle
}

.testimonial-text, .testimonial-name {
    font-style: italic;
}

.testimonial-name {
    text-align: right;
    padding-right: 80px;
}

.pricing-page h2 {
    font-size: 24px;
}


.office_hour_event {
    padding: 10px;
    border: 1px solid gray;
    border-radius: 5px;
    margin-bottom: 20px;
}

.office_hour_event a {
    color: white;
}

.office_hour_event a span {
    color: #5BC0DE;
}

.office_hour_event i {
    font-size: 3em;
    display: inline-block;
    vertical-align: baseline;
    float: left;
    margin-right: 10px;
    color: white;
}

.office_hour_event .meeting-time {
    font-weight: normal;
    font-size: 18px;
}

.office_hours .meeting-time {
    margin-bottom: 10px;
}

.office_hour_event a.button.add-to-cal {
    vertical-align: middle;
    color: black;
}

#receipts table {
    font-size: .8em;
}

.already-registered {
    display: inline-block;
    vertical-align: baseline;
    float: left;
    margin-top: 10px;
}

#create_account_btn {
    float: right;
}

.login-page .button {
    vertical-align: baseline;
    margin-right: 20px;
}

.registration-buttons {
    width: 500px;
}

.registration-buttons a.button.already-registered {
    color: black;
}

#opt-in-form {
    line-height: 2.5em;
    margin-left: auto;
    margin-right: auto;
    width: 550px;
}

#opt-in-form .error-msg {
    font-size: 14px;
}

.expert {
    margin-top: 20px;
}

#experts .expert img {
    border: 1px solid #ddd;
}

.black_friday {
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: center;
    color: limegreen;
    font-size: 30px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid lime;
    line-height: 2em;
    /* background-color: #222; */
}

.black_friday span {
    color: #fff;
    /* background-color: #232323; */
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #49ff18, 0 0 30px #49ff18, 0 0 40px #49ff18, 0 0 55px #49ff18, 0 0 75px #49ff18;
    font-weight: bold;
}

.black_friday a {
    color: white;
    font-weight: bold;
}

.error {
    text-align: center;
    color: #ff6866;
    margin-top: 10px;
}

/* Bulma form controls already styled, but keep specific overrides */
input.input, textarea.textarea, select.select {
    font-weight: normal;
}

.has-text-grey {
    color: #888888;
}

/* Code elements on dark background */
code {
    background-color: #2a2a2a;
    color: #f14668;
    padding: 0.2em 0.4em;
    border-radius: 4px;
}

pre {
    background-color: #1a1a1a;
    color: #eee;
}

/* Progress bar track should be visible on dark */
.progress {
    background-color: #333;
}

/* ===== Course Tags Override =====
 * The courses page uses .btn.tag which conflicts with Bulma's .tag component.
 * These overrides ensure the course filter tags look correct.
 */
.courses-page .topic-tags {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.courses-page .topic-tags .btn.tag {
    /* Reset Bulma's .tag defaults */
    display: inline-block;
    justify-content: unset;
    align-items: unset;
    height: auto;
    line-height: 1.5;
    white-space: nowrap;
    
    /* Match original Bootstrap styling */
    background-color: transparent;
    border: 1px solid #aaa;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    padding: 5px 10px;
    margin: 2px 1px;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.courses-page .topic-tags .btn.tag:hover {
    background-color: #1b6d85;
    border-color: #1b6d85;
    color: #fff;
}

.courses-page .topic-tags .btn.tag.selected {
    background-color: orange;
    border-color: #976200;
    color: #fff;
    font-weight: bold;
}

.courses-page .topic-tags .btn.tag.selected:hover {
    background-color: #d38a00;
    border-color: #d38a00;
}

.courses-page .topic-tags .btn.tag.highlight-green {
    background-color: #187e14;
    border-color: #21a51c;
    color: #fff;
    font-weight: bold;
}

.courses-page .topic-tags .btn.tag.highlight-green:hover {
    background-color: #115e0e;
    border-color: #115e0e;
}

.courses-page .topic-tags .btn.tag.highlight-white {
    background-color: #eee;
    border-color: #aaa;
    color: #333;
    font-weight: bold;
}

.courses-page .topic-tags .btn.tag.highlight-white:hover {
    background-color: #ddd;
    border-color: #999;
}

/* Table styling for dark theme.

   Drive Bulma's own custom properties rather than overriding around them. Bulma writes the
   text color directly onto the cells (`.table td, .table th { color: var(--bulma-table-color) }`),
   so setting `color` on `.table` alone never inherits down -- that is how td stayed near-black
   on #1a1a1a while th looked fine. Setting the tokens fixes td, thead, tfoot, and hover at
   once, and means a new table page starts readable instead of needing its own rescue block. */
.table {
    --bulma-table-color: #eee;
    --bulma-table-cell-heading-color: #eee;
    --bulma-table-head-cell-color: #eee;
    --bulma-table-foot-cell-color: #eee;
    --bulma-table-cell-border-color: #444;
    --bulma-table-row-hover-background-color: #2a2a2a;
    --bulma-table-striped-row-even-background-color: #222;
    --bulma-table-striped-row-even-hover-background-color: #2a2a2a;

    /* The border colour and this background are carried over unchanged from the rule this
       replaced, deliberately. They are the two values that would alter tables on pages nobody
       asked to change -- `.outline .table` on courses/details.pt and cms/course.pt re-declares
       neither, so both public pages would shift. Plan 032 asks for a scheduled visual pass
       before touching those; this fix stays scoped to the text colour, which is the bug. */
    background-color: #1a1a1a;
    border-bottom: 1px solid #444;
}

.table thead th {
    border-color: #555;
}

/* Horizontal rule visible on dark */
hr {
    background-color: #444;
    height: 1px;
}

.text-smaller {
    font-size: 0.85em;
}

.login-page .g-recaptcha {
    margin: 20px auto;
}

.promo_notice {
    font-size: 24px;
    color: white;
    background: #c87e00;
    min-height: 150px;
    padding-top: 65px;
    text-align: center;
}

.promo_notice.biz {
    padding-top: 65px;
    padding-bottom: 15px;
    min-height: 115px;
    margin-bottom: -30px;
    line-height: 1.05em;
}

.promo_notice .dismiss_promo {
    font-size: 18px;
    float: right;
    margin-right: 20px;
    color: white;
    margin-top: 10px;
}

.promo_notice .dismiss_promo:hover {
    color: #000299;
}

.promo_notice .sub-promo {
    font-size: .65em;
}

.promo_notice .promo-cta {
    color: white;
}

.list-inline.social {
    font-size: 36px;
}

#redeem-form {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: right;
}

#redeem-form > * {
    margin-bottom: 20px;
}

.redeem-area {
    margin-top: 0px;
}

.account-page .invoice-item.price {
    text-align: right;
    font-size: .75em;
    width: 82px;
}

.account-page .invoice-item.date {
    font-size: .75em;
    width: 91px;
}

.account-page .invoice-item.action-button a.button {
    color: black;
}

.account-page #office_hours h2 {
    text-align: center;
}

.account-page #office_hours .box {
    color: white;
    font-size: 13px;
    background-color: #444;
    border-color: #666;
    margin-top: 0px;
    margin-bottom: 40px;
}

.account-page #office_hours .box .headline {
    text-align: center;
}

.account-page #office_hours .box a {
    color: orange;
}

.account-page #office_hours .box .headline a {
    font-size: 20px;
}

.g-recaptcha {
    margin: 20px;
    margin-right: auto;
    margin-left: auto;
}

.cf-turnstile {
    margin-top: 10px;
}

h3.notified-on-homepage {
    margin-bottom: 20px;
}

/* Footer styles */
footer, footer a {
    color: #eee;
}

footer {
    font-weight: normal;
}

footer .social {
    font-size: 36px;
}

footer .footer-title {
    font-size: 13px;
    font-weight: 400;
}

footer .footer-column {
    text-align: left;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

footer .footer-column.first {
    line-height: 2em;
    font-size: 13px;
    font-weight: 400;
    margin-top: 10px;
}

footer .footer-column.first a {
    display: flex;
    align-items: center;
}

footer .footer-column.first i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    font-size: 16px;
    margin-right: 0;
    margin-left: 0 !important;
}

footer .footer-column.first i.fas,
footer .footer-column.first i.fa-solid {
    font-size: 16px;
}

footer .footer-column.social a {
    display: flex;
    align-items: center;
    text-align: left;
    padding: 8px 0;
    line-height: 1.5;
}

footer .footer-column.social .icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    min-width: 50px;
    margin-right: 12px;
}

footer .footer-column.social i {
    font-size: 32px;
}

footer .footer-column.social img {
    width: 32px;
    height: 32px;
}

footer .copyright-footer {
    padding: 20px;
    font-size: 13px;
    text-align: center;
}

footer .copyright-footer a {
    font-weight: 700;
}

footer .admin {
    font-size: 12px;
}

footer .footer-player {
    color: #ffb32d;
}

footer {
    /* border-top: 1px solid #1d1d1d; */
    background-color: #0A0A0A;
}

footer, footer a {
    color: #aaa;
}

footer a:hover {
    color: #5BC0DE;
}

footer .fa-mastodon {
    color: #aaa;
}

footer .blog-link {
    color: #F18C1D;
}

footer .fa-youtube {
    color: #fd1f1f;
}

footer .fa-wind-turbine {
    color: green;
}

footer a:hover {
    text-decoration: none;
}

/* ===========================================
   Login Card Page (standalone presentation)
   =========================================== */

.login-card-page {
    min-height: 100vh;
    background: transparent; /* Uses body gradient background */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    margin-top: -52px; /* Offset navbar height */
    padding-top: 92px; /* Add back space for navbar */
}

.login-card-container {
    width: 100%;
    max-width: 450px;
}

.login-logo {
    text-align: center;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.login-logo img {
    height: 50px;
    width: auto;
}

.login-logo .logo-text {
    font-size: 28px;
    font-weight: 500;
    font-family: 'IBM Plex Sans', sans-serif;
}

.login-card {
    background: white !important;
    border-radius: 12px;
    padding: 40px;
    padding-bottom: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    color: #333 !important;
}

.login-card h2 {
    color: #222;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 25px;
    text-align: center;
}

.login-card .field {
    margin-bottom: 20px;
}

.login-card .input {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 0.5em 0.75em;
    font-size: 16px;
    color: #333;
    /* Use Bulma's standard height so icons align properly */
    height: var(--bulma-input-height, 2.5em);
}

/* Add left padding for inputs with icons */
.login-card .control.has-icons-left .input {
    padding-left: var(--bulma-input-height, 2.5em);
}

/* Make icons more visible (Bulma default is very light) */
.login-card .control.has-icons-left .icon.is-left,
.login-card .control.has-icons-right .icon.is-right,
.login-card .control.has-icons-left .icon.is-left i,
.login-card .control.has-icons-right .icon.is-right i {
    color: #666;
}

.login-card .input::placeholder {
    color: #999;
}

.login-card .input:focus {
    border-color: #5bc0de;
    box-shadow: 0 0 0 2px rgba(91, 192, 222, 0.2);
}

.login-card .button.is-fullwidth.is-medium {
    margin-top: 10px;
    margin-bottom: 5px;
    padding: 12px 20px;
    font-size: 18px;
    font-weight: 500;
    height: auto;
}

.login-card .error-msg {
    background-color: #ffebee;
    border: 1px solid #ffcdd2;
    color: #c62828;
    padding: 12px 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 14px;
}

.login-card form {
    margin-bottom: 25px;
}

.login-card .helper-links {
    text-align: center;
    color: #555 !important;
    font-size: 15px;
}

.login-card .helper-links p {
    color: #555 !important;
    margin-bottom: 8px;
}

.login-card .helper-links a {
    color: #0077aa;
    font-weight: 600;
}

.login-card .helper-links a:hover {
    color: #005580;
    text-decoration: underline;
}

.login-card .cf-turnstile {
    margin: 20px 0;
    display: flex;
    justify-content: center;
}

.login-card-page .terms-text {
    text-align: center;
    color: #aaa;
    font-size: 13px;
    margin-top: 25px;
}

.login-card-page .terms-text a {
    color: #5bc0de;
}

/* Responsive adjustments */
@media screen and (max-width: 1024px) {
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .column {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

@media screen and (max-width: 480px) {
    .login-card-page {
        padding: 20px 15px;
        padding-top: 72px;
    }

    .login-card {
        padding: 30px 25px;
    }

    .login-logo .logo-text {
        font-size: 22px;
    }

    .login-logo img {
        height: 40px;
    }
}

.just-to-bump-version {
    padding: 5px;
}