/* 1. Grid Container: Left-aligned with dynamic column capping */
.flipbook-grid {
  display: grid;
  /* Automatically wraps items, sizing them at 220px, up to a maximum of 5 columns */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  justify-content: start;   /* Left aligns the entire grid container within the viewport */
  justify-items: start;     /* Left aligns cards inside their individual grid cells */
  gap: 30px;                /* Consistent spacing between all items horizontally and vertically */
  padding: 20px;
  width: 100%;
  max-width: 1300px;        /* Limits total width so a 6th item cannot slip onto a large display monitor */
  box-sizing: border-box;
}

/* 2. Individual Item Card: Manages dimensions and text layout */
.media-card {
  display: flex;
  flex-direction: column;   
  align-items: flex-start;  /* Left aligns internal text and image elements */
  text-align: left;         /* Forces text to align cleanly to the left edge */
  width: 100%;              /* Allows the card to flexibly fill its assigned grid cell space */
}

.top-text {
  font-family: arial, helvetica, sans-serif;
  font-size: 1.5rem;
  margin-top: 0;
  margin-bottom: 12px;
  color: #333333;           
  transition: color 0.3s ease; 
}

.image-link {
  display: block;    
  text-decoration: none;   
  cursor: pointer;          
  width: 100%;
}

.image-wrapper {
  overflow: hidden;         
  border-radius: 4px;       
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
  width: 100%;
}

.bottom-image {
  width: 100%;              
  height: auto;             
  display: block;
  margin-bottom: 12px;      /* Creates a clean gap between the image and what follows */
  transition: transform 0.3s ease, opacity 0.3s ease; 
}

/* --- Combined Hover States --- */

.image-link:hover .top-text {
  color: #003366;           /* Deep dark blue (Navy) */
}

.image-link:hover .bottom-image {
  transform: scale(1.04);   
  opacity: 0.9;             
}
/* 1. Shrink margin gaps directly around the Parish Council heading title */
h1.page-header, .page-header h1, h1 {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

/* 2. Target the block containers used by Joomlashack to hold the top branding header */
#js-header, .js-header, #logo, .logo-block {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

/* 3. Tighten padding on the primary content container block if gaps persist */
#js-mainbody, .js-mainbody {
    padding-top: 2px !important;
}

/* 1. Eliminate the top and bottom padding from the logo row container */
div.row-fluid.p-b-3.p-t-3.flex-md,
.row-fluid.p-b-3.p-t-3 {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* 2. Strip the default block margins from the H2 header inside the logo wrapper */
#logo h2, 
#logo a.image h2 {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    line-height: 1.1 !important;
}

/* 1. Force the dynamic sticky wrapper clones to maintain the same flat color */
.all-mode-sticky, 
.js-fixed-sticky,
.sticky-wrapper,
div[class*="sticky"] {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* 2. Target the inner blocks inside the toolbar row to ensure zero color bleaching */
.wrapper-toolbar, 
div.wrapper-toolbar,
.wrapper-toolbar .container, 
.wrapper-toolbar .row-fluid {
    background: #000000 !important;
    background-color: #000000 !important;
    border: none !important;
    box-shadow: none !important;
}

/* 3. Ensure full-width background scaling across the scrolled structural container */
header.all-mode-sticky,
.wrapper-toolbar.all-mode-sticky {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}
/* Replaces immediate above items */
/* 1. Global structural lock - apply black to the toolbar rows and their containers */
.wrapper-toolbar,
div.wrapper-toolbar,
.wrapper-toolbar .container,
.wrapper-toolbar .row-fluid,
.wrapper-toolbar [class*="span"] {
    background: #000000 !important;
    background-color: #000000 !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. Target Joomlashack's sticky injector states (both classes and dataset flags) */
.js-fixed-sticky,
.all-mode-sticky,
.sticky-wrapper,
div[id*="sticky"],
div[class*="sticky"] {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* 3. Eliminate underlying container bleed through padding gaps */
#js-header, 
.js-header,
#js-navigation,
.js-navigation {
    background-color: #000000 !important;
}

/* 4. Ensure structural elements stretch across full screen boundaries without clipping */
.all-mode-sticky, 
.js-fixed-sticky {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
}
/* Repaces above x 2 */
/* 1. Isolate and safely color ONLY the sticky nav bar component when active */
div.all-mode-sticky,
header.all-mode-sticky,
.sticky-wrapper .all-mode-sticky,
.js-fixed-sticky {
    background-color: #000000 !important;
    background: #000000 !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    position: fixed !important;
}

/* 2. Target the inner menu row when sticky to force full-width stretch */
.all-mode-sticky .container,
.all-mode-sticky .row-fluid,
.js-fixed-sticky .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    background-color: #000000 !important;
    box-sizing: border-box !important;
}

/* 3. Revert your main logo area background back to its clean default */
#logo, 
#logo a.image,
.logo-block,
div.row-fluid.p-b-3.p-t-3.flex-md {
    background: none !important;
    background-color: transparent !important;
}

/* 4. Keep the static, non-sticky top toolbar uniform when at the top of the page */
div.wrapper-toolbar {
    background-color: #000000 !important;
    background: #000000 !important;
}
/* Replaces above x 3 */
/* 1. Force the fixed top container to span edge-to-edge */
.navbar-fixed-top {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background-color: #000000 !important;
}

/* 2. Fill the inner Bootstrap navigation container with deep black */
.navbar-fixed-top .navbar-inner,
div.navbar-inverse .navbar-inner,
#toolbar .navbar-inner {
    background: #000000 !important;
    background-color: #000000 !important;
    border: none !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 3. Keep the static toolbar region solid black when parked at the very top */
div.wrapper-toolbar,
#toolbar {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* 4. Keep the main website logo container background transparent */
#logo, 
#logo a.image,
.logo-block,
div.row-fluid.p-b-3.p-t-3.flex-md {
    background: none !important;
	
    background-color: transparent !important;
}
/* Replaces above x 4 */
/* 1. Force the top fixed bar container to stretch cleanly edge-to-edge across the monitor */
.navbar-fixed-top {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background-color: #000000 !important;
}

/* 2. Color ONLY the inner bar element nested explicitly inside the fixed layout nav block */
nav#toolbar .navbar-fixed-top .navbar-inner,
#toolbar .navbar-fixed-top .navbar-inner,
.navbar-fixed-top .navbar-inner {
    background: #000000 !important;
    background-color: #000000 !important;
    border: none !important;
    box-shadow: none !important;
    background-image: none !important; /* Disables standard Bootstrap gradient overrides */
}

/* 3. Keep the static toolbar wrapper black before the user scrolls */
div.wrapper-toolbar,
div.wrapper-toolbar #toolbar {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* 4. Complete insulation lock: Keep all logo sections natively transparent */
header#header .wrapp-logo-menu,
header#header #logo, 
header#header #logo a.image,
header#header div.row-fluid.p-b-3.p-t-3.flex-md {
    background: transparent !important;
    background-color: transparent !important;
}
/* Replaces above x 5 */
/* 1. Limit the black background exclusively to the fixed menu bar container */
#toolbar.navbar-fixed-top,
#toolbar .navbar-inner {
    background: #000000 !important;
    background-color: #000000 !important;
    border: none !important;
    box-shadow: none !important;
    background-image: none !important; /* Disables standard Bootstrap gradient overrides */
}

/* 2. Make sure the sticky container stays full viewport width */
#toolbar.navbar-fixed-top {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}

/* 3. Keep the static toolbar wrapper black before the user scrolls */
div.wrapper-toolbar {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* 4. Complete insulation lock: Force all elements around the logo to drop any dark fills */
header#header .wrapp-logo-menu,
.wrapp-logo-menu,
#logo, 
#logo a.image,
div.row-fluid.p-b-3.p-t-3.flex-md {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}
/* Replaces above x 6 */
/* ==========================================================================
   1. FIXED SCROLLING NAVBAR LOCK (FULL WIDTH, BLACK BACKGROUND EDGE-TO-EDGE)
   ========================================================================== */
#toolbar.navbar-fixed-top,
.navbar-fixed-top {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: #000000 !important;
    background-color: #000000 !important;
}

/* Forces the active sticky menu bar strip internals to stay black */
#toolbar .navbar-inner,
.navbar-fixed-top .navbar-inner {
    background: #000000 !important;
    background-color: #000000 !important;
    border: none !important;
    box-shadow: none !important;
    background-image: none !important;
}

/* ==========================================================================
   2. STATIC TOOLBAR ROW LOCK (BLACK ONLY AT THE VERY TOP ZONE OF THE SITE)
   ========================================================================== */
div.wrapper-toolbar {
    background: #000000 !important;
    background-color: #000000 !important;
    min-height: 42px !important;
}

/* ==========================================================================
   3. LOGO INSULATION SHIELD (FORCES THE LOGO AREA TO BE TRANSPARENT/WHITE)
   ========================================================================== */
header#header .container-fluid.wrapp-logo-menu,
header#header .row-fluid.p-b-3.p-t-3.flex-md,
header#header #logo,
header#header #logo a.image,
header#header h2 {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}
/* Replaces above x 7 */
/* ==========================================================================
   1. ISOLATE THE TOP TOOLBAR & FIXED NAV ONLY (FORCE SOLID BLACK)
   ========================================================================== */
/* Color the wrapper bar sitting at the absolute top of the page */
div.wrapper-toolbar {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* Force the sticky container to stretch full-width when scrolling */
#toolbar.navbar-fixed-top {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: #000000 !important;
    background-color: #000000 !important;
}

/* Restrict the black background color strictly to elements inside the nav block */
#toolbar .navbar-fixed-top .navbar-inner,
#toolbar .navbar-inverse .navbar-inner,
#toolbar .navbar-inner,
#toolbar ul.navbar-inner.nav {
    background: #000000 !important;
    background-color: #000000 !important;
    background-image: none !important; /* Strips default theme gradients */
    border: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   2. LOGO INSULATION ZONE (FORCE ABSOLUTE TRANSPARENCY OVERRIDES)
   ========================================================================== */
/* Disables black background leaking onto the main layout wrapper header */
header#header.header {
    background: transparent !important;
    background-color: transparent !important;
}

/* Explicitly targets the container holding your blue text logo */
header#header div.container-fluid.wrapp-logo-menu,
div.container-fluid.wrapp-logo-menu,
div.wrapp-logo-menu .row-fluid.p-b-3.p-t-3.flex-md,
div.wrapp-logo-menu #logo,
div.wrapp-logo-menu #logo a.image,
div.wrapp-logo-menu h2 {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}
/* 1. Force squeeze the padding directly below the logo image section */
header#header .row-fluid.p-b-3.p-t-3.flex-md,
div.container-fluid.wrapp-logo-menu .row-fluid {
    padding-bottom: 5px !important;
}

/* 2. Tighten the container wrapper space directly below the header structure */
header#header {
    margin-bottom: 5px !important;
}

/* 3. Strip out excessive top spacing from Joomla's article component block */
#js-mainbody,
#content,
.mainbody,
div.item-page {
    margin-top: 5px !important;
    padding-top: 5px !important;
}

/* 4. Remove default vertical margins on the first featured article heading */
.blog-featured h1,
.blog-featured h2,
.item-page h1,
.item-page h2 {
    margin-top: 0px !important;
    padding-top: 0px !important;
}
/* Reduce the massive top and bottom padding on the main page wrapper grid */
div.container-fluid.unlimited-grid.main-wrapp.p-t-4.p-b-4,
.main-wrapp.p-t-4.p-b-4,
.unlimited-grid.main-wrapp {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
/* Reduce the gap directly beneath the leading article blocks */
div[class^="leading-"], 
div[class*=" leading-"],
.leading-0, 
.items-row {
    margin-bottom: 15px !important;
    padding-bottom: 0px !important;
}

/* Tighten spacing on any separate individual block rows if gaps persist */
.blog-featured .items-row,
.category-blog .items-row {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}
/* ==========================================================================
   1. RESTORE AND DEFINE THE GREY BACKGROUND / BORDERS FOR ARTICLES
   ========================================================================== */
/* Ensures the framework's native article boxes keep their intended background style */
.blog-featured .item, 
.category-blog .item, 
div[class^="leading-"], 
div[class*=" leading-"],
.items-row,
.article-striped {
    background-color: ##f9f9f9 !important; /* Standard soft framework grey background */
    border: 1px solid #e3e3e3 !important;   /* Subtle boundary border */
    padding: 15px !important;              /* Restores breathing space inside the box */
    margin-bottom: 20px !important;        /* Spaces articles out from each other */
    border-radius: 4px !important;
}

/* ==========================================================================
   2. HIDDEN LAYOUT FOR EMPTY TRAILING CONTAINERS AND SYSTEM FOOTERS
   ========================================================================== */
/* Forcefully hides the uncollapsible placeholder wrapper blocks at the very bottom */
#js-bottom,
.js-bottom,
footer#footer,
.wrapper-footer,
.blog-featured > div:last-child {
    display: none !important;
    visibility: hidden !important;
    height: 0px !important;
    min-height: 0px !important;
    padding: 0px !important;
    margin: 0px !important;
    border: none !important;
}
/* Replaces some of above */
/* ==========================================================================
   UPDATED: ROUNDED ARTICLE BOXES WITH A THIN BLACK BORDER
   ========================================================================== */
.blog-featured .item, 
.category-blog .item, 
div[class^="leading-"], 
div[class*=" leading-"],
.items-row,
.article-striped {
    background-color: #f5f5f5 !important; /* Soft grey background color */
    border: 1px solid #000000 !important;   /* Thin solid black border */
    border-radius: 8px !important;         /* Smooth rounded corners (increase for more curve) */
    padding: 15px !important;              /* Breathing room for text inside the box */
    margin-bottom: 20px !important;        /* Clear separation gap between articles */
    box-shadow: none !important;
}
/* Meetings page */
/* Container & Basics */
.meetings-container {
  max-width: 800px;
  margin: 0 auto;
  font-family: system-ui, -apple-system, sans-serif;
  color: #333;
}

.meeting-highlight {
  background-color: #f4f7f6;
  border-left: 4px solid #005a36;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

/* Year Architecture Setup */
.years-archive {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
}

.year-block {
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  background-color: #fff;
  overflow: hidden;
}

/* Base Headings & Accordion Triggers */
.current-year {
  padding: 1.5rem;
}

.year-heading {
  margin: 0;
  color: #005a36;
}

.current-year .year-heading {
  border-bottom: 2px solid #005a36;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

/* Native Accordion Styling */
summary.year-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  font-size: 1.25rem;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  background-color: #f8fafc;
  transition: background-color 0.2s ease;
}

summary.year-heading:hover {
  background-color: #f1f5f9;
}

/* Custom CSS Arrow Indicator for Accordion */
summary.year-heading::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid #005a36;
  border-bottom: 2px solid #005a36;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

/* Rotates the arrow when accordion opens */
details[open] summary.year-heading::after {
  transform: rotate(-135deg);
}

/* Accordion Inner Content Wrapper */
.accordion-content {
  padding: 0 1.5rem 1.5rem 1.5rem;
  border-top: 1px solid #e1e1e1;
  background-color: #fff;
}

/* Row Layout */
.meeting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 0;
  border-bottom: 1px solid #f0f0f0;
  gap: 1rem;
}

.accordion-content .meeting-row:last-child {
  border-bottom: none;
}

/* Text, Status & Badges */
.meeting-date {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.badge {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  background-color: #dee2ff;
  color: #3b429f;
  border-radius: 4px;
  font-weight: normal;
}

/* Action Utility Layout */
.meeting-links {
  display: flex;
  gap: 0.5rem;
}

.btn {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  font-size: 0.875rem;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}

.btn-agenda {
  background-color: #005a36;
  color: white;
}

.btn-agenda:hover {
  background-color: #004428;
}

.btn-minutes {
  background-color: #edf2f7;
  color: #2d3748;
}

.btn-minutes:hover {
  background-color: #e2e8f0;
}

/* Responsive Overrides */
@media (max-width: 550px) {
  .meeting-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
  
  .meeting-links {
    width: 100%;
  }
}