/* DasBlog flatly theme local overrides — layered on top of Bootswatch 5.3.3 Flatly,
   which is linked separately from _Layout.cshtml as
   ~/lib/bootswatch/5.3.3/flatly/bootstrap.min.css.

   Bootswatch Flatly's stock link/accent color is green (#18bc9c). We prefer
   Flatly's blue palette — navy primary (#2c3e50) for headings and a brighter
   #3498db for links / interactive accents — to keep the theme cohesive with
   the navbar and to give it a distinct identity from the green-on-dark Darkly. */

body {
    /*    padding-top: 50px; */
    padding-bottom: 20px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

.box figure img {
    width: 100%;
    height: 100%;
}

.video-container {
    position: relative; /* keeps the aspect ratio */
    padding-bottom: 56.25%; /* fine tunes the video positioning */
    overflow: hidden;
}

    .video-container iframe, .video-container object, .video-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

/* Override Bootswatch Flatly's green link color with the brighter blue. */
a {
    color: #3498db;
}

a:hover,
a:focus {
    color: #2c3e50;
}

/* Bootswatch Flatly's .navbar[data-bs-theme=dark] paints hover/active links green.
   Match the selector (and bump specificity with .bg-primary) so navbar items hover
   to white on the navy bar instead of green. */
.navbar.bg-primary,
.navbar[data-bs-theme=dark] {
    --bs-navbar-color: rgba(255, 255, 255, 0.75);
    --bs-navbar-hover-color: #ffffff;
    --bs-navbar-active-color: #ffffff;
    --bs-navbar-brand-color: #ffffff;
    --bs-navbar-brand-hover-color: #ffffff;
}

/* Page-level <h1> titles (e.g. Category, Archive) render in Flatly navy
   for consistency with darkly's parallel rule. Scoped to .body-content > .container > h1
   so individual blog-post titles (rendered inside other partials/cards) keep their default color. */
.body-content > .container > h1 {
    color: #2c3e50;
}

/* Card-header headings (e.g. archive month names, category names) render in navy. */
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
    color: #2c3e50;
}

/* Archive month-nav current-month is a disabled .btn-outline-secondary.
   Force its text + border to navy so the current month label reads as the active title. */
.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
    color: #2c3e50 !important;
    border-color: #2c3e50 !important;
    opacity: 1;
}

/* Outline-secondary buttons (e.g. archive prev/next chevrons) render in blue. */
.btn-outline-secondary {
    --bs-btn-color: #3498db;
    --bs-btn-border-color: #3498db;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3498db;
    --bs-btn-hover-border-color: #3498db;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #2c3e50;
    --bs-btn-active-border-color: #2c3e50;
    color: #3498db;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    color: #fff;
}

.btn-outline-secondary > i,
.btn-outline-secondary > .fa,
.btn-outline-secondary > .fas {
    color: inherit;
}

/* Archive calendar icon (fa-calendar) — paint it blue to match the pager. */
.dbc-calendar .text-secondary {
    color: #3498db !important;
}