:root {
    --yellow: #ffdd00;
    --green: #1d9649;
    --brown: #79491b;
    --blue: #047bc1;
    --white: #ffffff;
    --cop--dark--blue: #18525d;
    --cop--blue: #05b6c4;
    --cop--brown: #fdc692;
    --earth-bg: #f5f3ee;
    --earth-surface: #fffdf8;
    --earth-deep: #2e2a24;
    --sand: #dacfbf;
    --leaf: #4c7a57;
    --sky: #6aa5c7;
    --clay: #b07a5a;
    --shadow: rgba(0,0,0,0.08);
    --shadow-2: rgba(0,0,0,0.2);
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 18px;
    --gap: 16px;
    --gap-lg: 28px;
    --gap-sm: 10px;
    --width: 100%;
    --height: 100%;
}
body { background: var(--earth-bg); color: var(--earth-deep); font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif; line-height: 1.6; overflow-x: hidden; }
.layout{display: flex; gap: 0; overflow-x: hidden;}
.left-side{width: 80%; min-width: 0;}
.right-side{width: 20%; position: fixed; top: 0; right: 0; bottom: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px; box-sizing: border-box; border-left: 1px solid rgba(0,0,0,0.06); background: var(--cop--blue);/*background: linear-gradient(180deg, var(--cop--blue) 0%, var(--cop--brown) 100%);*/ backdrop-filter: blur(2px); min-width: 0; z-index: 100;}
.right-side .logo{width: 93%; display: flex; align-items: center; justify-content: center; padding: 10px 12px; background: var(--earth-surface); border: 1px solid rgba(0,0,0,0.06); border-radius: var(--radius-sm); box-shadow: 0 4px 14px var(--shadow); transition: transform .2s ease, box-shadow .2s ease; backdrop-filter: saturate(110%);}
.right-side .logo img{max-width: 100%; max-height: 80px; width: auto; height: auto; object-fit: contain; display: block; margin: 0 auto;}
.right-side .logo .glob-logo{max-width: 100%; max-height: 200px; width: 200px!important; height: 200px!important; object-fit: contain; display: block; margin: 0 auto;}
.right-side .item{width: 100%;}
.right-side .item a{display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; color: var(--earth-bg); font-weight: bold; text-decoration: none; transition: background .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease; font-size: clamp(15px, 1.5vw, 16px); line-height: 1.5;}
.right-side .item + .item{margin-top: 8px;}
.right-side .item a:hover{background: rgba(4,182,197,0.18); color: var(--cop--blue); transform: translateY(-2px); box-shadow: 0 6px 16px var(--shadow-2);}
.right-side .item a:focus-visible{outline: 3px solid rgba(4,123,193,0.35); outline-offset: 2px;}
/* Right-side menu item with optional description */
.right-side .item{position: relative;}
.right-side .item .description{display:block; position:relative; margin-top:6px; padding:10px 12px 10px 14px; background: var(--earth-bg); border: 1px solid rgba(0,0,0,0.06); border-radius: 12px; color: rgba(0,0,0,0.82); font-size: clamp(15px, 1.5vw, 16px); line-height: 1.5; box-shadow: 0 4px 14px var(--shadow); backdrop-filter: blur(3px);}
/* Ribbon accent */
.right-side .item .description::before{content:""; position:absolute; left:0; top:8px; bottom:8px; width:4px; border-radius: 3px; background: linear-gradient(180deg, var(--cop--blue), var(--cop--brown)); box-shadow: 0 0 0 1px rgba(0,0,0,0.04) inset;}
/* Tiny dot marker */
.right-side .item .description::after{content:""; position:absolute; left:8px; top:10px; width:6px; height:6px; border-radius:50%; background: rgba(4,182,197,0.9); box-shadow: 0 0 0 2px rgba(4,182,197,0.18);} 
/* Text tweaks inside description */
.right-side .item .description span{display:block; font-weight:600; letter-spacing:.2px; font-size: inherit; line-height: inherit;}
/* Hover accent ties description to its link */
.right-side .item:hover .description{border-color: rgba(4,182,197,0.35); box-shadow: 0 10px 22px var(--shadow-2);} 
.right-side .item:hover .description::before{width:6px;}
@media (prefers-reduced-motion: no-preference){
  .right-side .item:hover .description{transition: box-shadow .2s ease, border-color .2s ease;}
  .right-side .item .description::before{transition: width .2s ease;}
}
.container{max-width: 1600px; width: 100%; padding: 0 12px; margin: 0 auto; box-sizing: border-box;}
/*header css*/
.header-container{width: 100%; padding: 8px 12px; margin: 0 auto; box-sizing: border-box;}
header {display: flex; justify-content: space-between; align-items: center; }
.header-logo{width: 100px; height: 100px;}
.header-logo img{width: 100%; height: 100%; object-fit: cover}
/* Main menu overlay and animation */
#menu-target{position: fixed; inset: 0; display: none; background: var(--white); color: var(--earth-deep); box-shadow: none; padding: 76px 20px 20px 80px; z-index: 1501; /* just above backdrop(1400), below fixed toggle(2001) */ /* circular reveal setup */ --revealX: 24px; --revealY: 40px; clip-path: circle(0 at var(--revealX) var(--revealY)); opacity: 0;}
/* When open we animate the clip-path to large enough radius so it looks like it starts from the toggle (top-right) and expands */
#menu-target.open{display: block; animation: menuIn .28s ease-out forwards;}
#menu-target.closing{display: block; animation: menuOut .22s ease-in forwards;}
#menu-target .item{padding: 8px 10px;}
#menu-target .item a,
#menu-target .item a:visited{ color: var(--earth-deep); text-decoration: none; display: inline-block; padding: 8px 10px; border-radius: 10px; transition: background .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;}
#menu-target .item a:hover{ text-decoration: none; background: rgba(29,150,73,0.10); color: var(--green); transform: translateX(-4px); box-shadow: 0 6px 16px var(--shadow-2);} 
/* Specific hover accents for the three main links */
#menu-target .item a.nav-home{position: relative;}
#menu-target .item a.nav-about{position: relative;}
#menu-target .item a.nav-news{position: relative;}
#menu-target .item a.nav-home::before,
#menu-target .item a.nav-about::before,
#menu-target .item a.nav-news::before{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:0; height:60%; border-radius: 0 4px 4px 0; background: currentColor; opacity: .35; transition: width .2s ease;}
#menu-target .item a.nav-home:hover::before{ width: 6px; }
#menu-target .item a.nav-about:hover::before{ width: 6px; }
#menu-target .item a.nav-news:hover::before{ width: 6px; }
/* Focus-visible ring for accessibility */
#menu-target .item a.nav-home:focus-visible,
#menu-target .item a.nav-about:focus-visible,
#menu-target .item a.nav-news:focus-visible{ outline: 3px solid rgba(4,123,193,0.35); outline-offset: 2px; }
@keyframes menuIn{0%{clip-path: circle(0 at var(--revealX) var(--revealY)); opacity: 0;}100%{clip-path: circle(150% at var(--revealX) var(--revealY)); opacity: 1;}}
@keyframes menuOut{0%{clip-path: circle(150% at var(--revealX) var(--revealY)); opacity: 1;}100%{clip-path: circle(0 at var(--revealX) var(--revealY)); opacity: 0;}}

/* Fallbacks when clip-path is unsupported */
@supports not (clip-path: circle(100% at 50% 50%)) {
  #menu-target { clip-path: none; }
  #menu-target.open { opacity: 1; }
  #menu-target.closing { opacity: 0; }
}

/* Respect reduced motion preferences: no animations, but keep visibility logic */
@media (prefers-reduced-motion: reduce) {
  #menu-target { animation: none !important; transition: none !important; }
  #menu-target.open { display: block; opacity: 1; clip-path: none; }
  #menu-target.closing { display: block; opacity: 0; clip-path: none; }
  .menu-backdrop { animation: none !important; }
  .menu-backdrop.closing { animation: none !important; opacity: 0; }
}
@media (max-width: 640px) {
    #menu-target{padding-left: 20px;}
}

/* Backdrop to dim entire screen and block clicks except toggle button */
.menu-backdrop{position: fixed; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(2px); z-index: 1400; opacity: 0; animation: fadeIn .25s ease forwards;}
.menu-backdrop.closing{animation: fadeOut .2s ease forwards;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}

/* Header tweaks */
.header-container{width: 100%; padding: 8px 12px; box-sizing: border-box;}
header {display: flex; justify-content: space-between; align-items: center; gap: 14px;}
header .header-left{display:flex; align-items:center; gap:12px;}
header .header-left .logo{flex:0 0 auto;}
/*header .header-left .menu-title{flex:1 1 auto; min-width: 0; margin-left: -10px;}*/
header .header-left .menu-title{display: flex; gap: 10px; align-items: center;}
header .header-right{display:flex; align-items:center; gap:10px; margin-left:auto;}
header .logo {width: 90px; height: 90px;}
header .logo img{width: var(--width); height: var(--height); object-fit: cover}
@media (min-width: 1000px) {
    .header-logo,
    .menu{display: none!important;}
}
@media (max-width: 1000px) {
    .header-left{display: none!important;}
    ,header-logo
    .menu{display: block!important;}
}
/* Ensure the menu toggle is always visible */
#menu-toggle{display:inline-flex !important; visibility:visible !important; opacity:1 !important;}
.menu-toggle{background: var(--earth-surface); color: var(--earth-deep); border: 2px solid rgba(0,0,0,0.15); width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px var(--shadow-2); cursor: pointer; position: relative; z-index: 1601; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;}
/* Make the toggle visibly different when active */
.menu-toggle.active{ background: var(--earth-deep); color: var(--white); box-shadow: 0 8px 22px var(--shadow-2); border-color: rgba(255,255,255,0.65); }
.menu-toggle i{font-size: 18px; transition: transform .25s ease, opacity .2s ease;}
.menu-toggle.active i{transform: rotate(180deg) scale(1.05);} 
.menu-toggle:active{transform: scale(0.98);} 
.menu-toggle:focus-visible{outline: 3px solid rgba(0,0,0,0.25); outline-offset: 2px;}
#menu-target .item{}
#menu-target .item a,
#menu-target .item a:visited{ color: var(--earth-deep); text-decoration: none;}
/* MainMenu (overlay) right-opening submenu */
#menu-target .item{position: relative;}
#menu-target .item .submenu{position: absolute; left: 0; right: auto; top: 60px; min-width: 220px; background: var(--earth-surface); border: 1px solid rgba(0,0,0,0.06); border-radius: 12px; box-shadow: 0 10px 22px var(--shadow-2); list-style: none; padding: 8px; margin: 0; opacity: 0; visibility: hidden; transform: translateX(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; z-index: 1602;}
#menu-target .item .submenu .sub-item{margin: 0;}
#menu-target .item .submenu a{display:block; padding:8px 10px; border-radius: 8px; background: transparent; border: none; box-shadow: none; font-weight: 700;}
#menu-target .item .submenu a:hover{background: rgba(4,123,193,0.08); color: var(--green);} /* green hover */
#menu-target .item:hover > .submenu,
#menu-target .item:focus-within > .submenu{opacity:1; visibility: visible; transform: translateX(0);} 
/* Right caret icon color/size */
#menu-target .item.has-sub > a .down-icon{font-size: 14px; color: var(--green); margin-left: 6px; opacity: .9;}
/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  #menu-target .item .submenu{transition: none;}
}

/*banner css (Swiper)*/
.banner{width: 100%; height: auto; position: relative; overflow: hidden;}
.banner .swiper-wrapper{width: 100%; height: 100%;}
.banner .swiper-slide.banner-item{width: 100%; height: auto; position: relative;}
.banner .banner-item img{display: block; width: 100%; height: 500px; object-fit: cover; border-radius: 12px;}
.banner .banner-item .banner-link{position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); width: 90%; max-width: 90%; box-sizing: border-box; padding: 0;}
.banner .banner-item .banner-link a,
.banner .banner-item .banner-link a:visited{ color: var(--earth-surface); text-decoration: none; display: block; width: 100%; box-sizing: border-box; padding: 14px 18px; background: rgba(0,0,0,0.45); border-radius: 12px; backdrop-filter: saturate(130%) blur(3px); box-shadow: 0 8px 24px rgba(0,0,0,0.35); font-weight: 800; line-height: 1.35; transition: transform .18s ease, box-shadow .2s ease, background .2s ease;}
/* title on first line, description after (if present) */
.banner .banner-item .banner-link a .title{display:block; font-size: clamp(16px, 2.2vw, 22px);} 
.banner .banner-item .banner-link a .desc{display:block; font-size: clamp(13px, 1.8vw, 16px); font-weight: 600; opacity: .95; margin-top: 4px;}
/* hover/focus */
.banner .banner-item .banner-link a:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,0.45); background: rgba(0,0,0,0.55);} 
.banner .banner-item .banner-link a:focus-visible{ outline: 3px solid rgba(255,255,255,0.55); outline-offset: 2px; }
/* ensure long text wraps nicely */
.banner .banner-item .banner-link a{ word-break: break-word; }
@media (max-width: 640px){
  .banner .banner-item img{ height: 320px; }
  .banner .banner-item .banner-link{ bottom: 16px; }
  .banner .banner-item .banner-link a{ padding: 12px 14px; border-radius: 10px; }
}
/* Swiper controls */
.banner .swiper-button-prev, .banner .swiper-button-next{color: var(--white);} 
/* Make prev/next smaller */
.banner .swiper-button-prev, .banner .swiper-button-next{
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,0,0,0.25);
}
.banner .swiper-button-prev::after, .banner .swiper-button-next::after{
  font-size: 16px; /* default ~27px; make icon smaller */
}
.banner .swiper-button-prev:hover, .banner .swiper-button-next:hover{ background: rgba(0,0,0,0.35); }
.banner .swiper-pagination-bullet{background: rgba(255,255,255,0.7);} 
.banner .swiper-pagination-bullet-active{background: var(--white);}

/*tab css - improved design*/
.tabs{margin-top: 24px;}
.tabs .tab-header{display:flex; gap: 8px; border-bottom: 1px solid rgba(0,0,0,0.08); padding-bottom: 6px;}
.tabs .tab-button{appearance:none; border:none; background: transparent; color: var(--earth-deep); padding: 12px 16px; border-radius: 12px; cursor: pointer; display: inline-flex; align-items:center; justify-content: center; text-align: center; flex: 1 1 0; min-width: 0; gap:10px; font-weight: 700; font-size: 16px; line-height: 1; transition: background .2s ease, color .2s ease, box-shadow .2s ease;}
.tabs .tab-button i{opacity: .9; font-size: 18px;}
.tabs .tab-button:hover{background: rgba(29,150,73,0.10);} /* green hover tint */
.tabs .tab-button.active{background: var(--green); color: var(--white); box-shadow: 0 6px 18px rgba(29,150,73,0.28);} 
/* Tab color variants */
.tabs .tab-button.tab-water.active{background: var(--blue); color: var(--white); box-shadow: 0 6px 18px rgba(4,123,193,0.28);} 
.tabs .tab-button.tab-air.active{background: var(--white); color: var(--earth-deep); box-shadow: 0 6px 18px rgba(0,0,0,0.12);} 
.tabs .tab-content{margin-top: 14px; background: var(--earth-surface); border: 1px solid rgba(0,0,0,0.06); border-radius: 12px; padding: 14px; box-shadow: 0 4px 16px var(--shadow);} 
.tabs .tab-item{display:none; animation: tabFade .2s ease;}
.tabs .tab-item.open{display:block;}
@keyframes tabFade{from{opacity:0; transform: translateY(4px);} to{opacity:1; transform: translateY(0);} }

/*video-article css*/
.video-article{display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; width: var(--width); height: auto; margin-top: 30px; padding: 0 12px; box-sizing: border-box;}
.video-article .item{width: calc(98%/3); position: relative; overflow: hidden; border-radius: var(--radius-sm); aspect-ratio: 1 / 1;}
.video-article .item img{display:block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); transition: transform .35s ease;}
.video-article .item:hover img{transform: scale(1.06);} 
/* Overlay that shows on hover */
.video-article .item .link{position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 14px; background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.15), rgba(0,0,0,0)); color: var(--earth-surface); opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease;}
.video-article .item:hover .link{opacity: 1; transform: translateY(0);} 
.video-article .item .link a,
.video-article .item .link a:visited{color: var(--earth-surface); text-decoration: none; text-align: center; display:block; width:100%; pointer-events: auto;}
.video-article .item .link a .date{font-size: 12px; opacity: .9;}
.video-article .item .link a .name{margin-top: 6px; font-weight: 700; line-height: 1.35;}

/*article css*/
.article{display: flex; flex-direction: column; gap: 24px; width: 100%; margin: 28px auto 0;}
.article .right-item{display: flex; justify-content: flex-end; width: 100%;}
.article .right-item .item{width: calc(100% - 40%);}
.article .right-item .item .top,
.article .right-item .item .title{display: flex; justify-content: flex-end;}
.article .left-item{width: calc(100% - 40%);}
.article .left-item .item .top{display: flex; justify-content: flex-start; gap: 10px;}
.article .link{display: block; background: var(--earth-surface); border: 1px solid rgba(0,0,0,0.06); border-radius: 14px; padding: 12px; box-shadow: 0 6px 30px var(--shadow); color: inherit; text-decoration: none; transition: transform .22s ease, box-shadow .22s ease;}
.article .link:hover{transform: translateY(-4px); box-shadow: 0 10px 24px var(--shadow-2);}
.article .date{display:inline-flex; align-items:center; gap:6px; opacity:.9; margin: 0 8px 6px 0; white-space: nowrap;}
.article .date span{display:inline-block; font-size: 15px; padding: 3px 7px; background: rgba(4,123,193,0.08); color: var(--green); border-radius: 999px; line-height: 1; transition: background-color .2s ease, transform .18s ease, box-shadow .2s ease;}
.article .author{display:inline-flex; align-items:center; gap:6px; margin: 0 0 6px 0;}
.article .author img{width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(4,123,193,0.15);}
/* Keep title/image styles unchanged */
.article .link .title{display: flex; flex-direction: column; gap: 6px;}
.article .link .title small{opacity: .7; font-size: 13px;}
.article .link .img{width: 135px; height: 135px; flex: 0 0 auto; display: block;}
.article .link .img img{width: 100%; height: 100%; object-fit: cover; border-radius: 50%;}
/* Align author next to date when both present */
.article .right-item > .author,
.article .left-item > .author{ margin-left: 8px; }
/* Subtle feedback on hover */
.article .right-item:hover > .date span,
.article .left-item:hover > .date span{ background: rgba(4,123,193,0.12); transform: translateY(-1px); box-shadow: 0 2px 8px var(--shadow); }
/* layout: alternate left/right image placement */
.article .right-item .ss-display-flex{align-items: center; gap: 8px;}
.article .right-item .link .date, .article .right-item .link .author{margin-bottom: 6px;}
.article .right-item .title{flex: 0 0 calc(100% - 22%); max-width: 100%;}
.article .right-item .img{flex: 0 0 auto; max-width: none;}
.article .left-item .ss-display-flex{flex-direction: row-reverse; align-items: center; gap: 8px;}
.article .left-item .title{flex: 0 0 calc(100% - 22%); max-width: 100%;}
.article .left-item .img{flex: 0 0 auto; max-width: none;}
/* responsive */
@media (min-width: 1800px){
    .article .right-item .title,
    .article .left-item .title{flex: 0 0 calc(100% - 16%);}
}
@media (max-width: 1400px){
    .article .right-item .title,
    .article .left-item .title{flex: 0 0 calc(100% - 25%);}
}
@media (max-width: 1200px){
    .article .right-item .title,
    .article .left-item .title{flex: 0 0 calc(100% - 30%);}
}
@media (max-width: 1024px){
    .article .right-item .title,
    .article .left-item .title{flex: 0 0 calc(100% - 25%);}
}
@media (max-width: 900px){
  .article .link .img{width: 135px; height: 135px;}
}
@media (max-width: 820px){
  .article .link .img{width: 135px; height: 135px;}
}
@media (max-width: 768px){
    .article{width: 100%;}
    /* Make alternating items full-width on mobile */
    .article .left-item{width: 100%;}
    .article .left-item .item{width: 100%;}
    .article .right-item .item{width: 100%;}
    /* Stack inner content vertically */
    .article .right-item .ss-display-flex,
    .article .left-item .ss-display-flex{flex-direction: column; align-items: stretch;}
    .article .link .img{width: 100%; height: 200px;}
    .article .link .img img{border-radius: 8px;}
}

/* ====== Search (header) ====== */
header .search{position: relative; height:44px; display:flex; align-items:center; gap:8px;}
header .search button{background: var(--earth-surface); color: var(--earth-deep); border: none; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px var(--shadow-2); cursor: pointer; position: relative; z-index: 900; transition: transform .12s ease, color .2s ease; font-size: 18px;}
header .search button:active{transform: scale(0.98); }
header .search label{position: static;}
/* Input is positioned to the left of the button and expands leftwards when open */
header .search input{position: absolute; top: 0; right: 52px; height: 42px; border-radius: 12px; border: 1px solid transparent; background: var(--earth-surface); color: var(--earth-deep); padding: 0 12px; width: 0; opacity: 0; transform: translateX(12px); pointer-events: none; box-shadow: 0 6px 20px var(--shadow); transition: width .28s ease, opacity .18s ease, transform .28s ease, border-color .2s ease, box-shadow .2s ease;}
header .search.open input{width: min(150px, 72vw); opacity: 1; transform: translateX(0); pointer-events: auto; border-color: rgba(0,0,0,0.08);}
header .search input::placeholder{color: rgba(46,42,36,0.55);}
header .search input:focus{outline: none;  box-shadow: 0 4px 12px var(--shadow-2);}
@media (max-width: 640px){
  header .search.open input{width: min(140px, 70vw);}
}

/* ====== Footer ====== */
.footer{width: 100%; margin-top: 40px; background: var(--brown); color: var(--white); border-top: 1px solid rgba(0,0,0,0.06); box-shadow: 0 -2px 14px var(--shadow); /*border-radius: 14px 14px 0 0;*/ overflow: hidden;}
.footer .items{display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; padding: 18px; align-items: center;}
.footer .footer-contact .item,
.footer .social .item{margin: 4px 6px; text-align: center;}
.footer .footer-contact, .footer .social{display: flex;flex-wrap: wrap; gap: 10px; justify-content: center;}
/* Contact links: readable on brown */
.footer .footer-contact .item a{color: var(--white); text-decoration: none; padding: 8px 10px; border-radius: 8px; transition: background .2s ease, color .2s ease, transform .2s ease;}
.footer .footer-contact .item a:hover{background: rgba(255,255,255,0.14); color: var(--white); transform: translateY(-1px);}
/* Social links: circular icon buttons matching brown theme */
.footer .social .item a{display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--brown); background: rgba(255,255,255,0.9); text-decoration: none; box-shadow: 0 4px 12px var(--shadow); transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;}
.footer .social .item a i{font-size: 18px; line-height: 1;}
.footer .social .item a:hover{background: var(--earth-surface); color: var(--brown); transform: translateY(-2px); box-shadow: 0 8px 20px var(--shadow-2);}
.footer .social .item a:focus-visible{outline: 3px solid rgba(255,255,255,0.45); outline-offset: 2px;}
.footer .copyright{border-top: 1px dashed rgba(255,255,255,0.35); padding: 12px 18px; font-size: 14px; opacity: .9; text-align: center; color: var(--white);}
.footer .copyright span{color: var(--white);}
@media (max-width: 900px){
  .footer .items{grid-template-columns: 1fr; text-align: center;}
  .footer .footer-banner{justify-self: center;}
}
@media (max-width: 640px){
    .footer .social .item a{width: 30px; height: 30px;}
    .footer .social .item a i{font-size: 16px;}
    .footer .copyright,
    .footer .footer-contact .item span,
    .footer .footer-contact .item a{font-size: 14px;}
}

/* ====== Contact page ====== */
.contact{width: 100%; margin: 24px auto; background: var(--earth-surface); border: 1px solid rgba(0,0,0,0.06); border-radius: 14px; box-shadow: 0 6px 18px var(--shadow); padding: 18px; box-sizing: border-box;}
/* Contact question block */
.contact .contact-question{display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; align-items: stretch; margin-bottom: 16px; background: linear-gradient(135deg, rgba(4,123,193,0.06), rgba(29,150,73,0.06)); border: 1px dashed rgba(0,0,0,0.08); padding: 14px; border-radius: 12px;}
.contact .contact-question-title{background: var(--earth-surface); border: 1px solid rgba(0,0,0,0.06); border-radius: 12px; padding: 14px; font-weight: 900; line-height: 1.35; box-shadow: 0 4px 12px var(--shadow);} 
.contact .contact-question .static-text{background: var(--earth-surface); border: 1px solid rgba(0,0,0,0.06); border-radius: 12px; padding: 12px; box-shadow: 0 4px 12px var(--shadow);}
/* Ensure any text from staticTextPreparer formats nicely */
.contact .contact-question .static-text p{margin: 8px 0;}
.contact .contact-question .static-text ul{margin: 8px 0 0 18px; list-style: disc;}

.contact .title{font-size: 22px; font-weight: 800; margin-bottom: 12px;}
.contact .fields{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start;}
.contact .field{display: flex; flex-direction: column; gap: 6px; min-width: 0;}
.contact label{font-weight: 700; font-size: 14px;}
.contact input[type="text"],
.contact input[type="email"],
.contact input[type="tel"],
.contact textarea{width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.08); background: #fff; box-shadow: 0 2px 8px var(--shadow) inset; transition: border-color .2s ease, box-shadow .2s ease; box-sizing: border-box;}
.contact textarea{min-height: 120px; resize: vertical;}
.contact input:focus,
.contact textarea:focus{outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(4,123,193,0.15);}
.contact .actions{margin-top: 10px; display: flex; justify-content: flex-end;}
.contact .actions .btn{background: var(--blue); color: var(--white); border: none; padding: 10px 16px; border-radius: 10px; cursor: pointer; box-shadow: 0 6px 16px rgba(4,123,193,0.35); transition: transform .15s ease, box-shadow .2s ease, background .2s ease;}
.contact .actions .btn:hover{transform: translateY(-2px); box-shadow: 0 10px 22px rgba(4,123,193,0.4);} 
.contact .actions .btn:active{transform: translateY(0);}
@media (max-width: 820px){
  .contact{margin: 16px auto; padding: 14px;}
  .contact .contact-question{grid-template-columns: 1fr;}
  .contact .fields{grid-template-columns: 1fr;}
}

/* Make spring form errors align with inputs */
form .fields .field .ss-alert,
.contact .fields .field .ss-alert{width:100%; box-sizing: border-box; display:block; margin-top: 10px;}

/* ====== Header menu-title styling & dropdown ====== */
header .menu{display:flex; align-items:center; gap:10px;}
header .menu-title{display:flex; align-items:center; gap: 6px; list-style: none; margin: 0; padding: 0;}
header .menu-title > .item{position: relative;}
header .menu-title a{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; background: var(--earth-surface); color: var(--earth-deep); text-decoration:none; border:1px solid rgba(0,0,0,0.06); box-shadow: 0 2px 10px var(--shadow); font-weight:700; line-height:1.1; font-size:16px; position: relative; overflow: hidden; transition: background .25s ease, color .25s ease, box-shadow .25s ease, max-width .25s ease, transform .2s ease; max-width: 100%; white-space: nowrap; text-overflow: ellipsis;}
header .menu-title a i{opacity:.9; font-size:14px;}
/* Hover: yellow theme with subtle glow and underline slide animation */
header .menu-title a:hover{background: rgba(4,123,193,0.08); color: var(--green); box-shadow: 0 6px 16px rgba(4,123,193,0.35);}
/* Animated underline using pseudo-element */
header .menu-title a::after{content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px; background: var(--green); transform: scaleX(0); transform-origin: left center; transition: transform .25s ease; border-radius: 1px;}
header .menu-title a:hover::after{transform: scaleX(1);} 
header .menu-title a:focus-visible{outline: 3px solid rgba(255,221,0,0.55); outline-offset: 2px;}
/* Dropdown submenu */
header .menu-title .submenu{position: absolute; left: 0; top: calc(100% + 8px); min-width: 220px; background: var(--earth-surface); border: 1px solid rgba(0,0,0,0.06); border-radius: 12px; box-shadow: 0 10px 22px var(--shadow-2); list-style: none; padding: 8px; margin: 0; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; z-index: 1200;}
header .menu-title .submenu .sub-item{margin: 0;}
header .menu-title .submenu a{display:block; padding:8px 10px; border-radius: 8px; background: transparent; box-shadow: none; border: none; font-weight: 600;}
header .menu-title .submenu a:hover{background: rgba(4,123,193,0.08); color: var(--green); box-shadow: none;}
/* Show on hover */
header .menu-title > .item:hover > .submenu,
header .menu-title > .item:focus-within > .submenu{opacity: 1; visibility: visible; transform: translateY(0);} 
/* caret indicator for items that have submenu */
header .menu-title > .item.has-sub > a .down-icon{font-weight: 900; margin-right: 6px; opacity: .8;}
/* When search is open, shrink and truncate the menu title */
header.search-open .menu-title a{max-width: 280px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; transform: translateY(1px);} 
@media (max-width: 980px){ header.search-open .menu-title a{ max-width: 220px; } }
@media (max-width: 640px){ header.search-open .menu-title a{ max-width: 160px; } }

/* Make header container breathe on small screens */
@media (max-width: 640px){
  .header-container{padding: 8px;}
  header .menu-title{max-width: calc(100vw - 140px);}
  header .menu-title a{padding:8px 0 8px 10px; font-weight:700; display:inline-flex; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
}

/* ====== Article page improved styles ====== */
.article-head{display:flex; flex-direction:column; gap:6px; margin-top: 18px;}
.article-title{font-size: clamp(22px, 2.8vw, 36px); line-height:1.25; font-weight: 900;}
.article-meta{display:flex; align-items:center; gap:10px; opacity:.9;}
.article-date{display:inline-flex; align-items:center; gap:6px; font-size:14px; color: rgba(0,0,0,0.75);} 
.article-image img{display:block; width:100%; /*max-height: 520px;*/ height: auto; object-fit: cover; border-radius: 12px; box-shadow: 0 6px 20px var(--shadow);}
.article-video-view{aspect-ratio:16/9; width:100%;}
.article-video-view iframe{border: 0; border-radius:12px; box-shadow: 0 6px 20px var(--shadow);}
.article-text{background: var(--earth-surface); border: 1px solid rgba(0,0,0,0.06); border-radius: 12px; padding: 16px; box-shadow: 0 4px 16px var(--shadow);}
.article-text p{margin: 10px 0;}
.article-text ul{padding-left: 18px; margin: 8px 0;}
.article-social{display:flex; gap:10px;}
.article-social a{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background: var(--earth-surface); color: var(--earth-deep); text-decoration:none; box-shadow: 0 4px 12px var(--shadow); transition: background .2s ease, color .2s ease, transform .15s ease;}
.article-social a:hover{background: rgba(4,123,193,0.08); color: var(--blue); transform: translateY(-2px);} 

/* ====== Article footer slider (Swiper) ====== */
.article-footer{margin-top: 24px;}
.article-footer-title span{font-weight: 800; font-size: 20px;}
.article-footer .article-footer-list{padding: 20px 0;}
.article-footer .swiper-slide{height: auto;}
.article-footer .article-footer-list-item{background: var(--earth-surface); border: 1px solid rgba(0,0,0,0.06); border-radius: 12px; overflow: hidden; box-shadow: 0 6px 18px var(--shadow); transition: transform .2s ease, box-shadow .2s ease; height: 100%; display: flex; flex-direction: column;}
.article-footer .article-footer-list-item:hover{transform: translateY(-4px); box-shadow: 0 10px 24px var(--shadow-2);} 
.article-footer .article-footer-list-item-image{aspect-ratio: 16 / 9; overflow: hidden;}
.article-footer .article-footer-list-item-image img{width: 100%; height: 100%; object-fit: cover; display: block;}
.article-footer .article-footer-list-item-date{padding: 8px 12px 0;}
.article-footer .article-footer-list-item-date span{font-size: 12px; background: rgba(4,123,193,0.08); color: var(--blue); border-radius: 999px; padding: 3px 8px;}
.article-footer .article-footer-list-item-title{padding: 8px 12px 0; font-weight: 800; line-height: 1.35;}
.article-footer .article-footer-list-item-title{display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-break: break-word;}
.article-footer .article-footer-list-item a,
.article-footer .article-footer-list-item a:visited{color: inherit; text-decoration: none; display: block;}
.article-footer .article-footer-list-item-description{padding: 6px 12px; margin-top: auto;}
.article-title,
.article-description,
.article-footer .article-footer-list-item-description{display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; opacity: .9;}
.article-title{-webkit-line-clamp: 1; font-size: 18px;}

/* Swiper controls sizing inside footer */
.article-footer .swiper-button-prev, .article-footer .swiper-button-next{color: var(--earth-deep); width: 32px; height: 32px; background: rgba(0,0,0,0.06); border-radius: 50%; box-shadow: 0 2px 10px var(--shadow);} 
.article-footer .swiper-button-prev:hover, .article-footer .swiper-button-next:hover{background: rgba(0,0,0,0.12);} 
.article-footer .swiper-button-prev::after, .article-footer .swiper-button-next::after{font-size: 14px;}
.article-footer .swiper-pagination-bullet{background: rgba(0,0,0,0.25);} 

/* ====== Default page (page) improved styles ====== */
.page{width: 100%; margin: 20px auto; display: block;}
.page-main{background: var(--earth-surface); border: 1px solid rgba(0,0,0,0.06); border-radius: 14px; padding: 18px; box-shadow: 0 6px 18px var(--shadow);} 
.page-title span{display:block; font-size: clamp(22px, 2.6vw, 34px); font-weight: 900; line-height: 1.2;}
.page-subtitle span{display:block; margin-top: 6px; font-size: clamp(16px, 2.2vw, 22px); opacity: .9; font-weight:700;}
.page-image img{display:block; width:100%; max-height: 420px; object-fit: cover; border-radius: 12px; margin: 12px 0; box-shadow: 0 4px 14px var(--shadow);} 
.page-text{margin: 10px 0;}
.page-text p{margin: 8px 0;}
.page-section-left, .page-section-right{display: flex; flex-direction: column; gap: 14px; align-items: start; margin: 16px 0;}
.page-section-right .page-section-right-content{display: flex; justify-content: space-between; gap: 12px; width: 100%;}
.page-section-right .page-section-right-content .page-section-right-text,
.page-section-right .page-section-right-content .page-section-right-image{width: 50%;}
.page-section-left .page-section-left-content{display: flex; justify-content: space-between; gap: 12px; width: 100%;}
.page-section-left .page-section-left-content .page-section-left-text,
.page-section-left .page-section-left-content .page-section-left-image{width: 50%;}
.page-section-left-title span, .page-section-right-title span{display:block; font-weight: 800; font-size: 18px;}
.page-section-left-image img, .page-section-right-image img{width: 100%; height: 280px; object-fit: cover; border-radius: 12px; box-shadow: 0 4px 14px var(--shadow);} 
.page-section-left-text, .page-section-right-text{background: var(--earth-surface); border: 1px dashed rgba(0,0,0,0.08); border-radius: 12px; padding: 12px;}
.page-section-left-text ul, .page-section-right-text ul{margin: 8px 0 0 18px;}
.page-footer{margin-top: 14px;}
.page-footer-title{font-weight: 800; font-size: 18px; margin-bottom: 8px;}
.page-footer-image img{width:100%; max-height: 320px; object-fit: cover; border-radius: 12px; box-shadow: 0 4px 14px var(--shadow);} 
.page-footer-text{margin-top: 8px;}
@media (max-width: 1024px){
  /* Stack layout on tablet */
  .layout{flex-direction: column;}
  .left-side{width: 100%;}
  .right-side{width: 100%; position: static; height: auto; padding: 10px 12px; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 12px; background: var(--cop--blue);/*background: linear-gradient(180deg, var(--cop--blue) 0%, var(--cop--brown) 100%);*/}
  /* Two logos side-by-side; menu items full-width below */
  .right-side .logo{width: calc(50% - 6px); max-width: 360px;}
  .right-side .item{flex: 1 1 100%;}
}
@media (max-width: 640px){
  /* Compact off-canvas drawer for right-side on phones */
  .layout{flex-direction: column;}
  .left-side{width: 100%;}
  .right-side{position: fixed; top: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; padding: 12px; box-sizing: border-box; overflow-y: auto; background: var(--cop--blue);/*background: linear-gradient(180deg, var(--cop--blue) 0%, var(--cop--brown) 100%);*/ box-shadow: -12px 0 28px rgba(0,0,0,0.28); transform: translateX(100%); opacity: 0; pointer-events: none; z-index: 1600; display: flex; flex-direction: column; align-items: stretch; gap: 10px;}
  .right-side.open{transform: translateX(0); opacity: 1; pointer-events: auto;}
  .right-side .logo{width: 95%; max-width: 100%;}
  .right-side .item{width: 100%;}
    .right-side .item{flex: none;}
  /* Make items concise */
  /*.right-side .item .description{display: none;}*/
  .right-side .item a{padding: 10px 12px; font-size: 16px;}
  /* Floating action button visible on mobile */
  .rs-fab{position: fixed; right: 14px; bottom: 35px; z-index: 2001; display: inline-flex !important; align-items: center; justify-content: center; height: 48px; padding: 0 14px; border-radius: 12px; background: var(--earth-bg); border: 2px solid rgba(0,0,0,0.12); font-weight: 800; letter-spacing: .2px;}
  .rs-fab img{width: 80px;}
  .rs-fab i{font-size: 18px; margin-right: 8px;}
  .rs-fab:active{transform: scale(0.98);} 
  /* Animations */
  @media (prefers-reduced-motion: no-preference){
    .right-side{transition: transform .25s ease, opacity .2s ease, box-shadow .2s ease;}
  }
}
@media (min-width: 641px){
  .rs-fab{display:none;}
}
/* Hover/Focus states */
.rs-fab:hover{background: #f5f3ee; color: var(--earth-bg);}

/* Smooth scroll preference */
html{scroll-behavior: smooth;}
@media (max-width: 980px){
  .banner .banner-item img{height: 480px;}
}
@media (max-width: 640px){
  .banner .banner-item img{height: 320px;}
}
@media (max-width: 980px){
  .video-article .item{width: 48%;}
}
@media (max-width: 640px){
  .video-article .item{width: 100%;}
}
@media (max-width: 820px){
  .page-main{padding: 14px;}
  /* Stack left/right sections on small screens */
  .page-section-left .page-section-left-content,
  .page-section-right .page-section-right-content{flex-direction: column;}
  .page-section-right .page-section-right-content .page-section-right-text,
  .page-section-right .page-section-right-content .page-section-right-image,
  .page-section-left .page-section-left-content .page-section-left-text,
  .page-section-left .page-section-left-content .page-section-left-image{width: 100%;}
  /* Reduce image height for small screens to keep aspect and avoid overflow */
  .page-section-left-image img, .page-section-right-image img{height: auto; max-height: 280px;}
}
.article-footer .swiper-pagination-bullet-active{background: var(--blue);} 
 
@media (max-width: 820px){
  .article-image img{/*max-height: 360px;*/ height: auto;}
}

/* Make rich text content responsive */
.article-text img, .page-text img{max-width:100%; height:auto;}
.article-text iframe, .page-text iframe, .article-text video, .page-text video{max-width:100%; width:100%; height:auto;}
/* Responsive tables within rich text */
.article-text table, .page-text table{display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-collapse: collapse;}
.article-text table td, .article-text table th, .page-text table td, .page-text table th{word-break: break-word;}

/* ====== Home contact-feature (survey promo) ====== */
.contact-feature{margin: 12px 0;}
/* Make it green and centered */
.contact-feature a{display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 14px; border-radius: 12px; background: rgba(4,123,193,0.08); border: 1px solid rgba(0,0,0,0.06); text-decoration: none; color: var(--green); box-shadow: 0 6px 16px var(--shadow); font-weight: 800; line-height: 1.35; text-align: center;}
.contact-feature a i{color: var(--green); font-size: 18px; opacity: .95;}
.contact-feature a:hover{transform: translateY(-2px); transition: transform .2s ease, box-shadow .2s ease; box-shadow: 0 10px 24px var(--shadow-2); filter: brightness(1.05);}
.contact-feature a:focus-visible{outline: 3px solid rgba(255,255,255,0.55); outline-offset: 2px;}
@media (max-width: 640px){ .contact-feature a{padding: 10px 12px; font-weight: 800; text-align: center;} }

/* ====== Pagination ====== */
.pagination{display:flex; justify-content:center; margin: 18px 0;}
.pagination .pagination-list{display:flex; gap:8px; align-items:center; padding:0; margin:0; list-style:none;}
.pagination .pagination-item{}
.pagination .pagination-link{display:inline-flex; align-items:center; justify-content:center; min-width: 38px; height:38px; padding:0 12px; border-radius: 999px; background: var(--earth-surface); color: var(--earth-deep); border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 2px 10px var(--shadow); text-decoration:none; font-weight:700; transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .12s ease;}
.pagination .pagination-link:hover{background: rgba(4,123,193,0.08); color: var(--green); box-shadow: 0 6px 16px var(--shadow-2); transform: translateY(-1px);}
.pagination .pagination-link:focus-visible{outline:3px solid rgba(4,123,193,0.35); outline-offset:2px;}
.pagination .pagination-link.active{background: var(--green); color: var(--white); border-color: transparent; box-shadow: 0 6px 18px rgba(4,123,193,0.28);}
.pagination .pagination-link.prev, .pagination .pagination-link.next{min-width: 42px;}
/* Screen-reader only utility (if not present) */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
@media (max-width: 640px){
  .pagination .pagination-list{gap:6px;}
  .pagination .pagination-link{min-width:34px; height:34px; padding:0 10px; font-weight:800;}
}

.right-side .logo:hover{transform: translateY(-2px); box-shadow: 0 8px 20px var(--shadow-2);}

/* Ensure right-side menu link colors are visible across states */
.right-side .item > a,
.right-side .item > a:link,
.right-side .item > a:visited{
  color: var(--earth-bg);
}
/* High-contrast hover/focus states: darken background and make text white for readability */
.right-side .item > a:hover,
.right-side .item > a:visited:hover,
.right-side .item > a:focus,
.right-side .item > a:active{
  /*background: linear-gradient(90deg, var(--cop--blue), var(--cop--brown)););*/
  background: transparent;
  color: var(--white) !important;
  text-decoration: none;
}
/* If link contains nested elements, inherit the state color */
.right-side .item > a:hover *,
.right-side .item > a:focus *{
  color: currentColor !important;
}
/* Active/current helpers */
.right-side .item > a.active,
.right-side .item > a[aria-current="page"],
.right-side .item > a[aria-current="true"]{
  background: rgba(4,182,197,0.22);
  color: var(--earth-deep);
}
.video-article-section-title,
.photo-albums-title{margin-top: 20px; font-size: 20px; font-weight: bold; text-align: center;}
.video-article.photo-albums .item{width: calc(98%/4);}
@media (max-width: 1024px){ .video-article.photo-albums .item{width: calc(98%/3);} }
@media (max-width: 820px){ .video-article.photo-albums .item{width: calc(98%/2);} }
@media (max-width: 520px){ .video-article.photo-albums .item{width: 100%;} }

/* ====== Photo album page (Swiper) ====== */
.photo-album{width: 100%; margin: 20px auto;}
.photo-album-view-name span{display:block; font-size: clamp(22px, 2.6vw, 32px); font-weight: 900;}
.photo-album-view-desc span{display:block; margin: 6px 0 12px; opacity: .9;}
.photo-album-view-image{position: relative; background: var(--earth-surface); border: 1px solid rgba(0,0,0,0.06); border-radius: 12px; box-shadow: 0 6px 18px var(--shadow); overflow: hidden;}
.photo-album .photo-swiper{width: 100%;}
/* Keep a stable viewport-based height to prevent layout jump/squeezing on mobile */
.photo-album .photo-swiper, .photo-album .photo-swiper .swiper-wrapper{height: 70vh;}
@media (max-width: 640px){
    .photo-album .photo-swiper, .photo-album .photo-swiper .swiper-wrapper{height: 56vh;}
    .photo-album-swiper-pagination{display: none !important;}
}
.photo-album .photo-swiper .swiper-slide{position:relative; display:flex; align-items:center; justify-content:center; height:100%;}
/* Let images size by intrinsic ratio without forcing width that breaks portrait; center and contain */
.photo-album .photo-swiper .swiper-slide img{display:block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: #000; margin:auto;}
/* Per-slide description overlay */
.photo-album .photo-swiper .swiper-slide .swiper-slide-desc{position:absolute; left:50%; bottom: 10%; transform: translate(-50%, 0); max-width: min(92%, 980px); box-sizing: border-box; padding: 10px 14px; background: rgba(0,0,0,0.45); color:#fff; display:flex; align-items:center; justify-content:center; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); backdrop-filter: blur(4px) saturate(120%);}
.photo-album .photo-swiper .swiper-slide .swiper-slide-desc span{display:block; font-size: clamp(14px, 2vw, 18px); font-weight:700; text-shadow: 0 1px 2px rgba(0,0,0,0.6); line-height: 1.35; text-align: center; word-break: break-word;}
/* Controls */
.photo-album .swiper-button-prev, .photo-album .swiper-button-next{color: var(--earth-surface); width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.35); box-shadow: 0 2px 10px var(--shadow);} 
.photo-album .swiper-button-prev:hover, .photo-album .swiper-button-next:hover{background: rgba(0,0,0,0.5);} 
.photo-album .swiper-button-prev::after, .photo-album .swiper-button-next::after{font-size: 16px;}
.photo-album .swiper-pagination-bullet{background: rgba(255,255,255,0.7);} 
.photo-album .swiper-pagination-bullet-active{background: var(--white);} 
/* Photo album actions */
.photo-album .photo-actions{position:absolute; right:12px; bottom:12px; display:flex; gap:8px; z-index: 5;}
.photo-album .photo-actions .btn-zoom,
.photo-album .photo-actions .btn-download{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; border:none; background: rgba(0,0,0,0.45); color: var(--earth-surface); cursor:pointer; box-shadow: 0 4px 12px var(--shadow-2); text-decoration:none;}
.photo-album .photo-actions .btn-zoom:hover,
.photo-album .photo-actions .btn-download:hover{background: rgba(0,0,0,0.6);}
.photo-album .photo-actions i{font-size:16px;}
/* Lightbox modal */
.photo-lightbox{position:fixed; inset:0; z-index:2002;}
.photo-lightbox .pl-backdrop{position:absolute; inset:0; background: rgba(0,0,0,0.8);}
.photo-lightbox .pl-body{position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:20px; box-sizing:border-box;}
.photo-lightbox .pl-img{max-width: 96vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,0.5);}
.photo-lightbox .pl-close{position:absolute; top:16px; right:16px; width:42px; height:42px; border-radius:10px; border:none; background: rgba(255,255,255,0.9); color:#000; font-size:24px; line-height:1; cursor:pointer;}
.photo-lightbox .pl-prev,
.photo-lightbox .pl-next{position:absolute; top:50%; transform: translateY(-50%); width:44px; height:44px; border-radius:50%; border:none; background: rgba(255,255,255,0.9); color:#000; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;}
.photo-lightbox .pl-prev{left:16px;}
.photo-lightbox .pl-next{right:16px;}
body.pl-open{overflow:hidden;}

/* ====== Global date chip utility & hover animation ====== */
.date{display:inline-flex; align-items:center; gap:6px; white-space: nowrap;}
.date span{display:inline-block; font-size: 15px; padding: 3px 7px; background: rgba(4,123,193,0.08); color: var(--green); border-radius: 999px; line-height: 1; transition: background-color .2s ease, transform .18s ease, box-shadow .2s ease;}
/* Animate when hovering the chip directly */
.date:hover span{background: rgba(4,123,193,0.12); transform: translateY(-1px); box-shadow: 0 2px 8px var(--shadow);} 
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .date span{transition: none !important;}
}
.feature-icon {position: relative; cursor: pointer;}
.feature-icon:hover::after {opacity: 1; visibility: visible;}
.feature-icon::after {content: attr(data-tooltip); position: absolute; transform: translateX(-50%); background: rgba(4,123,193,0.08); color: var(--green); padding: 4px 8px; border-radius: 4px; font-size: 13px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.1s;}
.feature-icon-right::after {bottom: 150%; left: -90%;}
.feature-icon-left::after {bottom: 105%; left: 180%;}
.video-article-feature-icon{position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; background: rgba(4,123,193,0.08); color: var(--yellow); display:flex; align-items:center; justify-content:center; font-size: 18px; cursor: pointer; box-shadow: 0 2px 8px var(--shadow);}