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

:root {
  /* color-scheme: light; */
  --black: #0e1011;
  --white: #f3f6f7;

  --body-background: var(--white);
  --paragraph: var(--black);
  --header: var(--black);
  --logo-bg: #fff;
  --logo-text: #fff;
  --logo-text-fill: #282828;
  --nav-bar: #23537b;
  --nav-bar-button-text: var(--white);
  --nav-bar-pop-out: #23537b;
  --nav-bar-pop-out-text: var(--white);
  --nav-bar-text: var(--white);
  --search-block: var(--white);
  --search-button: #555658;
  --search-button-text: var(--white);
  --search-button-hover: #9dc0cd;
  --search-outline: #000000;
  --form-border: var(--black);
  --panel: #e4e4e4;
  --footer: #3f3f3f;
  --footer-text: var(--white);
  
  --error-border: #d4351c;
  --required: #112288;
  --main-link: #23537b;
  --focus-yellow: #fd0;
  --focus-underline-header: var(--black);
  --focus-underline-main: var(--black);
  --focus-underline-footer: var(--white);

  --word: url("https://digital-team.org.uk/images/DGSA/docx-16.png");
  --excel: url("https://digital-team.org.uk/images/DGSA/xlsx-16.png");
  --pdf: url("https://digital-team.org.uk/images/DGSA/PDF-16.png");
}

.darkmode {
  color-scheme: dark;
  --text: #d4fad8;
  --background: #031704;
  --primary: #89f190;
  --secondary: #67118c;
  --accent: #e83987;

  --body-background: #282828;
  --paragraph: #d6d6db;
  --header: #9dc0cd;
  --logo-bg: #282828;
  --logo-text: #282828;
  --logo-text-fill: #fff;
  --nav-bar: #9dc0cd;
  --nav-bar-button-text: #3f3f3f;
  --nav-bar-text: #3f3f3f;
  --nav-bar-pop-out: #3f3f3f;
  --nav-bar-pop-out-text: #f3f6f7;
  --search-block: #3f3f3f;
  --search-button: #9dc0cd;
  --search-button-text: #282828;
  --search-button-hover: #555658;
  --search-outline: #d6d6db; 
  --form-border: #d6d6db;
  --panel: #3f3f3f;
  --footer: #3f3f3f;
  --footer-text: #f3f6f7;

  --error-border: #FE7F7F;
  --required: #FE7F7F;
  --main-link: #9dc0cd;
  --focus-yellow: #fd0;
  --focus-underline-header: #f3f6f7;
  --focus-underline-main: #f3f6f7;
  --focus-underline-footer: #f3f6f7;

  --word: url("https://digital-team.org.uk/images/DGSA/docx-16.png");
  --excel: url("https://digital-team.org.uk/images/DGSA/xlsx-16.png");
  --pdf: url("https://digital-team.org.uk/images/DGSA/PDF-16.png");
}

/*
    2. Remove default margin
  */
* {
  margin: 0;
}
/*
    Typographic tweaks!
    3. Add accessible line-height
    4. Improve text rendering
  */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
    5. Improve media defaults
  */
img,
picture,
video,
canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  object-fit: cover;
}

svg {
  display: block;
  max-width: 100%;
  object-fit: cover;
}

/*
    7. Avoid text overflows
  */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  margin-bottom: 1rem;
}
/*
    8. Create a root stacking context
  */
#root,
#__next {
  isolation: isolate;
}

p,
li,
button {
  font-size: 1.1875rem;
}

h1,
h2,
h3 {
  color: var(--header);
}

h1 {
  font-size: 2rem;
}

ul {
  list-style-type: none;
}

html {
  font-family: "Helvetica Neue", Arial, sans-serif;
  /* font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; */
}

body {
  background-color: var(--body-background);
  color: var(--paragraph);
  line-height: 1.5;
}

/* a[href$=".pdf"]::after {
  content: " (PDF)";
}

a[href$=".doc"]::after {
  content: " (DOC)";
}

a[href$=".docx"]::after {
  content: " (DOCX)";
} */

/* Helper classes */
.visuallyhidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: fixed;
  width: 1px;
}

/* container class */
.container {
  max-width: 1140px;
  margin: 0 auto;
}

/* navigation menu */
.skiplink {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 1rem;
}

.skiplink:focus {
  position: static;
  display: block;
  background-color: #fd0;
  color: var(--black);
  width: auto;
  height: auto;
}

header {
  background-color: var(--nav-bar);
  margin-bottom: 1rem;
}

.header-logo {
  padding-left: 1rem;
  display: flex;
  gap: 1rem;
  text-decoration: none;
}

.logo-span-text {
  align-self: center;
  color: var(--nav-bar-button-text);
  font-weight: bold;
  font-size: 1.5rem;
}

.logo {
  fill: var(--logo-bg);
  stroke-width: 0;
}

.logo-text {
  fill: var(--logo-text-fill);
  font-size: 33px;
  font-weight: 600;
}

.header-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--nav-bar-button-text);
  background: var(--nav-bar);
}

.button-container {
  font-size: 0;
}

.header-button {
  display: inline;
  font-size: 1rem;
  color: var(--nav-bar-button-text);
  background-color: var(--nav-bar);
  border: none;
  padding: 1rem;
  margin-right: 0.5rem;
  font-weight: bold;
  cursor: pointer;
}

.header-button:hover {
  color: var(--nav-bar);
  background-color: var(--nav-bar-button-text);
}

#menu-button {
  display: none;
}

/* Search form */

.search-form {
  display: none;
  background-color: var(--search-block);
  padding: 1rem;
}

.search-form .container {
  display: flex;
  padding: 0 1rem;
}

.search-form input {
  flex-grow: 1;
  padding: 0.5rem;
  width: 100%;
}

.search-form input::placeholder {
  color: var(--search-outline);
}

.search-form input[id="q"] {
  color: inherit;
  border: 2px solid var(--search-outline);
  background-color: var(--search-block);
}

.search-form button {
  background-color: var(--search-button);
  color: var(--search-button-text);
  border: none;
  padding: 0.6rem;
  float: right;
}

.search-form button:hover {
  background-color: var(--search-button-hover);
  color: var(--search-button-text);
  cursor: pointer;
}

/* Menu bar */
.arrow {
  display: unset;
  width: unset;
  padding: 0 5px;
  fill: var(--nav-bar-button-text);
}

.dropdown {
  rotate: 180deg;
}

.main-nav {
  background-color: var(--nav-bar);
  padding: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.main-nav > li {
  position: relative;
  /* font-weight: bold; */
}

.main-nav li a {
  display: inline-block;
  text-decoration: none;
  color: var(--nav-bar-text);
  padding: 1rem;
  font-weight: bold;
}

.main-nav button {
  display: inline-block;
  background-color: transparent;
  border: none;
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--nav-bar-text);
  padding: 1.2rem;
  text-align: left;
}

.main-nav ul {
  background-color: var(--nav-bar);
  padding: 0;
  position: absolute;
  top: 100%;
  z-index: 99999;
}

.main-nav button:hover {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.5rem;
}

.main-nav li:hover {
  text-decoration: underline;
  /* text-underline-offset: 0.5rem; */
}

.main-nav li a:hover {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.5rem;
}

.sub-menu {
  display: none;
}

.sub-menu li a {
  padding: 1rem;
}

/* Home Main */

.hero {
  margin-bottom: 1rem;
  padding: 0 1rem;
}

.home-panel {
  --grid-columns: 4;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: 1rem;
  padding: 0 1rem;
  margin-bottom: 1rem;
  color: var(--paragraph);
}

.home-panel section {
  background-color: var(--panel);
  padding-bottom: 1rem;
}

.home-panel div {
  padding: 0.5rem;
}

.home-panel ul {
  padding: 0;
}

.home-panel li {
  margin-left: 0;
  margin-bottom: 0.5rem;
}

.home-panel a {
  color: var(--paragraph);
}

.extra-links {
  display: none;
}

.extra-links-button{
  background-color: transparent;
  border: none;
  padding-left: 0;
  text-decoration: underline;
  cursor: pointer;
}

.breadcrumb {
  padding: 0 1rem;
}

.breadcrumb a {
  color: var(--paragraph);
  font-size: 1.1875rem;
  text-decoration: none;
}

.breadcrumb a::after{
  content: " /";
  text-decoration: none;
}

.breadcrumb a:hover{
  text-decoration: underline;
}
/* General main */

.general-main {
  --general-column-count: 4;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(var(--general-column-count), 1fr);
  padding: 1rem;
  margin-bottom: 2rem;
}

.general-main main {
  grid-column: 1 / 4;
}

.general-main a{
  color: var(--main-link);
  text-decoration: underline;
}

.general-main ul {
  list-style: unset;
  margin-bottom: 0.5rem;
}

.general-main li {
  margin-bottom: 1rem;
}

.general-main li ul {
  margin-top: 1rem;
}

.general-main main img {
  margin-bottom: 1rem;
}

.general-main aside {
  background-color: var(--panel);
  padding: 0.5rem;
}

.general-main aside a {
  color: var(--paragraph);
}


a.downloadPdf::after {
  content: " (PDF) " var(--pdf);
}
a.downloadDoc::after,
a.downloadDocx::after {
  content: " (DOC) " var(--word);
}
a.downloadXlsx::after,
a.downloadXls::after {
  content: " (XLS) " var(--excel); 
}

/* Tables */
table {
  width: 100%;
}

th,
td {
  border-bottom: 1px solid #b1b4b6;
}

th {
  text-align: left;
}

td {
  padding: 0.5rem 1rem 0.5rem 0;
}

/* Details and Summary */
summary {
  padding: 10px;
  background-color: var(--panel);
  cursor: pointer;
}

details {
  border: 2px solid var(--panel);
  border-radius: 2px;
  margin-bottom: 10px;
}

details p {
  margin: 10px;
}

.general-main form {
  border: 1px solid #999;
  padding: 0.725rem;
}

.general-main form p {
  margin-bottom: 1rem;
}

.general-main form input[type="text"],
.general-main form input[type="email"],
.general-main form select,
.general-main form option,
.general-main form textarea {
  border: 2px solid var(--form-border);
}

.general-main label {
  display: block;
}

.general-main input[type="text"],
.general-main input[type="email"],
.general-main select,
.general-main textarea {
  width: 80%;
  padding: 0.725rem;
  margin-bottom: 1rem;
}

.general-main form:has(+ p) {
  margin-bottom: 1rem;
}

.submitButton {
  font-size: 1.2em;
  padding: 10px;
  color: var(--search-button-text);
  background-color: var(--search-button);
  border: 0;
  cursor: pointer;
}

#submitButton:hover {
  color: var(--search-button-text);
  background-color: var(--search-button-hover);
}

.required {
  color: var(--required);
}

.search-pagination {
  display: flex;
  flex: 1;
  align-content: center;
  justify-content: center;
  gap: 1rem;
}

.search-pagination a {
  font-size: 1.2rem;
  font-weight: bold;
  padding: 10px;
  color: var(--search-button-text);
  background-color: var(--search-button);
  border: 0;
  cursor: pointer;
  text-decoration: none;
}

.error-summary {
  border: solid var(--error-border) 6px;
  margin-bottom: 1rem;
  padding: 1rem;
}

/* Footer */

footer {
  background-color: var(--footer);
  color: var(--footer-text);
}

footer > div.container {
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  padding: 1rem;
}

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

footer a:hover{
  text-decoration: underline;
}

.links p {
  padding: 0.25rem;
}

.logos {
  padding: 0;
  display: flex;
  gap: 1rem;
  flex-direction: row;
  flex-wrap: wrap;
}

/* Mobile main menu */
@media (max-width: 1140px) {
  .home-img {
    padding: 0 1rem;
  }

}

@media (max-width: 1020px) {
  .general-main {
    --general-column-count: 1;
    gap: unset;
  }
}

@media (max-width: 870px) {
  .home-panel {
    --grid-columns: 2;
  }

  .main-nav {
    display: none;
    background-color: var(--nav-bar-pop-out);
  }

  .main-nav > li {
    position: static;
    font-weight: bold;
  }

  .main-nav li a {
    color: var(--nav-bar-pop-out-text);
  }

  .main-nav button {
    color: var(--nav-bar-pop-out-text);
    font-weight: bold;
    font-size: 1rem;
  }

  .main-nav ul {
    padding-left: 2rem;
    position: static;
    top: unset;
    background-color: #575757;
  }

  .main-nav ul li {
    font-weight: normal;
  }

  #menu-button {
    display: inline;
  }

  .arrow {
    fill: var(--nav-bar-pop-out-text);
  }
}

@media (max-width: 750px) {
  .logo-span-text {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: fixed;
    width: 1px;
    opacity: 0;
  }
}

@media (max-width: 670px) {
  footer > div.container {
    flex-direction: column;
  }

  .links {
    order: 2;
  }

  .logos {
    order: 1;
    margin-bottom: 2rem;
  }

  #ccc button{
    width: 60px !important;
    height: 60px !important;
  }
}

@media (max-width: 465px) {
  .home-panel {
    --grid-columns: 1;
  }
  p,
  li,
  button {
    font-size: 1rem;
  }
}

.opened {
  display: block;
}

.block {
  display: block;
}
.breadcrumb a:focus,
.header-topline a:focus,
button:focus,
.main-nav a:focus,
.general-main a:focus,
footer a:focus,
footer li:has(a:focus),
input[type="button"]:focus {
  outline: 3px solid rgba(0, 0, 0, 0);
  background-color: var(--focus-yellow);
  color: #000000;
  box-shadow: 0 -2px var(--focus-yellow), 0 4px var(--focus-underline-header);
}

footer li:has(a:focus) img {
  filter: invert(100%);
}

input:focus,
select:focus,
textarea:focus {
  outline: 3px solid var(--focus-yellow);
  border: 4px solid var(--form-border);
}