:root {
    --primary: #1d3463;
    --bg-secondary: #1d3463;
    --bg-secondary-hover: #fff;
    --btn-primary-bg: #1d3463;
    --btn-primary-bg-hover: #ececec;
    --btn-primary-color: #fff;
    --btn-primary-color-hover: #1d3463;
    --btn-secondary-bg: #60C0F0;
    --btn-secondary-bg-hover: #1d3463;
    --btn-secondary-color-hover: #fff;
    --focus: #fff;
    --bg-panel: #eeeeee;
    --text: #294a8c;
    --sub-menu-hover: #D5DCE8;
}

/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

/*
  2. Remove default margin
*/
* {
    margin: 0;
}

/*
  Typographic tweaks!
  3. Add accessible line-height
  4. Improve text rendering
*/
body {
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/*
  5. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

/*
  6. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
    font: inherit;
}

/*
  7. Avoid text overflows
*/
/* p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
} */

/*
  8. Create a root stacking context
*/
#root,
#__next {
    isolation: isolate;
}

html{
    background:  rgb(255,255,255) 
}

a.skip-main {
    left: -999px;
    position: absolute;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: -999;
}

a.skip-main:focus,
a.skip-main:active {
    color: #fff;
    background-color: #000;
    left: auto;
    top: auto;
    width: 30%;
    height: auto;
    overflow: auto;
    margin: 10px 35%;
    padding: 5px;
    border-radius: 15px;
    border: 4px solid yellow;
    text-align: center;
    font-size: 1.2em;
    z-index: 999;
}

.sr-only {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.visuallyhidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}


h1,
h2,
h3,
h4,
h5,
h6 {
    color: #294a8c;
    text-wrap: balance;
}

h1{
    margin-bottom: 1rem;
}

h2{
    margin-bottom: 1.275rem;
}

p:has(+ h3) {
    margin-bottom: 1.825rem;
}

p:has(+ h2) {
    margin-bottom: 3rem;
}

table {
    margin-top: 1rem;
    border: 1px solid;
    border-spacing: 0;
    border-collapse: collapse;
}

caption {
    text-align: start;
    margin-bottom: 1rem;
}

th,
td {
    padding: 10px;
    border: 1px solid;
}

th {
    color: #fff;
    background-color: #1D3463;
}

.responsive-table{
    overflow-x: auto;
    border: unset;
    padding: 0;
}

p {
    margin-bottom: 1rem;
}

p, a {
    text-wrap: pretty;
}

a{
    color:  rgb(0,0,238)
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background:  rgb(255,255,255);
    color:  rgb(0,0,0);
}

main {
    margin-bottom: 4rem;
}

.container {
    margin: 0 auto;
    max-width: 970px;
}

.hide {
    display: none;
}

.w-full {
    width: 100%;
}

.hidden {
}

.mb-1{
    margin-bottom: 1rem;
}

.p-1{
    padding: 1rem;
}

.flex{
    display: flex;
    gap: 1rem;
}

/* main boday */

.required:before {
    content:"* ";
    color: red;
  }

.breadcrumb {
    font-size: 1rem;
    padding: 0.5rem;
    border: 1px solid #E6E6E6;
    margin-bottom: 1rem;
    font-weight: bold;
    color: #444;
}

.breadcrumb ul {
    display: flex;
    padding: 0;
    list-style: none;
}

.breadcrumb ul > li > a {
    color: #111;
    font-weight: normal;
    text-decoration: none;
}

.breadcrumb ul > li {
    padding-left: 0.5rem;
}

.breadcrumb ul > li:first-child{
    padding-left: 0;
}

.breadcrumb ul > li > a:hover {
    text-decoration: underline;
}

.searchform {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 3px;
    padding: 1rem;
}

/* Open assesments */

#assessmentSelector {
    margin-top: 1rem; 
    min-height: 350px; 
    padding: 20px;
    border: 2px solid;
    border-radius: 8px;
}
#assessmentSelector label {font-weight:bold;}
#assessmentSelector select {margin-bottom:40px; padding:4px; width:100%;}
#assessmentSelector #btnHolder {text-align:center;}
#btnHolder .white-link {display:inline;}
.btn-primary-link:focus {outline: 2px solid var(--btn-primary-color-hover);}

#btnHolder .blue-link {display: none;}

#btnHolder:hover .blue-link{display: inline;}

#btnHolder:hover .white-link {display:none;}

/* .input{
    margin-top: 1rem;
} */

.nav-button {
    display: none;
    background-color: var(--btn-secondary-bg);
    border: none;
    padding: 0.22rem 1rem;
    border-radius: 7px;
}

.btn-primary-link {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-color);
    padding: 0.5rem 1rem;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    border: none;
}

.btn-secondary {
    background-color: var(--btn-secondary-bg);
    border: 2px solid transparent;
    border-radius: 5px;
    cursor: pointer;
}

.btn-search {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-color);
    padding: 1px 1rem;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    border: none;
}

.navbar-header {
    /* width: 100%; */
    background-image: url(https://www.sqasolar.org.uk/mini/images/solar_masthead_2013.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100px;
    margin-bottom: 1rem;
}

.mobile-nav-image{
    display: none;
}

.desktop-navbar-header{
    position: relative;
    margin-bottom: 1rem;
}


.desktop-searchform{
    display: flex;
    gap: 3px;
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.nav-menu {
    display: flex;
    justify-content: space-between;
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin-bottom: 1rem;
}

.navoption {
    font-weight: bold;
    background-color: var(--bg-secondary);
    color: #fff;
    padding: 0.5rem 3.5rem;
    text-decoration: none;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

.navbar-form-mobile{
    display: none;
}

.content {
    display: flex;
    gap: 1rem;
}

.sub-menu {
    flex: 1;
    align-self: start;
    margin-right: 1rem;
}

.sub-menu-header {
    background: var(--primary);
    color: var(--focus);
    padding-left: 1rem;
    font-size: 1.225rem;
    font-weight: 300;
    margin: unset;
}

.sub-menu-header + ul {
    padding: 1rem;
    color: var(--primary);
    background-color: #e9ecf3;
    list-style-type: none;
    margin: 0;
}

.sub-menu-header + ul li {
    margin-bottom: 1rem;
    border-bottom: 1px dotted #294A8C;
}

.sub-menu-header + ul li > a {
    color: #294A8C;
    text-decoration: none;
    display: block;
}

.content-details {
    flex: 3;
}

.alert {
    background-color: #f6c52a;
    padding: 1rem;
    font-weight: bold;
    border-radius: 5px;
    margin-bottom: 1rem;
}

.alert p {
    margin-bottom: unset;
}

.alert > a {
    color: inherit;
}

.alert > a:visited {
    color: inherit;
}

.panel-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    /* min-height: 100%; */
}

.panel {
    background-color: #eeeeee;
    height: 100%;
    border-radius: 5px;
    padding: 2rem 1rem;
    text-align: center;
    border: 2px solid rgb(77, 77, 77);
}

.panel-text {
    margin-bottom: 2rem;
    text-align: left;
}

.content-panel-area {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.content-panel {
    flex: 1 1 0px;
    background-color: #eeeeee;
    padding: 1rem 1rem;
}

.latest-news {
    margin-bottom: 2rem;
}

#newssumm > a {
    color: var(--primary);
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.news {
    margin-bottom: 1rem;
    padding: 0.5rem 0.5rem;
    border: 2px solid var(--bg-panel);
}

.news a {
    color: var(--primary);
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.newsDate {
    display: none;
    text-align: right;
}

.view-all-news {
    text-align: right;
}
.view-all-news-link     {
    color: var(--primary);
}

/* Summary and details below */

summary {
    padding: 10px;
    background-color: #1D3463;
    color: white;
    margin-top: 10px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
}

details div {
    border: 1px solid #1D3463;
    padding: 10px
}

.navoption:hover {
    background-color: var(--bg-secondary-hover);
    color: #000000;
}

.navoption:focus {
    background-color: var(--focus);
    color: #000000;
}

.nav-button:hover{
    background-color: var(--btn-secondary-bg-hover);
    color: var(--btn-secondary-color-hover);
    outline: 2px solid var(--focus);
}

.btn-primary-link:hover {
    background-color: var(--btn-primary-bg-hover);
    color: var(--btn-primary-color-hover);
    outline: 2px solid var(--btn-primary-color-hover);
}

.btn-primary-link:focus {
    background-color: var(--focus);
    color: #000000;
}

.btn-search:hover {
    background-color: var(--btn-primary-bg-hover);
    color: var(--btn-primary-color-hover);
    outline: 2px solid var(--btn-primary-color-hover);
}

.btn-search:focus {
    background-color: var(--focus);
    color: #000000;
}

.btn-secondary:hover {
    background-color: var(--btn-secondary-bg-hover);
    color: var(--btn-secondary-color-hover);
    outline: 2px solid var(--focus);
}

.sub-menu-items li:hover {
    background-color: var(--sub-menu-hover);
}

.inline-block {
    display: inline-block;
}

#selector {
    margin-top: 1rem;
    min-height: 350px;
    padding: 20px;
    border: 2px #1d3463 solid;
    border-radius: 8px;
    color: #1d3463;
    font-size: 20px;
}

#selector select {
    padding: 4px 2px;
    width: 101.5%;
    height: 30px;
    margin-top: 0px;
    margin-left: -5px;
    font-size: 16px;
    border: 2px #1d3463 solid;
    color: #1d3463;
}

#selector iframe {
    border: 0;
    margin: 0;
    padding: 0;
    width: 99%;
    height: 200px;
}

#selector .selectHead {
    font-size: 20px;
    height: 44px;
    font-weight: bold;
    background-color: #1d3463;
    color: white;
    margin-bottom: 0px;
    padding: 5px;
    width: 99%;
}

#selector select option {
    background: white;
    font-weight: normal;
    color: #1d3463;
}

#selector select option:checked {
    background: #ccc;
    font-weight: bold;
    color: #1d3463;
}

.responsive-youtube {
    aspect-ratio: 16 / 9;
    width: 100%;
  }

/* Forms */

main form {
    margin-top: 1rem;

}

main form label {
    display: inline;
    font-weight: bold;
}

main form textarea {
    width: 100%;
}

main form select {
    width: 100%;
}

main form input[type="text"] , main form input[type="email"], main form input[type="tel"]{
    width: 100%;
}

main form fieldset {
    margin-bottom: 1rem;
}


/* Footer rules below */

footer {
    margin-top: 1rem;
}

.links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid grey;
    border-bottom: 1px solid grey;
    padding: 1rem 0;
    list-style-type: none;
    margin: 0;

}

.footer-link a {
    color: var(--primary);
    text-decoration: none;
}

.footer-link:hover {
    text-decoration: underline;
}

.social-links{
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 70px;
}

@media(max-width: 950px){
    .nav-button {
        display: inline-block;
    }
    
    .hidden {
        display: none;
    }
    
    .nav-menu {
        flex-direction: column;
        gap: 1px;
    }
    
    .navbar-header {
        margin-bottom: 0;
    }
    
    .alert {
        border-radius: unset;
    }

    .navoption {
        display: block;
        border-radius: 0px;
        text-align: center;
    }
    
    .content {
        display: block;
        margin: 1rem;
    }
    
    .solar-details {
        margin-bottom: 2rem;
    }
    
    .links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin: 1rem
    }
    
    .footer-link{
        margin-bottom: 1rem
    }
}

@media(max-width: 690px) {
    .navbar-header {
        background: none;
        height: 100%;
    }
    
    .mobile-nav-image{
        display: inline;
    }

    .desktop-navbar-header {
        display: flex;
        align-items: center;
    }

    .desktop-nav-image {
        position: static;
    }
    
    .desktop-searchform{
        position: static;
    }
    .searchform {
        justify-content: space-between
    }
    
    
}

@media(max-width: 440px){
    .nav-header {
        margin-bottom: 2rem;
    }
    
    .navbar-form-mobile {
        display: block;
        margin-bottom: 1rem;
    }
    
    
    .navbar-form {
        display: none;
    }
    
    .search-row-mobile {
        display: flex;
        justify-content: space-between;
        margin: 0 1rem 1rem 1rem;
    }
    
    .panel-menu {
        grid-template-columns: 1fr;
    }
    
    .links {
        grid-template-columns: 1fr;
    }
}