/* ==========================================================================
TORONTO HAKKA HERITAGE ALLIANCE (THHA) - CONSOLIDATED HOMEPAGE STYLES
Platform: Joomla 5 / T4 Framework (Bootstrap 5)
Base Row Canvas Palette: Warm Cream (#FAF3E0)
========================================================================== */

/* --------------------------------------------------------------------------

GLOBAL CANVAS & TYPOGRAPHY RESETS
-------------------------------------------------------------------------- */
html {
scroll-behavior: smooth;
}

body, #t4-mainbody, .t4-wrapper {
background-color: #FAF3E0 !important;
color: #2A1B15;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}

/* Ensure all T4 row section canvases default to Warm Cream /
.t4-section,
section[id^="t4-"],
div[class="-section"] {
background-color: #FAF3E0;
}

/* Text Selection Highlight */
::selection {
background-color: #8B0000;
color: #FAF3E0;
}

/* Link Hover Utilities */
a.hover-danger:hover {
color: #8B0000 !important;
}

a.hover-white:hover {
color: #FFFFFF !important;
opacity: 1 !important;
}

/* --------------------------------------------------------------------------
2. JOOMLA NATIVE MODULE LIST & BULLET OVERRIDES
-------------------------------------------------------------------------- */
.mod-articlescategory ul,
.mod-articles-category ul,
.mod-articlesnews ul,
.list-unstyled-module ul {
list-style: none !important;
list-style-type: none !important;
padding-left: 0 !important;
margin-left: 0 !important;
}

.mod-articlescategory li,
.mod-articles-category li,
.mod-articlesnews li,
.list-unstyled-module li {
list-style-type: none !important;
padding-left: 0 !important;
}

/* --------------------------------------------------------------------------
3. CENTRALIZED ROW CANVAS BACKGROUNDS (ROWS 1 - 9)
Note: Rows 1 & 2 rely entirely on native T4 Layout Builder Palette settings.
-------------------------------------------------------------------------- */

/* --- Row 1 (Header/Logo) & Row 2 (Nav Bar) --- /
/ Managed natively by T4 Layout Builder Palettes (Light / Warm Cream & Dark Accent) */
.t4-header,
.t4-nav {
margin-bottom: 0 !important;
}

/* Ensure Nav Menu Links in Row 2 adopt clean white contrast on dark palettes */
.t4-nav .nav-link,
.t4-megamenu .nav-link,
.t4-nav .navbar-nav > li > a {
color: #FFFFFF;
}

.t4-nav .nav-link:hover,
.t4-megamenu .nav-link:hover,
.t4-nav .navbar-nav > li > a:hover {
color: #FAF3E0;
}
/* ==========================================================================
   ROW 2 HEIGHT CONTROL OVERRIDE
   ========================================================================== */

/* Reduce Row 2 height by decreasing link padding */
.t4-nav .navbar-nav .nav-link,
.t4-megamenu .navbar-nav .nav-link {
  padding-top: 0.5rem !important;    /* Default is ~1rem */
  padding-bottom: 0.5rem !important; /* Default is ~1rem */
}

/* Remove extra outer wrapper padding */
.t4-nav,
.t4-nav .navbar {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: auto !important;
}


/* --- Row 8: Call to Action Row --- */
.row-cta,
.cta-section {
background-color: #8B0000 !important;
}

/* --- Row 9: Footer Canvas --- */
.row-footer,
.footer-section {
background-color: #1A080B !important;
}

/* --------------------------------------------------------------------------
4. ROW 3: HERO BANNER (SOFT BLOSSOM GRADIENT CARD)
-------------------------------------------------------------------------- */
.hero-section,
#t4-hero {
margin-top: 0 !important;
padding-top: 2rem;
padding-bottom: 2rem;
}

.hero-section .hero-card,
.hero-content-box {
background: linear-gradient(135deg, #FDF2F4 0%, #F8E3E7 100%) !important;
border: 1px solid #D8C2C4 !important;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(42, 27, 21, 0.06);
}

/* --------------------------------------------------------------------------
5. ROW 4: WELCOME & VISION (WARM TERRACOTTA SILK BOX)
-------------------------------------------------------------------------- */
.welcome-section,
#t4-welcome {
padding: 2.5rem 0;
}

.welcome-content-box {
background-color: #F3E1D3 !important;
border: 1px solid #E2C2AB !important;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(42, 27, 21, 0.05);
}

.welcome-content-box .card {
background-color: #FFFFFF !important;
border: 1px solid rgba(42, 27, 21, 0.1) !important;
border-left: 4px solid #8B0000 !important;
border-radius: 8px;
}

/* --------------------------------------------------------------------------
6. ROW 5: PILLARS OF ACTION (PORCELAIN BLUE BOX)
-------------------------------------------------------------------------- */
.pillars-section,
#t4-pillars {
padding: 2.5rem 0;
}

.pillars-content-box {
background-color: #DCE7F2 !important;
border: 1px solid #B8CFE2 !important;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(42, 27, 21, 0.05);
}

.pillars-content-box .card {
background-color: #FFFFFF !important;
border: 1px solid rgba(42, 27, 21, 0.1) !important;
border-top: 4px solid #8B0000 !important;
border-radius: 8px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pillars-content-box .card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
}

/* --------------------------------------------------------------------------
7. ROW 6: EVENTS & NEWS (IMPERIAL AMBER GOLD BOX)
-------------------------------------------------------------------------- */
.events-news-section,
#t4-events-news {
padding: 2.5rem 0;
}

.events-news-content-box {
background-color: #F5E5C9 !important;
border: 1px solid #E2C99B !important;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(42, 27, 21, 0.05);
}

.events-news-content-box .card,
.events-news-section .mod-articlescategory .card,
.events-news-section .mod-articlesnews .card {
background-color: #FFFFFF !important;
border: 1px solid rgba(42, 27, 21, 0.1) !important;
border-radius: 8px;
transition: transform 0.2s ease, border-color 0.2s ease;
}

.events-news-content-box .card:hover {
transform: translateY(-2px);
border-color: #8B0000 !important;
}

.events-news-content-box .event-badge,
.event-date-badge {
background-color: #FAF3E0 !important;
color: #8B0000 !important;
border: 1px solid #E2C99B !important;
}

/* --------------------------------------------------------------------------
8. ROW 7: MEMBER ASSOCIATIONS (HAKKA INDIGO DYE #2B3A4A BOX)
-------------------------------------------------------------------------- */
.member-associations-section,
#t4-members {
padding: 2.5rem 0;
}

/* Outer Section Container Box (Dark Hakka Indigo Block) */
.member-associations-section .members-content-box,
.members-content-box {
background-color: #2B3A4A !important;
border: 1px solid #1C2631 !important;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
color: #FFFFFF !important;
}

/* Global Text Colors Inside Row 7 Indigo Box */
.members-content-box h2,
.members-content-box h3,
.members-content-box p,
.members-content-box .text-muted {
color: #FFFFFF !important;
}

/* Category Divider Line Override /
.members-content-box div[style="background-color: #E8DCC4"] {
background-color: rgba(255, 255, 255, 0.25) !important;
}

/* Founding & Alliance Member Cards (Crisp White Accent) */
.members-content-box .card,
.member-card-founding,
.member-card-alliance {
background-color: #FFFFFF !important;
border: 1px solid #1C2631 !important;
border-radius: 8px;
}

.member-card-founding {
border-left: 4px solid #8B0000 !important;
}

.members-content-box .card h4,
.members-content-box .card p {
color: #2A1B15 !important;
}

.members-content-box .card .text-muted {
color: #5C4A3E !important;
}

/* Associate Alliance Member Cards (Lighter Indigo Sub-tier Accent) */
.members-content-box .associate-card,
.member-card-associate {
background-color: #384B5F !important;
border: 1px dashed #A3B8CC !important;
border-radius: 8px;
}

.members-content-box .associate-card h4,
.members-content-box .associate-card p,
.members-content-box .associate-card .text-muted {
color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
9. ROW 8: CALL TO ACTION (FULL BURGUNDY CANVAS)
-------------------------------------------------------------------------- */
.cta-section,
#t4-cta,
.cta-banner {
background: linear-gradient(135deg, #8B0000 0%, #5E0000 100%) !important;
color: #FFFFFF !important;
padding: 3.5rem 0;
border-top: 3px solid #E8DCC4 !important;
border-bottom: 3px solid #E8DCC4 !important;
}

.cta-section .btn {
background-color: #FAF3E0 !important;
color: #8B0000 !important;
border: none !important;
font-weight: 700;
transition: background-color 0.2s ease, transform 0.2s ease;
}

.cta-section .btn:hover {
background-color: #FFFFFF !important;
color: #5A0000 !important;
transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
10. ROW 9: FOOTER (DARK SLATE CANVAS)
-------------------------------------------------------------------------- */
.footer-section,
#t4-footer,
.t4-footer,
.row-footer {
background-color: #1A080B !important;
color: #CCCCCC !important;
padding: 3rem 0 1.5rem 0;
font-size: 0.9rem;
}

.footer-section a {
color: #FAF3E0;
text-decoration: none;
transition: color 0.2s ease;
}

.footer-section a:hover {
color: #FFFFFF;
text-decoration: underline;
}

.footer-section hr {
border-color: rgba(255, 255, 255, 0.15) !important;
}

/* --------------------------------------------------------------------------
11. UTILITY CLASSES & RESPONSIVE ADJUSTMENTS
-------------------------------------------------------------------------- */
.transition-hover {
transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.transition-hover:hover {
transform: translateY(-4px);
box-shadow: 0 0.5rem 1rem rgba(139, 0, 0, 0.12) !important;
}

.fs-7 { font-size: 0.85rem !important; }
.fs-8 { font-size: 0.75rem !important; }
.tracking-wider { letter-spacing: 0.08em !important; }
.tracking-wide { letter-spacing: 0.04em !important; }
.max-w-750 { max-width: 750px; }
.border-dashed { border-style: dashed !important; }

@media (max-width: 768px) {
.welcome-content-box,
.pillars-content-box,
.events-news-content-box,
.members-content-box {
padding: 1.25rem !important;
}
}
/* ==========================================================================
   STRICT ROW 2 (NAVIGATION) HEIGHT OVERRIDE
   ========================================================================== */

/* 1. Force outer wrapper container height */
.t4-nav,
#t4-nav,
.t4-nav .navbar {
  height: 50px !important;       /* Set your target height (e.g., 45px, 50px, 60px) */
  min-height: 50px !important;
  max-height: 50px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important; /* Vertically center menu content */
}

/* 2. Reset inner Bootstrap container / row flex height */
.t4-nav .container,
.t4-nav .row,
.t4-nav .navbar-collapse,
.t4-nav .navbar-nav {
  height: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center !important;
}

/* 3. Adjust menu item line-height and padding to fit inside 50px */
.t4-nav .navbar-nav .nav-link,
.t4-megamenu .navbar-nav .nav-link,
.t4-nav .navbar-nav > li > a {
  height: 50px !important;
  line-height: 50px !important;  /* Matches height for exact vertical centering */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
}


/* ==========================================================================
   ROW 7 MEMBER ASSOCIATIONS OVERRIDE: OPTION 3 (SILK TERRACOTTA #F3E1D3)
   Row Canvas: Warm Cream (#FAF3E0)
   ========================================================================== */

/* Inner Section Container Box (Hakka Silk Terracotta Accent) */
.member-associations-section .members-content-box,
.members-content-box {
  background-color: #F3E1D3 !important;
  border: 2px solid #D3B19A !important;
  color: #2A1B15 !important;
}

/* Headings and Text inside Row 7 Content Box */
.members-content-box h2,
.members-content-box h3 {
  color: #8B0000 !important;
}

.members-content-box p,
.members-content-box .text-muted {
  color: #4A3B32 !important;
}

/* Category Dividers */
.members-content-box div[style*="background-color"] {
  background-color: #D3B19A !important;
}

/* --------------------------------------------------------------------------
   MEMBER CARDS INSIDE TERRACOTTA CONTAINER
   -------------------------------------------------------------------------- */

/* Standard / Founding / Alliance Member Cards (Crisp White) */
.members-content-box .card {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
  border: 1px solid #E2C2AD !important;
}

.members-content-box .card h4,
.members-content-box .card p {
  color: #2A1B15 !important;
}

.members-content-box .card .text-muted {
  color: #5C4A3E !important;
}

/* Associate Alliance Member Cards (Soft Terracotta Tint) */
.members-content-box .associate-card {
  background-color: #FBF2EB !important;
  background: #FBF2EB !important;
  border: 1px dashed #C59D83 !important;
}

.members-content-box .associate-card h4,
.members-content-box .associate-card p {
  color: #8B0000 !important;
}

.members-content-box .associate-card .text-muted {
  color: #5C4A3E !important;
}
/* Remove default top spacing in Joomla component area */
#t4-mainbody,
#sp-main-body,
.item-page,
.com-content-article {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.logo-placeholder {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.logo-placeholder img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* Preserves logo proportions perfectly */
}
/* ==========================================================================
   RECOMMENDED MENU COLOR SCHEME
   ========================================================================== */

/* 1. Default Main Menu Link Color (Warm Metallic Gold) */
.t4-nav .navbar-nav .nav-link,
.t4-megamenu .navbar-nav .nav-link,
.t4-nav .navbar-nav > li > a {
  color: #E2C99B !important;
  font-weight: 600;
  transition: color 0.2s ease, background-color 0.2s ease;
}

/* 2. Hover & Active Dropdown State (Bright Electric Yellow Pop) */
.t4-nav .navbar-nav .nav-link:hover,
.t4-megamenu .navbar-nav .nav-link:hover,
.t4-nav .navbar-nav > li > a:hover,
.t4-nav .navbar-nav > li.show > a {
  color: #FFE600 !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* 3. Sub-Menu Dropdown Panel */
.t4-nav .dropdown-menu,
.t4-megamenu .dropdown-menu {
  background-color: #8B0000 !important;
  border: 1px solid #E2C99B !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* 4. Sub-Menu Items */
.t4-nav .dropdown-menu .dropdown-item,
.t4-megamenu .dropdown-menu .dropdown-item {
  color: #FAF3E0 !important;
}

.t4-nav .dropdown-menu .dropdown-item:hover,
.t4-megamenu .dropdown-menu .dropdown-item:hover {
  color: #2A1B15 !important;
  background-color: #FAF3E0 !important;
}
/* ==========================================================================
   T4 MOBILE NAVIGATION & OFF-CANVAS DRAWER
   ========================================================================== */

/* 1. Mobile Hamburger Toggle Button */
.t4-nav .navbar-toggler,
.t4-header .navbar-toggler,
.navbar-toggler {
  background-color: transparent !important;
  border: 1px solid #E2C99B !important; /* Imperial Amber Gold border */
  padding: 0.35rem 0.6rem !important;
  border-radius: 4px;
}

/* Hamburger Icon Bars (Inverts SVG stroke color to Gold/Cream) */
.t4-nav .navbar-toggler-icon,
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23FAF3E0' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Hamburger Button Focus / Hover State */
.navbar-toggler:focus,
.navbar-toggler:hover {
  outline: none !important;
  box-shadow: 0 0 0 0.2rem rgba(226, 201, 155, 0.25) !important;
  border-color: #FAF3E0 !important;
}

/* 2. Off-Canvas Mobile Drawer Container */
.t4-offcanvas,
.offcanvas,
.offcanvas-start,
.offcanvas-end {
  background-color: #8B0000 !important; /* Deep Burgundy background */
  color: #FAF3E0 !important;
}

/* Mobile Off-Canvas Header & Title */
.t4-offcanvas .offcanvas-header,
.offcanvas-header {
  border-bottom: 1px solid rgba(226, 201, 155, 0.3) !important;
  background-color: #1A080B !important; /* Slightly darker top header strip */
}

.t4-offcanvas .offcanvas-title,
.offcanvas-title {
  color: #E2C99B !important; /* Gold title text */
  font-weight: 700;
}

/* Mobile Off-Canvas Close Button (X) */
.t4-offcanvas .btn-close,
.offcanvas-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%) !important; /* Makes Close icon crisp white */
  opacity: 0.8;
}

.t4-offcanvas .btn-close:hover {
  opacity: 1;
}

/* 3. Mobile Navigation Menu Item Links */
.t4-offcanvas .navbar-nav .nav-link,
.offcanvas .navbar-nav .nav-link {
  color: #FAF3E0 !important;
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-weight: 500;
}

/* Mobile Menu Active / Hover Item */
.t4-offcanvas .navbar-nav .nav-link:hover,
.t4-offcanvas .navbar-nav .nav-link:focus,
.t4-offcanvas .navbar-nav .active > .nav-link {
  color: #FFE600 !important; /* Electric Yellow accent on hover/active */
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* 4. Mobile Nested Sub-Menu Item Links */
.t4-offcanvas .dropdown-menu,
.offcanvas .dropdown-menu {
  background-color: #5E0000 !important; /* Darker Burgundy inset for sub-menus */
  border-left: 3px solid #E2C99B !important;
  margin: 0 !important;
  padding: 0 !important;
}

.t4-offcanvas .dropdown-item,
.offcanvas .dropdown-item {
  color: #FAF3E0 !important;
  padding: 0.6rem 1rem 0.6rem 1.5rem !important;
}

.t4-offcanvas .dropdown-item:hover {
  color: #2A1B15 !important;
  background-color: #FAF3E0 !important;
}
/* ==========================================================================
   MOBILE HEADER & LOGO ALIGNMENT (VIEWPORTS < 768px)
   ========================================================================== */

@media (max-width: 767.98px) {
  
  /* 1. Allow mobile header container to auto-fit toggle button and logo */
  .t4-header,
  .t4-nav,
  #t4-nav,
  .t4-nav .navbar {
    height: auto !important;
    min-height: 56px !important;
    max-height: none !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  /* 2. Scale logo and logo placeholder for small mobile screens */
  .t4-header .logo-img,
  .t4-nav .logo-img,
  .t4-header .logo-placeholder,
  .t4-nav .logo-placeholder {
    max-height: 38px !important; /* Slightly smaller than 48px desktop height */
    width: auto !important;
    object-fit: contain;
  }

  /* 3. Ensure flex alignment keeps logo on far left and hamburger on far right */
  .t4-header .container,
  .t4-nav .container,
  .t4-nav .navbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  /* 4. Ensure toggle button does not wrap or push down */
  .navbar-toggler {
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }
}
/* ==========================================================================
   MOBILE HEADER & LOGO CLIPPING FIX (VIEWPORTS < 768px)
   ========================================================================== */

@media (max-width: 767.98px) {
  
  /* 1. Ensure the parent navbar container allows flexible layout without clipping */
  .t4-header,
  .t4-nav,
  #t4-nav,
  .t4-nav .navbar {
    height: auto !important;
    min-height: 56px !important;
    max-height: none !important;
    overflow: visible !important; /* Prevents edge clipping */
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  /* 2. Constrain logo container and image size */
  .t4-header .logo-placeholder,
  .t4-nav .logo-placeholder,
  .t4-header .navbar-brand,
  .t4-nav .navbar-brand {
    max-width: 60vw !important; /* Prevents logo from pushing past 60% of screen width */
    height: auto !important;
    display: flex !important;
    align-items: center !important;
  }

  /* 3. Scaled logo image styling (Contain fit prevents cropping) */
  .t4-header .logo-img,
  .t4-nav .logo-img,
  .t4-header .navbar-brand img,
  .t4-nav .navbar-brand img,
  .t4-nav .logo-placeholder img {
    max-height: 36px !important; /* Keeps logo height within mobile bar bounds */
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important; /* Ensures whole logo remains visible */
  }

  /* 4. Keep hamburger button fixed to the right on the same line */
  .navbar-toggler {
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }
}

/* ==========================================================================
   THHA BRAND HEADER RESPONSIVE RULES (STRICT SINGLE LINE NO-WRAP)
   ========================================================================== */

/* Logo Dimensions */
.thha-header-logo {
  height: 65px;
  width: auto;
}

/* Text Column Constraints */
.thha-header-text-col {
  width: auto;
  max-width: 100%;
}

/* English Main Title Typography */
.thha-header-title {
  font-size: 1.25rem;
  line-height: 1.1;
  color: #1A1A1A;
  font-family: 'Playfair Display', Georgia, serif;
  white-space: nowrap !important; /* Strictly prevents wrapping */
  display: block;
}

/* Chinese Subtitle Typography */
.thha-header-subtitle {
  font-size: 1.15rem;
  line-height: 1.1;
  color: #800C12;
  font-family: 'Noto Serif TC', 'Microsoft JhengHei', serif;
  width: 100%;
}

/* --- Mobile Viewport Scale Adjustments (< 576px) --- */
@media (max-width: 575.98px) {
  /* Scale down logo slightly to clear horizontal space */
  .thha-header-logo {
    height: 42px !important;
  }

  /* Dynamically shrink English text size on mobile so single line fits completely */
  .thha-header-title {
    font-size: clamp(0.72rem, 3.6vw, 1rem) !important;
    letter-spacing: 0.02em !important;
  }

  /* Proportionately adjust Chinese subtitle size */
  .thha-header-subtitle {
    font-size: clamp(0.75rem, 3.4vw, 0.95rem) !important;
  }
}
/* ==========================================================================
   REMOVE HOME PAGE MAINBODY ROW (SPACE BEFORE ROW 7)
   ========================================================================== */

/* 1. Hide the T4 mainbody container strictly on the Home Page */
body.homepage .t4-main-body,
body.homepage .t4-mainbody,
body.item-101 .t4-main-body,
body.item-101 .t4-mainbody,
.com_content.view-featured .t4-main-body,
.com_content.view-featured .t4-mainbody {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
}

/* 2. Remove any top margin on Row 7 so it connects seamlessly to the preceding row */
body.homepage #t4-row-7,
body.item-101 #t4-row-7,
#t4-row-7 {
  margin-top: 0 !important;
}
/* ==========================================================================
   JOOMLA NATIVE COM_CONTACT T4 FRAMEWORK STYLING
   ========================================================================== */

/* Outer Contact Wrapper */
.contact {
  background-color: #FAF3E0 !important;
  padding: 2.5rem;
  border-radius: 8px;
  border: 1px solid #E2C99B !important;
}

/* Form Section Titles */
.contact h3, 
.contact legend {
  color: #8B0000 !important;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  border-bottom: 2px solid #E2C99B;
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

/* Input Fields Focus Styling */
.contact .form-control:focus,
.contact .form-select:focus {
  border-color: #8B0000 !important;
  box-shadow: 0 0 0 0.25rem rgba(139, 0, 0, 0.15) !important;
}

/* Primary Submit Button */
.contact button[type="submit"],
.contact .btn-primary {
  background-color: #8B0000 !important;
  border-color: #8B0000 !important;
  color: #FAF3E0 !important;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  padding: 0.6rem 2rem;
  transition: all 0.2s ease-in-out;
}

.contact button[type="submit"]:hover {
  background-color: #6A0000 !important;
  color: #FFE600 !important; /* Electric Yellow accent */
  border-color: #E2C99B !important;
}
/* ==========================================================================
   JOOMLA COM_CONTACT MISC INFO SIDEBAR STYLING
   ========================================================================== */

/* Target the right column sidebar container in Joomla com_contact */
.contact .contact-miscinfo,
.contact-category .contact-miscinfo {
  background-color: #FAF3E0 !important; /* Warm Cream background */
  padding: 1.5rem;
  border-radius: 6px;
  border: 1px solid #E2C99B !important;
}

/* Headings in Misc Box */
.thha-misc-wrapper h4,
.thha-misc-wrapper h5 {
  color: #8B0000 !important;
  font-family: 'Playfair Display', Georgia, serif;
}

/* Border Accent */
.thha-misc-wrapper .border-bottom {
  border-bottom-color: #E2C99B !important;
}
/* ==========================================================================
   THHA EVENT ARTICLE & CIVICRM LAYOUT STYLING
   ========================================================================== */

/* Left Border Accent */
.border-burgundy {
  border-color: #8B0000 !important;
}

/* Flyer Image Hover Scaling */
.thha-flyer-img {
  transition: transform 0.25s ease-in-out;
}
.thha-flyer-img:hover {
  transform: scale(1.02);
}

/* Badge Utilities */
.badge.bg-burgundy {
  background-color: #8B0000 !important;
  color: #FAF3E0 !important;
  font-size: 0.8rem;
  padding: 0.4em 0.8em;
}

/* CiviCRM Embedded Form Overrides (If inserting shortcodes directly) */
.thha-event-article .crm-container {
  background: transparent !important;
  border: none !important;
}

.thha-event-article .crm-container .crm-submit-buttons input[type="submit"] {
  background-color: #8B0000 !important;
  color: #FAF3E0 !important;
  border: 1px solid #8B0000 !important;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  padding: 0.5rem 1.5rem;
}
/* ==========================================================================
   UPCOMING EVENTS ROW & ARTICLES MODULE STYLING
   ========================================================================== */

/* Outer Row Container */
#t4-row-events,
.t4-row-events,
.upcoming-events-row {
  background-color: #FAF3E0 !important; /* Warm Cream canvas */
  border-top: 1px solid #E2C99B !important; /* Imperial Amber Gold separator */
  border-bottom: 1px solid #E2C99B !important;
  padding-top: 3rem !important;
  padding-bottom: 3.5rem !important;
}

/* Individual Event Article Cards inside the Module */
.upcoming-events-row .card,
.upcoming-events-row .article-card {
  background-color: #FFFFFF !important; /* White background for maximum card contrast */
  border: 1px solid rgba(226, 201, 155, 0.6) !important;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Hover Lift Effect for Event Cards */
.upcoming-events-row .card:hover,
.upcoming-events-row .article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(139, 0, 0, 0.12) !important;
  border-color: #8B0000 !important;
}
/* ==========================================================================
   TORONTO HAKKA HERITAGE ALLIANCE (THHA) - CUSTOM STYLESHEET
   Imperial Heritage Theme: Deep Burgundy (#8B0000) | Gold (#E2C99B) | Cream (#FAF3E0)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL CANVAS & CONTAINER OVERRIDES
   -------------------------------------------------------------------------- */
.thha-odyssey-page,
.thha-diaspora-subpage,
.thha-diaspora-page,
.thha-artifacts-page,
.thha-religion-page,
.thha-food-page,
.thha-culture-page,
.thha-pillar-page {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background-color: #FAF3E0 !important; /* Soft Imperial Warm Cream */
  background-image: radial-gradient(rgba(226, 201, 155, 0.25) 1px, transparent 0);
  background-size: 24px 24px; /* Subtle silk/linen canvas texture */
  padding: 2rem 1.5rem !important;
  border-radius: 12px;
  border: 1px solid rgba(226, 201, 155, 0.6);
  box-shadow: 0 8px 24px rgba(139, 0, 0, 0.05);
}

/* --------------------------------------------------------------------------
   2. TYPOGRAPHY & BRAND COLOR UTILITIES
   -------------------------------------------------------------------------- */
.thha-odyssey-page h1, .thha-odyssey-page h2, .thha-odyssey-page h3, .thha-odyssey-page h4,
.thha-diaspora-subpage h1, .thha-diaspora-subpage h2, .thha-diaspora-subpage h3, .thha-diaspora-subpage h4, .thha-diaspora-subpage h5,
.thha-diaspora-page h1, .thha-diaspora-page h2, .thha-diaspora-page h3,
.thha-artifacts-page h1, .thha-artifacts-page h2, .thha-artifacts-page h3,
.thha-religion-page h1, .thha-religion-page h2, .thha-religion-page h3, .thha-religion-page h4,
.thha-food-page h1, .thha-food-page h2, .thha-food-page h3, .thha-food-page h4,
.thha-culture-page h1, .thha-culture-page h2, .thha-culture-page h3,
.thha-pillar-page h1, .thha-pillar-page h2, .thha-pillar-page h3, .thha-pillar-page h4,
.font-serif {
  font-family: 'Playfair Display', Georgia, "Times New Roman", serif;
}

.text-burgundy {
  color: #8B0000 !important;
}

.text-amber {
  color: #E2C99B !important;
}

.text-dark-brown {
  color: #4A3525 !important;
}

.border-gold {
  border-color: #E2C99B !important;
}

.border-gold-subtle {
  border-color: #EAD9B8 !important;
}

.border-burgundy {
  border-color: #8B0000 !important;
}

.border-bottom {
  border-bottom: 2px solid #E2C99B !important;
}

.extra-small {
  font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   3. HERO BANNER & CONTAINER BACKDROPS
   -------------------------------------------------------------------------- */
.bg-warm-cream {
  background-color: #F5E8C7 !important;
  border-color: #E2C99B !important;
}

.bg-burgundy {
  background-color: #8B0000 !important;
}

/* --------------------------------------------------------------------------
   4. CARD ELEVATIONS & HOVER TRANSITIONS
   -------------------------------------------------------------------------- */
/* Default Parchment Card Base */
.thha-odyssey-page .card,
.thha-diaspora-subpage .card,
.thha-diaspora-page .card,
.thha-artifacts-page .card,
.thha-religion-page .card,
.thha-food-page .card,
.thha-culture-page .card,
.thha-pillar-page .card,
.thha-odyssey-page .bg-white,
.thha-diaspora-subpage .bg-white,
.thha-artifacts-page .bg-white,
.thha-religion-page .bg-white,
.thha-food-page .bg-white,
.thha-pillar-page .bg-white {
  background-color: #FFFDF9 !important;
  border-color: #EAD9B8 !important;
  box-shadow: 0 4px 12px rgba(74, 53, 37, 0.06) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Interactive Card Base */
.thha-diaspora-card,
.thha-hub-card,
.thha-artifacts-page .card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Hover Elevation FX */
.thha-diaspora-card:hover,
.thha-hub-card:hover,
.thha-artifacts-page .card:hover,
.thha-odyssey-page .card:hover,
.thha-culture-page .card:hover,
.thha-religion-page .card:hover,
.thha-food-page .card:hover {
  transform: translateY(-4px);
  border-color: #8B0000 !important;
  box-shadow: 0 8px 20px rgba(139, 0, 0, 0.15) !important;
}

.thha-artifacts-page .card-body {
  padding: 1.25rem;
}

/* --------------------------------------------------------------------------
   5. BUTTONS, BADGES & HUB CTA NAVIGATION
   -------------------------------------------------------------------------- */
.btn-burgundy {
  background-color: #8B0000 !important;
  color: #E2C99B !important;
  border: 1px solid #8B0000 !important;
  box-shadow: 0 2px 6px rgba(139, 0, 0, 0.2);
  transition: all 0.25s ease-in-out;
}

.btn-burgundy:hover {
  background-color: #6B0000 !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 0, 0, 0.3);
}

.btn-outline-burgundy {
  color: #8B0000 !important;
  border: 1px solid #8B0000 !important;
  background-color: transparent !important;
  transition: all 0.25s ease-in-out;
}

.thha-hub-card:hover .btn-outline-burgundy,
.btn-outline-burgundy:hover {
  background-color: #8B0000 !important;
  color: #E2C99B !important;
}

.badge.bg-burgundy {
  background-color: #8B0000 !important;
  color: #E2C99B !important;
  border: 1px solid #A00000;
}

/* --------------------------------------------------------------------------
   6. IMAGE & ARTIFACT FRAMING
   -------------------------------------------------------------------------- */
.thha-artifacts-page img,
.thha-odyssey-page img,
.thha-diaspora-subpage img,
.thha-religion-page img,
.thha-food-page img,
.thha-pillar-page img {
  border: 1px solid #EAD9B8;
  border-radius: 6px;
  background-color: #FFFDF9;
}

/* --------------------------------------------------------------------------
   7. SIDEBAR LIST DIVIDERS
   -------------------------------------------------------------------------- */
.thha-diaspora-subpage .bg-warm-cream ul li,
.thha-pillar-page .bg-warm-cream ul li {
  line-height: 1.6;
  border-bottom: 1px dotted rgba(226, 201, 155, 0.8);
  padding-bottom: 0.4rem;
}

.thha-diaspora-subpage .bg-warm-cream ul li:last-child,
.thha-pillar-page .bg-warm-cream ul li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}