/*
 * Base stylesheet for PB Boilerplate theme
 * Loaded everywhere (frontend + admin)
 * Contains safe styles that won't break WordPress admin UI
 * The Publishing Bureau
 */
:root {
    --font-family--default: sans-serif;
    --font-family--heading: serif;

    --font-weight--thin: 100;
    --font-weight--extra-light: 200;
    --font-weight--light: 300;
    --font-weight--regular: 400;
    --font-weight--medium: 500;
    --font-weight--semi-bold: 600;
    --font-weight--bold: 700;
    --font-weight--black: 900;

    --font-size--h1: 30px;
    --font-size--h2: 26px;
    --font-size--h3: 24px;
    --font-size--h4: 22px;
    --font-size--h5: 20px;
    --font-size--h6: 18px;

    --background-colour--body: var(--wp--preset--color--white);
    --colour--text: var(--wp--preset--color--black);
    --wp--preset--color--link: var(--wp--preset--color--orange);

    /* Header */
    --header--background-colour: var(--wp--preset--color--white);
    --header--bottom-border--width: 2px;
    --header--bottom-border: var(--header--bottom-border--width) solid var(--wp--preset--color--orange);
    --header--height: 100px;
    
    /* Navbar */
    --navbar--item--colour: var(--wp--preset--color--black);
    --navbar--item--font-family: var(--font-family--default);
    --navbar--dropdown--menu--border--colour: var(--wp--preset--color--orange);
    --navbar--dropdown--menu--border--width: var(--header--bottom-border--width);
    --navbar--dropdown-item--colour: var(--navbar--item--colour);

    /* Footer */
    --footer--background-colour: var(--wp--preset--color--black);;
    --footer--colour: var(--wp--preset--color--white);
    --footer--link--colour: var(--wp--preset--color--white);;
}

/* ========================================
   CSS RESET
======================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    line-height: var(--wp--custom--typography--line-height);
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

/* ========================================
   BASE TYPOGRAPHY
======================================== */
body {
    font-family: var(--font-family--default);
    font-size: var(--wp--preset--font-size--medium);
    line-height: var(--wp--custom--typography--line-height);
}

::selection {
    background-color: var(--wp--custom--color--selection);
    color: var(--wp--preset--color--white);
}

a {
    color: var(--wp--preset--color--link);
    text-decoration: none;
}

a:hover {
    color: var(--wp--preset--color--link);
    text-decoration: none;
}

h1 {
    font-size: var(--font-size--h1);
}

h2 {
    font-size: var(--font-size--h2);
}

h3 {
    font-size: var(--font-size--h3);
}

h4 {
    font-size: var(--font-size--h4);
}

h5 {
    font-size: var(--font-size--h5);
}

h6 {
    font-size: var(--font-size--h6);
}

/* ========================================
   WORDPRESS CORE STYLES
======================================== */
.is-layout-constrained {
    margin-right: auto;
    margin-left: auto;
    padding-right: calc(1.5rem * .5);
    padding-left: calc(1.5rem * .5);
}
.is-layout-constrained .is-layout-constrained {
    padding: initial;
}

/* WordPress color classes */
.has-dark-background-color {
    color: var(--wp--preset--color--white);
}
.has-light-background-color {
    color: var(--background-colour--body);
}

/* WordPress block fixes */
.wp-block-quote,
.wp-block-quote *,
.has-dark-background-color table tbody,
.has-dark-background-color table tbody * {
    color: var(--background-colour--body) !important;
}
.has-dark-background-color .wp-block-quote {
    border-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--white) !important;
}

/* Responsive video embeds */
.video-wrapper > .wp-block-embed__wrapper {
    position: relative;
    margin-top: 45px;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.video-wrapper > .wp-block-embed__wrapper > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ========================================
   SITE SPECIFIC STYLES
======================================== */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .is-layout-constrained {
        max-width: 720px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .is-layout-constrained {
        max-width: 960px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    :root {
        --font-size--h1: 52px;
        --font-size--h2: 42px;
        --font-size--h3: 38px;
        --font-size--h4: 32px;
        --font-size--h5: 24px;
        --font-size--h6: 18px;
    }
    .is-layout-constrained {
        max-width: 1140px;
    }
    
}

/* Extra xl large devices (large desktops, 1400px and up) */
@media (min-width: 1400px) {
}

/* Publishing Bureau xxl large devices (large desktops, 1600px and up) */
@media (min-width: 1600px) {

}