/* Hull DAP */

:root{
--primary: #320047;
--secondary: #C8A2C8;
--tertiary: #8AD7C5;
--text-colour: #1F1F1F;
}

/* Font */
* {
  font-family: Roboto,Arial,Helvetica Neue,Helvetica,sans-serif;
  letter-spacing: unset !important;
}

body {
    word-break: auto-phrase;
}
p {
    margin: 0 0 1em 0;
}
strong {
    font-weight: bold;
}
p, li, cta-banner__description {
  font-size: 1rem;
  hyphens: unset;
  word-wrap:unset;
  font-weight: normal;
  color: var(--text-colour);
}
a {
    color: #2A4ACB;
}

.list--breadcrumb a {
    color: var(--text-colour);
}
h1, .h1 {
    font-size: clamp(28px, calc(1.75rem + ((1vw - 7.68px) * 0.434)), 33px);
}
h2, .h2 {
    font-size: clamp(21px, calc(1.3125rem + ((1vw - 7.68px) * 0.434)), 26px);
}
h3, .h3 {
   font-size: clamp(16px, calc(0.9375rem + ((1vw - 7.68px) * 0.434)), 20px);
}
h4, .h4 {
    font-size: clamp(16px, calc(1rem + ((1vw - 7.68px) * 0)), 16px);
}
h1, h2, h3, h4, h5, h6 {
    font-family: Verdana, Geneva, sans-serif;
    font-weight: bold;
    color: var(--text-colour);
}

h2, h2.cta-banner__title {
    font-size: clamp(1.25rem, 2vw + 1rem, 1.625rem);
}
h3 {
 font-size: clamp(1.125rem, 2vw + 1rem, 1.25rem);   
}
#banner {
    padding: 12em 0 12em 0;
    overflow: hidden !important;
    background: var(--primary);
    background: linear-gradient(rgb(25 19 25 / 80%), rgb(38 41 45 / 80%)), url(https://www.hull.gov.uk/hullDAP/site/images/group_women_landscape___pinks2.jpg) !important;
    background: linear-gradient(rgb(0 0 0 / 51%), rgb(50 47 47 / 45%)), url(https://www.hull.gov.uk/hullDAP/site/images/group_women_landscape___pinks2.jpg) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    border-bottom: 2px solid gold;
}
@media screen and (max-width: 1680px) {
    #banner {
        padding: 9em 0 8em 0;
    }
}

@media screen and (max-width: 736px) {
      #banner {
        padding: 7em 0 10em 0;
    }
}

body.landing #main {
  margin-top: -7em;
}

@media screen and (min-width: 599px) {
    nav {
        margin-right:4rem;
    }
}
@media screen and (max-width: 599px) {
    ul.list.alt.list--navigation {
        display: flex;
        flex-direction: column;
        margin: 0;
    }
}

@media screen and (max-width: 840px) {
    #navPanel .link {
        color: #fff;
        font-family: Roboto,Arial,Helvetica Neue,Helvetica,sans-serif;
        font-size: 1rem;
    }
    #navPanel .link.depth-0 {
        font-weight: bold;
    }
}
#nav > ul > li > ul > li a:not(.button) {
    color: var(--text-colour);
}

#header .logo > *, #header nav > ul > li:first-child {
    font-size: clamp(1.25rem, 2vw + 1rem, 1.625rem);
}
#header {
    background-color: var(--primary) !important;
}

.logo:focus > span{
   color:var(--text-colour) !important;
   background-color:var(--secondary) !important;
}

#header.alt {
    position: fixed;
    border-bottom: 2px solid gold;
}
#header.reveal {
    border-bottom: 2px solid gold;
    position: fixed !important;
    -moz-animation: unset;
    -webkit-animation: unset;
    -ms-animation: unset;
    animation: unset;
}

table th {
    color: var(--text-colour);
    font-weight: bold;
}

table thead {
    border-bottom: solid 2px #000;
}

table tbody tr {
    border-bottom: solid 1px #000;
}
td, caption {
    font-size: 1rem;
    color: var(--text-colour);
}

#footer {
    padding: 1em !important;
    background-color: #E8E8E8;
    color: var(--text-colour) !important;
}

#footer .copyright li {
    color: var(--text-colour);
}

.box {
    background-color: #F7F7F7;
    box-shadow: unset;
}

.cta-banner{
    margin: 3rem 0;
}

#page-wrapper {
    background-color:var(--tertiary);
}

input[type="button"]:focus, input[type="submit"]:focus, a:focus, *:focus{
    outline: 2px dotted var(--primary);
    color: var(--text-colour) !important;
    background-color:var(--tertiary);
    border: 2px solid var(--primary);
}

input[type="submit"], input[type="reset"], input[type="button"], .button, .button.primary {
    background-color:var(--secondary);
    color: var(--text-colour) !important;
    border: 2px solid var(--primary);
}

input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:hover, .button.primary:hover {
    background-color: var(--primary);
    color: #fff !important;
    border: 2px solid var(--primary);
}

.button.primary{
    font-size: 1rem;
}

/* Select */
input[type="text"], input[type="password"], input[type="email"], input[type="date"], input[type="search"], select, textarea{
    border: 2px solid var(--primary);
}

input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover, input[type="date"]:hover, input[type="search"]:hover, select:hover, textarea:hover, input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="date"]:focus, input[type="search"]:focus, select:focus, textarea:focus {
  border: 0;
  box-shadow: 0 0 0 2px var(--primary);
}

/* hide A-Z button*/
#main > div > div > div.col-4.col-12-narrow > a{
    display: none;
}
                       
/* hide postcode */
#postcode, label[for="postcode"] {
  display:none;
}

#js-menu-toggle > li:nth-child(2), 
#js-menu-toggle > li:nth-child(3), 
#navPanel > nav > ul > li:nth-child(7) > a,
#navPanel > nav > ul >  li:nth-child(8) > a
{
  display: none;
}

#nav > ul > li > ul > li a:hover {
  background: var(--secondary) !important;
  color: #000 !important;
}

@media screen and (min-width: 599px) {
    nav {
        margin-right: unset;
    }
}

#navPanel > nav > a:nth-child(10){
    display:none;
}
#navPanel > nav > a:nth-child(11) {
    display:none;
}

/* */
#page-wrapper > section > div > div > div {
    width: 100%;
}

#page-wrapper > section > div > div > div > ul >li {
    display:inline;
    margin: .3em;
    border-top: unset;
}

/* hide html5 copyright */

#footer > ul > li:nth-child(2) {
  display:none;
}

/* Hide submit new event button */

#main > div > div > div.col-4.col-12-narrow > a.button.button--primary.button--block {
display: none;
}

#header #nav a:focus {
    outline: 2px solid #fff;
    background-color:var(--secondary)
}

@media screen and (max-width: 840px) {
    body.navPanel-visible #navPanel {
      background-color: var(--primary);
    }
}

blockquote {
    border: none;
    background-color: var(--secondary);
    padding: 1.6rem;
    border-radius: 6px
}

input[type="text"], input[type="password"], input[type="email"], input[type="date"], input[type="search"], select, textarea{
 color: var(--text-colour) !important; 
}