/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
    --primary-red: #DD3333;
    --primary-red-rgb: 221, 51, 51; /* fixed to match --primary-red */
    --dark-grey: #212121;
    --light-grey: #6c757d;
    --font-logo: 'Raleway', sans-serif;
    --font-menu: 'Didact Gothic', sans-serif;
    --font-body: 'Lato', sans-serif;
    --font-serif: 'Rajdhani', sans-serif;
}

body {
    font-family: var(--font-body);
    color: var(--dark-grey);
    background-color: #fff;
}

a {
    color: var(--primary-red);
    text-decoration: none;
}
a:hover {
    color: #c86160;
}

h5 {
    line-height: 1.4;
}

/* Respect users that prefer less motion */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
    .post-card:hover img { transform: none !important; }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.site-header {
    /*border-bottom: 1px solid #eee;*/
    padding: 1rem 0;
}

.logo {
    font-family: var(--font-logo);
    font-size: 2.5rem;
    letter-spacing: -2px;
    color: var(--primary-red) !important;
}
.logo .logo-normal { font-weight: 200; }
.logo .logo-bold { font-weight: 600; }

.navbar-nav .nav-link {
    font-family: var(--font-menu);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 1px;
    color: var(--dark-grey);
    padding: .4rem .8rem !important;
    margin: 0 .25rem;
    /*font-weight: bold;*/
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
    background-color: var(--primary-red);
    color: #fff;
}

.header-icons .header-icon {
    color: var(--light-grey);
    font-size: 1rem;
    padding: .5rem;
}
.header-icons .search-icon {
    color: var(--primary-red);
    background-color: #fff;
    padding: .5rem .6rem;
}
.header-icons .login-icon {
    color: var(--primary-red);
    background-color: #fff;
    padding: .5rem .6rem;
}

/*--------------------------------------------------------------
# Main Content & Post Cards
--------------------------------------------------------------*/
.post-card {
    display: block;
    position: relative;
    overflow: hidden;
    color: #fff;
}
.post-card:hover {
    color: #fff;
}
.post-card img {
    width: 100%;
    transition: transform .5s ease;
}
.post-card:hover img { transform: scale(1.05); }

/* Force square aspect ratio for news cards */
.card-square {
    position: relative;
    width: 100%;
    padding-top: 100%;
}
.card-square img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-overlay {
    position: absolute;
    inset: auto 0 0 0; /* top auto, right 0, bottom 0, left 0 */
    padding: 1.5rem;
    z-index: 2;
}
.post-overlay.gradient-overlay-square {
    background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,.4) 50%, transparent 100%) !important;
}

.post-overlay.gradient-overlay-main-banner {
    background: linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 30%) !important;
}


.post-title {
    font-weight: 700;
    font-size: 1.5rem;
    margin-top: .5rem;
    margin-bottom: -0.5rem;
    text-shadow: 0 2px 4px rgba(0,0,0,.8);
}


.post-meta {
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: 1px;
    margin: 0;
}
.post-meta .post-date { font-size: .7rem; }

.post-date {
    text-shadow: 0 1px 2px rgba(0,0,0,.8);
}


.post-date-right {
    font-size: .5rem;
}



.category-tag-red {
    background-color: var(--primary-red);
    font-size: .8rem;
    padding: 3px 5px;
    margin-right: 8px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
a.category-tag-red:hover {
    color: #fcebeb;
}

.category-tag {
    background-color: white;
    font-size: .8rem;
    padding: 3px 5px;
    margin-right: 8px;
    font-weight: bold;
    color: #000;
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
a.category-tag:hover {
    color: #fcebeb;
}

/*--------------------------------------------------------------
# Pagination
--------------------------------------------------------------*/
.pagination .page-link {
    color: var(--primary-red);
    border: 1px solid #ddd;
    margin: 0 5px;
}
.pagination .page-link:hover {
    background-color: #fcebeb;
    color: var(--primary-red);
}
.pagination .page-item.active .page-link {
    background-color: var(--primary-red);
    border-color: var(--primary-red);
    color: #fff;
}

/* Custom pagination menu */
.productSorting ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.productSorting ul li.filter {
    display: inline-block;
    margin: 0 5px;
}
.productSorting ul li.filter span {
    display: block;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--primary-red);
    color: var(--primary-red);
    border-radius: 0;
}
.productSorting ul li.filter:not(.disabled) span {
    cursor: pointer;
}
.productSorting ul li.filter:not(.disabled):hover span,
.productSorting ul li.filter.active span {
    background-color: var(--primary-red);
    color: #fff;
}
.productSorting ul li.filter.disabled span {
    border-color: #ddd;
    color: #ddd;
    cursor: default;
}

/* Mobile pagination buttons */
.productSorting .btn-outline-secondary {
    color: var(--primary-red);
    border-color: var(--primary-red);
}
.productSorting .btn-outline-secondary:hover {
    background-color: var(--primary-red);
    color: #fff;
}
.productSorting .btn-secondary {
    background-color: var(--primary-red);
    border-color: var(--primary-red);
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.site-footer {
    background-color: var(--dark-grey);
    color: #a0a0a0;
    font-size: .9rem;
}
.footer-main { padding: 4rem 0; }

.footer-title {
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: .9rem;
    letter-spacing: 1px;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--primary-red);
    display: inline-block;
    margin-bottom: 1.5rem;
}

.footer-main a { color: #fff; }
.footer-main a:hover { color: #ddd; }

.latest-post {
    display: flex;
    align-items: center;
}
.latest-post img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    margin-right: 15px;
    background-color: var(--primary-red); /* Placeholder bg */
}
.latest-post-info span {
    display: block;
    font-size: .75rem;
    text-transform: uppercase;
    color: #888;
    margin-top: 5px;
}

.social-icons a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #333;
    color: #fff;
    margin-right: 10px;
    transition: background-color .3s;
}
.social-icons a:hover {
    background-color: var(--primary-red);
    color: #fff;
}

.footer-bottom {
    background-color: #1a1a1a;
    text-align: center;
    padding: 1rem 0;
    font-size: .8rem;
}
.footer-bottom p { margin: 0; }

/*--------------------------------------------------------------
# Cards (3:2 aspect)
--------------------------------------------------------------*/
.post-card-wide {
    aspect-ratio: 3 / 2; /* 3:2 rectangle */
    border-radius: 0;
}
.post-card-wide img {
    height: 100%;
    object-fit: cover;
}

/* subtle red/sepia tint over the image */
.post-card-wide::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(var(--primary-red-rgb), .1);
    mix-blend-mode: multiply;
    pointer-events: none;
    transition: background-color .4s ease;
}
.post-card-wide:hover::after { background-color: rgba(var(--primary-red-rgb), 0); }

.post-card-wide .post-overlay {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.25rem;
    background: linear-gradient(to top, rgba(0,0,0,.9) 0%, transparent 70%);
}
.post-card-wide .post-title {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.25;
    color: #fff;
}
.post-card-wide .post-meta {
    color: #f0f0f0;
    display: flex;
    align-items: center;
}

/* Full-width hero card with 3:1 aspect ratio */
.post-card-hero {
    aspect-ratio: 2 / 1;
    border-radius: 0;
}
@media (max-width: 767.98px) {
    .post-card-hero {
        aspect-ratio: 2 / 1;
    }
}
@media (max-width: 575.98px) {
    .post-card-hero {
        aspect-ratio: 1 / 1;
    }
}
.post-card-hero img {
    height: 100%;
    object-fit: cover;
}

.post-card-hero .post-overlay {
    display: flex;
    flex-direction: column;
    justify-content: end; /* Center vertically */
    align-items: center;     /* Center horizontally */
    text-align: center;      /* Ensure text is centered */
    inset: 0; /* Make it cover the whole card */
    /*background: rgba(0,0,0,0.5); !* Darken background for better readability *!*/
}
.post-card-hero .post-title {
    font-size: 2.5rem; /* Increase title size for prominence */
    margin-bottom: 0; /* Remove bottom margin */
}
.post-card-hero .post-meta {
    display: none; /* Hide post-meta (categories, date, author) */
}

/* Center logo */
.site-header .logo {
    margin-inline: auto;
    text-align: center;
}

/* Allow nav items to wrap onto second line */
.navbar-nav {
    flex-wrap: wrap;
    justify-content: center;
    flex: 1 1 auto;
}

/* Reserve space on the right for flag + search */
.reserved-right {
    flex: 0 0 120px;
    justify-content: flex-end;
}

/* Equal-height card wrapper */
.card-equal {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

/* Title under image, fixed 2-line height */
.post-title-below {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.3;
    margin: .5rem 0 0;
    color: #111;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.1rem * 1.3 * 2);
}
.post-title-below a {
    color: inherit;
    text-decoration: none;
}
.post-title-below a:hover {
    color: var(--primary-red);
    text-decoration: underline;
}

/* Hide legacy overlaid title */
.post-card-wide .post-title { display: none !important; }

/* Language flag button (matches search style) */
.languageSwitcher .flag-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    background-color: white;
    /*border: 1px solid var(--primary-red);*/
    border-radius: 0;
    overflow: hidden;
}
.languageSwitcher .flag-icon img {
    width: 26px;
    height: auto;
    background-color: #fff;
    padding: 3px;
    border-radius: 0;
}

/* Navbar toggler */
.navbar-toggler {
    border: 1px solid var(--primary-red) !important;
    border-radius: 0 !important;
}
.navbar-toggler-icon {
    /* clean quoting for data URI */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path stroke="%23DD3333" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>');
}

/*--------------------------------------------------------------
# Search Modal
--------------------------------------------------------------*/
.search-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.search-modal-content {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    width: 90%;
    max-width: 400px;
}

.search-submit-btn {
    background-color: var(--primary-red);
    border-color: var(--primary-red);
    color: #fff;
}


/* Make all columns in this row equal height */
.row.equal-cols > [class*="col-"] { display: flex; }
.card-equal { display: flex; flex-direction: column; height: 100%; }

/* Ensure the big square cards actually fill the available height */
.post-card.card-square { display: block; height: 100%; }
.post-card.card-square img { width: 100%; height: 100%; object-fit: cover; }


/* Item internals */
.triple-article-item { display: flex; align-items: center; gap: 0rem; min-height: 1; }
.triple-article-img { width: 128px; height: 128px; object-fit: cover; display: block; }
.category-tags-small { margin-top: 0px; margin-bottom: 0px; text-transform: uppercase; line-height: 1.2;}

.category-tag-small {
    font-size: .8rem;
    margin-right: 8px;
    font-weight: bold;
    color: var(--primary-red);
}
a.category-tag-small:hover {
    color: #7c7c7c;
}
.author {
    font-size: .75rem;
}
a.author:hover {
    text-decoration: underline;
}

.article-subtitle {
    color: var(--primary-red);

}


/* Force Summernote dropdowns to show when clicked */
.note-dropdown-menu.show {
    display: block !important;
    position: absolute !important;
    z-index: 2000 !important;
}

/* Fix Bootstrap 5 compatibility for Summernote */
.note-toolbar .dropdown-menu {
    position: absolute;
    z-index: 2000;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

/* Color palette specific fixes */
.note-color .note-dropdown-menu {
    min-width: 290px;
    max-width: 290px;
}


#recaptcha-container {
    transform: scale(0.6);   /* shrink overall width/height */
    transform-origin: left center; /* keep it pinned to the left */
}

.g-recaptcha,
#recaptcha-container > div {
    margin: 0 !important;    /* remove extra margin Google sometimes adds */
}

.d-flex.justify-content-center {
    overflow: hidden;        /* avoid scrollbars if transform spills out */
}