/* Neutralise JNews/Elementor element-level rules (h1 colour/font, p, a, li...) inside the landing wrapper.
   Specificity (1,0,1) beats theme element selectors but stays below the scoped utility classes (1,1,0). */
#sj-kids :is(h1,h2,h3,h4,h5,h6,p,a,li,span,label,strong,em,b,div,small){font-family:inherit;color:inherit;letter-spacing:inherit;text-transform:none}
#sj-kids :is(h1,h2,h3,h4,h5,h6){line-height:inherit}
#sj-kids :is(ul,ol){list-style:none;margin:0;padding:0}
#sj-kids{position:relative;z-index:0}

/* ---- Header: hide the theme's own header on this page; the landing header (parts/header.php) replaces it ---- */
.jeg_header_wrapper,.jeg_header_sticky,.jeg_navbar_mobile_wrapper,.jeg_ad_top,.jnews_header_top_ads{display:none!important}
body.admin-bar #sj-header{top:32px}
@media (max-width:782px){body.admin-bar #sj-header{top:46px}}

/* ---- Header nav (live "Main Navigation" menu in the new design) ---- */
#sj-header .sj-nav{display:none}
#sj-header.sj-open .sj-nav{display:block;position:absolute;top:100%;left:0;right:0;background:#fff;box-shadow:0 12px 20px rgba(0,0,0,.14);max-height:calc(100vh - 80px);overflow-y:auto;padding:6px 16px 18px}
#sj-header .sj-menu,#sj-header .sj-sub{list-style:none;margin:0;padding:0}
#sj-header .sj-item{position:relative}
#sj-header .sj-item>a{display:block;padding:11px 4px;font-weight:700;font-size:15px;line-height:1.2;color:#042848;text-decoration:none}
#sj-header .sj-item>a:hover,#sj-header .sj-item.is-current>a{color:#E52429}
#sj-header .sj-sub-toggle{position:absolute;right:0;top:0;width:46px;height:42px;background:none;border:0;padding:0;cursor:pointer}
#sj-header .sj-sub-toggle::after{content:"";display:block;margin:0 auto;width:7px;height:7px;border-right:2px solid #042848;border-bottom:2px solid #042848;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
#sj-header .sj-expanded>.sj-sub-toggle::after{transform:rotate(225deg)}
#sj-header .sj-sub{display:none;padding-left:14px;border-left:2px solid #DBDBDB;margin-left:4px}
#sj-header .sj-expanded>.sj-sub{display:block}
#sj-header .sj-sub .sj-item>a{font-weight:600;font-size:14px;padding:8px 4px}
#sj-header .sj-burger-close{display:none}
#sj-header.sj-open .sj-burger-open{display:none}
#sj-header.sj-open .sj-burger-close{display:inline}
#sj-header #sj-burger{color:#042848}

@media (min-width:1024px){
  #sj-header .sj-nav{display:block;position:static;box-shadow:none;max-height:none;overflow:visible;padding:0;background:transparent}
  #sj-header .sj-menu{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 18px}
  #sj-header .sj-item>a{padding:10px 0;font-size:13px;white-space:nowrap}
  #sj-header .sj-item.has-sub>a::after{content:"";display:inline-block;margin-left:6px;width:5px;height:5px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
  #sj-header .sj-sub-toggle{display:none}
  #sj-header .sj-sub{display:none;position:absolute;top:100%;left:-16px;min-width:270px;background:#fff;border:0;margin:0;padding:10px 0;border-radius:14px;box-shadow:0 18px 40px rgba(4,40,72,.18);z-index:60}
  #sj-header .sj-item:hover>.sj-sub,#sj-header .sj-item:focus-within>.sj-sub{display:block}
  #sj-header .sj-sub .sj-item>a{padding:9px 20px;font-size:14px;white-space:normal}
  #sj-header .sj-sub .sj-item>a:hover{background:#F5F5F5}
  #sj-header .sj-sub .sj-sub{top:-10px;left:100%;margin-left:2px}
  #sj-header .sj-sub .sj-item.has-sub>a::after{position:absolute;right:16px;top:50%;margin-top:-4px;transform:rotate(-45deg)}
}
@media (min-width:1536px){
  #sj-header .sj-menu{gap:0 26px}
  #sj-header .sj-item>a{font-size:15px}
}

/* ---- Footer (Figma "section-footer") ---- */
#sj-kids .sj-footer{color:#fff}
#sj-kids .sj-footer-main{background:#034A76;padding:24px 16px 28px}
#sj-kids .sj-footer-inner{max-width:1464px;margin:0 auto}
#sj-kids .sj-footer-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}
#sj-kids .sj-footer-logo img{display:block;width:auto;height:57px}
#sj-kids .sj-footer-cta{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 24px;border-radius:8px;background:#E52429;color:#fff;font-weight:600;font-size:16px;line-height:1;white-space:nowrap;text-decoration:none;transition:background .2s}
#sj-kids .sj-footer-cta:hover{background:#c91d21}
#sj-kids .sj-acc{border-bottom:1px solid #275C88}
#sj-kids .sj-acc>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:16px;font-size:20px;font-weight:500;line-height:1.3;color:#fff}
#sj-kids .sj-acc>summary::-webkit-details-marker{display:none}
#sj-kids .sj-acc-icon{position:relative;flex:none;width:24px;height:24px}
#sj-kids .sj-acc-icon::before,#sj-kids .sj-acc-icon::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:#fff;opacity:.8;transition:transform .2s}
#sj-kids .sj-acc-icon::after{transform:rotate(90deg)}
#sj-kids .sj-acc[open] .sj-acc-icon::after{transform:rotate(0)}
#sj-kids .sj-acc ul{list-style:none;margin:0;padding:0 16px 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px 24px}
#sj-kids .sj-acc ul a{display:block;padding:6px 0;font-size:16px;color:#fff;opacity:.85;text-decoration:none}
#sj-kids .sj-acc ul a:hover{opacity:1;text-decoration:underline}
#sj-kids .sj-footer-social{display:flex;justify-content:center;gap:16px;padding:28px 0 8px}
#sj-kids .sj-footer-social a{display:inline-flex;width:24px;height:24px;color:#fff}
#sj-kids .sj-footer-social a:hover{opacity:.75}
#sj-kids .sj-footer-legal{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 96px;padding-top:24px}
#sj-kids .sj-footer-legal a{font-size:13px;color:#fff;opacity:.8;text-decoration:none}
#sj-kids .sj-footer-legal a:hover{opacity:1;text-decoration:underline}
#sj-kids .sj-footer-bar{background:#212529;display:flex;justify-content:center;align-items:center;padding:20px 16px}
#sj-kids .sj-footer-bar img{display:block;height:46px;width:auto}
@media (max-width:640px){
  #sj-kids .sj-footer-logo img{height:44px}
  #sj-kids .sj-footer-cta{height:48px;padding:0 16px;font-size:14px}
  #sj-kids .sj-acc>summary{font-size:18px}
  #sj-kids .sj-footer-legal{gap:8px 32px}
}

/* ---- FAQs rendered from the Yoast FAQ block, styled as the accordion ---- */
#sj-kids .sj-faq .schema-faq{margin:0}
#sj-kids .sj-faq .schema-faq-section{border:1px solid #DBDBDB;border-radius:12px;overflow:hidden;margin-bottom:16px;background:#fff}
#sj-kids .sj-faq .schema-faq-question{display:block;position:relative;cursor:pointer;padding:20px 56px 20px 24px;font-weight:600;font-size:18px;line-height:1.4;color:#042848}
#sj-kids .sj-faq .schema-faq-question::after{content:"+";position:absolute;right:24px;top:50%;transform:translateY(-50%);font-size:26px;font-weight:700;line-height:1;color:#E52429}
#sj-kids .sj-faq .is-open .schema-faq-question::after{content:"\2212"}
#sj-kids .sj-faq .schema-faq-answer{display:none;margin:0;padding:0 24px 20px;font-size:16px;line-height:1.6;color:#555}
#sj-kids .sj-faq .is-open .schema-faq-answer{display:block}
#sj-kids .sj-faq .schema-faq-answer a{color:#E52429;text-decoration:underline}

/* ---- Bootstrap compatibility ----
   JNews loads Bootstrap 3, whose .hidden{display:none!important} overrides Tailwind's responsive
   "hidden lg:flex" / "hidden 2xl:block" patterns (banner image, header button). Restore them here. */
@media (min-width:640px){#sj-kids .hidden.sm\:block{display:block!important}#sj-kids .hidden.sm\:flex{display:flex!important}#sj-kids .hidden.sm\:inline-block{display:inline-block!important}#sj-kids .hidden.sm\:inline-flex{display:inline-flex!important}#sj-kids .hidden.sm\:grid{display:grid!important}#sj-kids .hidden.sm\:inline{display:inline!important}}
@media (min-width:768px){#sj-kids .hidden.md\:block{display:block!important}#sj-kids .hidden.md\:flex{display:flex!important}#sj-kids .hidden.md\:inline-block{display:inline-block!important}#sj-kids .hidden.md\:inline-flex{display:inline-flex!important}#sj-kids .hidden.md\:grid{display:grid!important}#sj-kids .hidden.md\:inline{display:inline!important}}
@media (min-width:1024px){#sj-kids .hidden.lg\:block{display:block!important}#sj-kids .hidden.lg\:flex{display:flex!important}#sj-kids .hidden.lg\:inline-block{display:inline-block!important}#sj-kids .hidden.lg\:inline-flex{display:inline-flex!important}#sj-kids .hidden.lg\:grid{display:grid!important}#sj-kids .hidden.lg\:inline{display:inline!important}}
@media (min-width:1280px){#sj-kids .hidden.xl\:block{display:block!important}#sj-kids .hidden.xl\:flex{display:flex!important}#sj-kids .hidden.xl\:inline-block{display:inline-block!important}#sj-kids .hidden.xl\:inline-flex{display:inline-flex!important}#sj-kids .hidden.xl\:grid{display:grid!important}#sj-kids .hidden.xl\:inline{display:inline!important}}
@media (min-width:1536px){#sj-kids .hidden.\32xl\:block{display:block!important}#sj-kids .hidden.\32xl\:flex{display:flex!important}#sj-kids .hidden.\32xl\:inline-block{display:inline-block!important}#sj-kids .hidden.\32xl\:inline-flex{display:inline-flex!important}#sj-kids .hidden.\32xl\:grid{display:grid!important}#sj-kids .hidden.\32xl\:inline{display:inline!important}}

/* Bootstrap's clearfix adds .container::before/::after boxes (display:table). Inside flex/grid layouts those
   become extra invisible items - e.g. an empty first cell in the "Low cost of entry" grid. Not needed here. */
#sj-kids .container::before,#sj-kids .container::after,#sj-kids .row::before,#sj-kids .row::after{content:none!important;display:none!important}
