/*This file contains CSS rules that define the overall layout such as styles for the positioning of elements on the page
including elements from the layout/layout.html.php*/

/*Desktop-first sets the base and content is adapted to mobile via max-width media queries*/
/*Default styles for common HTML elements (tag name as selectors)*/
body, html {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /*Needed for flash messages sliding in*/
    background: var(--background-color);
    /* Set the base font size on the root/ body so children can inherit it.
       Avoid setting font-size on the universal selector (*) to keep utility
       classes (e.g., Tailwind's text-*) working as expected via inheritance. */
    font-size: 17px;

}

body {
    max-width: 2500px;
    margin: auto;
}

* {
    /*border-box specifies that the borders and padding should be attributed to element's width
    and height and not overflowing to the parent. https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing*/
    box-sizing: border-box;
    font-family: Outfit, SF-Pro-Text, CenturyGothic, Geneva, AppleGothic, sans-serif;
    transition: background-color 250ms, color 250ms, border-color 250ms;
    letter-spacing: 0.3px;
    color: var(--text-color);
}

p, span {
}

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

a:hover:not(a.currently-editable):not(#nav-container a):not(a.btn) {
    text-decoration: underline;
}

h1 {
    font-family: CenturyGothic, Helvetica, sans-serif;
    font-size: 40px;
}

h2, h1, h3, h1 *, h2 *, h3 * {
    color: var(--title-color);
    font-weight: 600;
}

h2 {
    font-size: 2em;
}

h3 {
    font-size: 1.5em;
}

h4 {
    font-size: 1.2em;
}

b {
    /*font-weight: 600;*/
}

#wrapper {
    display: flex;
    flex-direction: column;
    /*Using new dvh unit for dynamic viewport height. svh (small vh) does not work as the footer would not stick
    to the bottom when scrolling the mobile navbar height up, it has to reposition itself to the bottom
    which works with dvh IF the navbar actually disappears on scrolling.
    Previously used a js hack: https://css-tricks.com/the-trick-to-viewport-units-on-mobile*/
    height: 100dvh;
}

main {
    /*Prevent Browser from letting flex items shrink to smaller than their content's default minimum size.*/
    flex: 1 0 auto;
    display: flex;
    overflow: hidden;
}

/*Inside main, next to navbar the main page content e.g. Customer list*/
#page-content {
    width: 100%;
    padding: 1em 2em 2em 2em; /*Not margin, it creates a scrollbar because of wrapper 100vh*/
    /*Max height 100vh minus the height of the header*/
    max-height: calc(100vh - 58px);
    overflow: auto;
    container-type: inline-size;
    container-name: page-content;
}

#page-content.without-header {
    max-height: 100dvh;
    /*max-height: initial;*/
}

.no-style-a, .no-style-a:hover {
    font-weight: normal;
    text-decoration: none !important;
}

/*Headers have have a margin that is too large on mobile*/
main h1 {
    margin-top: 0;
}

footer {
    flex: none;
    /*Prevent Browser from letting these items shrink to smaller than their content's default minimum size.*/
    flex-shrink: 0;
    background: var(--background-accent-2-color);
    padding: 10px;
    text-align: center;
    color: #9b9b9b;
    font-size: 0.9em;
    margin-top: 1em;
    border-radius: 999px 999px 0 0;
}

footer a {
    color: #9B9B9B;
}

footer a:hover {
    color: var(--gray-secondary-text-color);
}

.footer-icon {
    width: 1em;
    vertical-align: middle;
}

#github-icon {
    width: 1.3em;
}

address {
    font-style: normal;
}

.error-div-below-form {
    margin-top: 20px;
}

@media (max-width: 1281px) {
    /*hi-res laptops and desktops*/
}

@media (max-width: 1025px) {
    /*big landscape tablets, laptops, and desktops*/
}

@media (max-width: 961px) {
    /*tablet, landscape iPad, lo-res laptops ands desktops*/
    #page-content {
        padding: 1em 1em 4em 1em; /*Not margin, it creates a scrollbar because of wrapper 100vh*/
    }
}

/*After Ipad mini and down (ipad mini would be 768px*/
@media (max-width: 767px) {
    /*Breakpoint for nav responsive, after ipad mini*/
    h1 {
        font-size: 2.7em;
    }
}

@media (max-width: 641px) {
    /*portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones*/
    #page-content {
        padding: 1em 0.7em 5em 0.7em; /*Not margin, it creates a scrollbar because of wrapper 100vh*/
    }

    header {
        padding-left: 0;
        padding-right: 0;
    }

    h1 {
        font-size: 2.5em;
    }
}

@media (max-width: 400px) {

}