/* --- Google Font --- */
body {
    font-family: 'Roboto', 'Noto Sans JP', sans-serif;
        /* Added Noto Sans JP */
        line-height: 1.7;
        color: #495057;
        background-color: #f8f9fa;
        font-size: 16px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    color: #343a40;
    /* Darker gray for headings */
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

h1.card-title {
    margin-top: 0.5rem;
}

/* Specific adjustment for card title */


/* --- Navbar --- */
#header.navbar {
    border-bottom: 1px solid #dee2e6;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

#header .navbar-brand img {
    transition: opacity 0.3s ease;
}

#header .navbar-brand img:hover {
    opacity: 0.8;
}

#navigation .nav-link {
    font-weight: 500;
    padding: 0.5rem 1rem;
    color: #495057;
    transition: color 0.2s ease-in-out;
}

#navigation .nav-link:hover,
#navigation .nav-link.active {
    color: #0d6efd;
    /* Bootstrap primary color */
}

#navigation .nav-link.active {
    font-weight: 700;
}


/* --- Content Area --- */
#content {
    background-color: transparent;
    /* Removed the gray here, body has it */
}

/* --- Main Article Card --- */
#main .card {
    border: none;
    /* Remove default card border for cleaner shadow */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

#main .card:hover {
    /* transform: translateY(-3px); */
    /* box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1) !important; */
}

.card-header {
    /* background-color: #e9ecef; */
    /* Slightly darker than default bg-light */
}

h1.card-title {
    font-size: 1.8rem;
    /* Prominent article title */
}

@media (max-width: 767.98px) {
    h1.card-title {
        font-size: 1.5rem;
    }
}

.card-img-top-container {
    overflow: hidden;
    max-height: 400px;
    /* Control max height of image container */
}

.card-img-top {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensures image covers, might crop */
    border-top-left-radius: var(--bs-card-inner-border-radius);
    border-top-right-radius: var(--bs-card-inner-border-radius);
}

/* --- Paragraphs & Lead --- */
p {
    margin-bottom: 1.25rem;
    color: #484848;
}

.lead {
    font-size: 1.1rem;
    font-weight: 400;
    color: #333;
}

/* --- Anchors for Smooth Scrolling & Offset --- */
.anchor {
    display: block;
    position: relative;
    top: -80px;
    /* Adjust based on your sticky navbar height + some padding */
    visibility: hidden;
}

/* --- Table of Contents --- */
.indexes .collapse-toggler {
    font-size: 1rem;
}

.indexes .list-group-item a {
    color: #0d6efd;
    font-weight: 500;
}

.indexes .list-group-item a:hover {
    text-decoration: underline;
    color: #0a58ca;
}

.indexes .list-group-flush .list-group-item {
    background-color: transparent;
}

.indexes ol ol .list-group-item {
    font-size: 0.9rem;
    padding-left: 1.5rem;
    /* Indent sub-items more */
}

.indexes ol ol .list-group-item a {
    font-weight: 400;
    color: #343a40;
}

.indexes ol ol .list-group-item a:hover {
    color: #0d6efd;
}


/* --- Share Buttons --- */
.share-buttons svg,
.share-buttons-sidebar svg,
.share-buttons-footer svg {
    vertical-align: -0.125em;
    /* Better icon alignment */
    margin-right: 0.3em;
}

.share-buttons .btn,
.share-buttons-sidebar .btn,
.share-buttons-footer .btn {
    display: inline-flex;
    /* Aligns icon and text properly */
    align-items: center;
}

/* --- Author Profile --- */
.profile .profile-avatar img {
    border: 3px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.profile .profile-content a {
    color: #0d6efd;
    text-decoration: none;
    font-weight: 500;
}

.profile .profile-content a:hover {
    text-decoration: underline;
}

/* --- Sidebar --- */
#side .card {
    border: none;
}

.sticky-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
    /* Navbar height (approx 70px) + 30px padding */
}

#side .card-header h2,
#side .card-header h3 {
    margin-bottom: 0;
    /* Remove default margin for headings in card headers */
}

#side .list-group-item {
    background-color: #fff;
    /* Ensure list items have white background */
    border-color: #f1f1f1;
}

#side .list-group-item .nav-link {
    padding: 0.5rem 0.75rem;
    /* Adjust padding as needed */
    color: #212529;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#side .list-group-item .nav-link:hover {
    background-color: #e9ecef;
    color: #0d6efd;
    text-decoration: none;
}

#side .list-group-item small {
    font-size: 0.8em;
    color: #6c757d;
}

#side .share-buttons-sidebar .btn {
    font-size: 0.9rem;
}

/* --- Colophon Footer (Upper Footer) --- */
#colophon {
    background-color: #e9ecef;
    /* Slightly darker light gray */
    font-size: 0.9rem;
}

#colophon h3 {
    font-size: 1.1rem;
    color: #343a40;
}

#colophon .nav-link {
    color: #495057;
    padding-left: 0;
    padding-right: 0;
    transition: color 0.2s ease;
}

#colophon .nav-link:hover {
    color: #0d6efd;
}

/* --- Main Footer (Bottom) --- */
#footer {
    font-size: 0.85rem;
}

#footer .pagetop a:hover svg {
    fill: #adb5bd;
    /* Lighter gray on hover for page top arrow */
}

/* --- General Link Styling --- */
a {
    color: #0d6efd;
    text-decoration: none;
    /* Remove underlines by default, add on hover for specific cases */
}

a:hover {
    color: #0a58ca;
    text-decoration: underline;
}

article a {
    /* Links within article body */
    font-weight: 500;
}

/* --- Utility --- */
.border-start-success {
    /* Custom utility if needed, Bootstrap 5 has border-start-{color} */
    border-left-width: 4px !important;
}

/* --- Responsive Adjustments --- */
@media (max-width: 991.98px) {

    /* lg breakpoint */
    .sticky-sidebar {
        position: static;
        /* Disable sticky sidebar on smaller screens */
    }

    #side {
        margin-top: 2.5rem;
    }

    .anchor {
        top: -70px;
        /* Adjust for potentially smaller navbar height or no sticky */
    }
}

@media (max-width: 767.98px) {

    /* md breakpoint */
    body {
        font-size: 15px;
    }

    h1.card-title {
        font-size: 1.6rem;
    }

    .lead {
        font-size: 1.05rem;
    }

    #content {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .share-buttons .btn,
    .share-buttons-sidebar .btn {
        width: 100%;
        /* Make share buttons full width on small screens if desired */
        margin-bottom: 0.5rem !important;
    }

    #navigation .nav-link {
        /* Ensure navbar links have enough space */
        padding: 0.8rem 1rem;
    }
}