/*
 * Digital Theme – Design Improvements
 * Applied via design-improvements.css
 * Loaded after theme.css for clean overrides.
 */

/* ============================================================
   1. Fix Floating WooCommerce Cart & Account Icons
   ============================================================ */
/* Contain topside buttons inside their proper flex containers */
button.btn.btn-light.topside {
    position: relative;
    z-index: auto;
}

/* ============================================================
   2. Tighten Logo / Header Branding Area Whitespace
   ============================================================ */
.stylesix-header .container.stylesix {
    padding-top: 10px;
    padding-bottom: 10px;
}

.stylesix-header .container.stylesix .row {
    align-items: center;
}

.logo .img-fluid {
    transform: scale(0.85);
    max-width: 60%;
}

/* Site description below logo */
p.site-description {
    font-size: 0.78rem;
    color: #888;
    margin: 0;
    line-height: 1.3;
}

/* ============================================================
   3. Post Card – Stronger Titles & Hover Lift
   ============================================================ */
h2.entry-title {
    margin-bottom: 6px;
}

h2.entry-title a {
    color: #1a1a2e !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    display: block;
    transition: color 0.2s ease;
}

h2.entry-title a:hover {
    color: #2196F3 !important;
}

/* Post card hover lift effect */
article.post .row.g-0.border.rounded {
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

article.post .row.g-0.border.rounded:hover {
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.10) !important;
    transform: translateY(-3px);
}

/* Thumbnail overflow clip so image doesn't spill on hover */
article.post .col-auto.d-lg-block {
    overflow: hidden;
}

/* ============================================================
   4. Read More – Styled as Pill Button
   ============================================================ */
.row.post-footer a.read-more-link {
    display: inline;
    background-color: #2196F3;
    color: #fff !important;
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: background-color 0.2s ease;
    text-decoration: none;
    border: none;
}

.row.post-footer a.read-more-link:hover {
    background-color: #0c7cd5;
    opacity: 1;
    color: #fff !important;
}

/* ============================================================
   5. Footer – Better Spacing, Typography & Top Accent
   ============================================================ */
#wrapper-footer {
    border-top: 3px solid #2196F3;
    padding: 16px 0;
}

footer#colophon .site-info {
    font-size: 0.85rem;
    color: #aaa;
    padding-top: 6px;
}

ul#footerhorizontal {
    padding-top: 4px;
}

ul#footerhorizontal li a {
    color: #bbb;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    transition: color 0.2s ease, background-color 0.2s ease;
}

ul#footerhorizontal li a:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.12);
}

/* ============================================================
   6. Author Box – Card Style with Left Accent
   ============================================================ */
/* Target the common author wrapper class patterns this theme uses */
.author-box,
div[class*="author-style"],
.loop-templates-author,
article .author-section {
    border-left: 4px solid #2196F3;
    background: #f4f8ff;
    border-radius: 0 6px 6px 0;
    padding: 16px 20px;
    margin: 24px 0;
}

/* Avatar styling */
.author-box img,
div[class*="author-style"] img {
    border-radius: 50%;
    border: 3px solid #2196F3;
    margin-right: 12px;
}

/* "View all posts" link */
.author-box a,
div[class*="author-style"] a {
    font-weight: 600;
    font-size: 0.9rem;
}

/* ============================================================
   7. Single Post – Proportional H1 Title & Breadcrumbs
   ============================================================ */
.single h1.entry-title {
    font-size: 1.65rem !important;
    font-weight: 700 !important;
    line-height: 1.35;
    margin-bottom: 12px;
    color: #1a1a2e;
}

@media (max-width: 767px) {
    .single h1.entry-title {
        font-size: 1.3rem !important;
    }
}

/* Breadcrumb – extend background, remove jagged edge */
.breadcrumb-wrapper,
.breadcrumbs,
nav.breadcrumbs,
div.breadcrumb-area {
    background: #f0f4f8;
    padding: 8px 16px;
    font-size: 0.82rem;
    border-bottom: 1px solid #dde5f0;
    margin-bottom: 16px;
}

/* Blockquote – softer left border accent instead of plain italic block */
.wp-block-quote,
.blockquote {
    border-left: 4px solid #2196F3;
    background: #f4f8ff;
    padding: 14px 18px;
    border-radius: 0 6px 6px 0;
    font-style: italic;
    color: #444;
}

/* ============================================================
   8. Back-to-Top Button – Consistent Brand Color
   ============================================================ */
.scrollup,
.backtoup {
    background-color: #2196F3 !important;
    border-radius: 8px;
    padding: 8px 10px;
    transition: background-color 0.25s ease, transform 0.2s ease;
}

.scrollup:hover,
.backtoup:hover {
    background-color: #0c7cd5 !important;
    transform: translateY(-2px);
}

/* ============================================================
   9. Navbar Active / Current Menu Item Highlight
   ============================================================ */
.stylesix-header ul#main-menu li.current-menu-item>a.nav-link,
.stylesix-header ul#main-menu li.current-menu-ancestor>a.nav-link {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

/* ============================================================
   10. Sidebar Widgets – Subtle Card Borders
   ============================================================ */
#right-sidebar aside.widget,
#left-sidebar aside.widget {
    border: 1px solid #e8edf3;
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: #fff;
}

#right-sidebar .widget-title,
#left-sidebar .widget-title {
    font-size: 1.05rem;
    font-weight: 700;
    border-bottom: 2px solid #2196F3;
    padding-bottom: 6px;
    margin-bottom: 12px;
}