/*
================================================================================
  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:    #fec526;   /* Spark yellow — keep unless CN brand requires change */
    --cn-secondary:  #2f3180;   /* 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 */
}

/* -----------------------------------------------------------------------
   FONTS
   Signika is the current body font. Replace with CN brand font if required.
   ----------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Signika:wght@300;600;700&display=swap');

body          { font-family: 'Signika', sans-serif; }
h1            { font-family: 'Signika', sans-serif; color: var(--cn-dark) !important; font-size: 2.6rem !important; line-height: 3rem !important; }
h2            { font-family: 'Signika', sans-serif; color: var(--cn-dark) !important; }
h3            { font-family: 'Signika', sans-serif; color: var(--cn-dark) !important; font-weight: 300; font-size: 1.4rem; }
h4, h5, h6   { font-family: 'Signika', sans-serif; color: var(--cn-dark) !important; }
h5            { text-transform: uppercase; font-weight: bold; }
p             { font-family: 'Signika', sans-serif; color: var(--cn-dark); }
ul li         { font-family: 'Signika', sans-serif; color: var(--cn-dark); }

/* -----------------------------------------------------------------------
   HEADER / BACKSTRETCH
   ----------------------------------------------------------------------- */
.backstretch p { font-family: 'Signika', 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; }
.intro-guide p  { font-size: 1.2rem; }

.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: var(--cn-dark); }
.inner.sign-up a { background-color: var(--cn-secondary); }

.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-white);
    margin-bottom: 2rem;
    margin-top: 1rem;
    border: solid var(--cn-primary) 3px;
    color: var(--cn-dark) !important;
    font-weight: bold;
    position: relative;
    border-radius: 0;
}
.button::after {
    content: " ";
    background-color: var(--cn-white);
    width: 4px;
    height: 20px;
    position: absolute;
    bottom: 10px;
    right: -3px;
}
.button:hover { background-color: var(--cn-white); opacity: 0.7; }

.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);
}

.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; }

/* -----------------------------------------------------------------------
   LINKS
   ----------------------------------------------------------------------- */
a                     { color: var(--cn-link) !important; }
.page-content table a { color: var(--cn-link-hover) !important; }
.menu.dropdown 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;
}
body { min-height: 100vh; }

.subpage-wrapper  { background-color: var(--cn-white); padding-top: 1rem; }
.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: 1rem; }
.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;
}
.news-overview img { padding-bottom: 1rem; }
.news-overview p   { min-height: 40px; }

.news-item h3      { text-align: center; margin-top: 1rem; margin-bottom: 1rem; }
.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; }

/* -----------------------------------------------------------------------
   RESOURCE CARDS
   ----------------------------------------------------------------------- */
.resource                 { margin-bottom: 1rem; }
.resource .image img      { border-radius: 5px; margin-bottom: 5px; }
.resource .box-foot h4    { font-size: 1.2rem; text-align: center; }
.resource .box-foot p     { text-align: center; margin-top: -8px; }
.resource .box-foot h4 a  { color: var(--cn-dark) !important; }

/* -----------------------------------------------------------------------
   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;
}

/* -----------------------------------------------------------------------
   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-white); color: var(--cn-dark) !important; }
.footer img         { filter: unset; }
.footer a           { font-weight: bold; color: var(--cn-dark) !important; }
.footer p           { color: var(--cn-dark) !important; }
.quick-links li a   { font-weight: normal; text-transform: uppercase; }

/* -----------------------------------------------------------------------
   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); }

/* -----------------------------------------------------------------------
   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; }
}