@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/*
================================================================================
  Spark Northumberland — custom.css
  Base structure carried from Spark Tees Valley.
  CN brand colours are defined as CSS custom properties at the top.
  Swap the values in the :root block to match the Connect Northumberland palette.
================================================================================
*/

/* -----------------------------------------------------------------------
   BRAND COLOURS — edit these to match CN brand guidelines
   ----------------------------------------------------------------------- */
:root {
    --cn-primary:    #101137;   /* Spark yellow — keep unless CN brand requires change */
    --cn-secondary:  #F7E017;   /* STV purple — replace with CN navy/blue */
    --cn-dark:       #020b08;   /* Near-black text */
    --cn-grey:       #ededed;   /* Page background */
    --cn-white:      #ffffff;
    --cn-link:       #fec526;   /* Default link colour */
    --cn-link-hover: #e3962c;   /* Link hover */
    --cn-tertiary: #0073BD;
}

/* -----------------------------------------------------------------------
   FONTS
   Signika is the current body font. Replace with CN brand font if required.
   ----------------------------------------------------------------------- */


body          { font-family: "Poppins", sans-serif; }
body * {font-family: "Poppins", sans-serif; }
h1            { font-family: "Poppins", sans-serif; color: var(--cn-dark) !important; font-size: 2.6rem !important; line-height: 3rem !important; }
h2            { font-family: "Poppins", sans-serif; color: var(--cn-dark) !important; }
h3            { font-family: "Poppins", sans-serif; color: var(--cn-dark) !important; font-weight: 400; font-size: 1.4rem; }
h4, h5, h6   { font-family: "Poppins", sans-serif; color: var(--cn-dark) !important; }
h5            { text-transform: uppercase; font-weight: bold; }
p             { font-family: "Poppins", sans-serif; color: var(--cn-dark); }
ul li         { font-family: "Poppins", sans-serif; color: var(--cn-dark); }
table tbody tr:first-child       {background-color:var(--cn-primary);}
table th      {text-align:left; color:var(--cn-white)}

/* -----------------------------------------------------------------------
   HEADER / BACKSTRETCH
   ----------------------------------------------------------------------- */
.backstretch p { font-family: "Poppins", sans-serif; text-transform: none; }
.backstretch {
    background-image: url('../img/static-layer.svg');
    background-position: center;
    background-size: cover;
    background-color: var(--cn-primary);
    padding-top: 2rem;
    min-height: 25vh;
}

.backstretch, .intro-guide { background-color: var(--cn-primary); }

.intro-guide {
    padding: 1rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.intro-guide h1 { font-size: 2.7rem !important; color:white !important; font-weight:700; }
.intro-guide p  { font-size: 1.2rem; color:white !important; }

.menu-holder         { background-color: var(--cn-white); }
.menu-holder a       { font-size: 0.8rem; }
.menu-holder .menu-text,
.menu-holder .menu-text a { padding: 0 !important; }

.header-pad  { margin-top: 0; margin-bottom: 0; }
.header p    { margin-bottom: 0; }

.inner { height: 100%; }
.inner a {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1.2rem;
    color: var(--cn-white) !important;
    text-transform: uppercase;
}
.inner.login   a { background-color: #CF142B; }
.inner.sign-up a { background-color: #0073BD ; }

.menu.dropdown {
    text-transform: uppercase;
    display: flex;
    align-items: center;
}
.top-bar-right        { display: flex; align-items: center; }
.top-bar-right .social-icon { display: inline-flex; }

.dropdown.menu > li.is-dropdown-submenu-parent > a::after {
    content: ">";
    position: initial;
    display: contents;
    width: auto;
    height: auto;
    border: 0;
}
.menu .active > a    { background-color: transparent; }
.submenu             { color: var(--cn-white) !important; background-color: var(--cn-primary) !important; }
.submenu a           { color: var(--cn-white) !important; }

.site-logo { margin: 0 !important; }

/* -----------------------------------------------------------------------
   BUTTONS
   ----------------------------------------------------------------------- */
.button {
    background-color: var(--cn-primary);
    margin-bottom: 2rem;
    margin-top: 1rem;
    border: solid var(--cn-secondary) 3px;
    color: var(--cn-white) !important;
    font-weight: bold;
    position: relative;
    border-radius: 0;
}
.button::after {
    content: " ";
    background-color: var(--cn-primary);
    width: 4px;
    height: 20px;
    position: absolute;
    bottom: 10px;
    right: -3px;
}
.button.secondary {
    background-color:#575873;
}
.button.secondary::after {
    background-color:#575873;
}
.button.alert {
    background-color:#CF142B;
}
.button.alert::after {
    background-color:#CF142B;
}
.button.small::after {
    bottom:7px;
}


.button:hover, .button:hover::after { 
    background-color: var(--cn-tertiary); 
}
.button.secondary:hover, .button.secondary:hover::after {
    background-color:#bababa;
}

.button.expanded {
        border-width: 8px;
}
.button.expanded::after {
    width: 8px;
    right: -8px;
    height: 80px;
    bottom: calc(50% - 40px);
}

.backstretch .button,
.login-only.button,
.home-series .callout .button {
    background-color: var(--cn-primary);
    border: solid var(--cn-white) 3px;
    color: var(--cn-dark) !important;
}
.backstretch .button::after,
.login-only.button::after,
.home-series .callout .button::after {
    background-color: var(--cn-primary);
}
.episode-content .wp-block-embed {
margin: 0 0 1.5rem;
}


.wp-block-buttons .wp-block-button a {
    background-color: var(--cn-white);
    margin-bottom: 2rem;
    margin-top: 1rem;
    border: solid var(--cn-primary) 3px;
    color: var(--cn-dark) !important;
    font-weight: bold;
    position: relative;
}
.wp-block-buttons .wp-block-button a::after {
    content: " ";
    background-color: var(--cn-white);
    width: 4px;
    height: 20px;
    position: absolute;
    bottom: 10px;
    right: -3px;
}
.wp-block-buttons .wp-block-button a:hover { opacity: 0.8; }
.wp-block-button__link  { border-radius: 0; color: #000; font-size: 0.9rem; }
.wp-block-button__link:hover { color: #000; opacity: 0.8; }

.report-preset {
    margin:0;
}
#btn-run-report {
    margin-bottom:0;
}
#report-to, #report-from {
    border-width:3px;
    border-radius:0;
        height: 44px;
}
.button.tiny::after {
    display:none;
}

/* -----------------------------------------------------------------------
   LINKS
   ----------------------------------------------------------------------- */
a                     { color: var(--cn-link) !important; }
.page-content table a { color: var(--cn-link-hover) !important; }
.menu.dropdown > li > a      { color: #333333 !important; }
.news-item h3 a       { color: var(--cn-dark) !important; text-align: center; }

/* -----------------------------------------------------------------------
   LAYOUT
   ----------------------------------------------------------------------- */
.grid-container { max-width: 72.5rem; }

.main-content {
    background-color: var(--cn-grey);
    padding: 1rem;
    min-height: 81vh;
    background-image:url('../img/arrows.webp');
    background-size:20%;
    background-repeat: no-repeat;
    background-position:bottom right;
}
body { min-height: 100vh; }

.subpage-wrapper  { background-color: var(--cn-white); padding-top: 1rem; padding-bottom:2em;}
.page-wrapper     { background-color: var(--cn-white); }
.cell.page-content { min-height: 300px; }
.page-content {
    background: transparent;
    padding-top: 0;
    padding-bottom: 3rem;
    border-width: 0 !important;
}

.sub-title-intro {
    min-height: auto !important;
    background-color: rgb(206, 206, 206);
    padding-top: 2rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

/* -----------------------------------------------------------------------
   HOME PAGE SECTIONS
   ----------------------------------------------------------------------- */
.home-series { padding-top: 1rem; padding-bottom: 1rem; }
.home-series .callout {
    border-width: 0;
    background-color: var(--cn-primary);
    border-radius: 0;
    position: relative;
    padding: 1.4rem 2rem 6rem;
}
.home-series .callout a  { position: absolute !important; bottom: 2rem; right: 2rem; margin-bottom: 0 !important; }
.home-series .callout h3 { font-weight: bolder; font-size: 170%; min-height: 77px; }
.home-series .callout h4 { font-size: 150%; min-height: 85px; }

.home-middle            { background-color: var(--cn-white); margin-bottom: 3rem; }
.home-middle p          { font-size: 1.1rem; }

.home-bottom            { background-color: var(--cn-secondary); padding-bottom: 2rem; }
.home-bottom h4,
.home-bottom h2         { color: var(--cn-white) !important; }

.news-overview {
    background-color: var(--cn-white);
    padding: 2rem 1rem;
    position: relative;
    background-image:url('../img/CN_DESIGN_SYSTEM_1.png');
    background-position:top right;
    background-repeat: no-repeat;
    background-size:40%;

}
.news-overview img { padding-bottom: 1rem; }
.news-overview p   { min-height: 40px; }
.news-overview h2 {
    margin-bottom:2rem;
}
.news-item h3      { text-align: center; margin-top: 1rem; margin-bottom: 1rem; font-size:1.2rem; }
.news-item h3 a {color:#fff !important;}
.news-item .img-tile {
    height: 280px;
    border-radius: 5px;
    background-size: cover;
    background-position: center;
}
.news-item .img-tile a { width: 100%; height: 100%; display: block; }

.news-item {background-color:var(--cn-primary); margin-bottom:1rem;}
.news-item p {
    color:white;
    text-align: center;
    padding-left:0.5rem;
    padding-right:0.5rem;
}

/* -----------------------------------------------------------------------
   RESOURCE CARDS
   ----------------------------------------------------------------------- */
.resource                 { margin-bottom: 1rem; }
.resource .image img      { aspect-ratio: 3.8 / 2; object-fit: cover;}
.resource .box-foot h4    { font-size: 1.2rem; text-align: center; }
#history-grid .resource .box-foot h4    { font-size: 1rem;}
.resource .box-foot p     { text-align: center; margin-top: -8px; }
.resource .box-foot h4 a  { color: var(--cn-dark) !important; }
.resource .box-foot h4 a:hover {color:#0073BD !important;}

/* Year group card footer colours
   Applied as CSS class on .box-foot.resource-colour e.g. class="box-foot resource-colour year1 year2"
   Default (no year set) falls through to --cn-primary yellow. */
.resource .box-foot                  { background-color: var(--cn-primary); border-bottom:4px solid grey; padding:1rem; min-height:172px;}
.resource .box-foot.reception        { border-color: #F7E017; } /* lilac    */
.resource .box-foot.year1            { border-color: #F7E017; } /* teal     */
.resource .box-foot.year2            { border-color: #F7E017; } /* teal     */
.resource .box-foot.year3            { border-color: #CF142B; } /* blue     */
.resource .box-foot.year4            { border-color: #CF142B; } /* blue     */
.resource .box-foot.year5            { border-color: #0073BD; } /* green    */
.resource .box-foot.year6            { border-color: #0073BD; } /* green    */
.resource .box-foot h4 a             { color: #fff !important;  font-size: 1rem;}
.resource .box-foot .subject-tag     { font-size: 0.8rem; color: #EDEDED; margin: 0; }

.resource-card.northumberland {
    position:relative;
}
.resource-card.northumberland::after {
    position:absolute;
    content: " ";
    height: 60px;
    width: 60px;
    top: 33%;
    right: 5%;
    background-image:url('../img/CN_CIRCULAR_LOGO.svg');
}

.location-pill.active {
    background-color:#0073BD;
}
#subject-selector .subject-btn {
    height:80px;
    margin-top:0;
    margin-bottom:1rem;
}
#subject-selector .subject-btn::after {
    height: 40px;
    bottom: calc(50% - 20px);
}

#report-results .callout {
    border: 3px solid var(--cn-tertiary);
    border-radius:0;
}

/* -----------------------------------------------------------------------
   SINGLE EPISODE
   ----------------------------------------------------------------------- */
.single-res .callout {
    background-color: var(--cn-primary);
    border-width: 0;
    padding: 2rem;
}
.single-res .callout h3    { font-weight: 600; }
.single-res .callout ul    { margin-left: 0; list-style-type: none; }
.single-res .callout a     { color: #0c0c0c !important; font-weight: bold; }
.single-res .callout h4 a  { font-size: 1.5625rem; }
.single-res .callout ul li {
    background-image: url('../img/target.png');
    background-repeat: no-repeat;
    line-height: 30px;
    padding-left: 30px;
    background-position: left center;
    margin-bottom: 10px;
}
.single-res h1             { margin-top: 2rem; margin-bottom: 1rem; }

.subject-focus {
    background-image: url('../img/education.png');
    background-repeat: no-repeat;
    line-height: 30px;
    padding-left: 30px;
    background-position: left center;
}

.location-pill {
    margin-top:0;
    margin-right:4px;
    margin-bottom:6px;
}

/* -----------------------------------------------------------------------
   PAGINATION
   ----------------------------------------------------------------------- */
.pagination ul          { margin-left: 0; text-align: center; margin-top: 1rem; }
.pagination .page-numbers {
    margin: 0 5px;
    border: 2px solid var(--cn-white);
    color: var(--cn-dark) !important;
    font-size: 1.2rem;
    border-radius: 50%;
    padding: 0.1875rem 0.825rem;
    display: inline-block;
}
.pagination .page-numbers:hover { background-color: var(--cn-white); opacity: 0.8; }
.pagination .current            { background-color: var(--cn-primary); color: var(--cn-white) !important; }
.pagination a                   { display: inline-block; }

/* -----------------------------------------------------------------------
   FOOTER
   ----------------------------------------------------------------------- */
.footer             { background-color: var(--cn-primary); color: var(--cn-white) !important; }
.footer img         { filter: unset; }
.footer a           { font-weight: bold; color: var(--cn-white) !important; }
.footer p           { color: var(--cn-white) !important; }
.quick-links li a   { font-weight: normal;  }

/* -----------------------------------------------------------------------
   ADMIN MENU BAR
   ----------------------------------------------------------------------- */
.admin-menu           { background-color: var(--cn-primary); }
.admin-menu .menu a   { color: var(--cn-white) !important; }
.admin-menu .menu .active > a { background-color: #000; }
.admin-menu a:hover   { opacity: 0.8; }

/* -----------------------------------------------------------------------
   DASHBOARD PANEL
   ----------------------------------------------------------------------- */
.dashboard-panel           { margin-top: 2rem; }
.dashboard-panel .cell     { margin-bottom: 2rem; }
.dashboard-panel .button   { width: 70%; min-width: 120px; background-color: #F5F7F6; }
.dashboard-panel .button::after { background-color: #F5F7F6; }
.dashboard-panel .card {
    padding: 2rem 2rem 1.5rem;
    background-color: #F5F7F6;
    border-radius: 0;
    height: 100%;
    border-width: 0;
}
.dashboard-panel .card h2  { line-height: 2.2rem; font-size: 2rem; }
.dashboard-panel .card.active { background-color: var(--cn-primary); }

.register-school-page .callout, .register-user-page .callout {
    background-color:var(--cn-primary);
}
.register-school-page .callout h3, .register-school-page .callout h4, .register-school-page .callout p, .register-user-page .callout h3, .register-user-page .callout h4, .register-user-page .callout p {
    color:white!important;
}
.register-school-page .callout h3 {
    font-size:1.6rem;
}
.register-school-page .callout h4 {
    font-size:1.2rem;
}
.register-school-page .callout label, .register-user-page .callout label {
    color:#ededed;
    height:1.5rem;
}
.register-school-page .callout .button {
    margin:0;
}
.register-school-page .callout input, .register-user-page .callout input {
    border-width:3px;
    border-radius:0px;
    min-height: 45px;
}

/* -----------------------------------------------------------------------
   FORMS
   ----------------------------------------------------------------------- */
input[type="text"],
input[type="email"] {
    width: 100%;
    border: 2px solid #aaa;
    border-radius: 4px;
    outline: none;
    padding: 8px;
    box-sizing: border-box;
    transition: 0.3s;
}
.input-group-field {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.wpcf7-form label { color: var(--cn-white); }
.wpcf7-submit     { width: 100%; }

/* -----------------------------------------------------------------------
   UTILITY
   ----------------------------------------------------------------------- */
.hideme { opacity: 0; }
.social-icon img { max-width: 30px; max-height: 16px; }

.wp-block-cover { padding: 0.5rem 2rem; }
.wp-block-group__inner-container { padding: 2rem; }
/* .wp-block-cover .wp-block-cover__inner-container {
    max-width: 51rem;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
}
.wp-has-aspect-ratio .wp-block-embed__wrapper {
    display: inline-block;
    position: relative;
    padding-bottom: 60%;
    width: 100%;
}
.wp-has-aspect-ratio iframe {
    height: 100% !important;
    position: absolute;
    top: 0; left: 0;
    width: 100% !important;
} */
.alignwide  { margin-left: -80px; margin-right: -80px; }
.alignfull  {
    margin-left: calc(-99vw / 2 + 100% / 2);
    margin-right: calc(-99vw / 2 + 100% / 2);
    max-width: 98vw;
    width: 98vw;
    padding-left: 1rem;
}

/* -----------------------------------------------------------------------
   RESPONSIVE
   ----------------------------------------------------------------------- */
@media only screen and (max-width: 680px) {
    .inner a            { line-height: 3.3rem; }
    .header-pad.menu-holder { margin-bottom: 1rem; }
    .backstretch        { padding-top: 0; }
    .title-bar {
        padding: 0.8rem !important;
        padding-bottom: 0.6rem !important;
        background-color: #252a3e !important;
    }
    .menu.accordion-menu a           { color: #000 !important; }
    .menu.accordion-menu .submenu a  { color: var(--cn-white) !important; }
    .menu.align-right.accordion-menu li a {
        width: 100%;
        text-align: center;
        font-size: 1.4rem;
        font-weight: bold;
    }
    .menu.align-right.accordion-menu li a:hover {
        color: var(--cn-white) !important;
        background-color: var(--cn-primary);
    }
    .top-bar { background-color: rgb(227, 230, 234); }
    .footer img { width: auto; margin: 0 10px 0 0; }
}

@media only screen and (max-width: 440px) {
    .backstretch h1 { font-size: 2rem; line-height: 3rem; }
    .alignfull .wp-block-cover__inner-container .alignfull { margin: 0; width: auto; }
    .alignwide      { margin-left: 0; margin-right: 0; }
}

@media screen and (min-width: 40em) {
    .no-js .top-bar  { display: block; }
    .no-js .title-bar { display: none; }
}

@media print {
    .menu, .backstretch, .robothelp, .accreds-holder { display: none; }
    .footer p, .footer h3, .footer ul { display: none; }
}