/***
References used to create this: https://cssguidelin.es/ and https://css-tricks.com/css-style-guides/
The Dashboard design comes from a template called "Tabler"
Stylesheet Table Of Contents
    1. Sitewide
    2. Cookie Banner Styling
    3. Header Area
    4. Content Area
    5. Checkbox List Style
    6. Table Style
    7. Modal Style
    8. Footer Area
    9. Mobile Friendly Queries
***/

/*** Sitewide ***/
* {
    box-sizing: border-box;
}

html {
    --brand-pink: #ABA643;
    --brand-grey: #f3f3f3;
    --brand-dark: #212738;
    --brand-black: #000000;
    --default-animation-speed: 0.25s;
    font-size: 100%;
    scroll-behavior: smooth;
    --size-xxs: 0.25rem;
    --size-xs: 0.5rem;
    --size-sm: 0.75rem;
    --size-smd: 1rem;
    --size-md: 1.25rem;
    --size-mdml: 1.5rem;
    --size-mdlg: 1.75rem;
    --size-lg: 2rem;
    --size-xl: 3rem;
    --size-xxl: 4rem;
    --size-xxxl: 5rem;
}

body {
    font-family: 'Roboto Mono', monospace;
    font-size: 1rem;
    background: #fff;
    color: var(--brand-dark);
    margin: 0;
    word-break: break-word;
}

h1 {
    font-family: 'Mulish', sans-serif;
    font-size: 2.5rem
}

h2, h3, h4, h5, h6 {
    font-family: 'Mulish', sans-serif;
    font-size: 1.5rem;
    margin: 2rem 0 1rem 0;
    font-weight: 600;
    letter-spacing: -1px;
}

p {
    font-size: 1rem;
    line-height: 1.25;
    margin: 1rem 0;
}

img { 
	border: none;
	width: auto;
	max-width: 100%;
	height: auto;
}

ul {
    list-style-type: square;
    margin: 1rem 0 1rem 1rem;
    margin-inline-start: 1rem;
    padding-inline-start: 1.1rem;
}

ol {
    margin: 1rem 0 1rem 1rem;
    margin-inline-start: 1rem;
    padding-inline-start: 1.1rem;
}

.text-primary {
    color: var(--brand-pink) !important;
}

.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

/*** Cookie Banner Styling ***/
.cli_messagebar_head {
    font-size: 1.5rem;
    margin-top: 0;
}

.cli-plugin-button {
    border-radius: 3px;
    margin-top: 1rem;
    text-decoration: none !important;
}

#cookie-law-info-bar {
    padding: 2.5rem !important;
}

#cookie-law-info-again {
    box-shadow: none !important;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    border: 1px solid #d8d8d8;
}

.cli_settings_button {
    text-decoration: none;
}

.cli-tab-footer .wt-cli-privacy-accept-btn {
    background-color: var(--brand-pink) !important;
}

.cli-switch input:checked + .cli-slider {
    background-color: var(--brand-pink) !important;
}

/*** Header Area ***/
.header-styling {
    position: relative;
    z-index: 1;
    background: #42ab92;
    color: #fff;
    overflow: hidden;
    height: 10rem;
    display: flex;
    justify-content: center;  /* horizontal centre */
    align-items: center;      /* vertical centre */
}

.header-styling::before {
    content: "";
    position: absolute;
    background-image: url('https://satch.co.uk/images/bg-doodles-on-desktop.webp');
    background-size: auto;
    background-repeat: repeat;
    background-position: top left;
    opacity: 0.1;
    z-index: -1;
    left: -25%;
    width: 125%;
    height: 100%;
}

nav {
    text-align: center;
    margin: 0 auto;
}

nav a {
    transition: color var(--default-animation-speed) ease-in-out;
}

.nav-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.nav-container a {
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    font-size: 0.875rem;
}

.nav-container a:hover{
    text-decoration: underline;
}

.nav-container .checkbox {
    position: absolute;
    display: block;
    height: 42px;
    width: 42px;
    top: 30px;
    right: 15%;
    z-index: 4;
    opacity: 0;
    cursor: pointer;
}

.top-nav {
    font-size: 0.9rem;
    margin: 2rem 0;
}

.header-desktop-layout {
    display: grid;
    grid-template-columns: auto auto;
    gap: 12px;
    width: fit-content;
    margin: 0 auto;
    align-items: center;
}

.profile-image-photo-effect {
    padding: 0.5rem 0.5rem 0.75rem 0.5rem;
    background: #fff;
    width: fit-content;
    margin: 0 auto;
    box-shadow: 1px 8px 19px -6px rgb(49 107 83 / 78%);
    border-radius: 0.25rem;
}

.header-column-2 {
    display: grid;
    align-content: center;
}

.header-column-2-row-2 {
    align-self: unset;
}

.header-column-2-row-3 {
    display: flex;
    align-items: flex-end;
    margin: 0;
}

a.header-link {
  text-decoration: none;
  position: relative; /* Required for positioning the ::after pseudo-element */
  color: #ffffff;
}

a.header-link:hover {
  text-decoration: none;
}

a.header-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px; /* Adjust the thickness of the underline as needed */
  background-color: #ffffff;
  bottom: -2px; /* Positions the underline just below the text */
  left: 50%;
  transition: width 0.3s ease, left 0.3s ease; /* Adds the animation */
}

a.header-link:hover::after {
  width: 100%; /* Expands the underline to full width */
  left: 0; /* Moves the underline to the start */
}

.nav-item {
    flex-grow: 1;
    /* border-right: 1px solid #ccc; old border */
    padding: 1rem 0;
    width: 33.3%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-item-desktop {
    flex-grow: 1;
    /* border-right: 1px solid #ccc; old border */
    /* padding: 1rem 0; */
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-item-desktop-last {
    flex-grow: 1;
    border-right: 0px;
    padding: 1rem 0;
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

a.nav-link {
    text-decoration: none;
    position: relative; /* Required for positioning the ::after pseudo-element */
    /* color: #4988b8; (old color) */
    color: #525252;
    font-weight: 600;
    font-size: 0.9rem;
}

a.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px; /* Adjust the thickness of the underline as needed */
  background-color: var(--brand-pink);
  bottom: -2px; /* Positions the underline just below the text */
  left: 50%;
  transition: width 0.3s ease, left 0.3s ease; /* Adds the animation */
}

a.nav-link:hover::after {
  width: 100%; /* Expands the underline to full width */
  left: 0; /* Moves the underline to the start */
}

.logo {
    text-align: left;
    padding-bottom: 0;
}

.logo a {
    font-family: 'Roboto Mono', monospace;
    text-decoration: none;
    color: #fff !important;
    font-weight: 400 !important;
    font-size: 3rem !important;
    letter-spacing: 1px;
    line-height: 3rem;
}

.logo a:hover {
    text-decoration: none;
}

/*** Content Area ***/
main {
    margin-top: 2.5rem;
}

.main-content {
    display: grid;
    width: 90%;
    max-width: 880px;
    margin: 0 auto 1rem auto;
    overflow-wrap: break-word;
}

.main-content a {
    color: var(--brand-pink);
    text-decoration: underline;
    text-decoration-color: var(--brand-pink);
}

.main-content a:hover {
    text-decoration: none;
}

.main-content a:visited {
    color: var(--brand-pink);
    text-decoration: underline;
    text-decoration-color: var(--brand-pink);
}

.fifty-fifty-grid {
    display: grid;
    grid-template-columns: 50% 50%;
    margin-bottom: 0rem;
}

.emoji-above-title {
    font-size: 2rem;
    float: right;
}

.tag-next-to-emoji {
    display: flex;
    justify-content: left;
    align-items: end;
    height: 100%;    
}

.heading {
    margin: 0;
    font-weight: 400;
    line-height: 2.5rem;
    color: var(--brand-dark) !important;
    letter-spacing: -1px;
}

.heading a {
    text-decoration: none;
    background: 0;
    color: var(--brand-dark) !important;
}

.subheading {
    line-height: 1.2rem;
    font-weight: 600;
    margin-top: 0.2rem;
    letter-spacing: -1px;
}

.the-content {
    margin-top: 1.5rem;
}

.custom-column {
    border: 1px solid rgba(101, 109, 119, 0.16); padding: 1rem; border-radius: 3px; height: 100%;
}

.button-black {
    padding: 10px 12px;
    border-radius: 0px;
    font-size: 1rem;
    border: 1px solid transparent;
    color: #fff !important;
    text-decoration: none !important;
    background: #000;
    display: block;
    width: fit-content;
}

.button-pink {
    padding: 10px 12px;
    border-radius: 0px;
    font-size: 1rem;
    border: 1px solid transparent;
    color: #fff !important;
    text-decoration: none !important;
    background: var(--brand-pink);
    display: block;
    width: fit-content;
}

.button-copy-code {
    padding: 10px 12px;
    margin-bottom: -1rem;
    border-radius: 0px;
    font-size: 1rem;
    border: 1px solid transparent;
    color: #fff !important;
    text-decoration: none !important;
    background: var(--brand-pink);
    display: block;
    width: fit-content;
}

pre {
    margin: 0;
}

.wp-block-image {
    padding: 1rem;
    background: #f3f3f3;
}

.wp-element-caption {
    margin: 1rem 0 0 0;
    font-weight: 600;
    font-size: 0.9rem;
}

.aligncenter {
    margin: 0 auto;
    text-align: center;
}

.featured-content-grey {
    background-color: var(--brand-grey);
    padding: 1rem;
}

.h2-without-margin {
    margin: 0;
}

.category-links {
    text-align: left;
    margin-top: 3rem
}

.category-button {
    padding: 0px;
    font-size: 0.9rem;
}

.category-button a {
    color: var(--brand-pink) !important;
    text-decoration: none;
}

.tags-area {
    margin: 48px 0 0 0;
}

.tag-style {
    border: 0;
    padding: 6px 10px;
    background: #0dc789;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 400
}

.grid-autofill {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.grid-two-four {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    text-align: center;
    max-width: 100%;
    margin: 0 auto;
}

@media (max-width: 415px) {
  .grid-two-four {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    max-width: 100%;
  }
}

.two-four-constituent {
    background: #f3f3f3;
    padding: 2rem;
}

.two-four-titles {
    font-weight: 600;
    margin: 0;
    font-size: 1.1rem;
    letter-spacing: -1px;
}

.purple-symbols {
    /* color: #a590cf; old old color */
    /* color: #ABA643;  old color */
    color: #42ab92;
    font-size: 2.5rem !important;
    margin-bottom: 0.75rem;
}

code {
    display: block !important;
    width: 100%;
    padding: 2rem;
    background: var(--brand-grey);
}

.creation-display {
    border: 1px solid #e8e8e8;
    padding: 1rem 1rem 0 1rem;
    border-radius: 0.25rem;
}

.creation-display a {
    font-weight: 700;
    background-image: none; 
    color: var(--brand-pink);
    letter-spacing: -1px;
}

/*** Checkbox List Style ***/
.lovely-checklist {
    list-style-type: none;
    margin-left: 10px;
    margin-inline-start: 0;
    padding-inline-start: 1rem;
    width: 100%;
    padding: 2rem;
    border-radius: 3px;
    background: var(--brand-grey);
    position: relative;
  
}

.lovely-checklist input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    background-color: white;
    border: 1px solid #afafaf;
    padding: 3.4px 2px;
    border-radius: 2px;
    width: 19px;
    height: 19px;
    transition: background-color 0.65s;
    position: relative;
    top: 1px;
}

.lovely-checklist input[type="checkbox"]:checked {
    background-color: #0dc789;
    border: 0px
}

.lovely-checklist input[type="checkbox"]:checked + div {
    text-decoration: line-through;
    color: #afafaf;
}

.lovely-checklist input[type="checkbox"]:checked::before {
    content: "\e5ca";
    font-family: "Material Icons";
    font-size: 0.9rem;
    font-weight: 700;
    color: white;
    position: relative;  
    top: -2px;
    left: 0px;
    transform: translate(-50%, -50%)
}

/*** Table Style - Based on https://codepen.io/alico/pen/bpLgOL?editors=1100 ***/
.table-style {
    border-collapse: collapse;
    background: white;
    border-radius: 3px;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    position: relative;
    font-size: 1rem;
}

.table-style * {
    position: relative;
}

.table-style td, table th {
    padding-left: 8px;
}

.table-style thead tr {
    height: 60px;
    background: var(--brand-grey);
    font-size: 1rem;
}

.table-style tbody {
    background: #ffffff
}

.table-style tbody tr {
    height: 48px;
    border-bottom: 1px solid #ebebeb;
}

.table-style tbody tr:last-child {
    border: 0;
}

.table-style td, table th {
    text-align: left;
}

.table-style td.l, table th.l {
    text-align: right;
}

.table-style td.c, table th.c {
    text-align: center;
}

.table-style td.r, table th.r {
    text-align: center;
}

/*** Modal Style ***/
.modal {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: left;
    background: var(--brand-grey);
    transition: opacity var(--default-animation-speed) ease;
}

.modal__bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    cursor: pointer;
}

.modal-state {
    display: none;
}

.modal-state:checked + .modal {
    opacity: 1;
    visibility: visible;
    z-index: 3;
}

.modal-state:checked + .modal .modal__inner {
    top: 0;
}

.modal__inner {
    transition: top var(--default-animation-speed) ease;
    position: absolute;
    top: -20%;
    right: 0;
    bottom: 0;
    left: 0;
    width: 70%;
    margin: auto;
    overflow: auto;
    background: #fff;
    border-radius: 3px;
    padding: 2rem;
    height: 80%;
}

.modal__close {
    position: absolute;
    right: 1rem;
    top: 1rem;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.modal__close:after,
.modal__close:before {
    content: "";
    position: absolute;
    width: 2px;
    height: 2rem;
    background: #000;
    display: block;
    transform: rotate(45deg);
    left: 50%;
    margin: 14px 0 0 -22px;
    top: 0;
}

.modal__close:hover:after,
.modal__close:hover:before {
    background: #aaa;
}

.modal__close:before {
    transform: rotate(-45deg);
}

.modal-btn {
    cursor: pointer;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--brand-pink);
}

.modal__inner h2 {
    margin-top: 0;
    max-width: 90%;
}

@media screen and (max-width: 768px) {
  .modal__inner {
    width: 90%;
    height: 90%;
    box-sizing: border-box;
  }
}

/*** Footer Area ***/
.footer-design {
    margin-top: 3rem;
    text-align: center;
}

.footer-design a {
    text-decoration: none;
    color: var(--brand-pink) !important;
}

/*** Mobile Friendly Queries ***/
@media screen and (max-width: 550px) {
    .desktop-only {
        display: none;
    }
    .mobile-only {
        display: block;
    }
    .header-styling::before {
        background-image: url('https://satch.co.uk/images/bg-doodles-for-mobile-device.png');
    }
    .checklistul {
        margin-inline-start: 0rem;
        min-width: 100%;
    }
    .table-style {
        font-size: 0.9rem;
    }
    .logo {
        text-align: center;
        padding-bottom: 3rem;
    }
    .logo a {
        letter-spacing: 0rem;
    }
    .profile-image-photo-effect {
        margin: 1rem auto 0.25rem auto;
    }
    .header-styling {
        height: 18rem;
    }
    .emoji-above-title {
        font-size: 1.5rem;
        float: right;
    }
}