/* ===========================================================================
   The main screen - touch-ups only.

   The screen keeps the look it has had: the blue ground, the sliding row of
   module cards, the diagonal white corner and the hover that lifts the title
   and brings the View button in. None of that is replaced here. This file
   only tidies what was rough, and names the product.

   It loads last, after the card_extension theme, so a rule here wins without
   needing !important. Everything is scoped to this screen's own blocks.

   What it does, and nothing more:

     1. names DairyCare Pro Version, under the heading and again at the foot,
        and puts the farm's own name in the middle of the heading
     2. puts the heading, the farm name, Permissions and View Reports in one
        row that stacks on a phone, instead of two floats that overlapped
     3. rounds and lifts the cards, unmuddies the photographs, and closes
        the gap a two-line title used to leave between its lines
     4. draws the carousel's arrows, and moves them off the cards into a
        gutter of their own
     5. lights one card at a time as the row moves itself along
   ======================================================================== */

/* --- 1 & 2. the heading row -------------------------------------------- */

.section-heading .dc-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    text-align:left;
}
.section-heading .dc-head__name{ min-width:0; }

/* the heading itself is untouched; this only sits under it */
.section-heading .dc-head__tag{
    display:inline-block;
    margin-top:6px;
    padding:3px 10px;
    border:1px solid rgba(255,255,255,.35);
    border-radius:999px;
    background:rgba(255,255,255,.10);
    color:#ffffff;
    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    line-height:1.6;
    white-space:nowrap;
}

/* The farm's own name, in the middle, over the thin blue rule the theme
   already draws there. Set wide and open rather than large: the product name
   on the left is the loud one, and two headings shouting at each other is
   what makes a screen look dated. The hairlines either side are what make it
   read as a title rather than as a stray line of text. */
.section-heading .dc-head__farm{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    flex:1 1 auto;
    min-width:0;
    padding:0 8px;
}
.section-heading .dc-head__farm:before,
.section-heading .dc-head__farm:after{
    content:"";
    flex:0 0 34px;
    height:1px;
    background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55));
}
.section-heading .dc-head__farm:after{ transform:scaleX(-1); }

.section-heading .dc-head__farm-name{
    min-width:0;
    color:#ffffff;
    font-size:21px;
    font-weight:600;
    letter-spacing:.055em;
    line-height:1.35;
    text-transform:uppercase;
    text-align:center;
    text-shadow:0 1px 2px rgba(6,24,44,.28);
}

.section-heading .dc-head__acts{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}
/* the Permissions link kept its own h4 margins from the theme */
.section-heading .dc-head__acts h4{
    margin:0;
    font-size:15px;
    line-height:1;
}
.section-heading .dc-head__acts h4 > a{ text-decoration:none; }
.section-heading .dc-head__acts h4 > a:hover{ text-decoration:underline; }
.section-heading .dc-head__acts .btn{
    border-radius:6px;
    padding:7px 16px;
    font-weight:600;
    letter-spacing:.01em;
}

.dc-foot{
    clear:both;
    margin:4px 0 18px;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.16);
    color:rgba(255,255,255,.78);
    font-size:12px;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    text-align:center;
}

/* --- 3. the cards ------------------------------------------------------ */

/* The card itself is left exactly as it is: the white corner over the top of
   the picture, the blue title, the grey line under it, and the hover that
   lifts them and brings the View button in. It is rounded and lifted off the
   ground, and the words are given room to breathe. Nothing else. */

/* each slide carried a flat grey ground, which drew a grey frame around every
   card on the blue */
.doctors-nav .slick-slide{ background-color:transparent; }

.doctors-nav figure{
    margin:8px;
    border-radius:10px;
    box-shadow:0 2px 4px rgba(6,24,44,.18), 0 12px 24px -12px rgba(6,24,44,.45);
    transition:box-shadow .25s ease, transform .25s ease;
}
.doctors-nav a:hover figure{
    transform:translateY(-3px);
    box-shadow:0 4px 8px rgba(6,24,44,.22), 0 20px 34px -14px rgba(6,24,44,.6);
}

/* The card is 435px tall, but the picture inside it was shown at its own
   proportions, so a card was 418px tall at one width and 471px at the next,
   and at some widths it ran out past its own slot. Same picture, cropped to
   the card it is in, so every card is the same size at every width.

   The picture also sat at 70% over a flat grey, which left every photograph
   looking washed out. It is only the lower half of the card, under the white
   corner, so it can carry its own colour. */
.doctors-nav figure{ height:419px; }
.doctors-nav figure img{
    height:100%;
    object-fit:cover;
    object-position:center 40%;
    opacity:.88;
}

/* a two-line title had about fifty pixels between its lines, which read as
   two separate headings rather than one */
.doctors-nav figcaption h2{
    margin:0 0 4px;
    padding:0 12px;
    font-size:16.5px;
    line-height:1.35;
}
.doctors-nav figcaption p{
    margin:0;
    font-size:14px;
    color:#6d7b88;
}
/* on hover the theme drops a white plate behind the title; it was a bare bar
   across the card, so it gets a little room and the card's own corners */
.doctors-nav a:hover figcaption h2{
    padding:6px 12px;
    border-radius:6px;
}
/* The View button appears in the middle of the card. Once the cover has
   ridden up, that is somewhere in the middle of a photograph, and the theme
   draws the button in white with no ground - which is legible over a dark
   picture and gone over a pale one. It keeps the white the theme gives it
   and gets a ground of its own to sit on, dark enough to read over any of
   the twelve pictures and over the cover on the way past. */
.doctors-nav figure button{
    border-width:2px;
    border-color:rgba(255,255,255,.9);
    border-radius:6px;
    padding:7px 22px;
    background-color:rgba(8,26,45,.42);
    color:#ffffff;
    font-size:12.5px;
    letter-spacing:.08em;
}
.doctors-nav figure button:hover,
.doctors-nav figure button:focus{
    background-color:#37c6f5;
    border-color:#37c6f5;
    color:#ffffff;
}

/* --- 3b. the module badge ------------------------------------------------ */

/* A round badge over each card's title, one line drawing per module
   (partials/module_icon.blade.php), so a card can be found by its picture
   before its name is read. It rides with the title: same resting drop, same
   rise on hover and when the row lights the card by itself.

   Each badge is its module's colour, soft and mid-toned so twelve of them in
   a row read as one set rather than a box of crayons, with a light catch at
   the top left and a shadow in its own colour underneath. */
.doctors-nav .dc-mi{
    --t:#5B8FC7;
    display:flex;
    align-items:center;
    justify-content:center;
    width:54px;
    height:54px;
    margin:4px auto 12px;
    border-radius:50%;
    color:#ffffff;
    background:radial-gradient(circle at 32% 28%,
        color-mix(in srgb, var(--t), #ffffff 30%), var(--t) 70%);
    background-color:var(--t);
    box-shadow:0 7px 16px -7px var(--t), inset 0 1px 0 rgba(255,255,255,.35);
    transform:translateY(50px);
    transition:transform .3s;
}
/* the theme styles every svg in the row as the card's white cover -
   absolute, full size, paths filled white - so the badge's drawing takes
   all of that back */
.doctors-nav .dc-mi .dc-mi__svg{
    position:static;
    display:block;
    width:32px;
    height:32px;
    z-index:auto;
    transform:none;
}
.doctors-nav .dc-mi .dc-mi__svg path{ fill:none; }

.doctors-nav a:hover .dc-mi,
.doctors-nav a.dc-focus .dc-mi{ transform:translateY(0); }

.doctors-nav .dc-mi--health   { --t:#5B8FC7; }
.doctors-nav .dc-mi--milking  { --t:#4E9A7E; }
.doctors-nav .dc-mi--fattening{ --t:#E0A64A; }
.doctors-nav .dc-mi--spu      { --t:#5B6CC2; }
.doctors-nav .dc-mi--opu      { --t:#C9793A; }
.doctors-nav .dc-mi--agri     { --t:#7E9C3C; }
.doctors-nav .dc-mi--feeding  { --t:#3A9A95; }
.doctors-nav .dc-mi--stock    { --t:#9A7A58; }
.doctors-nav .dc-mi--price    { --t:#3E8FB0; }
.doctors-nav .dc-mi--bank     { --t:#6A7F95; }
.doctors-nav .dc-mi--payroll  { --t:#9A6AA0; }
.doctors-nav .dc-mi--admin    { --t:#5E6878; }

/* --- 4. the carousel's arrows ------------------------------------------ */

/* These were the only way to reach the fifth module and beyond, and they were
   invisible: the page painted them its own blue, and the theme points them at
   two icon images that are not in this build. Same buttons, same place, drawn
   so they can be seen and hit. */

.doctors-nav .slick-prev,
.doctors-nav .slick-next{
    width:40px;
    height:48px;
    border-radius:8px;
    background-color:rgba(10,32,54,.42) !important;
    background-image:none !important;
    border:1px solid rgba(255,255,255,.28);
    font-size:0;
    opacity:1;
    z-index:5;
    transition:background-color .2s ease, border-color .2s ease;
}
.doctors-nav .slick-prev:hover,
.doctors-nav .slick-next:hover,
.doctors-nav .slick-prev:focus,
.doctors-nav .slick-next:focus{
    background-color:rgba(10,32,54,.62) !important;
    border-color:rgba(255,255,255,.5);
}
/* the chevron itself: two borders of a square, turned */
.doctors-nav .slick-prev:before,
.doctors-nav .slick-next:before{
    content:"";
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    width:10px;
    height:10px;
    border-top:2px solid #ffffff;
    border-right:2px solid #ffffff;
    opacity:1;
}
.doctors-nav .slick-next:before{ transform:translate(-65%,-50%) rotate(45deg); }
.doctors-nav .slick-prev:before{ transform:translate(-35%,-50%) rotate(-135deg); }

/* ...and they sat on top of the first and last card. They move out into the
   margin the page already has either side of the cards. The cards keep every
   pixel of their own width: nothing here touches the row.

   The arithmetic, once, because the theme makes it look odd. The carousel's
   own list is pulled 35px left of its box (`.doctors-nav{margin-left:-35px}`,
   which cancels the 35px gutter every slide carries), and the arrows are
   positioned against that list. So in arrow coordinates the page's content
   column begins at `35px` and ends at `0` from the right, and an arrow of
   `--aw` clearing it by `--ag` wants `35px - --ag - --aw` on the left and
   `-1 * (--aw + --ag)` on the right.

   The `max()` is what keeps that honest on a narrow screen. Below about
   1270px the page has no margin left to give, and an arrow placed out there
   would be off the side of the screen - so the second term is where the
   viewport's own edge falls, in these same coordinates, and whichever of the
   two is further in wins. `100%` is the list's width and `100vw` the page's;
   the 5px is the list's overhang past the container's border box. On a wide
   screen the arrows stand clear of the cards; on a narrow one they come back
   over the edge of a card rather than off the screen. */
.doctors-nav .slick-prev,
.doctors-nav .slick-next{
    --aw:40px;
    --ag:12px;
}
.doctors-nav .slick-prev{
    left:max(calc(35px - var(--ag) - var(--aw)),
             calc((100% - 100vw - 5px) / 2 + 24px));
}
.doctors-nav .slick-next{
    right:max(calc(-1 * (var(--aw) + var(--ag))),
              calc((100% - 100vw - 5px) / 2 - 11px));
}

/* nothing should be able to push this screen sideways on a phone */
#meetDoctors{ overflow-x:hidden; }

/* --- 5. the row that moves itself ------------------------------------- */

/* `main-screen.js` lights one card at a time, left to right, and moves the
   row on when the last one on screen has had its turn. A lit card is a
   hovered card and nothing else, so every rule here is the theme's own
   `a:hover` rule, and the two above, said again for the class the script
   adds. Nothing new is invented; the animation is the one the cards have
   always had, played by itself. */

.doctors-nav a.dc-focus figure{
    transform:translateY(-3px);
    box-shadow:0 4px 8px rgba(6,24,44,.22), 0 20px 34px -14px rgba(6,24,44,.6);
}
.doctors-nav a.dc-focus figure img{ opacity:1; }
.doctors-nav a.dc-focus figcaption h2,
.doctors-nav a.dc-focus figcaption p{ transform:translateY(0); }
.doctors-nav a.dc-focus figcaption h2{
    background-color:#ffffff;
    margin:0;
    padding:6px 12px;
    border-radius:6px;
}
.doctors-nav a.dc-focus figcaption p{ opacity:0; }

/* The white cover rides up with the rest of it.

   The theme always meant it to: every card carries a `data-path-hover` with
   the shape the cover should take while hovered, a thin band across the top.
   The script that was supposed to draw it reads a `data-path-to` that no
   card has, so in twelve years of this template the cover has never moved.
   Rather than revive a snap.svg animation that would be bound once, before
   the carousel clones its slides, the cover slides up on a plain transform -
   which the hover and the lit card both get, and which costs nothing.

   Only the top of that shape is painted, so sliding it up uncovers the
   picture and leaves a diagonal sliver at the head of the card. The title
   travels up into it and carries its own white plate, which is what keeps it
   readable once the picture is behind it. */
.doctors-nav figure > svg{
    transition:transform .35s ease;
}
.doctors-nav a:hover figure > svg,
.doctors-nav a.dc-focus figure > svg{
    transform:translateY(-46%);
}

.doctors-nav a.dc-focus figure button{
    opacity:1;
    transform:translateY(-50%) translateX(-50%) scale(1);
}

/* --- phones ------------------------------------------------------------ */

/* --- narrower screens --------------------------------------------------- */

/* Three things will not sit side by side much under a thousand pixels, so
   the row becomes three lines. The farm name gets the whole width to itself
   there, which is the one place it can be as wide as it likes. */
@media (max-width:991px){
    .section-heading .dc-head{
        align-items:stretch;
        flex-direction:column;
        gap:12px;
    }
    .section-heading .dc-head__farm{ padding:2px 0 0; }
    .section-heading .dc-head__farm-name{ font-size:18px; }
    .section-heading .dc-head__farm:before,
    .section-heading .dc-head__farm:after{ flex-basis:26px; }
    .section-heading .dc-head__acts{ width:100%; }

    .doctors-nav .slick-prev,
    .doctors-nav .slick-next{ --aw:34px; --ag:10px; width:34px; height:44px; }
}

@media (max-width:767px){
    .section-heading .dc-head__farm-name{ font-size:17px; }
    /* a long name wraps here, and a wrapped name fills its line, which leaves
       the two rules stranded at the edges of the screen */
    .section-heading .dc-head__farm:before,
    .section-heading .dc-head__farm:after{ display:none; }

    .doctors-nav figure{ margin:6px; height:405px; }
    .doctors-nav figcaption h2{ font-size:15.5px; }
}

/* One card at a time below here (the carousel's own breakpoint), so the 35px
   gutter each slide carries has nothing to separate - it only pushes the card
   off its own track. Taking it back, and the list's matching pull, lets the
   single card sit square in the page. */
@media (max-width:619px){
    .doctors-nav{ margin-left:0; }
    .doctors-nav .slick-slide{ margin-left:0; }

    .doctors-nav .slick-prev,
    .doctors-nav .slick-next{ --aw:30px; --ag:8px; width:30px; height:42px; }

    /* the list no longer overhangs its box here (its 35px pull is taken back
       just above), so the content column begins at 0 and the page's edge sits
       a plain half-difference away */
    .doctors-nav .slick-prev{
        left:max(calc(-1 * (var(--aw) + var(--ag))),
                 calc((100% - 100vw) / 2 + 4px));
    }
    .doctors-nav .slick-next{
        right:max(calc(-1 * (var(--aw) + var(--ag))),
                  calc((100% - 100vw) / 2 + 4px));
    }

    /* one card with a whole tablet to fill would be 500px wide and 405
       tall, which is not the card this screen draws; it keeps its own
       proportions and sits in the middle */
    .doctors-nav figure{
        width:calc(100% - 12px);
        max-width:360px;
        margin-left:auto;
        margin-right:auto;
    }
}

@media (max-width:359px){
    .section-heading .dc-head__tag{ letter-spacing:.08em; font-size:10.5px; }
    .section-heading .dc-head__farm-name{ font-size:15.5px; letter-spacing:.04em; }
    .doctors-nav figure{ height:380px; }
}