/* ===== SHL Theme ===== */
:root{
  --shl-b:#16A34A;--shl-b2:#15803D;--shl-hi:#F59E0B;--shl-tint:#E8F9EE;
  --shl-bg:#fff;--shl-card:#fff;--shl-soft:#F5F7FB;--shl-line:#E6EAF2;--shl-text:#0F172A;--shl-muted:#5B6678;
  --shl-container:1140px;--shl-scroll-offset:96px;
  --shl-font:"Noto Sans Sinhala",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}
html[data-shl-theme="dark"]{color-scheme:dark;--shl-bg:#07130C;--shl-card:#10261A;--shl-soft:#0B1C12;--shl-line:#1C3A28;--shl-text:#ECFDF3;--shl-muted:#9DB8A8;--shl-tint:#12301F;--shl-b:#4ADE80;--shl-b2:#86EFAC}
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--shl-scroll-offset);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--shl-bg);color:var(--shl-text);font-family:var(--shl-font);line-height:1.7;font-size:16px}
img{max-width:100%;height:auto}
a{color:var(--shl-b2);text-decoration:none}a:hover{color:var(--shl-b)}
h1,h2,h3,h4,h5,h6{color:var(--shl-text);line-height:1.3;margin:0 0 .6em}
.shl-container{max-width:var(--shl-container);margin:0 auto;padding:0 24px}
.screen-reader-text{position:absolute;left:-9999px}
.skip-link:focus{left:12px;top:12px;background:#fff;color:#000;padding:8px 14px;z-index:100000;border-radius:8px}

/* ---------- Header (floating pill like the SHL preview; every size/colour is a Customizer option) ---------- */
:root{
  --shl-ab:0px;--shl-navh:72px;--shl-hmax:1240px;--shl-pmax:1200px;--shl-ph:58px;--shl-pgap:10px;--shl-pr:99px;
  --shl-blurpx:16px;--shl-popa:78%;--shl-mfs:14px;--shl-mfw:600;--shl-mpx:15px;--shl-mgap:4px;
  --shl-dw:78%;--shl-dmax:300px;--shl-icon:40px;--shl-logoh:60px;--shl-menu-c:var(--shl-muted);
}
body.admin-bar{--shl-ab:32px}
@media(max-width:782px){body.admin-bar{--shl-ab:46px}}

/* .site-header is only a spacer; the real bar (.hd-in) is fixed so it can float and shrink */
.site-header{position:relative;height:var(--shl-navh);z-index:999}
body.shl-overlay .site-header{height:0}
.site-header .hd-in{
  position:absolute;top:0;left:0;right:0;height:var(--shl-navh);
  max-width:var(--shl-hmax);margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;isolation:isolate;
  transition:max-width .4s cubic-bezier(.4,0,.2,1),height .4s cubic-bezier(.4,0,.2,1),margin-top .4s cubic-bezier(.4,0,.2,1),padding .4s cubic-bezier(.4,0,.2,1)
}
body.shl-sticky .site-header .hd-in{position:fixed;top:var(--shl-ab)}
/* frosted background lives on a pseudo element (so the mobile drawer can stay position:fixed) */
.hd-in:before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:var(--shl-pr);opacity:0;transition:opacity .35s;
  background:color-mix(in srgb,var(--shl-bg) var(--shl-popa),transparent);
  -webkit-backdrop-filter:blur(var(--shl-blurpx));backdrop-filter:blur(var(--shl-blurpx));
  border:1px solid var(--shl-line);box-shadow:0 12px 36px rgba(15,23,42,.14)
}
html[data-shl-theme="dark"] .hd-in:before{box-shadow:0 12px 36px rgba(0,0,0,.5)}
/* floating: shrink into a pill after scrolling */
body.shl-hs-float.shl-sticky.shl-scrolled .hd-in:before,body.shl-hs-float.shl-sticky.shl-measure .hd-in:before{opacity:1}
body.shl-hs-float.shl-sticky.shl-scrolled .site-header .hd-in,body.shl-hs-float.shl-sticky.shl-measure .site-header .hd-in{max-width:var(--shl-pmax);height:var(--shl-ph);margin-top:var(--shl-pgap);padding:0 14px 0 18px}
body.shl-hs-float:not(.shl-sticky) .hd-in:before{opacity:1}
/* classic: full width bar with a bottom border */
body.shl-hs-classic .site-header .hd-in{max-width:none;padding:0 max(24px,calc((100% - var(--shl-hmax))/2))}
body.shl-hs-classic .hd-in:before{opacity:1;border-radius:0;border-width:0 0 1px;box-shadow:none}
body.shl-hs-classic.shl-scrolled .hd-in:before{box-shadow:0 8px 26px rgba(15,23,42,.10)}
html[data-shl-theme="dark"] body.shl-hs-classic.shl-scrolled .hd-in:before{box-shadow:0 8px 26px rgba(0,0,0,.45)}
/* measuring / resizing must never animate */
body.shl-fitting .hd-in,body.shl-fitting .hd-in:before,body.shl-measure .hd-in{transition:none!important}

/* scroll progress bar */
.shl-progress{position:fixed;top:var(--shl-ab,0px);left:0;height:3px;width:0;background:linear-gradient(90deg,var(--shl-b),var(--shl-hi));z-index:1001;pointer-events:none}

/* brand */
.brand{display:flex;align-items:center;gap:10px;flex:none;text-decoration:none;color:var(--shl-text)}
.brand img{display:block;width:auto;max-width:260px;max-height:var(--shl-logoh)}
.brand .shl-logo-dark{display:none}
html[data-shl-theme="dark"] .brand .shl-logo-light{display:none}
html[data-shl-theme="dark"] .brand .shl-logo-dark{display:block}
.brand .bi{width:var(--shl-icon);height:var(--shl-icon);max-height:none;max-width:none;border-radius:12px;flex:none}
.brand .lt{display:flex;flex-direction:column;line-height:1.2}
.brand .lt b{font:800 15px Inter,var(--shl-font);letter-spacing:.03em;color:var(--shl-text)}
.brand .lt small{font-size:11px;font-weight:600;color:var(--shl-muted)}
.brand-text{font:800 20px var(--shl-font);color:var(--shl-text)}

/* menu */
.site-nav{display:flex;align-items:center;gap:12px;margin:0}
body.shl-nav-right .site-nav{margin-left:auto}
body.shl-nav-left .site-nav{margin-right:auto}
.shl-menu{display:flex;align-items:center;gap:var(--shl-mgap);list-style:none;margin:0;padding:0}
.shl-menu li{position:relative;margin:0}
.shl-menu>li>a{position:relative;white-space:nowrap;display:block;padding:8px var(--shl-mpx);border-radius:99px;font-family:Inter,var(--shl-font);font-size:var(--shl-mfs);font-weight:var(--shl-mfw);color:var(--shl-menu-c);transition:background .2s,color .2s}
.shl-menu>li>a:hover,.shl-menu>li.current-menu-item>a,.shl-menu>li.current-menu-ancestor>a,.shl-menu>li.shl-spy-active>a{background:var(--shl-tint);color:var(--shl-b)}
.shl-menu.has-spy>li.current-menu-item:not(.shl-spy-active):not(.shl-btn):not(.shl-btn-outline)>a{background:transparent;color:var(--shl-menu-c)}
.shl-menu.has-spy>li.current-menu-item:not(.shl-spy-active):not(.shl-btn):not(.shl-btn-outline)>a:hover{background:var(--shl-tint);color:var(--shl-b)}
/* active indicator: small bar under the active item */
body.shl-ind-dot .shl-menu>li:not(.shl-btn):not(.shl-btn-outline).shl-spy-active>a:before,
body.shl-ind-dot .shl-menu:not(.has-spy)>li:not(.shl-btn):not(.shl-btn-outline).current-menu-item>a:before{content:"";position:absolute;left:50%;bottom:3px;width:16px;height:3px;margin-left:-8px;border-radius:9px;background:var(--shl-b)}
/* dropdown (sub menus) */
.shl-menu .sub-menu{position:absolute;left:0;top:100%;min-width:210px;list-style:none;margin:6px 0 0;padding:8px;background:var(--shl-card);border:1px solid var(--shl-line);border-radius:18px;box-shadow:0 18px 40px rgba(15,23,42,.14);opacity:0;visibility:hidden;transform:translateY(6px);transition:.2s;z-index:5}
.shl-menu .sub-menu:before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.shl-menu li:hover>.sub-menu,.shl-menu li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.shl-menu .sub-menu a{display:block;padding:9px 14px;border-radius:12px;color:var(--shl-text);font:600 14px Inter,var(--shl-font)}
.shl-menu .sub-menu a:hover{background:var(--shl-tint);color:var(--shl-b)}
.shl-menu>li.menu-item-has-children>a:after{content:"▾";margin-left:6px;font-size:11px}

/* Buttons: header buttons (Customizer) + menu items with CSS class shl-btn / shl-btn-outline */
.shl-hbtn,.shl-menu>li.shl-btn>a,.shl-menu>li.shl-btn-outline>a{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:14px;font:700 14px Inter,var(--shl-font);min-height:42px;border:1.5px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .2s}
.shl-hbtn.solid,.shl-menu>li.shl-btn>a{background:linear-gradient(135deg,var(--shl-b),var(--shl-b2));color:#fff!important;box-shadow:0 8px 20px color-mix(in srgb,var(--shl-b) 28%,transparent)}
html[data-shl-theme="dark"] .shl-hbtn.solid,html[data-shl-theme="dark"] .shl-menu>li.shl-btn>a{color:#07130C!important}
.shl-hbtn.outline,.shl-menu>li.shl-btn-outline>a{background:var(--shl-card);color:var(--shl-text)!important;border-color:var(--shl-line)}
.shl-hbtn.ghost{background:transparent;color:var(--shl-b2)!important}
.shl-hbtn:hover,.shl-menu>li.shl-btn>a:hover,.shl-menu>li.shl-btn-outline>a:hover{transform:translateY(-2px)}
.shl-menu>li.shl-btn>a:hover{background:linear-gradient(135deg,var(--shl-b),var(--shl-b2))}
.hd-btns{display:flex;gap:10px;align-items:center}
.hd-tools .shl-hbtn{padding:9px 20px;min-height:0;box-shadow:none}
.nav-btns{display:none}

/* tools: toggle + burger */
.hd-tools{display:flex;align-items:center;gap:10px;flex:none}
.shl-theme-toggle,.burger{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--shl-line);background:var(--shl-card);color:var(--shl-text);font-size:16px;line-height:1;cursor:pointer;padding:0;transition:transform .2s}
.shl-theme-toggle:hover{transform:scale(1.08)}
.shl-theme-toggle .sun{display:none}
html[data-shl-theme="dark"] .shl-theme-toggle .sun{display:inline}
html[data-shl-theme="dark"] .shl-theme-toggle .moon{display:none}
.shl-theme-toggle.shl-float{position:fixed;right:18px;bottom:18px;z-index:9998;width:48px;height:48px;box-shadow:0 10px 26px rgba(15,23,42,.22)}
.burger{display:none;position:relative;z-index:3}
.burger span,.burger span:before,.burger span:after{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:.25s}
.burger span:before,.burger span:after{content:"";position:absolute;left:0}
.burger span:before{top:-6px}.burger span:after{top:6px}
.nav-open .burger span{background:transparent}.nav-open .burger span:before{top:0;transform:rotate(45deg)}.nav-open .burger span:after{top:0;transform:rotate(-45deg)}

/* ---------- Mobile / collapsed menu: slide-in drawer (html.shl-m is set by JS when below the breakpoint OR when the menu does not fit) ---------- */
html.shl-m .burger{display:inline-flex}
html.shl-m .hd-tools .hd-btns{display:none}
html.shl-m .site-nav{
  position:fixed;top:0;bottom:0;right:0;left:auto;width:var(--shl-dw);max-width:var(--shl-dmax);margin:0;
  flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px;padding:90px 18px 20px;
  background:var(--shl-bg);border-left:1px solid var(--shl-line);box-shadow:-10px 0 40px rgba(0,0,0,.2);
  overflow:auto;transform:translateX(105%);visibility:hidden;transition:transform .35s,visibility 0s .35s
}
html.shl-m body.admin-bar .site-nav{padding-top:calc(90px + var(--shl-ab))}
html.shl-m body.shl-drawer-left .site-nav{right:auto;left:0;transform:translateX(-105%);border-left:0;border-right:1px solid var(--shl-line);box-shadow:10px 0 40px rgba(0,0,0,.2)}
html.shl-m body.nav-open .site-nav{transform:none;visibility:visible;transition:transform .35s,visibility 0s}
html.shl-m .shl-menu{flex-direction:column;align-items:stretch;gap:2px}
html.shl-m .shl-menu>li>a{padding:12px 16px;font-size:16px}
html.shl-m .shl-menu>li>a:before{display:none!important}
html.shl-m .shl-menu .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;margin:0;padding:0 0 0 14px;background:transparent}
html.shl-m .shl-menu .sub-menu:before{display:none}
html.shl-m .nav-btns{display:flex;flex-direction:column;gap:10px;margin-top:10px}
html.shl-m .nav-btns .shl-hbtn{width:100%}
html.shl-m .shl-menu>li.shl-btn>a,html.shl-m .shl-menu>li.shl-btn-outline>a{display:flex;width:100%}
html.shl-m .shl-menu>li.shl-toggle-li{padding:6px 0}
/* dim the page behind the open drawer; tapping it closes the drawer */
html.shl-m body:after{content:"";position:fixed;inset:0;background:rgba(15,23,42,.45);opacity:0;pointer-events:none;transition:opacity .3s;z-index:998}
html.shl-m body.nav-open:after{opacity:1;pointer-events:auto}
html.shl-m body.nav-open{overflow:hidden}
html.shl-m .site-header .hd-in{padding:0 16px}
html.shl-m .brand img{max-width:200px}
html.shl-m body.shl-hs-float.shl-sticky.shl-scrolled .site-header .hd-in{margin-left:10px;margin-right:10px;padding:0 12px 0 14px}
@media(max-width:767px){.brand img{max-height:52px}.shl-container{padding:0 16px}}

/* ---------- Content ---------- */
.site-main{min-height:50vh}
.shl-page{padding:48px 0 72px}
.shl-fw{width:100%}
.entry-title{font-size:clamp(26px,4vw,40px)}
.entry-content>*{max-width:100%}
.entry-content p,.entry-content ul,.entry-content ol{margin:0 0 1.1em}
.entry-meta{color:var(--shl-muted);font-size:14px;margin-bottom:14px}
.post-card{background:var(--shl-card);border:1px solid var(--shl-line);border-radius:22px;padding:26px;margin-bottom:22px;transition:transform .25s,box-shadow .25s}
.post-card:hover{transform:translateY(-4px);box-shadow:0 12px 34px rgba(15,23,42,.08)}
.post-card h2{font-size:22px}.post-card img{border-radius:16px;margin-bottom:14px}
.posts-navigation,.pagination{margin:30px 0}
.page-numbers{display:inline-block;padding:8px 14px;border:1px solid var(--shl-line);border-radius:99px;margin-right:6px;color:var(--shl-text)}
.page-numbers.current{background:var(--shl-b);color:#fff;border-color:var(--shl-b)}
input[type=text],input[type=search],input[type=email],input[type=url],input[type=password],textarea,select{width:100%;max-width:100%;padding:12px 16px;border-radius:14px;border:1.5px solid var(--shl-line);background:var(--shl-card);color:var(--shl-text);font:inherit}
button,input[type=submit]{font:inherit}
.search-form{display:flex;gap:10px}.search-form .search-submit,input[type=submit],.wp-block-button__link{background:linear-gradient(135deg,var(--shl-b),var(--shl-b2));color:#fff;border:0;border-radius:14px;padding:11px 22px;font-weight:700;cursor:pointer}
.error-404{text-align:center;padding:90px 0}.error-404 .big{font:800 92px Inter,sans-serif;color:var(--shl-b);line-height:1}
.comments-area{margin-top:46px}.comment-list{list-style:none;padding:0}.comment-body{background:var(--shl-card);border:1px solid var(--shl-line);border-radius:18px;padding:18px;margin-bottom:14px}

/* ---------- Footer ---------- */
.site-footer{background:var(--shl-soft);border-top:1px solid var(--shl-line);color:var(--shl-muted);font-size:14px}
.footer-widgets{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:46px 24px 10px}
.footer-widgets h3,.footer-widgets .widget-title{font-size:16px;color:var(--shl-text)}
.footer-widgets ul{list-style:none;padding:0;margin:0}.footer-widgets li{padding:3px 0}
.footer-widgets a{color:var(--shl-muted)}.footer-widgets a:hover{color:var(--shl-b)}
.footer-bottom{text-align:center;padding:26px 24px 24px}
.footer-menu{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;list-style:none;margin:0 0 12px;padding:0}
.footer-menu a{color:var(--shl-muted);font-weight:600}.footer-menu a:hover{color:var(--shl-b)}
@media(max-width:767px){.footer-widgets{grid-template-columns:1fr;padding-top:34px}}

/* ---------- Elementor ---------- */
.elementor-page .site-main,.elementor-template-full-width .site-main{min-height:0}
html[data-shl-theme="dark"] .elementor-accordion .elementor-accordion-item{border-color:var(--shl-line)}
html[data-shl-theme="dark"] .elementor-accordion .elementor-tab-title,html[data-shl-theme="dark"] .elementor-accordion .elementor-tab-title a{background:var(--shl-card);color:var(--shl-text)}
html[data-shl-theme="dark"] .elementor-accordion .elementor-tab-content{background:var(--shl-card);color:var(--shl-muted);border-color:var(--shl-line)}
@media(prefers-reduced-motion:reduce){html:not(.shl-always-motion) *{transition:none!important;animation:none!important}html:not(.shl-always-motion){scroll-behavior:auto}}

/* ===== v1.1: transparent header (rdict.lk look), box style (chathuradev look), SVG icons ===== */
:root{--shl-r:12px;--shl-rs:8px}
/* clear header: fully transparent on top of the hero, turns into a (mostly opaque) frosted bar after scrolling */
body.shl-hs-clear .site-header .hd-in{max-width:none;padding:0 max(24px,calc((100% - var(--shl-hmax))/2))}
body.shl-hs-clear .hd-in:before{opacity:1;border-radius:0;border-width:0 0 1px;border-color:transparent;box-shadow:none;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background .3s,border-color .3s,box-shadow .3s,-webkit-backdrop-filter .3s,backdrop-filter .3s}
body.shl-hs-clear.shl-scrolled .hd-in:before{background:color-mix(in srgb,var(--shl-bg) var(--shl-popa),transparent);-webkit-backdrop-filter:blur(var(--shl-blurpx));backdrop-filter:blur(var(--shl-blurpx));border-color:var(--shl-line);box-shadow:0 8px 26px rgba(15,23,42,.10)}
html[data-shl-theme="dark"] body.shl-hs-clear.shl-scrolled .hd-in:before{box-shadow:0 8px 26px rgba(0,0,0,.45)}
body.shl-hs-clear.shl-scrolled .site-header .hd-in{height:calc(var(--shl-navh) - 10px)}
/* header sits over the page: keep content clear of it */
body.shl-overlay .shl-page{padding-top:calc(var(--shl-navh) + 48px)}
body.shl-overlay .error-404{padding-top:calc(var(--shl-navh) + 60px)}
body.shl-overlay .shl-hero-bg{padding-top:calc(var(--shl-navh) + 28px)!important}
/* mobile drawer must stay solid (not transparent) */
html.shl-m body.shl-hs-clear .site-nav{background:var(--shl-bg)}

/* SVG theme toggle + burger + menu chevron (no emoji / glyphs) */
.shl-theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.shl-theme-toggle .sun,.shl-theme-toggle .moon{display:none}
.shl-theme-toggle .moon{display:block}
html[data-shl-theme="dark"] .shl-theme-toggle .sun{display:block}
html[data-shl-theme="dark"] .shl-theme-toggle .moon{display:none}
.shl-menu>li.menu-item-has-children>a:after{content:"";display:inline-block;width:6px;height:6px;margin:0 0 3px 8px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);font-size:0}

/* box style */
.shl-hbtn,.shl-menu>li.shl-btn>a,.shl-menu>li.shl-btn-outline>a,.search-form .search-submit,input[type=submit],.wp-block-button__link{border-radius:var(--shl-rs)}
.shl-menu>li>a{border-radius:var(--shl-rs)}
.shl-menu .sub-menu{border-radius:var(--shl-r)}.shl-menu .sub-menu a{border-radius:var(--shl-rs)}
.shl-theme-toggle,.burger{border-radius:var(--shl-rs)}
.post-card,.comment-body{border-radius:var(--shl-r);background:var(--shl-card);box-shadow:none}
.post-card img{border-radius:var(--shl-rs)}
.page-numbers{border-radius:var(--shl-rs)}
input[type=text],input[type=search],input[type=email],input[type=url],input[type=password],textarea,select{border-radius:var(--shl-rs)}
body.shl-hs-float .hd-in:before{border-radius:calc(var(--shl-pr) * .5)}