@import url('https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* CSS Variables */
:root {
    --primary-font: 'Crete Round', serif;
    --secondary-font: 'Noto Sans', sans-serif;
    --primary-color: #40280a; /* dark brown */
    --secondary-color: #fdf5de; /* background-color: ; */
    --highlight-color: #40280a; /* text-colour */
    --element-color: #8a4512; /* light brown */
    --light-highlight-color: #7a9fc2; /* light blue */
}

/* Set the page background to the site's secondary color variable */
body {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    font-family: var(--secondary-font);
}

.element {
    background-color: var(--element-color);
    color: var(--secondary-color);
}

/* Typography: headings use the primary brand font; body and UI use the secondary font */
h1, h2, h3, h4, h5, h6,
.navbar-brand,
.display-5,
.lead {
    font-family: var(--primary-font);
}

/* Ensure most content and controls use the secondary (readable) font */
body, p, a, li, span, input, textarea, button, label, .btn, .nav-link {
    font-family: var(--secondary-font);
}

/* Small tweak: keep form controls consistent */
input, textarea, select {
    font-family: var(--secondary-font);
}

/* Make the navbar brand/title more prominent */
.navbar-brand {
    font-size: 1.5rem; /* base size for navbar title */
    font-weight: 700;
    letter-spacing: 0.5px;
}

@media (min-width: 992px) {
    .navbar-brand {
        font-size: 2rem; /* larger on large screens */
    }
}

/* When navbar is fixed, add spacing to body so content isn't hidden under it */
/* Adjust values if your navbar height changes due to font-size or padding */
@media (min-width: 992px) {
    header {
        padding-top: 80px; /* enough for larger navbar on desktop */
    }
}

@media (max-width: 991.98px) {
    header {
        padding-top: 70px; /* slightly smaller on mobile/tablet */
    }
}

/* Navbar and footer text should use the secondary color variable */
.navbar.element .navbar-brand,
.navbar.element .nav-link {
    color: var(--secondary-color) !important;
}

.navbar.element .navbar-toggler {
    border-color: var(--secondary-color) !important;
}

/* Footer overrides: `.element` sets color:white globally, override it here for footer */
footer.element,
footer.element small,
footer.element a {
    color: var(--secondary-color) !important;
}

/* Navbar logo sizing */
.navbar-logo {
    height: 40px;
    width: auto;
    margin-right: 0.5rem;
}

@media (min-width: 992px) {
    .navbar-logo {
        height: 48px;
    }
}

main,
section:first-of-type {
    padding-top: 100px;
}