/*
 * Tinologi 2.2 — Bright editorial UI
 * One visual layer loaded after the legacy stylesheet.
 * Direction: white, fresh, airy, technology-blue, subtle gradients only.
 */

:root{
  --tino-primary:var(--blue);
  --tino-secondary:var(--blue2);
  --tino-accent:var(--accent);
  --tino-ink:#1e2d3d;
  --tino-heading:#172636;
  --tino-muted:#65788b;
  --tino-line:#d9e7f3;
  --tino-line-strong:#c8dced;
  --tino-surface:#f8fbff;
  --tino-surface-blue:#eef7ff;
  --tino-surface-blue-2:#f4f9ff;
  --tino-shadow:0 10px 30px rgba(37,96,153,.08);
  --tino-shadow-hover:0 16px 36px rgba(37,96,153,.13);
  --tino-radius:15px;
}

html{background:#fff;scroll-behavior:smooth}
html,body,button,input,textarea,select,optgroup,code,pre,kbd,samp,.wp-caption,.gallery-caption{
  font-family:'Questrial',Arial,sans-serif!important;
}
body{
  color:var(--tino-ink)!important;
  background:#fff!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,strong,b{font-family:'Questrial',Arial,sans-serif!important}
a{transition:color .17s ease,background-color .17s ease,border-color .17s ease,box-shadow .17s ease,transform .17s ease}
.container{width:min(var(--container),calc(100% - 40px))}

/* ===== Header: bright, cohesive, banner-safe ===== */
.utility{
  background:linear-gradient(90deg,#f8fbff 0%,#eef7ff 100%)!important;
  color:#51708d!important;
  border-bottom:1px solid #e3eef8!important;
}
.utility .container{height:34px!important}
.utility strong{color:#1d4f7e!important}
.utility-right a{color:#51708d!important}
.utility-right a:hover{color:var(--tino-primary)!important}

.sticky-shell{
  background:rgba(255,255,255,.97)!important;
  border-bottom:1px solid #dfeaf4!important;
  box-shadow:0 8px 26px rgba(40,92,144,.08)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}
.header{background:transparent!important;border:0!important}
.header-main{
  min-height:92px!important;
  grid-template-columns:190px minmax(420px,1fr) 310px!important;
  gap:18px!important;
  align-items:center!important;
}
.header .custom-logo{max-height:58px!important;max-width:185px!important;width:auto!important;height:auto!important;object-fit:contain!important}
.header .brand-mark{
  border:1px solid #c9e0f5!important;
  background:linear-gradient(145deg,#fff,#eef7ff)!important;
  color:var(--tino-primary)!important;
  box-shadow:0 5px 14px rgba(45,110,170,.10)!important;
}
.header .brand-name b{color:#1b4f7d!important}
.header .brand-name small{color:#6a8298!important}

.header-ad-slot{
  grid-column:2!important;
  justify-self:stretch!important;
  width:100%!important;
  height:68px!important;
  padding:4px!important;
  border:1px solid #d5e6f5!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:0 4px 16px rgba(44,104,163,.06)!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.header-ad-slot:hover{border-color:#a9cfee!important;box-shadow:0 8px 22px rgba(44,104,163,.11)!important;transform:translateY(-1px)}
.header-ad-slot.has-image img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}
.header-ad-slot.is-placeholder{
  flex-direction:column!important;
  gap:2px!important;
  background:linear-gradient(120deg,#f7fbff 0%,#edf7ff 52%,#f9fcff 100%)!important;
  color:#37658f!important;
}
.header-ad-kicker{color:var(--tino-primary)!important;font-size:10px!important;letter-spacing:.12em!important}
.header-ad-slot strong{color:#24537f!important;font-size:15px!important}
.header-ad-slot small{color:#73889b!important;font-size:11px!important}

.header-service-cta{
  grid-column:3!important;
  justify-self:end!important;
  width:100%!important;
  min-height:64px!important;
  padding:8px 12px!important;
  border:1px solid #0d72df!important;
  border-radius:13px!important;
  background:linear-gradient(135deg,#0e73e6 0%,#2c91ef 58%,#53b4ff 100%)!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(18,119,232,.20)!important;
  gap:10px!important;
}
.header-service-cta:hover{transform:translateY(-2px)!important;box-shadow:0 15px 30px rgba(18,119,232,.28)!important;filter:saturate(1.03)!important}
.header-service-icon{
  flex:0 0 38px!important;width:38px!important;height:38px!important;
  background:rgba(255,255,255,.18)!important;
  border:1px solid rgba(255,255,255,.32)!important;
  border-radius:10px!important;
}
.header-service-copy{min-width:0!important}
.header-service-copy small{color:#eaf6ff!important;font-size:9.5px!important;letter-spacing:.07em!important;white-space:nowrap!important}
.header-service-copy strong{display:block!important;color:#fff!important;font-size:15px!important;line-height:1.18!important;font-weight:600!important;white-space:normal!important}
.header-service-cta>.icon:last-child{width:17px!important;height:17px!important;flex:0 0 auto!important}

.nav{
  position:relative!important;
  top:auto!important;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%)!important;
  border-top:1px solid #edf3f8!important;
  border-bottom:1px solid #dfeaf4!important;
  box-shadow:none!important;
}
.nav-inner{height:54px!important;gap:3px!important}
.nav .home{color:#5c7892!important}
.nav a:not(.header-service-cta){
  color:#314b63!important;
  font-size:13.5px!important;
  font-weight:600!important;
  padding:9px 10px!important;
  border-radius:8px!important;
}
.nav a:not(.header-service-cta):hover,.nav a.active,.primary-menu .current-menu-item>a,.primary-menu .current-menu-parent>a{
  color:var(--tino-primary)!important;
  background:#eaf5ff!important;
}
.nav-search-wrap{flex:0 0 268px!important;max-width:268px!important;margin-left:14px!important}
.nav-search-wrap .site-search{
  height:38px!important;
  border:1px solid #c9def0!important;
  border-radius:9px!important;
  background:#fff!important;
  box-shadow:0 3px 10px rgba(38,98,156,.05)!important;
}
.nav-search-wrap .site-search:focus-within{border-color:#84bceb!important;box-shadow:0 0 0 3px rgba(18,119,232,.09)!important}
.nav-search-wrap .site-search>.icon{color:#6e88a0!important}
.nav-search-wrap .site-search input{font-size:13.5px!important;color:var(--tino-ink)!important}
.nav-search-wrap .site-search button{
  background:linear-gradient(135deg,var(--tino-primary),var(--tino-secondary))!important;
  border-radius:0 8px 8px 0!important;
  box-shadow:none!important;
}
.nav-search-wrap .site-search button:hover{filter:brightness(.96)!important}

.topic-strip{background:#f5f9fd!important;border-bottom:1px solid #e2edf6!important}
.topic-strip .container{height:42px!important;gap:8px!important}
.topic-strip b{color:#6b8093!important;font-size:12px!important}
.topic-strip a{
  background:#fff!important;
  border:1px solid #d7e5f1!important;
  color:#37658c!important;
  padding:5px 10px!important;
  font-size:12.5px!important;
  border-radius:999px!important;
}
.topic-strip a:hover{border-color:#a9cfee!important;color:var(--tino-primary)!important;background:#eef7ff!important;transform:translateY(-1px)!important}

.sticky-shell.is-scrolled{background:rgba(255,255,255,.98)!important;box-shadow:0 10px 28px rgba(40,92,144,.12)!important}
.sticky-shell.is-scrolled .header-main{
  min-height:78px!important;
  grid-template-columns:170px minmax(360px,1fr) 290px!important;
  gap:14px!important;
}
.sticky-shell.is-scrolled .header-main .custom-logo{max-height:48px!important;max-width:165px!important}
.sticky-shell.is-scrolled .header-ad-slot{display:flex!important;height:54px!important;border-radius:10px!important}
.sticky-shell.is-scrolled .header-service-cta{min-height:54px!important;padding:7px 10px!important}
.sticky-shell.is-scrolled .header-service-icon{width:34px!important;height:34px!important;flex-basis:34px!important}
.sticky-shell.is-scrolled .header-service-copy small{font-size:8.8px!important}
.sticky-shell.is-scrolled .header-service-copy strong{font-size:13.5px!important}
.sticky-shell.is-scrolled .nav-inner{height:48px!important}

/* ===== Bright page canvas ===== */
main#primary{background:#fff!important}
.home .hero,.home .section,.home .newsletter{background:transparent!important}
.home .section.soft,.tinologi-static-content .section.soft{
  background:linear-gradient(180deg,#f8fbff 0%,#f3f8fd 100%)!important;
  border-top:1px solid #edf3f8!important;
  border-bottom:1px solid #edf3f8!important;
}

/* ===== Homepage hero: photo-led and compact ===== */
.hero{padding:20px 0 18px!important}
.hero-grid{grid-template-columns:minmax(0,1.45fr) minmax(290px,.75fr)!important;gap:16px!important}
.lead{
  min-height:248px!important;
  border-radius:16px!important;
  background:#edf6ff!important;
  border:1px solid #d4e5f3!important;
  box-shadow:var(--tino-shadow)!important;
}
.lead::before,.lead::after{display:none!important}
.lead-content{padding:22px 24px!important;max-width:640px!important}
.lead .label{color:#116cc9!important;background:#fff!important;border:1px solid #d9e8f5!important;box-shadow:0 3px 10px rgba(31,89,143,.08)!important}
.lead h1{font-size:27px!important;line-height:1.22!important;margin:0 0 8px!important;letter-spacing:-.012em!important;font-weight:600!important}
.lead p{font-size:13.5px!important;line-height:1.58!important;color:#edf7ff!important}
.lead.has-featured-image .lead-bg{filter:saturate(.97) contrast(1.01)!important}
.lead.has-featured-image .lead-bg::after{
  background:linear-gradient(90deg,rgba(14,48,81,.78) 0%,rgba(15,62,106,.56) 42%,rgba(15,78,132,.20) 72%,rgba(15,78,132,.02) 100%),linear-gradient(to top,rgba(13,51,87,.20),transparent 55%)!important;
}
.lead.has-featured-image .lead-content{text-shadow:0 2px 11px rgba(0,0,0,.16)!important}
.hero-side{gap:12px!important}
.side-feature{
  min-height:118px!important;
  padding:15px 16px!important;
  border:1px solid #dbe8f3!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 5px 16px rgba(39,94,146,.05)!important;
}
.side-feature:hover{transform:translateY(-2px)!important;border-color:#b7d5ee!important;box-shadow:var(--tino-shadow-hover)!important}
.side-feature .topic-icon{width:36px!important;height:36px!important;border-radius:10px!important;background:linear-gradient(145deg,#eef7ff,#e0f1ff)!important;color:var(--tino-primary)!important;box-shadow:none!important}
.side-feature h2{font-size:15.5px!important;line-height:1.36!important;margin:7px 0 3px!important;color:var(--tino-heading)!important}
.side-feature p{display:none!important}
.side-feature .meta{font-size:12px!important;margin-top:6px!important}

/* ===== Sections and cards ===== */
.section{padding:48px 0!important}
.section-head{margin-bottom:22px!important}
.section-head h2{font-size:31px!important;color:var(--tino-heading)!important;font-weight:600!important}
.section-head p{color:var(--tino-muted)!important;font-size:15.5px!important}
.eyebrow{color:var(--tino-primary)!important;padding-left:12px!important}
.eyebrow::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--tino-primary),var(--tino-secondary));box-shadow:0 0 0 4px rgba(18,119,232,.09)}

.hub-grid{gap:14px!important}
.hub-card,.sidebox,.panel,.post-card,.feature-large,.category-mini,.contact-card,.ad-format-card,.ad-package,.tino-support-card,.tino-info-card{
  border:1px solid var(--tino-line)!important;
  background:#fff!important;
  box-shadow:none!important;
}
.hub-card{border-radius:14px!important;min-height:148px!important;position:relative!important;overflow:hidden!important}
.hub-card::before{content:""!important;position:absolute!important;left:0!important;top:0!important;right:0!important;height:3px!important;background:linear-gradient(90deg,var(--tino-primary),var(--tino-secondary),var(--tino-accent))!important}
.hub-card:hover,.sidebox:hover,.panel:hover,.post-card:hover,.feature-large:hover,.category-mini:hover,.contact-card:hover,.tino-info-card:hover,.tino-support-card:hover{border-color:#b7d5ee!important;box-shadow:var(--tino-shadow)!important;transform:translateY(-2px)!important}
.hub-icon,.tino-about-topic-icon,.format-icon,.tino-contact-icon,.tino-support-card>span{
  background:linear-gradient(145deg,#eef7ff,#e1f1ff)!important;
  color:var(--tino-primary)!important;
  border:1px solid #d4e9fb!important;
}
.badge,.package-label{background:#eaf5ff!important;color:#0d69c7!important;border:1px solid #d2e7f8!important}
.feature-copy h3,.post-card h3,.sidebox-title,.panel h3{color:var(--tino-heading)!important}
.feature-copy p,.post-row p{color:var(--tino-muted)!important}
.category-chips a,.subnav a{background:#f8fbff!important;border-color:#dce9f3!important;color:#466983!important}
.category-chips a:hover,.subnav a:hover{background:#eaf5ff!important;border-color:#b8d7f0!important;color:var(--tino-primary)!important}

.intro-band,.tinologi-static-content .intro-band,.tinologi-static-content .tino-static-cta{
  background:linear-gradient(135deg,#fff 0%,#f7fbff 72%,#eef7ff 100%)!important;
  color:var(--tino-ink)!important;
  border:1px solid #d7e7f4!important;
  border-left:4px solid var(--tino-primary)!important;
  box-shadow:var(--tino-shadow)!important;
  border-radius:15px!important;
}
.intro-band h2,.tinologi-static-content .intro-band h2,.tinologi-static-content .tino-static-cta h2{color:var(--tino-heading)!important}
.intro-band p,.tinologi-static-content .intro-band p,.tinologi-static-content .tino-static-cta p{color:var(--tino-muted)!important}

/* Newsletter stays bright, not dark. */
.newsletter{padding-bottom:48px!important}
.newsletter-card{
  display:grid!important;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr)!important;
  gap:28px!important;
  align-items:center!important;
  padding:25px 28px!important;
  border:1px solid #d3e7f8!important;
  border-left:4px solid var(--tino-primary)!important;
  border-radius:15px!important;
  background:linear-gradient(120deg,#ffffff 0%,#f4f9ff 55%,#eaf6ff 100%)!important;
  box-shadow:var(--tino-shadow)!important;
}
.newsletter-card::before{display:none!important}
.newsletter-card .eyebrow{color:var(--tino-primary)!important}
.newsletter-copy h3{color:var(--tino-heading)!important;margin:4px 0 7px!important}
.newsletter-copy p{color:var(--tino-muted)!important;margin:0!important}
.newsletter-form{background:#fff!important;border:1px solid #cfe2f3!important;border-radius:10px!important;padding:4px!important;box-shadow:0 4px 12px rgba(39,94,146,.05)!important}
.newsletter-form input{background:#fff!important;border:0!important;color:var(--tino-ink)!important}
.newsletter-form button{background:linear-gradient(135deg,var(--tino-primary),var(--tino-secondary))!important;box-shadow:none!important;border-radius:8px!important}
.newsletter-form button:hover{filter:brightness(.96)!important}
.newsletter-honeypot{display:none!important}

/* ===== Page/article UI ===== */
.page-hero{
  padding:20px 0 18px!important;
  background:linear-gradient(180deg,#f7fbff 0%,#eef7ff 100%)!important;
  border-bottom:1px solid #dfebf5!important;
}
.page-hero::after{display:none!important}
.page-hero h1{font-size:clamp(29px,3vw,37px)!important;color:var(--tino-heading)!important;font-weight:600!important}
.page-hero p,.archive-desc{color:var(--tino-muted)!important;font-size:15.5px!important}
.article-head{padding:8px 0 6px!important;margin-bottom:4px!important}
.article-head h1{font-size:clamp(29px,2.75vw,36px)!important;color:var(--tino-heading)!important;letter-spacing:-.012em!important;font-weight:600!important}
.article-lead{font-size:16px!important;line-height:1.65!important;color:#60758a!important;max-width:100%!important}
.article-hero-image{margin:12px 0 22px!important;aspect-ratio:16/6.8!important;max-height:380px!important;border-radius:14px!important;border:1px solid #d8e6f1!important;background:#f6f9fc!important;box-shadow:0 5px 18px rgba(41,91,139,.05)!important}
.article-shell{gap:30px!important}
.article-body{color:#26384a!important}
.article-body a:not(.tinologi-shortcode-button):not(.tino-download-button){color:#1175d6!important;text-decoration-color:rgba(17,117,214,.36)!important}
.article-body a:not(.tinologi-shortcode-button):not(.tino-download-button):hover{color:#075aaa!important;background:#eef7ff!important;text-decoration-color:#075aaa!important}
.article-body h2,.article-body h3{color:var(--tino-heading)!important}
.author-box{background:#f8fbff!important;border-color:#dbe8f3!important}

/* Tables */
.article-body table,.tinologi-static-content table,.tino-table{border:1px solid #d4e3ef!important;border-radius:12px!important;overflow:hidden!important;background:#fff!important}
.article-body table th,.tinologi-static-content table th,.tino-table th{
  background:linear-gradient(135deg,#e7f3ff,#d9edff)!important;
  color:#21527d!important;
  border-color:#c7dff2!important;
  font-weight:600!important;
}
.article-body table td,.tinologi-static-content table td,.tino-table td{border-color:#e2ebf3!important}
.article-body table tr:nth-child(even) td,.tinologi-static-content table tr:nth-child(even) td,.tino-table tr:nth-child(even) td{background:#f9fcff!important}
.article-body table tr:hover td,.tinologi-static-content table tr:hover td,.tino-table tr:hover td{background:#eef7ff!important}

.note,.tino-callout,.legal-summary,.pricing-note{background:#f4f9ff!important;border-color:#cfe2f3!important}
.note{border-left-color:var(--tino-primary)!important}

/* Buttons */
.btn,.tinologi-shortcode-button,.tino-download-button{font-family:'Questrial',Arial,sans-serif!important;border-radius:10px!important}
.btn.primary,.tinologi-shortcode-button,.tino-download-button--primary{
  background:linear-gradient(135deg,var(--tino-primary),var(--tino-secondary))!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(18,119,232,.16)!important;
}
.btn.primary:hover,.tinologi-shortcode-button:hover,.tino-download-button--primary:hover{filter:brightness(.96)!important;box-shadow:0 12px 24px rgba(18,119,232,.22)!important}
.btn.ghost{background:#fff!important;border-color:#cbdfee!important;color:#315d82!important}
.btn.ghost:hover{background:#eef7ff!important;border-color:#a8cfea!important;color:var(--tino-primary)!important}

/* Sidebar */
.sidebox{border-radius:14px!important}
.rank-num{color:#a8bfd3!important}
.rank small,.latest-list small{color:#8093a4!important}
.side-links a{color:#526c82!important}
.side-links a:hover{color:var(--tino-primary)!important;background:#f5faff!important}

/* Footer: bright blue-white instead of dark block. */
.footer{
  background:linear-gradient(180deg,#f3f9ff 0%,#e7f4ff 100%)!important;
  color:#516d85!important;
  border-top:3px solid transparent!important;
  border-image:linear-gradient(90deg,var(--tino-primary),var(--tino-secondary),var(--tino-accent)) 1!important;
}
.footer .brand-name b{color:#1d4f7e!important}
.footer .brand-name small{color:#7890a5!important}
.footer-brand p{color:#627a90!important}
.footer-col h4{color:#254c70!important}
.footer-col a{color:#567189!important}
.footer-col a:hover{color:var(--tino-primary)!important;transform:translateX(2px)!important}
.footer-bottom{border-top-color:#cfdfec!important;color:#7a91a5!important}

/* ===== Responsive ===== */
@media(max-width:1160px){
  .header-main{grid-template-columns:175px minmax(320px,1fr) 285px!important;gap:12px!important}
  .header-ad-slot{height:62px!important}
  .header-service-copy strong{font-size:14px!important}
  .nav a:not(.header-service-cta){padding:8px 7px!important;font-size:12.6px!important}
  .nav-search-wrap{flex-basis:230px!important;max-width:230px!important}
  .hero-grid{grid-template-columns:minmax(0,1.34fr) minmax(270px,.72fr)!important}
}
@media(max-width:960px){
  .header-main{grid-template-columns:175px minmax(0,1fr) 260px!important}
  .header-ad-slot{height:56px!important}
  .nav-inner{overflow-x:auto!important;scrollbar-width:none!important}
  .nav-inner::-webkit-scrollbar{display:none!important}
  .primary-menu{flex:0 0 auto!important}
  .nav-search-wrap{position:sticky!important;right:0!important;background:#f8fbff!important;padding-left:10px!important;flex-basis:220px!important;max-width:220px!important}
  .newsletter-card{grid-template-columns:1fr!important}
}
@media(max-width:820px){
  .utility{display:none!important}
  .header-main{grid-template-columns:minmax(0,1fr) auto!important;min-height:68px!important}
  .header-main .header-ad-slot,.header-main .header-service-cta,.header-flex-spacer{display:none!important}
  .menu-toggle{display:inline-grid!important;place-items:center!important}
  .nav{display:none!important}
  .mobile-panel.open{display:block!important}
  .mobile-service{background:linear-gradient(135deg,var(--tino-primary),var(--tino-secondary))!important;color:#fff!important;border:0!important}
  .hero-grid{grid-template-columns:1fr!important}
  .hero-side{grid-template-columns:1fr 1fr!important;grid-template-rows:none!important}
  .lead{min-height:245px!important}
  .newsletter-card{padding:22px!important}
}
@media(max-width:560px){
  .container{width:min(100% - 24px,var(--container))!important}
  .topic-strip .container{height:39px!important}
  .hero{padding-top:14px!important}
  .lead{min-height:235px!important}
  .lead h1{font-size:23px!important}
  .lead-content{padding:18px 19px!important}
  .lead p{font-size:13px!important}
  .hero-side{grid-template-columns:1fr!important}
  .section{padding:40px 0!important}
  .section-head h2{font-size:28px!important}
  .newsletter-card{padding:20px!important;border-radius:13px!important}
  .newsletter-form{display:grid!important;gap:8px!important;background:transparent!important;padding:0!important;border:0!important;box-shadow:none!important}
  .newsletter-form input,.newsletter-form button{height:44px!important;border-radius:9px!important;border:1px solid #cfe2f3!important}
  .article-head h1{font-size:29px!important}
  .article-hero-image{aspect-ratio:4/3!important;max-height:340px!important}
}