html, body {
    height: 100%;
    overscroll-behavior: none; /* Prevent bounce/scroll chaining */
    touch-action: pan-y; /* allow only vertical scrolling */
    -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
}
body {
    display: flex;
    flex-direction: column;
}
main {
    flex: 1;
}

.input-group .form-control {
    max-width: 200px;
}



/* Custom theme colors to match WTN */
:root {
    --wtn-primary: #1a4a75;
    --wtn-accent: #EEE090;
    --wtn-footer-bg: #000;
    --wtn-footer-text: #fff;
}
.navbar {
    background-color: white;
    color: var(--wtn-primary);
}
.navbar .nav-link {
    color: var(--wtn-primary)  !important;
}
.navbar .nav-link:hover {
    color: var(--wtn-primary) !important;
}
header {
    background-color: white;
    color: var(--wtn-primary);
}
body {
    background-color: var(--wtn-accent);
    color: black;
}
footer {
    background-color: var(--wtn-footer-bg);
    color: var(--wtn-footer-text);
}


/* Top header (white background) */
.top-header {
    background-color: #ffffff;
    padding: 0.5rem 0;
}

/* Blue headings */
h1, h2, h3, h4, h5, h6, dt {
    color: var(--wtn-primary);
}

/* Black footer */
footer {
    background-color: #000000;
    padding: 1rem 0;
}

dl, dd {
    margin-left: 1rem;
}

a, a:hover {
    color: var(--wtn-primary);
    text-decoration: underline;
}

h1 a, h2 a {
    text-decoration: none;
    color: inherit; /* keeps the heading color */
}

h1 a:hover, h2 a:hover {
    text-decoration: underline; /* optional: only underline on hover */
    color: var(--wtn-primary);  /* optional: use your theme color on hover */
}


.hero-image img {
    max-height: 400px;
    object-fit: contain;
}

q, blockquote {
    quotes: "“" "”" "‘" "’";
}

blockquote {
    padding-left: 1rem;
    margin-left: 0;
    font-style: italic;
}

blockquote p:last-child {
    margin-bottom: 0; /* tighter look if only one paragraph */
}

blockquote footer {
    font-size: 0.875rem;
    color: #6c757d; /* Bootstrap secondary text color */
}

blockquote p::before {
    content: open-quote;
    font-size: 2rem;
    line-height: 0;
    vertical-align: -0.4rem;
    color: var(--wtn-primary); /* WTN blue */
    margin-right: 0.25rem;
}

blockquote p::after {
    content: close-quote;
    font-size: 2rem;
    line-height: 0;
    vertical-align: -0.4rem;
    color: var(--wtn-primary); /* WTN blue */
    margin-left: 0.25rem;
}

.pagination .page-link {
    color: var(--wtn-primary);
}
.pagination .page-item.active .page-link {
    background-color: var(--wtn-primary);
    color: #fff;
}

/* Apply WTN primary color to outline buttons */
.article-nav .btn-outline-primary {
    color: var(--wtn-primary);
    border-color: var(--wtn-primary);
}

.article-nav .btn-outline-primary:hover,
.article-nav .btn-outline-primary:focus {
    background-color: var(--wtn-primary) !important;
    color: #fff;
}

.btn-primary {
    background-color: var(--wtn-primary);
    border-color: var(--wtn-primary);
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--wtn-primary);
    border-color: var(--wtn-primary);
    filter: brightness(125%);
    text-decoration: none;
}