/* ==========================================================================
   [1] GLOBAL VARIABLES & DESIGN TOKENS (:root)
   ========================================================================== */
:root {
    /* --- Medical & Body Donation Identity Colors --- */
    /* Primary: Medical Teal (Source Palette: Shapefactory Pigment) */
    --medical-teal-primary: #007A78;   /* Main medical teal */
    --medical-teal-dark: #004D40;      /* Dark medical teal for hover states */
    --medical-teal-deep: #003833;      /* Deep medical teal for footer background */
    --medical-teal-light: #E0F2F1;     /* Soft teal tint for card overlays */
    
    /* Secondary: Deep Crimson (Source Palette: Color Hunt #9B1C1C) */
    --donation-red-primary: #9B1C1C;   /* Crimson red for primary CTA buttons */
    --donation-red-hover: #7A1515;     /* Darker crimson on hover */
    
    /* Accent: Honor Gold (Source Palette: Color Hunt #D9A036) */
    --honor-gold-primary: #D9A036;     /* Muted gold for accents & highlights */
    --honor-gold-hover: #F3C623;       /* Bright gold for glowing hover lines */
    
    /* --- Neutral Palette --- */
    --color-white: #ffffff;
    --color-page-bg: #F4F9F8;          /* Off-white background with subtle teal tint */
    --color-charcoal: #1A2B2C;         /* Dark charcoal text */
    --color-dark-gray: #333333;
    --color-border-light: rgba(0, 122, 120, 0.15);
    --color-text-muted: rgba(26, 43, 44, 0.6);
    
    /* --- Typography Tokens --- */
    --font-sarabun: 'Sarabun', sans-serif;
    --font-heading-bold: 'athitibold', sans-serif;
    --font-heading-semibold: 'athitisemibold', sans-serif;
    --font-heading-regular: 'athitiregular', sans-serif;
}

/* ==========================================================================
   [2] APPLIED STYLES
   ========================================================================== */

/* Page Level Styling */
body {
    background-color: var(--color-page-bg);
    color: var(--color-charcoal);
}

/* --- HEADER & NAVBAR --- */
header .header-menu-bar {
    background: var(--medical-teal-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Subtle drop shadow for depth */
    padding: 0.8rem 0;
}

/* Base style for top-level menu links */
header .header-menu-bar .menu-list > li > a {
    color: var(--color-white) !important;
    background: transparent !important;
    position: relative;
    padding: 12px 20px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Smooth easing */
}

/* Gold underline animation on hover */
header .header-menu-bar .menu-list > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: var(--honor-gold-primary);
    border-radius: 2px;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

/* Hover and active states: Glassmorphism effect with gold underline reveal */
header .header-menu-bar .menu-list > li:hover > a,
header .header-menu-bar .menu-list > li.active > a {
    color: var(--color-white) !important;
    background: rgba(255, 255, 255, 0.12) !important; /* Semi-transparent white background */
    border-radius: 6px;
}

header .header-menu-bar .menu-list > li:hover > a::after,
header .header-menu-bar .menu-list > li.active > a::after {
    width: 50%; /* Expand gold underline to 80% width */
    background: var(--honor-gold-hover);
    box-shadow: 0 0 8px rgba(243, 198, 35, 0.6); /* Soft gold glow effect */
}

/* Submenu arrow styles */
header .header-menu-bar .menu-list > li.has-submenu > a:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    border-top: 5px solid rgba(255, 255, 255, 0.8);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    transition: all 0.3s ease;
}

/* Submenu arrow hover transition */
header .header-menu-bar .menu-list > li.has-submenu:hover > a:after,
header .header-menu-bar .menu-list > li.active > a:after {
    border-top-color: var(--honor-gold-hover) !important; /* Shift arrow to gold */
    /*transform: translateY(-2px); /* Slight lift animation */
}

.header .header-primary{
    background:#FFFFFF;
}

/* --- FOOTER --- */
footer {
    background: var(--medical-teal-deep);
    border-top: 4px solid var(--honor-gold-primary); /* Gold top border accent */
    color: var(--medical-teal-light);
}

/* --- CARDS & BLOCKS --- */
.program-selection-grid .col {
    padding-bottom: 30px;
}


/* --- HEADINGS & ACCENT BARS --- */
.frame-6 {
    display: inline-block;
    background-color: var(--medical-teal-primary);
    padding: 7px 15px 0 15px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.frame-6 h2 {
    color: var(--color-white);
}

/* Left accent bar for high-priority sections */
.head-line2 {
    border-left: 10px solid var(--donation-red-primary); /* Crimson accent bar */
    padding-left: 12px;
}

.head-line3 {
    overflow: hidden;
    border-bottom: 3px solid var(--medical-teal-primary);
    margin-bottom: 20px;
}

.head-line3 h2 {
    display: inline-block; 
    background-color: var(--medical-teal-primary); 
    margin-bottom: 0; 
    color: var(--color-white); 
    padding: 3px 20px 2px 11px;
    font-size: 1.2em;
}

.head-line4 {
    text-transform: capitalize;
    margin-bottom: 10px;
    border-bottom: 4px solid var(--honor-gold-primary); /* Gold bottom border */
    width: 100%;
}

.head-line4 h2 {
    color: var(--medical-teal-dark);
    font-size: 2rem;
}

.head-line4 h3 {
    border-bottom: 0px;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--color-text-muted);
    padding-bottom: 10px;
    margin-bottom: 0;
}


/* ==========================================================================
   PAGE TITLE STYLING (.frame-15 h2)
   ========================================================================== */

.frame-15 {
    position: relative;
    padding: 10px 0 20px 0;
    margin-bottom: 25px;
}

.frame-15 h2 {
    font-size: 2.8rem;
    font-weight: 600; /* Adjusted from 300 for better readability */
    color: var(--medical-teal-primary, #004D40); /* Deep medical teal */
    font-family: var(--font-heading-semibold);
    
    /* Layout & Spacing */
    position: relative;
    display: inline-block;
    padding-left: 20px; /* Space for the accent bar */
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.5px;
    
    /* Smooth Rendering */
    -webkit-font-smoothing: antialiased;
}

/* Vertical Accent Bar: Crimson & Gold gradient */
.frame-15 h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 85%;
    background: linear-gradient(
        180deg, 
        var(--donation-red-primary, #9B1C1C) 0%, 
        var(--honor-gold-primary, #D9A036) 100%
    );
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(155, 28, 28, 0.25);
}

/* Subtle Bottom Border Line across the container */
.frame-15::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg, 
        rgba(0, 122, 120, 0.25) 0%, 
        rgba(217, 160, 54, 0.15) 50%, 
        transparent 100%
    );
}

/* Service Card Base Columns spacing */
.service-card .col {
    margin-bottom: 20px; /* Adjusted for better grid spacing */
}

/* 1. Target the actual outer frame inside the service container to transform into an interactive card */
.service-card .frame-type-shortcut,
.service-card .frame-type-textpic {
    background: #ffffff !important;
    border: 1px solid #f0f2f5 !important;
    border-radius: 16px !important;
    padding: 30px 20px !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* Strip inner background/padding from nested textpic when wrapped inside a shortcut frame to prevent double boxing */
.service-card .frame-type-shortcut .frame-type-textpic {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* 2. Unified Card Hover Effects (Triggered at the top-most level element) */
.service-card .frame-type-shortcut:hover,
.service-card > .row > .col > .frame-type-textpic:hover {
    background-image: linear-gradient(25deg, #00323e, #165b3e, #198739, #00b62b) !important;
    transform: translateY(-6px) !important;
    box-shadow: 0 15px 30px rgba(174, 27, 31, 0.08) !important; /* Soft MFU Red glow shadow */
}

.service-card .frame-type-shortcut:hover img,
.service-card > .row > .col > .frame-type-textpic:hover img {
    background:#ffffff;
    padding:5px;
    border-radius:10px;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}

/* 3. Center-align internal structural gallery elements */
.service-card .ce-textpic,
.service-card .ce-gallery {
    margin-bottom: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 4. Exact Image Icon Styling and Uniform Constraints */
.service-card .image-embed-item {
    max-width: 50px !important;
    height: auto !important;
    display: block !important;
    transition: transform 0.3s ease !important;
    image-rendering: -webkit-optimize-contrast !important; /* Fixes downscaling blurriness */
    image-rendering: crisp-edges !important;
}

/* Dynamic subtle zoom effect on the icon when the parent card is hovered */
.service-card .frame-type-shortcut:hover .image-embed-item,
.service-card .frame-type-textpic:hover .image-embed-item {
    transform: scale(1.1) !important;
}

/* 5. Typography, Link Behavior, and Hover Text-Color Inversion */
.service-card .ce-bodytext p {
    margin: 0 !important;
}

.service-card .ce-bodytext a {
    font-family: 'athitisemibold', sans-serif !important;
    color: #333333 !important;
    text-decoration: none !important;
    font-size: 16px !important;
    transition: color 0.3s ease !important;
    display: inline-block !important;
    margin-top: 5px !important;
}

/* Text color flips cleanly to White when the outer card is hovered */
.service-card .frame-type-shortcut:hover .ce-bodytext a,
.service-card .frame-type-textpic:hover .ce-bodytext a {
    color: #FFFFFF !important;
}

@media (max-width: 575.98px) {
    .service-card .ce-gallery {
        display: none !important;
    }
    /* Optional: Make cards more compact on mobile */
    .service-card .frame-type-shortcut,
    .service-card .frame-type-textpic {
        padding: 5px !important; 
    }
}


/* ==========================================
   TYPO3 PERFECT POEM STYLING
   ========================================== */
.thai-poem {
  max-width: 600px;
  /* margin: 40px auto; */
  /* padding: 0 15px; */
}

.thai-poem p {
  display: flex !important;
  flex-direction: row !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--color-dark-gray, #333333);
}

.thai-poem .v-left {
  flex: 1 1 50% !important;
  text-align: left !important;
  padding-right: 40px !important;
  box-sizing: border-box !important;
}

.thai-poem .v-right {
  flex: 1 1 50% !important;
  text-align: left !important;
  padding-left: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 576px) {
  .thai-poem .v-left {
    padding-right: 15px !important;
  }
}

/* ==========================================
   MORE LINK BUTTON (MFU Theme)
   ========================================== */

.more-link {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  margin-bottom: 10px;
}

.more-link p {
  margin: 0 !important;
  padding: 0 !important;
}

/* Button: More Link with Animated SVG Arrow */
.more-link a {
    font-family: "athitimedium", sans-serif;
    font-size: 90%;
    background-color: var(--medical-teal-primary, #007A78);
    color: #ffffff;
    border-radius: 100px;
    padding: 6px 16px 6px 14px;
    text-decoration: none;
    transition: all 0.2s linear;
    float: right;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    margin: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* CSS Arrow Icon via ::after pseudo-element */
.more-link a::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #ffffff;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>') no-repeat center / contain;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>') no-repeat center / contain;
    transition: transform 0.2s linear;
}

/* Hover States */
.more-link a:hover {
    color: #ffffff;
    background-color: var(--medical-teal-primary, #007A78);
    filter: brightness(0.88);
    box-shadow: rgba(0, 0, 0, 0.25) 1.95px 3px 5px;
    text-decoration: none;
}

/* Smooth Arrow Slide Effect on Hover */
.more-link a:hover::after {
    transform: translateX(4px);
}