/* ==========================================================================
   UKPQ site styles (shared by every page)
   Desktop: the original 980px page, element for element.
   Phones and tablets (narrower than 980px): one column, every panel the full
   column width with 16px between panels, and a menu button instead of the tabs.
   ========================================================================== */

/* ---------- Typefaces, stored on this site in /fonts (SIL Open Font Licence - see fonts/OFL.txt) ---------- */
@font-face { font-family: "Julius Sans One"; src: url("../fonts/JuliusSansOne-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans Light"; src: url("../fonts/OpenSans-Light.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("../fonts/OpenSans-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("../fonts/OpenSans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }


html, body { margin: 0; padding: 0; }
body {
    background: #cdcdcd url('../wpimages/wpabf46eeb_06.jpg') repeat top center;
    color: #000;
    overflow-x: hidden;
    position: relative;
}
img { border: 0; }

#page { position: relative; width: 980px; margin: 0 auto; }

/* HTML5 sizes each line from the paragraph's own (16px) font as well as the
   smaller text inside it, which made lines taller than on the old pages.
   A zero paragraph line-height lets the text's own line spacing decide, as before. */
#content p { line-height: 0; }

/* ---------- Header: ASDTi logo (links to the home page), greeting and date, menu ---------- */
#site-header .logo { position: absolute; left: 0; top: 4px; width: 72px; height: 54px; line-height: 0; z-index: 1000; }
#site-header .logo img { display: block; width: 72px; height: 54px; border-radius: 4px; }
#site-header .logo:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
#site-header .greet span {
    position: absolute; left: 92px; white-space: nowrap;
    font: 13px "Trebuchet MS", sans-serif; color: #fff;
}
#greeting     { top: 9px; }
#current-date { top: 30px; }

#menu-toggle { display: none; }

#site-nav {
    position: absolute; left: 372px; top: 14px; width: 594px; height: 52px; z-index: 1000;
}
/* Plain tabs: flat colour, bigger text. Orange for the other pages, blue for the page you are on. */
#site-nav a {
    position: absolute; top: 10px; width: 99px; height: 42px;
    font: 12.5px "Trebuchet MS", Arial, sans-serif; color: #fff; text-decoration: none; text-align: center;
    padding-top: 12px; box-sizing: border-box; isolation: isolate;
}
#site-nav a:nth-child(1) { left: 0; }   #site-nav a:nth-child(2) { left: 99px; }
#site-nav a:nth-child(3) { left: 198px; } #site-nav a:nth-child(4) { left: 297px; }
#site-nav a:nth-child(5) { left: 396px; } #site-nav a:nth-child(6) { left: 495px; }
#site-nav a::before {
    content: ""; position: absolute; z-index: -1; left: 2px; right: 2px; top: 4px; bottom: 7px;
    border-radius: 6px 6px 0 0; background: #a86a3e; transition: background-color .15s;
}
#site-nav a:hover::before, #site-nav a:focus-visible::before { background: #8a542e; }
#site-nav a.current { color: #1e2a4a; font-weight: bold; }
#site-nav a.current::before { top: 0; background: #99b0f3; }
#site-nav a:focus-visible { outline: none; text-decoration: underline; }

/* the tab (orange; blue and taller for the page you are on, or under the mouse) */
a.otab::before {
    content: ""; position: absolute; z-index: -1; left: 8px; right: 8px; top: 12px; bottom: 7px;
    border-radius: 7px 7px 0 0;
    background: linear-gradient(#d4a985, #be8456 22%, #b77f52 60%, #a8744b 85%, #87603e);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
a.otab::before { background: linear-gradient(var(--g1), var(--g2) 92%); }
/* the dark rail the tabs stand on */
#site-nav a::after, a.otab::after {
    content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 7px;
    background: linear-gradient(#444, #3a3a3a);
}
a.otab:hover::before, a.otab:focus-visible::before, a.otab.tall::before {
    top: 3px;
    background: linear-gradient(#97a9db, #95a6d6 20%, #8796c3 55%, #7d8bb4 80%, #646b86);
}
a.otab:hover::before, a.otab:focus-visible::before { background: linear-gradient(var(--h1), var(--h2) 92%); }
a.otab:focus-visible { outline: none; }

/* ---------- Slideshow (replaces the old jQuery 'Camera' slider) ---------- */
#slides {
    position: absolute; top: 65px; left: 50%; width: 100vw; min-width: 980px; height: 450px;
    transform: translateX(-50%);
    overflow: hidden; z-index: 1; background: #ddd;
}
#slides .slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.2s ease; }
#slides .slide.on { opacity: 1; }
#slides .slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
#slides figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 20px; text-align: center;
    background: rgba(0, 0, 0, .8); color: #fff; font: 16px/1.25 "Times New Roman", Times, serif;
}
#slides .dots { position: absolute; right: 12px; bottom: 48px; display: flex; gap: 6px; }
#slides .dots button {
    width: 16px; height: 16px; padding: 0; border: 0; border-radius: 8px; cursor: pointer;
    background: #b7b7b7; box-shadow: 0 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, .2);
}
#slides .dots button.on::after, #slides .dots button:hover::after {
    content: ""; display: block; width: 8px; height: 8px; margin: 4px; border-radius: 5px; background: #4b4b4b;
}

/* ---------- Panels and their contents ---------- */
.grp, .solo { position: absolute; }   /* no z-index: their contents keep the old page's stacking order */
.grp > .blk, .clu > .blk, .grp .pic, .clu .pic, .solo .pic { position: absolute; display: block; line-height: 0; }
.clu { position: absolute; }
.txt { position: absolute; overflow: hidden; box-sizing: content-box; }
.tabs, .badges { display: contents; }
.solo > .txt, .solo > .pic, .solo > .clu { left: 0 !important; top: 0 !important; }

/* PDF download icon in the 'Read More' lists: a page in UKPQ red with a folded corner */
.pdf-ico { float: left; clear: left; width: 22px; height: 27px; margin: 0 8px 4px 0; }
/* each PDF link is its own row: icon on the left, title beside it, lined up under each other */
a:has(> .pdf-ico) { display: flex; align-items: center; gap: 8px; margin: -4px 0; }
a:has(> .pdf-ico) > .pdf-ico { float: none; flex: none; margin: 0; }
.pdf-ico .pg { fill: #ff5f5f; }
.pdf-ico .fold { fill: #fff; opacity: .6; }
.pdf-ico text { font: bold 9px Tahoma, Verdana, sans-serif; fill: #fff; }
a:hover > .pdf-ico .pg, a:focus-visible > .pdf-ico .pg { fill: #ffffff; }
a:hover > .pdf-ico text, a:focus-visible > .pdf-ico text { fill: #ff5f5f; }
a:hover > .pdf-ico .fold { fill: #ff5f5f; }

/* The login boxes: tables keep the old pages' small text */
.txt table { font-size: 12px; }

/* Login box on the three login pages: white text, larger type */
#content .login-box {
    display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 10px 12px;
    box-sizing: border-box; width: 100%; min-height: 100%; margin: 0; padding: 14px 18px 16px;
    background: #789f60; border-radius: 6px; color: #fff; font: 16px/1.3 "Open Sans", "Trebuchet MS", sans-serif;
}
#content .login-box h2 { grid-column: 1 / -1; margin: 0 0 2px; font: 21px/1.2 "Julius Sans One", "Trebuchet MS", sans-serif; color: #fff; }
#content .login-box label { color: #fff; }
#content .login-box input[type=text], #content .login-box input[type=password] {
    font: 16px "Open Sans", "Trebuchet MS", sans-serif; padding: 7px 10px; border: 1px solid #5f8249; border-radius: 5px;
    width: 100%; box-sizing: border-box; color: #222; background: #fff;
}
#content .login-box input:focus { outline: 2px solid #fff; outline-offset: 1px; }
#content .login-box input[type=submit] {
    grid-column: 2; justify-self: start; font: bold 16px "Trebuchet MS", sans-serif; padding: 7px 28px;
    border: 0; border-radius: 999px; background: #fff; color: #4f6f3c; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
#content .login-box input[type=submit]:hover, #content .login-box input[type=submit]:focus-visible { background: #e8f0e2; }

/* Positioned forms (the PayPal 'Add to Cart' rows) keep their own layout inside */
.txt > form { position: relative; width: 100%; height: 100%; }

/* Buttons that hang under a panel like tabs: square top, rounded bottom.
   --c normal colour, --h colour under the mouse, --a colour while pressed. */
a.tab {
    position: absolute; display: block; box-sizing: border-box;
    background: var(--c); border-radius: 0 0 10px 10px;
    color: #fff; font: var(--fs, 10px) "Open Sans", Arial, sans-serif; text-align: center; text-decoration: none;
    padding: var(--pt, 16px) 4px 0; white-space: nowrap;
}
a.tab:hover, a.tab:focus-visible { background: var(--h); outline: none; }
a.tab:active { background: var(--a); }

/* Orange tab buttons (the same look as the menu tabs) */
a.otab {
    position: absolute; display: block; box-sizing: border-box; isolation: isolate;
    color: #fff; font: 10px Arial, sans-serif; text-align: center; text-decoration: none; padding-top: 15px;
}
a.otab:hover, a.otab:focus-visible, a.otab.tall { padding-top: 4px; }

/* Long grey button with an arrow box at the right (e.g. 'Exit UKPQ Questionnaire') */
a.bar {
    position: absolute; display: block; box-sizing: border-box; border-radius: 4px; overflow: hidden;
    background: linear-gradient(var(--g1), var(--g2));
    color: #fff; font: 12px Arial, sans-serif; text-decoration: none; padding: 12px 40px 0 10px; white-space: nowrap;
}
a.bar::after {
    content: "\25B6"; position: absolute; right: 0; top: 0; bottom: 0; width: 30px;
    background: var(--box); color: #fff; font-size: 11px; line-height: 38px; text-align: center;
}
a.bar:hover, a.bar:focus-visible { background: var(--h1); outline: none; }
a.bar:hover::after, a.bar:focus-visible::after { background: var(--hbox); }

/* ---------- Footer ---------- */
#site-footer {
    position: absolute; left: 573px; width: 394px; height: 20px; z-index: 1000;
    display: flex; flex-wrap: wrap; font: 11px/20px "Trebuchet MS", sans-serif;
}
#site-footer a { color: #fff; text-decoration: none; padding: 0 8px; white-space: nowrap; }
#site-footer .f-green  { background: #789f60; width: 193px; text-align: center; box-sizing: border-box; }
#site-footer .f-yellow { background: #e9c200; width: 105px; box-sizing: border-box; }
#site-footer .f-red    { background: #ff5f5f; width: 96px; box-sizing: border-box; }
#site-footer a:hover, #site-footer a:focus-visible { text-decoration: underline; }
#site-footer a[data-cookie-settings] { margin: 10px 0 0 auto; }
/* Cookie settings button: ASDTi green, a little bigger than the footer text */
#site-footer a.cc-footer-btn { height: 26px; line-height: 26px; font-size: 13px; padding: 0 14px 0 11px; gap: 6px; }

/* ---------- Back-to-top button (was jQuery) ---------- */
a.back-to-top {
    position: fixed; z-index: 999; right: 20px; bottom: 20px; width: 60px; height: 60px; border-radius: 30px;
    background: #789f60; opacity: 0; visibility: hidden;
    transition: opacity .6s, visibility .6s;
}
a.back-to-top::before {
    content: ""; position: absolute; left: 21px; top: 24px; width: 14px; height: 14px;
    border: solid #fff; border-width: 4px 0 0 4px; transform: rotate(45deg);
}
a.back-to-top.show { opacity: 1; visibility: visible; }
a.back-to-top:hover { background-color: #000; }

/* ==========================================================================
   Phones and tablets
   ========================================================================== */
@media (max-width: 979px) {
    /* login boxes shrink to the screen */
    .txt table { width: 100% !important; max-width: 100%; }
    .txt table input[type=text], .txt table input[type=password] { width: 100%; box-sizing: border-box; }
    .txt table td[width] { width: auto; }
    body { background: #d8d8d8; }
    #page { width: auto; height: auto !important; margin: 0; padding-bottom: 20px; }

    /* header bar: clock, greeting and date, menu button */
    #site-header {
        position: relative; height: 66px; background: #789f60; margin-bottom: 16px;
    }
    #site-header .logo { left: 10px; top: 6px; }
    #site-header .greet span { left: 102px; right: 76px; overflow: hidden; text-overflow: ellipsis; }
    #greeting { top: 13px; } #current-date { top: 35px; }
    /* the "Quit UKPQ" button: a normal-sized button on the right of the top bar */
    #site-header .head-btn {
        position: absolute !important; left: auto !important; right: 12px; top: 13px !important;
        width: auto !important; height: 40px !important; display: flex; align-items: center; padding: 0 18px;
        font-size: 14px;
    }
    #site-header:has(.head-btn) .greet span { right: 118px; font-size: 12px; }

    #menu-toggle {
        display: flex; flex-direction: column; justify-content: center; gap: 5px;
        position: absolute; right: 14px; top: 11px; width: 54px; height: 44px; padding: 0 12px;
        border: 0; border-radius: 8px; background: #5f7f4b; cursor: pointer;
    }
    #menu-toggle span { display: block; height: 3px; border-radius: 2px; background: #fff; transition: transform .2s, opacity .2s; }
    #menu-toggle b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    #menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    #menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    #menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    #site-nav {
        display: none; left: auto; right: 14px; top: 60px; width: 230px; height: auto; z-index: 50;
        background: #3f3f3f; border-radius: 10px; padding: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    }
    #site-nav.open { display: block; }
    #site-nav a, #site-nav a.current, #site-nav a:hover {
        position: static; display: block; width: auto; height: auto; padding: 13px 14px;
        font: 17px "Trebuchet MS", sans-serif; text-align: left; border-radius: 6px;
    }
    #site-nav a::before, #site-nav a::after { display: none; }
    #site-nav a.current { background: #99b0f3; color: #1e2a4a; }
    #site-nav a:hover, #site-nav a:focus-visible { background: #be8456; }

    /* slideshow: full width, in proportion */
    #slides { position: relative; top: 0; left: 0; transform: none; width: auto; min-width: 0; height: auto; aspect-ratio: 1920 / 1100; margin: -16px 0 16px; }
    #slides figcaption { font-size: 15px; padding: 7px 12px; }
    #slides .dots { bottom: auto; top: 8px; }

    /* every panel full width, one under another, 16px apart */
    #content { display: flex; flex-direction: column; gap: 16px; padding: 0 16px; }
    .grp, .solo {
        position: static !important; width: auto !important; height: auto !important;
        display: flex; flex-direction: column; gap: 12px;
    }
    .grp { background: var(--bg); border-radius: 8px; padding: 14px 16px 16px; }
    .grp > .blk { display: none; }
    .txt, .grp > .pic, .solo > .pic, .badges > .pic {
        position: relative !important; left: auto !important; top: auto !important;
        width: auto !important; height: auto !important; overflow: visible !important;
    }
    .txt.note { padding: 8px 10px !important; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
    .txt img { max-width: 100%; height: auto; }
    /* PayPal rows: item, price and button in a column instead of fixed positions */
    .txt > form:not(.contact-form) { height: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 10px; box-sizing: border-box; }
    .txt > form:not(.contact-form) > div { position: static !important; width: auto !important; height: auto !important; overflow: visible !important; }
    .txt > form:not(.contact-form) > div:first-of-type { flex: 1 1 100%; }
    .grp.empty { display: none; }   /* panels with nothing on them only matter on the desktop page */
    .solo > .pic img, .grp > .pic img { max-width: 100%; height: auto; }

    /* badges sit side by side, each one exactly as on the desktop page */
    .badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
    .clu { position: relative !important; left: auto !important; top: auto !important;
           width: var(--w) !important; height: var(--h) !important; }

    /* the hanging tabs become a row of buttons at the bottom of their panel */
    .tabs { display: flex; flex-wrap: wrap; gap: 8px; }
    .badges { display: flex; }
    a.tab, a.otab, a.bar {
        position: relative !important; left: auto !important; top: auto !important;
        width: auto !important; height: auto !important; flex: 1 1 140px;
        padding: 12px 10px !important; border-radius: 8px; font-size: 15px !important;
        background: rgba(0, 0, 0, .18); white-space: normal;
    }
    a.otab::before { top: 0 !important; bottom: 0; left: 0; right: 0; border-radius: 8px; }
    a.otab::after { display: none; }
    .txt.note a.otab { flex: 0 0 auto; }

    #site-footer {
        position: static !important; width: auto; height: auto; margin: 20px 16px 0;
        flex-wrap: wrap; justify-content: center; gap: 8px; font-size: 14px; line-height: 30px;
    }
    #site-footer a { border-radius: 6px; padding: 0 12px; }
    #site-footer .f-green, #site-footer .f-yellow, #site-footer .f-red { width: auto; }
    #site-footer a[data-cookie-settings] { margin: 0; }
    /* same size as the other footer buttons */
    #site-footer a.cc-footer-btn { height: 30px; line-height: 30px; font-size: 14px; padding: 0 12px; border-radius: 6px; }
}

/* PayPal mini-cart: drawn with CSS (its old pictures came from minicartjs.com, which has gone) */
#PPMiniCart form { z-index: 10000 !important; padding-top: 40px !important; background-image: none !important; border-radius: 0 0 8px 8px; box-shadow: 0 4px 14px rgba(0,0,0,.25); font-family: "Trebuchet MS", sans-serif; }
#PPMiniCart p { background-image: none !important; padding-left: 0 !important; }
#PPMiniCart p input { background: linear-gradient(#ffc24f, #ffa822) !important; border-radius: 4px; }
#PPMiniCart li .remove { background: #c94b4b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 4l6 6M10 4l-6 6' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center/14px no-repeat !important; border-radius: 50%; }

/* PayPal "Add to Cart" buttons: the label is placed inside the button itself */
form button[class^="Button"] { position: relative; }
#PPMiniCart form::before { content: "Your basket"; position: absolute; left: 12px; top: 12px; font: bold 15px "Trebuchet MS", sans-serif; color: #555; }

/* Green pill buttons inside text (e.g. "Click Here" on the About page) */
#content a.pill-btn {
    display: inline-block; line-height: 22px; padding: 0 12px; margin: 3px 4px 3px 0; border-radius: 999px;
    background: #789f60; color: #fff; text-decoration: none; font-weight: bold; white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: background-color .15s;
}
#content a.pill-btn:hover, #content a.pill-btn:focus-visible { background: #5f8249; }
#content a.pill-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }