/**
 * Layout Green - smk Website
 * Layout specific adjustments for Green Theme
 */

/* Override Header / Navigation Colors */
#header,
.navbar-utama-wrp,
.navbar-sosmed-top,
.header-md {
  border-color: var(--green-primary);
}

/* If the navbar uses a solid color */
.bg-theme,
.navbar-primary {
  background-color: var(--green-primary) !important;
}

/* Adjust Top Navigation Bar if it was orange */
/* Adjust Top Navigation Bar if it was orange */
.navbar-utama-wrp {
  /* border-top: 3px solid #f5b799; */
  /* Richer, more visible gradient */
  background: linear-gradient(
    135deg,
    #f5b799 0%,
    #ffd1b3 60%,
    #fff0e6 100%
  ) !important;
  box-shadow: 0 4px 15px rgba(245, 183, 153, 0.25);
}

/* Coloring Text Logo Override */
.coloring-text-logo,
.title-teks-sub-a {
  background: -webkit-linear-gradient(180deg, #ffffff, #f0f9f6) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.title-teks-sub-opd-a,
.title-teks-sub-opd-b,
.logo-beranda,
.navbar-brand-wrp span {
  color: #3d1f0d !important;
}

/* Enhanced Branding / Logo - Force Perfect Vertical Centering */
.navbar-brand {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
}

.navbar-brand-wrp {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.logo-beranda-img-wrp {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important; /* Let content define height */
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    float: none !important; /* Clear old floats */
}

.logo-beranda-img {
    height: 52px !important;
    width: auto !important;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.2));
    transition: transform 0.3s ease;
    display: block !important; /* Prevent descender gap */
    margin: 0 !important;
}

.logo-beranda {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    line-height: 1.1 !important;
    padding-left: 12px !important;
    margin: 0 !important;
    float: none !important;
}

.title-teks-sub-opd-a {
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em;
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
}

.title-teks-sub-opd-b {
    font-weight: 700 !important;
    opacity: 0.85;
    letter-spacing: 0.01em;
    font-size: 0.85rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensuring side-nav also gets the treatment */
.mobile-offcanvas-inner .logo-beranda-img {
    height: 60px !important; 
}

/* Mobile Specific Branding Refining */
@media (max-width: 991px) {
    .navbar-utama-wrp {
        height: auto !important;
        padding: 8px 0 !important;
    }

    .logo-beranda-img-wrp {
        line-height: 1 !important;
    }

    .logo-beranda-img {
        height: 42px !important; /* Optimal for mobile */
    }

    .title-teks-sub-opd-a {
        font-size: 1.2rem !important; 
    }

    .title-teks-sub-opd-b {
        font-size: 0.75rem !important;
    }

    .logo-beranda {
        padding-left: 10px !important;
    }
}



/* Hero Section Text - Modern Refined Legibility (Clean Depth & Sharp Contrast) */
.smk-hero__copy h1 {
    color: #4a2818 !important; /* Dark Brown/Peach */
    /* Sharp multi-layered shadow for clean depth without blurriness */
    text-shadow: 
        1px 1px 0 rgba(255, 255, 255, 0.4),  /* Very subtle white rim */
        2px 2px 10px rgba(0, 0, 0, 0.3),     /* Soft depth shadow */
        4px 4px 20px rgba(0, 0, 0, 0.2)      /* Wider soft shadow */ !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em !important;
    -webkit-text-stroke: 0px; /* Remove harsh stroke */
}

.smk-hero__tagline,
.smk-hero__desc,
.smk-chip {
    color: #4a2818 !important;
    /* Minimalist sharp shadow for clean reading */
    text-shadow: 
        1px 1px 0 rgba(255, 255, 255, 0.3),
        2px 2px 15px rgba(0, 0, 0, 0.2) !important;
    font-weight: 700 !important;
}





/* Navbar Menu Items */

.navbar-nav .nav-link {
  color: #3d1f0d !important;
  font-weight: 600;
}

/* Active Menu Items */
.navbar-nav .nav-item.active > .nav-link,
.navbar-nav .nav-item:hover > .nav-link {
  color: #5c2e10 !important;
  text-shadow: none;
}

/* Buttons and accents in nav */
.btn-search-nav {
  background-color: var(--green-primary);
  color: #fff;
}

/* Mobile Toggle Button */
.navbar-toggler {
  background-color: var(--green-primary);
}

/* Footer Overrides (if not handled by inline styles) */
.smk-footer {
  background: linear-gradient(
    180deg,
    var(--green-light) 0%,
    var(--green-primary) 40%,
    var(--green-dark) 100%
  ) !important;
}

/* Scroll to top button */
#btnTop {
  background: linear-gradient(
    135deg,
    var(--green-dark),
    var(--green-primary)
  ) !important;
  box-shadow: 0 10px 20px rgba(222, 147, 111, 0.4) !important;
}

/* Specific Fixes for OPD Index Elements that might resist */
.smk-hero__card.gradient-dark-green {
  background: linear-gradient(135deg, #f5b799 0%, #ffd1b3 100%) !important;
}
.smk-hero__card.gradient-soft-green {
  background: linear-gradient(135deg, #ffd1b3 0%, #fff0e6 100%) !important;
}

/* Text selections */
/* Text selections */
::selection {
  background: var(--green-primary);
  color: #fff;
}

/* Hero Section Text - Dark Green Override */
.smk-hero__copy h1,
.smk-hero__tagline,
.smk-hero__desc,
.smk-chip {
  color: #4a2818 !important; /* Specific Peach Requested */
  text-shadow: none !important;
}

.smk-chip {
  background: rgba(245, 183, 153, 0.1);
  color: #4a2818 !important;
}

/* Ensure buttons stand out */
.smk-hero__actions .btn-outline-light {
  color: #e39b7a !important;
  border-color: #e39b7a !important;
}
.smk-hero__actions .btn-outline-light:hover {
  background-color: #e39b7a !important;
  color: #fff !important;
}

/* Dropdown Menu Styling Override */
.dropdown-menu {
  background-color: #ffffff !important;
  border: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
  border-top: 3px solid #e39b7a !important; /* Accent border on top */
  border-radius: 0 0 8px 8px !important;
}

.dropdown-item {
  color: #333333 !important; /* Black text as requested */
  font-weight: 500;
  padding: 10px 20px !important;
  transition: all 0.2s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #fff2eb !important; /* Soft peach background on hover */
  color: #e39b7a !important; /* Peach text on hover */
}

/* Fix active state if needed */
.dropdown-item.active,
.dropdown-item:active {
  background-color: #e39b7a !important;
  color: #ffffff !important;
}

/* NEW: Robust Peach Theme Overrides for Sub-menus & Sub-sub-menus (replacing old Blue) */
/* Desktop & Universal Overrides */
.dropdown-menu.dropdown-menu-right.show,
.submenu.submenu-left.dropdown-menu,
.dropdown-menu {
  background-color: #e9e6e6 !important; /* Peach primary */
  background: #e9e6e6 !important;
  border-top: 5px solid #ffffff !important;
  padding: 0.5rem 0px !important;
}

.dropdown-menu.dropdown-menu-right.show .nav-item .dropdown-item,
.submenu.submenu-left.dropdown-menu .nav-item .dropdown-item,
.dropdown-menu .dropdown-item {
  background-color: transparent !important;
  color: #3d1f0d !important; /* Dark text */
  font-weight: 600 !important;
}

.dropdown-menu.dropdown-menu-right.show .nav-item .dropdown-item:hover,
.submenu.submenu-left.dropdown-menu .nav-item .dropdown-item:hover,
.dropdown-menu .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.2) !important; /* Slight highlight */
  color: #3d1f0d !important;
}

/* Mobile Specific (matching portal.css structure) */
@media (max-width: 991px) {
  .submenu.submenu-left.dropdown-menu.lives,
  .nav-item .submenu-left,
  .submenu-mom {
    background: #e39b7a !important;
  }

  .dropdown-menu.dropdown-menu-right.show,
  .submenu.submenu-left.dropdown-menu.lives,
  .submenu.submenu-left.dropdown-menu,
  .submenu-mom,
  .submenu.submenu-left.dropdown-menu.lives > a.dropdown-item,
  .submenu.submenu-left.dropdown-menu > a.dropdown-item {
    background: #f6efeb !important;
    color: #3d1f0d !important;
  }

  .submenu.submenu-left.dropdown-menu.lives .nav-item .dropdown-item {
    background: #e39b7a !important;
    color: #3d1f0d !important;
  }
}

/* Card Styling Override for "Putih Smooth" */
.smk-card,
.smk-card--news,
.smk-card--article,
.smk-feature__card {
  background-color: #ffffff !important; /* Force white background */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important; /* Smooth soft shadow */
  border: 1px solid rgba(0, 0, 0, 0.03) !important; /* Very subtle border */
  border-radius: 16px !important; /* More rounded 16px */
  overflow: hidden; /* Fix for image overflow at corners */
}

/* Ensure image has no radius of its own to avoid gaps/double rounding */
.smk_card_img {
  border-radius: 0 !important;
  width: 100%;
  display: block;
}

.smk-card:hover {
  box-shadow: 0 8px 25px rgba(227, 155, 122, 0.15) !important; /* Peach glow on hover */
  transform: translateY(-5px);
}

/* Carousel Controls - Smooth Peach */
.smk-programs__control {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e39b7a !important; /* Smooth Peach */
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 10px rgba(227, 155, 122, 0.25) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  margin: 0 6px;
  cursor: pointer;
}

.smk-programs__control:hover {
  background: #c47653 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(227, 155, 122, 0.35) !important;
  color: #ffffff !important;
}

.smk-programs__control i {
  font-size: 1.1rem;
}

/* Hero Meta Stats - Peach Smooth Theme */
.smk-hero__meta {
  display: flex;
  gap: 3rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(227, 155, 122, 0.2);
}

.smk-hero__meta div {
  display: flex;
  flex-direction: column;
}

.smk-hero__meta span {
  font-size: 2rem;
  font-weight: 700;
  color: #e39b7a !important;
  line-height: 1.2;
  font-family: var(--smk-font-heading, sans-serif);
}

.smk-hero__meta label {
  font-size: 0.95rem;
  color: #4a5568;
  font-weight: 500;
  margin-top: 0.25rem;
}

/* Zig-Zag Features Section */
.smk-zigzag {
  padding: 4rem 0;
  overflow: hidden;
}

.smk-zigzag__item {
  display: flex;
  align-items: center;
  gap: 4rem;
  margin-bottom: 6rem;
}

.smk-zigzag__item:last-child {
  margin-bottom: 0;
}

.smk-zigzag__content {
  flex: 1;
}

.smk-zigzag__visual {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.smk-zigzag__icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  display: inline-block;
  color: #e39b7a;
}

.smk-zigzag__title {
  font-size: 2rem;
  font-weight: 700;
  color: #1a202c; /* neutral-900 */
  margin-bottom: 1rem;
  line-height: 1.2;
}

.smk-zigzag__desc {
  color: #4a5568; /* neutral-600 */
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  line-height: 1.6;
}

.smk-zigzag__btn {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  background-color: #e39b7a;
  color: #fff !important;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
}

.smk-zigzag__btn:hover {
  background-color: #c47653;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(227, 155, 122, 0.25);
}

/* Hexagon Image Styling */
.hexagon-wrapper {
  position: relative;
  width: 400px;
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Decorative Hexagon Border/Shape behind */
.hexagon-shape {
  position: absolute;
  inset: 0;
  background-color: transparent;
  border: 2px solid #f5b799;
  border-radius: 30px;
  transform: rotate(15deg);
  z-index: 1;
}

/* The Image Container with Clip Path */
.hexagon-image-container {
  position: relative;
  width: 90%;
  height: 90%;
  z-index: 2;
  overflow: hidden;
  /* Soft Hexagon / Blob Shape via Border Radius */
  border-radius: 20px;
  /* box-shadow: 0 10px 30px rgba(0,0,0,0.1); */
  /* background: white; */
}

/* Use a pseudo-element or actual clip-path if we want strict hexagon. 
   Let's stick to the 'Squircle' + Rotated Border look from the reference 
   as 'clip-path' for rounded hexagon is complex without SVG. 
*/
.hexagon-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Colors for variants */
.smk-zigzag__item--green .hexagon-shape {
  border-color: #f5b799;
}
.smk-zigzag__item--yellow .hexagon-shape {
  border-color: #f6ad55;
}
.smk-zigzag__item--pink .hexagon-shape {
  border-color: #d53f8c;
}

.smk-zigzag__item--green .smk-zigzag__icon,
.smk-zigzag__item--green .smk-zigzag__title {
  color: #e39b7a;
}

.smk-zigzag__item--yellow .smk-zigzag__icon,
.smk-zigzag__item--yellow .smk-zigzag__title {
  color: #d69e2e;
}
.smk-zigzag__item--yellow .smk-zigzag__btn {
  background-color: #d69e2e;
}
.smk-zigzag__item--yellow .smk-zigzag__btn:hover {
  background-color: #b7791f;
}

.smk-zigzag__item--pink .smk-zigzag__icon,
.smk-zigzag__item--pink .smk-zigzag__title {
  color: #d53f8c;
}
.smk-zigzag__item--pink .smk-zigzag__btn {
  background-color: #d53f8c;
}
.smk-zigzag__item--pink .smk-zigzag__btn:hover {
  background-color: #b83280;
}

@media (min-width: 992px) {
  /* Alternating Layout */
  .smk-zigzag__item:nth-child(even) {
    flex-direction: row-reverse;
  }
  .smk-zigzag__item:nth-child(even) .smk-zigzag__visual {
    justify-content: center; /* Centered visually */
  }
}

@media (max-width: 991px) {
  .smk-zigzag__item {
    flex-direction: column-reverse; /* Image on top? or text on top? usually image top on mobile. 
                                           Let's do col-reverse to have text bottom, image top? 
                                           Actually standard is Image Top, Text Bottom. 
                                           But row-reverse makes it tricky. */
    flex-direction: column;
    gap: 2rem;
    text-align: center;
  }
  .smk-zigzag__visual {
    width: 100%;
  }
  .hexagon-wrapper {
    width: 100%;
    max-width: 350px;
    height: 300px;
  }
}