/* ========================================================================
   Custom Styles for Professional Tree Services
   Version: 5.4 (Final Adjustments)
   ======================================================================== */

/* --- Table of Contents ---
1.0 General & Root Variables
2.0 Typography
3.0 Navigation & Header
4.0 Components & Links
5.0 Dark Mode Overrides
------------------------------------------------------------------------- */


/* 1.0 General & Root Variables
   ======================================================================== */

:root {
    --brand-green: #198754;
}

body {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
}


/* 2.0 Typography
   ======================================================================== */

h1, .h1 {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 1.75rem;
}

h2, .h2 {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 1.5rem;
}

h3, .h3, 
h4, .h4 {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    font-style: normal;
}

.lead {
    font-family: 'Quicksand', sans-serif;
    font-weight: 500;
    font-style: italic;
    font-size: 1.1rem;
}


/* 3.0 Navigation & Header
   ======================================================================== */

.navbar-brand,
.navbar-nav .nav-link {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.navbar-brand {
    font-size: 1.3rem;
    color: var(--brand-green) !important;
}

.navbar-nav .nav-link {
    font-size: 1.0rem;
    padding: 0.5rem 1rem;
    transition: color 0.3s ease-in-out;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
    color: var(--brand-green) !important;
}

#theme-dropdown-button {
    --bs-btn-bg: #146c43;
    --bs-btn-border-color: #146c43;
    --bs-btn-hover-bg: #0f5132;
    --bs-btn-hover-border-color: #0f5132;
    --bs-btn-active-bg: #0a3622;
    --bs-btn-active-border-color: #0a3622;
    --bs-btn-focus-shadow-rgb: 40, 167, 69;
}


/* 4.0 Components & Links
   ======================================================================== */
   
.btn-lg {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
}

.card-title {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.25rem;
}

.service-area-box {
    color: #052c65;
}
.service-area-box h3 {
    color: inherit;
}
.service-area-box a {
    color: #052c65;
    text-decoration: none;
}
.service-area-box a:hover {
    color: #04224e;
    text-decoration: underline;
}

.service-area-box .d-flex {
    margin-top: -1rem;
}

.icon-separator {
    font-size: 0.6rem; /* User's final adjustment */
    vertical-align: middle; 
}


aside .list-group-item {
    display: list-item;
    list-style-type: disc;
    list-style-position: inside;
    padding-left: 0;
    border: 0;
}
aside .list-group-item a {
    text-decoration: none;
}
aside .list-group-item a:hover {
    text-decoration: underline;
}
aside h3.border-bottom {
    font-weight: 700;
}

.service-section {
    border-left-width: 5px;
    border-left-style: solid;
    padding-left: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.service-section.border-success { border-color: var(--bs-success); }
.service-section.border-info    { border-color: var(--bs-info); }
.service-section.border-primary  { border-color: var(--bs-primary); }
.service-section.border-danger   { border-color: var(--bs-danger); }
.service-section.border-secondary{ border-color: var(--bs-secondary); }


/* 5.0 Dark Mode Overrides
   ======================================================================== */

[data-bs-theme="dark"] .link-dark {
    color: #dee2e6 !important;
}

[data-bs-theme="dark"] .link-dark:hover {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .service-area-box,
[data-bs-theme="dark"] .service-area-box a {
    color: #a3b3cc;
}
[data-bs-theme="dark"] .service-area-box a:hover {
    color: #c0cddb;
}

/* --- Dark Mode Transitions --- */
:root, [data-bs-theme="dark"] {
    /* This makes color and background changes transition smoothly */
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

body {
    /* This ensures the main page background color uses the CSS variable for transitioning */
    background-color: var(--bs-body-bg);
}