/* The Flying  Dutchman
   index.css
   Version 2.0 (October 2026): full visual redesign, accessibility and polish by Hassan Odimi.
   Version 1.0: created by 'Pirates of the Caribbean' on 20 February 2018.
*/


/*Style Sheet for the login page*/
#user_name,#password{
    display: block;
    margin: 0.83em 0;
    font-size: var(--text-md);
    font-weight: var(--weight-heading);
    text-align: center;
    color: var(--ink-on-dark);
    cursor: default;
}
/* V9: the logo is a toggle button. The pirate flag dropped on it, or a press, crossfades the aged logo
   (gentex11, Paper 328) to Eilshemius' ghost ship (1908), feathered into the storm */
#summon {
    display: block;
    position: relative;
    width: 40%;
    margin: 0 29% 0 31%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
#summon img {
    display: block;
    transition: opacity var(--lift-out) var(--toast-ease), visibility 0s;
}
#piratePic { width: 100%; filter: drop-shadow(0 2px 2px var(--shadow-lift)) drop-shadow(0 0 10px var(--shadow-lift)); }
#ghostShip {
    position: absolute;
    inset: 0;
    width: auto; /* height sets the width, so the feathered mask follows the painting */
    height: 100%;
    margin: auto;
    mask-image: radial-gradient(closest-side, var(--ink) 72%, transparent);
}
#summon[aria-pressed="true"] #piratePic, #summon[aria-pressed="false"] #ghostShip {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--lift-out) var(--toast-ease), visibility 0s var(--lift-out);
}
@media (prefers-reduced-motion: reduce) {
    #summon img { transition: none !important; } /* the hidden-state rule is more specific */
}

/*Menu Buttons*/
.big_button {
    margin: 5%;
    padding: 2%;
    display: block;
    text-align: center;
    font-size: var(--text-xl);
}

.big_button_small{
    display: block;
    margin-left: auto;
    margin-right: auto;
    float: none;
    clear: both;
}

.big_button_medium,.big_button_large{
    width: 45%;
    float: right; /*right;*/
    clear: none;

    margin: 2%;
}
body > footer { margin-top: var(--space-5); } /* V7: the V6 flag line hangs under the customer sign */
/* V12: the Sound plate sits right of the centred flag line, and under it on phones */
body > footer { position: relative; }
body > footer #sound { position: absolute; right: var(--space-3); top: 50%; translate: 0 -50%; float: none; width: auto; min-height: 44px; margin: 0; padding: 0 24px; }
@media (max-width: 768px) {
    body > footer #sound { position: static; translate: none; display: block; margin: var(--space-2) auto var(--space-3); }
}

html { min-height: 100%; } /* the storm covers the screen when the page is shorter (it repeated below 550px at 800x800) */

body {
    background-image: url("../img/storm.jpg");
    background-size: cover;

    max-width: 100%;
    background-repeat: repeat-y;

    font-family: var(--font-body);
    color: var(--ink-on-dark);
}

.margin_button{
    display: inline-block;
    font-size: var(--text-base); /* T5: was 12.8 px and faint */
    font-weight: var(--weight-label);
    width: 40%;
    min-height: 44px; /* touch target, also at 200% zoom */
    clear: both;
    margin: 2%;
    text-align: center;
    position: relative;
    color: var(--ink-on-dark);

}

/* Close (F6): a round bolt head (Texturelabs Details 141 + Metal 132), white X stroke 3 with a 1px dark shadow */
#close, .close_window {
    float: right;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-round);
    color: var(--ink-on-dark);
    background: url("../img/textures/bolt.webp") center / 100% 100% no-repeat;
    box-shadow: var(--shadow-none);
    filter: drop-shadow(0 2px 3px var(--shadow-lift));
}
#close:focus-visible, .close_window:focus-visible { box-shadow: 0 0 0 6px var(--ink); } /* keep the ring's dark half */
#close:hover, .close_window:hover { filter: brightness(0.88) drop-shadow(0 2px 3px var(--shadow-lift)); }
#close .icon, .close_window .icon {
    stroke-width: 3;
    filter: drop-shadow(0 1px 1px var(--ink));
}


.test {
    loop: loop;
    autoplay: autoplay;
}

/*why wont u center...*/
.login_button {
    float: none;
    width: 30%;
    height: 40px;

    padding: 1%;

    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: var(--text-lg);
    color: var(--ink-on-dark);

}
#barManLog{
    display: inline;
    float: left;
    width: 30%;
    color: var(--ink-on-dark);
}

/* T5: the customer sign is riveted rusty brass, like Log In. White 5.2:1 or better on the worst pixel (320 px) */
#customer {
    background:
        url("../img/textures/rivet.webp") left 3px top 3px / 18px 18px no-repeat,
        url("../img/textures/rivet.webp") right 3px top 3px / 18px 18px no-repeat,
        url("../img/textures/rivet.webp") left 3px bottom 3px / 18px 18px no-repeat,
        url("../img/textures/rivet.webp") right 3px bottom 3px / 18px 18px no-repeat,
        url("../img/textures/rust.webp") 0 0 / 400px 200px,
        url("../img/textures/tarnish.webp") 0 0 / 400px 200px,
        linear-gradient(var(--gold) 0%, var(--gold-deep) 55%, var(--brass-dark) 100%);
    background-blend-mode: normal, normal, normal, normal, multiply, multiply, normal;
    box-shadow: var(--shadow-brass);
    font-weight: var(--weight-heading);
    text-shadow: 0 1px 2px var(--ink);
    height: auto; /* the fixed 40px let a wrapped "Drinks!" fall off the plate at 415-767px */
    min-height: 44px;
    align-self: center; /* the page grid stretched the plate to fill its row: 614x181 at 1920x1080 */
}
@media (min-width: 415px) { /* phones keep their 70 % plate */
    #customer { box-sizing: border-box; width: min(30%, 360px); margin-inline: auto; }
}

/* About and Passwords (V4): torn slips of Paper 328 nailed to the top edge with a rusted nail
   (Texturelabs Details 144). Sepia text 5.22:1 or better; they swing in the draught of the V12b wind (js/login.js addSprings) */
#about, #passwords {
    position: fixed;
    top: 0;
    width: 60px;
    height: 170px;
    padding: 30px 0 0;
    box-sizing: border-box;
    border: 0;
    writing-mode: vertical-rl;
    line-height: 60px;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--ink-sepia);
    background: url("../img/textures/slip1.webp") 0 0 / 100% 100% no-repeat;
    filter: drop-shadow(0 3px 4px var(--shadow-lift));
    transform-origin: 50% 10px;
    z-index: 999;
    cursor: pointer;
}
#about { right: 84px; rotate: -2deg; } /* the property, so the wind's transform does not erase the tilt */
#passwords { right: 22px; rotate: 1.5deg; background-image: url("../img/textures/slip2.webp"); }
#about span, #passwords span { display: none; } /* the "<" arrow belonged to the 2018 slide-out */

#passwords.full_length, #about.full_length { pointer-events: none; }
/* No wind under reduced motion, so a hovered or focused slip still answers: it sits 4px lower, at once */
@media (prefers-reduced-motion: reduce) and (min-width: 769px) {
    #about:is(:hover, :focus-visible, .full_length), #passwords:is(:hover, :focus-visible, .full_length) { translate: 0 4px; }
}


/* About and Passwords windows (T3): an opaque sheet of Paper 328 held by two rusted nails.
   Sepia 5.28:1 or better on its darkest pixel; the 2018 50% red and green let the logo show through */
#about_window, #passwords_window {
    position: fixed;
    border-radius: var(--radius-sm);

    background:
        url("../img/textures/rivet.webp") left 8px top 8px / 22px 22px no-repeat,
        url("../img/textures/rivet.webp") right 8px top 8px / 22px 22px no-repeat,
        url("../img/textures/paper-list.webp") 0 0 / 100% 100%,
        var(--paper);
    color: var(--ink-sepia);
    padding: 36px 20px 20px; /* the nails sit in the top 30px, above the Close plate */

    width: 40%;
    height: 500px;
    margin-top: 5%;

    margin-left: 30%;
    margin-right: 30%;

    box-shadow: var(--shadow-raised);

    clear: both;
    z-index: 999;
}

/* About (F10): a wide sheet that fits its copy, no inner scroll. Three ruled columns; one small textured icon per heading. Phones scroll the sheet itself (rules below). */
#about_window {
    width: min(920px, 92vw);
    height: auto;
    margin: 5% auto 0;
    left: 0;
    right: 0;
    padding: 36px 32px 24px;
    box-sizing: border-box;
}
#about_window h2 { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: var(--text-display); font-weight: var(--weight-body); text-align: center; }
.about_lede { max-width: 60ch; margin: 0 auto var(--space-4); font-size: var(--text-md); line-height: 1.4; text-align: center; }
.about_cols {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--space-5);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--rule-sepia);
    border-bottom: 1px solid var(--rule-sepia);
}
.about_cols h3 { display: flex; font-family: var(--font-display); font-weight: var(--weight-body); align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.about_cols h3::before { content: ""; flex: none; width: 24px; height: 24px; background: 0 0 / 100% 100% no-repeat; }
.about_cols .about_try::before { background-image: url("../img/icons/about-anchor.webp"); }
.about_cols .about_built::before { background-image: url("../img/icons/about-wheel.webp"); }
.about_cols .about_crew::before { background-image: url("../img/icons/about-skull.webp"); }
.about_cols ul { margin: 0; padding: 0; list-style: none; }
.about_cols li { position: relative; padding-left: 16px; line-height: 1.45; }
.about_cols li::before { content: "\2013"; position: absolute; left: 0; } /* a plain dash, no icon per line */
.about_source { margin: var(--space-3) 0 0; text-align: center; }

/* links on the sheet stay sepia and underlined; the global white hover and red press fail on paper */
#about_window a, #about_window a:hover, #about_window a:active {
    color: var(--ink-sepia);
    text-decoration: underline;
}

.scrollable {
    overflow: auto;
    height: 400px;
    clear: both; /* an overflow box sits beside the floated Close and lost its 44px width */
    margin-top: var(--space-2);
}

/* Demo logins (V8): accounts grouped by role with a role icon; Use is a secondary sepia outline that fills
   the login form. From 1100px the sheet widens to two columns, so the list fits 1280x720 without scrolling */
#passwords_window h2 { margin: 0 0 var(--space-1); }
#demo_intro { margin: 0 0 var(--space-2); }
.account_group h3 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-3) 0 2px;
    font-size: var(--text-md);
}
.account_group h3 .icon { width: 22px; height: 22px; color: var(--brass-dark); }
.accounts { list-style: none; margin: 0; padding: 0; }
.accounts li {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
    gap: var(--space-2);
    padding: 3px 0;
    border-bottom: 1px dashed var(--rule-sepia);
}
.uses { display: flex; gap: 6px; }
.use {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 10px;
    border: 1.5px solid var(--ink-sepia);
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink-sepia);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background-color var(--lift-out) var(--toast-ease);
}
.use .icon { width: 16px; height: 16px; }
.use:hover, .use:focus-visible { background-color: var(--hover-sepia); transition-duration: var(--lift-in); }
.use:active { background-color: var(--rule-sepia); }
@media (prefers-reduced-motion: reduce) { .use { transition: none; } }

@media (min-width: 1100px) {
    #passwords_window { width: min(860px, 70%); height: auto; margin-left: auto; margin-right: auto; left: 0; right: 0; }
    #passwords_window .scrollable { height: auto; }
    .account_cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 768px) {
    #demo_intro { padding-right: 56px; } /* the line under Close would sit in its shadow (4.42:1) */
    .use { min-height: 44px; min-width: 44px; }
    .test_accounts li { grid-template-columns: 1fr 1fr; }
    .test_accounts .uses { grid-column: 1 / -1; }
    .test_accounts .use { flex: 1; }
}





.test {
    loop: loop;
    autoplay: autoplay;
}

.login_button {
    float: none;
    width: 30%;
    height: 40px;
    margin: 3%;

    margin-left: 35%;
    margin-right: 35%;

    padding: 1%;
    display: block;
    text-align: center;
    font-size: var(--text-lg);
}

#barManLog{
    display: inline;
    float: left;
    width: 30%;
}

/*Log in window*/

/* T4: while the login is open, "Order Your Drinks!" hides instead of peeking out under the box */
#overlay:not(.hidden) ~ #customer { visibility: hidden; }

.hidden {
    visibility: hidden;
}

#overlay {
    background-color: var(--scrim);
    position: fixed;
    height: 100%;
    width: 100%;
    left: 0px;
    top:0px ;
    z-index: 5;
    overflow: hidden;
    font-size: var(--text-md);
    transition: opacity calc(var(--toast-open) + var(--lift-out)) var(--toast-ease), visibility 0s;
}
#overlay.hidden {
    opacity: 0;
    pointer-events: none; /* a fading scrim never catches a click */
    transition: opacity calc(var(--toast-open) + var(--lift-out)) var(--toast-ease), visibility 0s calc(var(--toast-open) + var(--lift-out));
}

/* V12b G6: a dialog condenses out of the mist (pale, blurred, a touch large) and dissolves again; a bank of mist passes behind it as it opens */
#overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: url("../img/textures/mist.webp") 0 50% / 900px 100% repeat-x;
}
#overlay:not(.hidden)::after { animation: mist-pass var(--fog-pass) ease-in-out; }
#loginBox, #about_window, #passwords_window {
    transition: opacity var(--ghost-open) var(--toast-ease), filter var(--ghost-open) var(--toast-ease), scale var(--ghost-open) var(--toast-ease), visibility 0s;
}
#loginBox.hidden, #about_window.hidden, #passwords_window.hidden {
    opacity: 0;
    filter: var(--ghost-tint) blur(var(--ghost-blur));
    scale: 1.03;
    transition: opacity var(--ghost-close) var(--toast-ease), filter var(--ghost-close) var(--toast-ease), scale var(--ghost-close) var(--toast-ease), visibility 0s var(--ghost-close);
}
@media (prefers-reduced-motion: reduce) { /* opacity only: no blur, no scale, no puff */
    #loginBox, #about_window, #passwords_window { transition: opacity var(--lift-out) var(--toast-ease), visibility 0s; }
    #loginBox.hidden, #about_window.hidden, #passwords_window.hidden { filter: none; scale: none; transition: opacity var(--lift-out) var(--toast-ease), visibility 0s var(--lift-out); }
    #overlay { transition: opacity var(--lift-out) var(--toast-ease), visibility 0s; }
    #overlay.hidden { transition: opacity var(--lift-out) var(--toast-ease), visibility 0s var(--lift-out); }
    #overlay::after { display: none; }
}

.login {
    margin: 80px 100px;
    margin-top: 50%;
    margin: 80px 100px;
}

.login {
    position: absolute;
    border-radius: var(--radius-sm);
    /* T4: the scrimmed wood2 of the working views (one wood site-wide) with iron corner brackets */
    background-image: linear-gradient(var(--login-scrim), var(--login-scrim)), var(--wood);
    border: 0 solid transparent;
    border-image: url("../img/textures/iron-frame.webp") 80 / 40px;
    padding: 32px 32px 12px; /* the brackets are 11 px thick; a smaller bottom keeps the error toast clear of the box */
    width: 40%;
    margin-left: 30%;
    margin-right: 30%;
    /*background: linear-gradient(#254540,#0C2924);
    border-width: 1px;
    border-style: solid;
    border-radius: var(--radius-md);*/
    box-shadow: var(--shadow-raised);
    z-index: 10;
    clear: both;
}

/*login stuff below*/


input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;

}
input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border-radius: var(--radius-sm);
    box-sizing: border-box;
}

input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}
input[type=password], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border-radius: var(--radius-sm);
    box-sizing: border-box;
}

/* Log In (V4): the brass plate from style.css, sized to its label */
#login {
    min-width: 60%;
    margin: 8px 0;
    padding: var(--space-3) var(--space-5);
    border: 0;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--text-md);
    cursor: pointer;
}


/* 415-767px (tablets, 200% text zoom): staff buttons hug their label instead of 40% of a 30% box */
@media (max-width: 767px) {
    #barManLog { width: auto; }
    .margin_button { width: auto; padding: 0 16px; }
}

@media only screen and (max-width: 414px)
{
    /*change the size of the login box to suit the phones*/
    /* iPhone 6s was my main focus but it looks fine on other phones sizes */
    .login{
        font-size: var(--text-xs);
        height: 46%;
        margin-top: 0px;
        margin-left: 14%;
        width: 51%;
    }
}


/*Responsiveness*/
/* For mobile phones: */
/* try it with iPhone 6 models*/
@media only screen and (max-width: 414px)
{
    /* only the customer is going to use the App on his phone to order drinks,therefore we hide the management login on phones*/
    button.margin_button  {display: none;}

    /* enlarge the order button and the font for easy reading on small phones*/
    .login_button {
        float: none;
        width: 70%;
        height: auto;
        display: block;
        text-align: center;
        font-size: var(--text-lg);
        margin-left: 15%;
        margin-top: 15%;
    }
    #summon {
        width: 90%;
        margin: 30% 5% 0;
    }


    .login {
        width: 65%;
        margin-left: 10%;
        margin-right: 10%;
        height: auto;
    }

    body{background-size: auto;}
}

/* Login error: pale-red border on the wrong field, bold message with icon under the form */
.t-input {
    border: 3px solid transparent;
    font-family: var(--font-body); /* T4: not the browser default */
    box-shadow: var(--shadow-inset);
}

.t-input.is-error {
    border-color: var(--danger-text-on-dark);
}

.login_error {
    margin: 8px 0 0;
    color: var(--ink-on-dark); /* 7.74:1 on the lightest wood in the login box */
    font-weight: var(--weight-label);
    font-size: var(--text-md);
    text-align: center;
}

.login_error .icon {
    margin-right: 6px;
    font-size: var(--text-lg);
    vertical-align: -2px;
    color: var(--danger-text-on-dark);
}

/* transitions-dev: Error state shake (no auto-revert; typing clears the error) */
.t-input {
  transition: border-color var(--lift-in) var(--toast-ease);
  will-change: transform;
}
.t-input.is-error {
  transition: border-color var(--revert-dur) var(--toast-ease);
}

.t-error-msg {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity    var(--revert-dur) var(--toast-ease),
    visibility 0s linear var(--revert-dur);
}
.t-input-wrap.is-error .t-error-msg {
  opacity: 1;
  visibility: visible;
  transition:
    opacity    var(--revert-dur) var(--toast-ease),
    visibility 0s linear 0s;
}

.t-input.is-shaking {
  animation: t-input-shake calc(
      var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2
    ) linear;
}
@keyframes t-input-shake {
  0%      { transform: translateX(0);                                 animation-timing-function: var(--shake-ease); }
  28.57%  { transform: translateX(var(--shake-distance));             animation-timing-function: var(--shake-ease); }
  57.14%  { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); }
  78.57%  { transform: translateX(var(--shake-overshoot));            animation-timing-function: var(--shake-ease); }
  100%    { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .t-input { animation: none !important; transform: none !important; }
}

/* Phones and tablets: About and Passwords become labelled bottom buttons (no slide-out),
   windows become near full-width sheets, login box and inputs fit a finger.
   Fills are opaque: white on #8e1f2c is 8.81:1, white on #1e6b2b is 6.58:1 */
@media (max-width: 768px) {
    #about, #passwords {
        top: auto;
        right: auto;
        bottom: 12px;
        width: calc(50% - 20px);
        height: 44px;
        box-sizing: border-box;
        padding: 0 8px;
        border-right-style: solid;
        font-family: var(--font-body);
        font-size: var(--text-base);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        writing-mode: horizontal-tb;
        line-height: normal;
        color: var(--ink-on-dark);
        background-image: none;
        filter: none;
        rotate: none;
        transform: none !important; /* the wind (js/login.js) may have started before the window was narrowed */
    }

    #about { left: 12px; background-color: var(--flag-red); }
    #passwords { left: calc(50% + 8px); background-color: var(--flag-green); }
    #about span, #passwords span { display: none; } /* the "<" arrow belonged to the slide-out */

    #about_window, #passwords_window {
        width: auto;
        height: auto;
        max-height: 80vh;
        margin: 5% 4% 0;
        left: 0;
        right: 0;
        overflow: auto;
        padding: 36px 16px 16px;
        box-sizing: border-box;
    }

    .scrollable { height: auto; max-height: 55vh; }

    #about_window { width: auto; margin: 5% 4% 0; padding: 36px 16px 16px; max-height: 90dvh; }
    .about_cols { grid-template-columns: 1fr; gap: var(--space-3); }
    #about_window h2 { padding: 0 52px; } /* clear of the Close plate, both sides so the title stays centred */
    .about_lede { font-size: var(--text-base); }

    .close_window, .close {
        min-width: 44px;
        min-height: 44px;
        font-size: var(--text-md);
    }

    .login {
        width: auto;
        height: auto;
        margin: 5% 4%;
        font-size: var(--text-base);
        box-sizing: border-box;
    }

    .login input[type=text], .login input[type=password] { font-size: var(--text-base); } /* under 16px iOS zooms in on focus */
}