html {
  scroll-behavior: smooth;
}

/* Remove boxed layout across site (Rookie theme) */

/* General site containers */
#page,
.site,
.site-container,
.site-content,
.site-footer,
.site-header,
#masthead {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-shadow: none !important; /* removes boxed shadow if present */
}

/* Header images and banners */
.site-header img,
.header-image img {
    width: 100% !important;
    height: auto !important;
    display: block;
}

/* Footer widgets and container */
.site-footer,
.site-footer .container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}


/* Cover block hover effect */
.wp-block-cover {
    position: relative;
    overflow: hidden;
}

/* Overlay (transparent by default) */
.wp-block-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,0); /* fully transparent before hover */
    transition: background-color 0.3s ease;
    z-index: 1;
}

/* On hover = black at 75% opacity */
.wp-block-cover:hover::before {
    background-color: rgba(0,0,0,0.75);
}

/* Keep content above overlay */
.wp-block-cover .wp-block-cover__inner-container {
    position: relative;
    z-index: 2;
}

/* Change main navigation menu font size */
.main-navigation .nav-menu li a {
    font-size: 20px; /* adjust to your preferred size */
}


/* ====================== */
/* 3-Column Card Layout   */
/* ====================== */

/* Grid container */
.blog .site-main {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    gap: 20px; /* space between cards */
    margin: 0;
    padding: 0;
    align-items: start; /* prevents cards stretching across rows */
}

/* Each post card */
.blog .post {
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 350px; /* uniform minimum height for all cards */
}

/* Ensure the image link wrapper fills the card */
.blog .post a {
    display: block;
    width: 100%;
}

/* Featured image full width, fixed height */
.blog .post img {
    width: 100%;
    height: 200px; /* fixed height for uniform cards */
    border-radius: 8px 8px 0 0;
    display: block;
    object-fit: cover; /* scales image nicely */
    transition: transform 0.3s ease;
}

/* Image hover effect */
.blog .post a img:hover {
    transform: scale(1.03);
}

/* Post date styling */
.blog .post .entry-date {
    font-size: 14px;
    color: #666;
    text-align: center;
    margin: 10px 0 5px 0;
}

/* Title styling and clickable */
.blog .post .entry-title a {
    text-decoration: none;
    color: #000;
    font-size: 18px;
    margin: 5px 0 10px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center; /* center the title */
    transition: color 0.3s;
}

.blog .post .entry-title a:hover {
    color: #f3e42b; /* theme accent color */
}

/* Hide full content/excerpt */
.blog .post .entry-content {
    display: none;
}

/* Hide all tags on News page cards */
.blog .post .sp-post-tags,
.blog .post .fl-post-meta .sp-post-tags,
.blog .post .post-meta .sp-post-tags,
.blog .post .post-meta span.tags,
.blog .post .entry-meta span.tags {
    display: none !important;
}

/* Read More button styling */
.blog .post .read-more {
    display: inline-block;
    margin: 10px auto 0 auto; /* center button */
    padding: 8px 15px;
    background: #000;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    transition: background 0.3s;
}

.blog .post .read-more:hover {
    background: #f3e42b; /* theme accent color */
    color: #000;
}

/* ====================== */
/* Responsive Grid        */
/* ====================== */

/* 2 columns on tablets */
@media (max-width: 1024px) {
    .blog .site-main {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 1 column on mobile */
@media (max-width: 768px) {
    .blog .site-main {
        grid-template-columns: 1fr;
    }
}