/* font families as variables */
:root{
    --font-stack-headings: 'Inter', system-ui, Helvetica, Arial, sans-serif;
    --font-stack-body: 'Inter', system-ui, Helvetica, Arial, sans-serif;
}

/* everything */
html{
    font-family: var(--font-stack-headings);
    font-weight: 400;
    font-size: 16px;
}

@media (max-width: 840px) {
    html{
        font-size: 15px;
    }    
}
@media (max-width: 480px) {
    html{
        font-size: 14px;
    }    
}


/* ----------------- HEADINGS ----------------- */


h1, h2, h3, h4, h5, h6,
.csprp-heading-xl,
.csprp-heading-l,
.csprp-heading-m,
.csprp-heading-s,
.csprp-heading-xs,
.csprp-heading-xxs{
    font-family: var(--font-stack-headings);
    font-weight: 700;
}

h1,
.csprp-heading-xl{
    /* 48px */
    font-size: 3rem;
    line-height: 4rem;
    margin-block: 1em;
}
h2,
.csprp-heading-l{
    /* 36px */
    font-size: 2.25rem; 
    line-height: 3rem;
    margin-block: 1em;
}
h3,
.csprp-heading-m{
    /* 28px */
    font-size: 1.75rem;
    line-height: 2.375rem;
    margin-block: 1em;
}
h4,
.csprp-heading-s{
    /* 24px */
    font-size: 1.5rem;
    line-height: 2rem;
    margin-block: 1em;
}
h5,
.csprp-heading-xs{
    /* 22px */
    font-size: 1.375rem;
    line-height: 1.875rem;
    margin-block: 1.2em;
}
h6,
.csprp-heading-xxs{
    /* 20px */
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-block: 1.2em;
}






/* ----------------- BODY PARAGRAPHS ----------------- */

/* standard size (18px slightly larger) */
p, ul, ol{
    /* 18px */
    font-size: 1.125rem;
    line-height: 1.5rem;
    margin-block: 1rem;
}


/* larger primary paragraph */
.csprp-body-l{
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-block: 1em;
}

/* ----------------- LISTS ----------------- */


li{
    margin-block: 1rem;
}


/* ----------------- LINKS ----------------- */


a,
summary.csprp-link-toggle{
    color: var(--csprp-blue-hyperlink);
    text-decoration: underline;
    text-decoration-thickness: max(1px, .0625rem);
    text-underline-offset: 0.1578em;
}

a:hover,
summary.csprp-link-toggle:hover {
    color: var(--csprp-blue-hover);
    text-decoration-thickness: max(3px, .1875rem, .12em);
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none;
    -webkit-text-decoration-skip: none;
    text-decoration-skip: none;
}

a:focus-visible,
summary.csprp-link-toggle:focus-visible {
    outline: 3px solid transparent;
    color: #0b0c0c;
    background-color: var(--govuk-focus-colour);
    box-shadow: 0 -2px var(--govuk-focus-colour), 0 4px #0b0c0c;
    text-decoration: none;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}




/* ----------------- DETAILS TOGGLE LINK ----------------- */

/* Chrome / Edge / Safari */
summary::-webkit-details-marker {
    display: none;
  }
  
  /* Firefox */
  summary::marker {
    content: "";
  }

summary.csprp-link-toggle {
    display: flex;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
    list-style: none;

    color: var(--csprp-blue-hyperlink);
    text-decoration: underline;
    text-decoration-thickness: max(1px, .0625rem);
    text-underline-offset: 0.1578em;
    
}

summary.csprp-link-toggle::before {
    content: "";
    width: 1em;
    height: 1em;
    background-color: var(--csprp-blue-hyperlink);

    --_toggle-icon: url("../images/icons/button-icons/chevron-right.svg");
    mask-image: var(--_toggle-icon);
    -webkit-mask-image: var(--_toggle-icon);

    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;

    flex-shrink: 0;
    transition: transform 0.2s ease;
}
  
details[open] > summary.csprp-link-toggle::before {
    transform: rotate(90deg);
  }
  









/* ----------------- LINKS WITH ICONS ----------------- */





a.csprp-link-with-icon{
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0.5em;
    align-items: center;
}

a.csprp-link-with-icon::before{
    content: '';
    width: 1em;
    height: 1em;
    background-color: var(--csprp-blue-hyperlink);
    display: block;
    mask-image: var(--_button-icon); 
    -webkit-mask-image: var(--_button-icon);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    flex-shrink: 0;
}

a.csprp-link-with-icon.csprp-link-icon-post{
    flex-direction: row-reverse;
}

a.csprp-link-with-icon:focus-visible:before{
    background-color: black;
}


a.csprp-link-icon-email::before{
    --_button-icon: url("../images/icons/button-icons/email.svg"); 
}
a.csprp-link-icon-external::before{
    --_button-icon: url("../images/icons/button-icons/ext.svg"); 
}
a.csprp-link-icon-feed::before{
    --_button-icon: url("../images/icons/button-icons/feed.svg"); 
}
a.csprp-link-icon-chevron-right::before{
    --_button-icon: url("../images/icons/button-icons/chevron-right.svg"); 
}
a.csprp-link-icon-arrow-right::before{
    --_button-icon: url("../images/icons/button-icons/arrow-right.svg"); 
}



.csprp-link-icon-post{
    flex-direction: row-reverse;
}


.csprp-links-icons-container{
    display: flex;
    flex-direction: row;
    gap: 1em 2em;
    flex-wrap: wrap;
}





/* alt colours of icons for differnt backgrounds */

.csprp-bg-orange-core a.csprp-link-with-icon::before{
    background-color: var(--csprp-orange-950);
}
.csprp-bg-pink-core a.csprp-link-with-icon::before{
    background-color: var(--csprp-pink-950);
}
.csprp-bg-blue-core a.csprp-link-with-icon::before{
    background-color: var(--csprp-blue-950);
}
.csprp-bg-green-core a.csprp-link-with-icon::before{
    background-color: var(--csprp-green-950);
}
.csprp-bg-yellow-core a.csprp-link-with-icon::before{
    background-color: var(--csprp-yellow-950);
}











/* ----------------- WORDPRESS TABLES ----------------- */



.wp-block-table table{
    margin: 0;
    color: var(--csprp-blue-950);
	border: 0;
}


.wp-block-table thead{
	background-color: var(--csprp-blue-100);
	text-align: left;
    border-bottom: 2px solid var(--csprp-grey) !important;
}

.wp-block-table td, 
.wp-block-table th{
    vertical-align: top;
    padding: 0.75rem !important;
    border: 1px solid var(--csprp-grey) !important;
}