/* -------------------------------------------------------

    U.S. 3i Dental Clinic - application styles
    -----------------------------------------
    Components this application adds on top of the Crafto theme. Loaded after
    the theme and the demo palette and before the right-to-left sheets, so the
    order of overrides stays predictable (see Views/Shared/_Head.cshtml).

    Written for left-to-right. Anything directional is expressed with a
    flow-relative property where one exists, so that it mirrors itself. Where
    none exists - a gradient's angle, for instance - the value is held in a
    custom property, so /css/rtl.css overrides one line instead of restating
    the whole rule.

    Colours come from the palette in /demos/accounting/accounting.css. Values
    repeated from it are noted, because custom properties cannot be fed to
    rgb() channel-wise.

    Table of contents

        01. Image scrim
        02. Hero banner
        03. Page title banner
        04. Language switcher
        05. Booking form card
        06. Services menu
        07. Social links

------------------------------------------------------- */

/* ===================================
    01. Image scrim
====================================== */
/* Light type over a photograph needs the photograph darkened, but a flat tint
   over the whole image dims the subject as much as the backdrop. A scrim does
   it one-sided: near-opaque behind the type, cleared before the far side.

   Every banner on the site uses this one element and sets its own values:

     --scrim-direction  the only genuinely directional value. It is declared on
                        :root so that /css/rtl.css can flip every scrim at once
                        with a single rule.
     --scrim-color      the tint, as rgb channels, because a custom property
                        cannot be fed to rgb() as a whole colour.
     --scrim-clear-at   where the gradient reaches full transparency, which each
                        banner sets from how much of its width the type covers. */
:root {
    --scrim-direction: to right;
    --scrim-color: 30 50 56;             /* --dark-gray, #1e3238, as rgb channels */
    --scrim-clear-at: 72%;
}

.image-scrim {
    position: absolute;
    inset: 0;

    /* Flat tint first: if an engine cannot parse the channel-and-alpha syntax
       below it drops the gradient and keeps this, so the type never ends up on
       the bare photograph. */
    background-color: rgba(30, 50, 56, 0.45);
    background-image: linear-gradient(
        var(--scrim-direction),
        rgb(var(--scrim-color) / 0.88) 0%,
        rgb(var(--scrim-color) / 0.62) 38%,
        rgb(var(--scrim-color) / 0) var(--scrim-clear-at)
    );
}

/* ===================================
    02. Hero banner
====================================== */
/* The home page banner. Its type sits in 7 of 12 columns, growing to 9 as the
   viewport narrows, so the scrim has to cover more of the photograph as it
   does - which is also what keeps the heading off a face at small sizes. */
.hero-banner {
    position: relative;
}

@media (max-width: 1199px) {
    .hero-banner {
        --scrim-clear-at: 92%;
    }
}

@media (max-width: 767px) {
    .hero-banner {
        --scrim-clear-at: 100%;
    }
}

/* ===================================
    03. Page title banner
====================================== */
/* The band every inner page opens with. Three things differ from the hero:

   It is shorter. A bare <section> is padded 110px top and bottom by the theme,
   which on a band carrying two lines of type left it nearly as tall as the home
   banner; these paddings are roughly two thirds of that, and still scale down
   at the theme's own breakpoints.

   It has a colour of its own. The band paints the brand dark as its background,
   so it reads as a designed panel rather than an empty strip whether or not a
   photograph is behind it, and the scrim works the same either way.

   It can carry a watermark - the page's own service icon, say - set at the
   inline end, opposite the type. `inset-inline-end` puts it on the far side in
   both directions, so Arabic needs no counterpart. */
.page-title-banner {
    --scrim-clear-at: 85%;

    position: relative;
    overflow: hidden;
    padding-top: 70px;
    padding-bottom: 70px;
    background-color: var(--dark-gray);
}

.page-title-banner-watermark {
    position: absolute;
    inset-inline-end: 6%;
    top: 50%;
    width: 210px;
    transform: translateY(-50%);
    opacity: 0.22;
    pointer-events: none;
}

@media (max-width: 991px) {
    .page-title-banner {
        --scrim-clear-at: 100%;

        padding-top: 50px;
        padding-bottom: 50px;
    }

    .page-title-banner-watermark {
        width: 150px;
        opacity: 0.16;
    }
}

@media (max-width: 767px) {
    .page-title-banner {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    /* At phone width the type fills the band and the watermark only crowds it. */
    .page-title-banner-watermark {
        display: none;
    }
}

/* ===================================
    04. Language switcher
====================================== */
/* Switching language posts a form, so the control has to be a <button>; these
   rules are what make it read as the plain text link sitting beside it in the
   top bar. Both languages need them, which is why the component lives here and
   only genuinely Arabic-only overrides live in /css/rtl.css.

   Spacing is flow-relative throughout: `margin-inline-start` separates the
   switcher from the address widget that precedes it, and `gap` separates the
   glyph from the label, so neither needs mirroring. */
.language-switcher {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-inline-start: 25px;
}

.language-switcher-form {
    display: inline-block;
    margin: 0;
}

.language-switcher-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    color: var(--dark-gray);
    cursor: pointer;
}

.language-switcher-button:hover,
.language-switcher-button:focus-visible {
    color: var(--base-color);
}

/* A shade larger than the 15px label, so the glyph reads at a glance. It
   inherits the button's colour, including on hover. */
.language-switcher-icon {
    font-size: 17px;
}

/* ===================================
    05. Booking form card
====================================== */
/* accounting.css pulls `.contact-form-style-01` up by 100px so that the form
   floats over the band above it. That works where the form is the first thing in
   its container, as in the theme's own demo; on the booking page a paragraph
   introduces it, so the pull dragged the fields up over that text. The card is
   the element that owns the page's spacing now, so the form sits in normal flow
   inside it.

   Nothing here is directional: the card's padding is even, the columns are
   ordered by the grid, and the image is a background, so Arabic needs no
   counterpart in /css/rtl.css. */
.booking-card .contact-form-style-01 {
    margin-top: 0;
}

/* The control draws its own calendar button, which beside the form's icon made
   two. Hiding it the way the theme hides it for .date-icon would leave only the
   icon clickable, so instead it is kept, made invisible and stretched over the
   whole field: a click anywhere in the field opens the picker, and `inset: 0`
   needs no counterpart in Arabic. Firefox has no such pseudo-element and opens
   its own picker on a click anywhere regardless. */
.booking-date::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

.booking-date::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
}

.booking-date {
    cursor: pointer;
}

/* The photograph fills its column's full height beside the form, and becomes a
   banner above it once the columns stack. `sm-h-250px` gives it that height; the
   minimum keeps it from collapsing between the two, where the column is no
   longer stretched but the small-screen height has not applied yet. */
.booking-card-image {
    min-height: 320px;
}

/* ===================================
    06. Services menu
====================================== */
/* accounting.css sizes the header's services dropdown at 300px. After the 40px
   icon, its 10px gap and 2x30px of padding that leaves 190px for the label, and
   this clinic's service names do not fit: four of the English ones and two of
   the Arabic ones are wider, the widest being 257px at the menu's own 17px. They
   wrapped onto a second line, which made an eight-item menu far taller than it
   needed to be. 370px is that widest label plus the same furniture.

   It is not a language problem, which is why it is here and not in /css/rtl.css -
   English is in fact the worse of the two. Below 992px the menu is part of the
   collapsed navbar, where responsive.css gives it `width: 100% !important`, so
   this applies to the desktop dropdown only. */
@media (min-width: 992px) {
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {
        width: 370px;
    }
}

/* One item is a row of two things: the service's 40px icon and its label.

   The theme lays that row out as a block with the icon inline, so the icon sat
   on the label's baseline and stretched the line box to its own height plus the
   room a descender needs - about 46px of content for 26px of type. On top of
   accounting.css's 20px above and below, every item stood some 86px tall and
   the eight-item menu ran most of the way down the viewport it drops into.

   Flex takes the baseline out of that arithmetic: the row is as tall as the
   icon, `center` balances icon and label against each other whatever either
   measures, and an item's height becomes the icon plus its padding and nothing
   else. That leaves the padding as the only lever, so it comes down to half of
   what it was without the label crowding the divider beneath it.

   Only the two paddings this rule is about are restated. The horizontal pair
   stays with accounting.css, which also zeroes it below 992px, where the menu
   is part of the collapsed navbar rather than a dropdown.

   --services-menu-icon-gap carries the space between icon and label. `gap` is
   flow-relative and mirrors itself, so the property is not here for the side
   the space falls on; it is here for the one thing about that space that is a
   language question, which /css/rtl.css answers in a line. */
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {
    --services-menu-icon-gap: 10px;
}

.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {
    display: flex;
    align-items: center;
    gap: var(--services-menu-icon-gap);
    padding-top: 10px;
    padding-bottom: 10px;
}

/* The icon is a flex item next to the label and keeps the browser's default
   shrink factor, so a long label would squeeze it out of square. Its margin
   goes because the row's gap carries that space now: keeping both would count
   it twice, and the margin is the half of it that has a side to get wrong. */
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a img {
    flex-shrink: 0;
    margin: 0;
}

/* ===================================
    07. Social links
====================================== */
/* The theme spaces these icons with physical margins - `margin: 0 15px 0 0` on
   each one in the footer, with style.css flattening the row's outer edges through
   `li:first-child { margin-left: 0 !important }` and its mirror on the last. Only
   the push menu's copy of that is mirrored in style-rtl.css, so in Arabic the gap
   sat on the wrong side of every icon and the row stood one gap off its edge at
   both ends.

   Laying the row out with flex and a gap replaces all of that arithmetic with one
   value, and `gap` and `flex-start` are flow-relative, so the row sits correctly
   in both directions with nothing in /css/rtl.css. The !important is to beat the
   theme's own, not for want of specificity. */
.clinic-social-links ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The first and last child are named explicitly, not for want of specificity over
   style.css but because style-rtl.css re-adds a margin to the first item - its way
   of mirroring the theme's own margin layout - with the same specificity as a
   plain `li` selector here, and it loads after this file. Naming the pseudo-class
   wins on specificity instead of relying on order. */
.clinic-social-links ul li,
.clinic-social-links ul li:first-child,
.clinic-social-links ul li:last-child {
    margin: 0 !important;
}

/* The contact page's row sits inside a .text-center block, which a flex row
   ignores, so it is centred from that rather than from a flag passed to the
   partial. */
.text-center .clinic-social-links ul {
    justify-content: center;
}