/* ============================================================
   Slim stylesheet — w3.css subset + magisterwerner.css
   Keeps only selectors actually used by the site's HTML.
   ============================================================ */

/* ---------- Reset / normalize (subset of w3.css) ---------- */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}
body { margin: 0; }
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; }
img { border-style: none; vertical-align: middle; }
a { background-color: transparent; color: inherit; }

/* ---------- Typography ---------- */
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; margin: 10px 0; }
hr { border: 0; border-top: 1px solid #eee; margin: 20px 0; }

/* ---------- Layout / grid ---------- */
.w3-container:after, .w3-container:before,
.w3-row:after,       .w3-row:before {
    content: "";
    display: table;
    clear: both;
}
.w3-col { float: left; width: 100%; }
@media (min-width: 993px) {
    .w3-col.l4 { width: 33.33333%; }
    .w3-col.l6 { width: 49.99999%; }
    .w3-col.l8 { width: 66.66666%; }
}
.w3-content   { max-width: 1400px; margin: auto; }
.w3-container { padding: 0.01em 16px; }

/* ---------- Cards ---------- */
.w3-card   { box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12); }
.w3-card-4 { box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2),  0 4px 20px 0 rgba(0,0,0,0.19); }

/* ---------- Utility classes used in HTML ---------- */
.w3-margin      { margin: 16px !important; }
.w3-padding-16  { padding-top: 16px !important; padding-bottom: 16px !important; }
.w3-center      { text-align: center !important; }
.w3-large       { font-size: 18px !important; }

/* Lists */
.w3-ul                { list-style-type: none; padding: 0; margin: 0; }
.w3-ul li             { padding: 8px 16px; border-bottom: 1px solid #ddd; }
.w3-ul li:last-child  { border-bottom: none; }

/* Background colours used on-page */
.w3-white        { color: #000 !important; background-color: #fff    !important; }
.w3-yellow       { color: #000 !important; background-color: #ffeb3b !important; }
.w3-orange       { color: #000 !important; background-color: #ff9800 !important; }
.w3-light-blue   { color: #000 !important; background-color: #87CEEB !important; }
.w3-light-green  { color: #000 !important; background-color: #8bc34a !important; }
.w3-pale-red     { color: #000 !important; background-color: #ffdddd !important; }
.w3-pale-green   { color: #000 !important; background-color: #ddffdd !important; }
.w3-pale-yellow  { color: #000 !important; background-color: #ffffcc !important; }

/* Main region transition (matches w3.css's .w3-main,#main rule) */
#main { transition: margin-left .4s; }

/* ============================================================
   Site-specific styles (magisterwerner.css, Google Fonts import removed
   — already loaded via <link> preconnect+link in header.php)
   ============================================================ */

h1, h2, h3, h4, h5 {
    font-family: 'Della Respira', serif;
}

body {
    line-height: 24px;
    font-size: 17px;
    color: black;
    margin: 0;
    padding: 0;
    word-wrap: break-word !important;
    font-family: 'Raleway', sans-serif;
    background-image: url("/images/cork_board.jpg");
    background-size: 640px auto;
}

.toggle,
[id^=drop] { display: none; }

/* Visible focus ring for keyboard users */
a:focus-visible,
.toggle:focus-visible {
    outline: 2px solid darkred;
    outline-offset: 2px;
}

nav {
    margin: 0;
    padding: 0;
}

#logo {
    display: block;
    padding: 2px 14px;
    float: right;
}

nav:after {
    content: "";
    display: table;
    clear: both;
}

nav ul {
    float: left;
    padding: 0 14px;
    margin: 0;
    list-style: none;
    position: relative;
}

nav ul li {
    margin: 0;
    display: block;
    float: left;
    border-bottom: 0;
    border-left:  dotted 1px darkred;
    border-right: dotted 1px darkred;
}

nav ul li:first-child { border: 0; }
nav ul li:last-child  { border: 0; }

nav a {
    display: block;
    padding: 14px 10px;
    color: black;
    font-size: 17px;
    text-decoration: none;
}

.redhue    { -webkit-filter: hue-rotate(0deg)   brightness(110%); filter: hue-rotate(0deg)   brightness(110%); }
.purplehue { -webkit-filter: hue-rotate(300deg) brightness(110%); filter: hue-rotate(300deg) brightness(110%); }
.bluehue   { -webkit-filter: hue-rotate(240deg) brightness(110%); filter: hue-rotate(240deg) brightness(110%); }
.greenhue  { -webkit-filter: hue-rotate(120deg) brightness(140%); filter: hue-rotate(120deg) brightness(140%); }

/* ---------- Media queries: mobile hamburger nav ---------- */
/* Tablets portrait, small tablets, phones — all collapse the nav */
@media all and (max-width: 1024px) {

    nav { margin: 0; }

    /* Mobile hamburger: off-screen but keyboard-focusable */
    [id^=drop] {
        display: block;
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    .toggle + a,
    .menu { display: none; }

    .toggle {
        display: block;
        padding: 14px 20px;
        color: black;
        font-size: 20px;
        text-decoration: none;
        float: left;
    }

    [id^=drop]:checked + ul { display: block; }

    nav ul {
        width: 100%;
        height: 0;
        margin-top: -5px;
        padding: 0;
    }

    nav ul li {
        width: 100%;
        height: 50px;
        background-color: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border: 0;
        border-bottom: dotted 1px darkred;
    }

    nav ul li:first-child { border-bottom: dotted 1px darkred; }
    nav ul li:last-child  { border-bottom: solid  2px darkred; }
}