/*
    The SiltFence calculator stylesheet, from the WordPress site, unchanged
    except for the nesting wrapper around it.

    WHY IT IS NESTED RATHER THAN PREFIXED BY HAND. Every selector in here is a
    bare class or element name — `.calculator`, `.inputs`, `p`, `h1, h2, h3, h4,
    h5` — so unscoped they would reach the whole site. Nesting the file under
    `.calc-silt-fence` scopes all of it at once, including the rules inside the
    media queries, with no selector rewritten and nothing to get wrong. Native
    CSS nesting, because this file is served straight from `public/` and never
    meets a build step.

    WHY IT IS NOT IN A LAYER. Unlayered beats layered whatever the specificity,
    which is how these rules win over Tailwind preflight and this theme's own
    `@layer base` without an `!important` anywhere. See
    `resources/css/08-calculators.css`.

    ONE RULE GOES INERT AND SHOULD. `body` below becomes `.calc-silt-fence body`,
    which matches nothing. That is the right outcome: the page owns its own
    margins and its own font now.
*/
.calc-silt-fence {
    body {
        margin: 0 auto;
        font-family: var(--default-font-family), sans-serif; /* was open-sans */
    }
    
    p {
        font-weight: 400;
        font-size: 15px;
        line-height: 1.8;
        font-style: normal;
    }
    
    h1, h2, h3, h4, h5 {
        font-family: var(--font-heading), sans-serif; /* was serifa */
        font-weight: 700;
        font-style: normal;
        text-transform: uppercase;
        font-size: 1.333em;
        line-height: 1.4em;
        color: #515151;
    }
    
    span {
        font-size: 12px;
        margin: 0;
        color: #888;
    }
    
    a {
        text-decoration: none;
        color: #222;
    }
    
    label {
        position: relative;
        display: block;
        font-weight: 600;
        font-size: 14px;
        margin-bottom: 10px;
    }
    
    input {
        position: relative;
        display: block;
        background: #f4f4f4;
        border: none;
        border-radius: 2px;
        height: 40px;
        width: 200px;
        font-size: 16px;
        text-indent: 10px;
        outline: none;
    }
    
    button {
        position: relative;
        display: inline-block;
        width: 180px;
        background: transparent;
        color: var(--color-tasman);
        border: solid 1px var(--color-tasman);
        border-radius: 2px;
        font-size: 12px;
        font-weight: 400;
        height: 40px;
        cursor: pointer;
        opacity: 1;
        transition: 0.2s;
        outline: none;
    }
    
    button:hover {
        background: var(--color-tasman);
        color: #fff;
    }
    
    .order-btn {
        position: relative;
        display: inline-block;
        border: solid 1px var(--color-tasman);
        color: var(--color-tasman);
        margin-right: 10px;
        height: 35px;
        width: 150px;
    }
    
    @media screen and (max-width: 1000px) {
        .order-btn {
            margin-bottom: 12px;
            width: 100%;
            height: 40px;
        }
        .press-enter {
            display: none;
        }
    }
    
    select {
        position: relative;
        display: block;
        background: #f4f4f4;
        border: none;
        border-radius: 2px;
        height: 40px;
        width: 190px;
        font-size: 14px;
        outline: none;
        text-indent: 10px;
    }
    
    /****** Custom Styles ******/
    
    /* Was `width: 1300px; margin: 50px auto`. The block now sits in the site's
       content column, so a fixed width left it 44px narrower than its
       neighbours and off-centre, and the 50px margin stacked on top of the
       band's own padding tier. Both belong to the page now, not to this file. */
    .calculator {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: top;
        width: 100%;
        margin: 0 auto;
        /* `margin: auto` cannot centre this on its own: the element already
           fills the content column, and the 144px of slack at 1440 is inside
           it — `.inputs` is 500 and `.outputs` is 700, so the pair total 1200
           and sat hard against the left edge. Centring the flex line is what
           actually balances them. */
        justify-content: center;
    }
    
    .inputs {
        position: inherit;
        display: inline-block;
        width: 500px;
        padding: 40px;
    }
    
    .outputs {
        position: inherit;
        display: inline-block;
        width: 700px;
        padding: 40px;
    }
    
    .header {
        height: 40px;
    }
    
    @media screen and (max-width: 1000px) {
        .header {
            height: 100%;
            padding: 0 !important;
        }
    }
    
    .col-full {
        position: relative;
        display: block;
        width: 100%;
        margin: 20px 0;
    }
    
    .col-half {
        position: relative;
        display: inline-block;
        width: 49%;
        margin: 20px 0;
        margin-top: 0;
    }
    
    .row {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: center;
        background: #fff;
        border-bottom: solid 1px #eee;
        transition: 0.2s;
    }
    
    .row:hover {
        background: linear-gradient(to left, #ffff, #f7f7f7, #fff);
        z-index: 999;
    }
    
    .product-img {
        margin-right: 30px;
        margin-left: 10px;
    }
    
    .product-img img {
        position: relative;
        display: block;
        width: 40px;
    }
    
    .product-name {
        width: 250px;
    }
    
    .product-name p {
        font-weight: 700;
        text-transform: uppercase;
        margin: 0;
        line-height: 1;
    }
    
    @media screen and (max-width: 1000px) {
        .product-name {
            max-width: 170px;
            word-break: break-word;
        }
    }
    
    .product-qty {
        width: 100px;
    }
    
    .product-qty p {
        display: inline-block;
        font-weight: 700;
        font-size: 18px;
        text-transform: uppercase;
    }
    
    .product-unit {
        width: 100px;
    }
    
    @media screen and (max-width: 1000px) {
        .product-unit p {
            font-size: 12px;
        }
    }
    
    .info-icon {
        text-align: right;
        display: inline-block;
        margin-right: 10px;
    }
    
    .dropdown {
        position: relative;
        display: block;
        background: #f4f4f4;
        border: none;
        height: 40px;
        width: 200px;
        border-radius: 2px;
    }
    
    .icon {
        color: #ccc;
        opacity: 1;
        cursor: pointer;
        outline: none;
        transition: 0.2s;
    }
    
    .icon:hover {
        color: var(--color-tasman);
    }
    
    /* Tooltips */
    
    .tooltip .tooltip-text {
        position: absolute;
        display: inline-block;
        background: #333;
        color: #fff;
        padding: 10px 20px;
        font-size: 0.8em;
        border-radius: 2px;
        left: 390px;
        top: 15px;
        opacity: 0;
        transform: translateX(-10px);
        visibility: hidden;
        transition: 0.1s ease-out;
        cursor: default;
        text-align: left;
        z-index: 999;
    }
    
    .tooltip-text::before {
        content: "";
        position: absolute;
        border: solid 8px transparent;
        border-right: solid 8px #333;
        left: -15px;
        top: 12px;
    }
    
    .tooltip:hover .tooltip-text {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
    }
    
    .tooltip-result {
        top: -6px!important;
    }
    
    .exchange {
        position: relative;
        display: block;
        padding: 10px;
        transition: .3s;
        cursor: pointer;
    }
    
    .exchange:hover {
        color: var(--color-tasman);
        transform: rotateX(180deg);
    }
    
    @media screen and (max-width: 1000px) {
        .exchange {
            position: absolute;
            right: 101px;
            font-size: 20px;
        }
    }
    
    /* Mobile Optimisation */
    
    @media screen and (max-width: 1000px) {
    
        input {
            width: 100%;
        }
    
        select {
            width: 100%;
        }
    
        button {
            width: 100%;
        }
    
        .dropdown {
            width: 100%;
        }
    
        /* Was `margin: 5%; width: 90%`, which inset the calculator from the
           content column it now lives in and left it narrower than every block
           above and below it. The column already provides the gutter. */
        .calculator {
            position: relative;
            display: block;
            margin: 0;
            padding: 0;
            width: 100%;
            overflow: hidden;
        }
    
        .inputs {
            display: block;
            padding: 0;
            width: 100%;
        }
    
        .outputs {
            display: block;
            padding: 0;
            width: 100%;
        }
    
        .col-half {
            display: block;
            width: 100%;
        }
    
        .tooltip .tooltip-text {
            left: 280px;
        }
    
        .product-img {
            margin-right: 20px;
        }
    }
}