/* ============================================================
   /djschool/ shell — banner, menu, sponsor bar
   Added to every page by /djschool/.htaccess.
   Desktop (800px+) reproduces the original frameset layout.
   Below 800px the menu becomes a slide-in hamburger.
   ============================================================ */

:root{
  --gold:#ffcc66; --rule:#262626; --ink:#b8b8b8;
  --font:Arial,Helvetica,"Helvetica Neue",sans-serif;
  --link:#8ab4f8;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#000;color:#FFCC66;font-family:var(--font)}

.shell{
  display:grid;
  grid-template-columns:99px minmax(0,1fr);
  grid-template-areas:"banner banner" "nav main" "foot foot";
  min-height:100vh;align-content:start;
}

.shell__banner{grid-area:banner;height:73px;overflow:hidden;background:#fff url("banner-back.gif") repeat-x}
.shell__banner .brandlink{display:block;font-size:0;white-space:nowrap;border:0}
.shell__banner img{display:inline-block;vertical-align:top;border:0}

.burger{display:none}
.topbar{display:none}

.shell__nav{grid-area:nav;width:99px;background:#000;font-size:0}
.shell__nav a{display:block;border:0}
.shell__nav img{display:block;border:0}
.shell__nav .label{display:none}

.shell__main{grid-area:main;min-width:0}

.shell__foot{grid-area:foot;min-height:67px;background:#000 url("support-back.gif") repeat-x;font-size:0}
.shell__foot img{display:inline-block;border:0}

@media (min-width:800px){
  .shell{padding-bottom:69px}
  .shell__foot{position:fixed;left:0;right:0;bottom:0;z-index:10;height:69px}
}

/* ============================================================
   MOBILE (below 800px)
   ============================================================ */
@media (max-width:799px){

  .shell{grid-template-columns:1fr;grid-template-areas:"bar" "banner" "main" "foot"}

  .topbar{
    grid-area:bar;display:flex;align-items:center;justify-content:space-between;
    gap:10px;padding:10px 12px;background:#000;border-bottom:1px solid var(--rule);
    position:sticky;top:0;z-index:20;
  }
  .topbar .brand{color:var(--link);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
  .burger{
    display:grid;place-items:center;width:48px;height:44px;padding:0;
    border:1px solid var(--rule);border-radius:3px;background:#0c0c0c;cursor:pointer;
  }
  .burger i{display:block;width:20px;height:2px;background:var(--link);box-shadow:0 -6px 0 var(--link),0 6px 0 var(--link)}

  .shell__banner{height:auto;background-size:auto 100%}
  .shell__banner .brandlink{display:flex}
  .shell__banner img{height:auto}
  .shell__banner img:first-child{width:58.76%}
  .shell__banner img:nth-child(2){width:41.24%}

  /* slide-in menu */
  .shell__nav{
    position:fixed;top:0;left:0;bottom:0;z-index:40;width:min(78vw,300px);
    background:#0a0a0a;border-right:1px solid var(--rule);font-size:1rem;
    overflow-y:auto;padding-top:64px;transform:translateX(-100%);transition:transform .25s ease;
  }
  .shell__nav.open{transform:translateX(0)}
  .navscrim{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.6);opacity:0;visibility:hidden;transition:opacity .25s ease}
  .navscrim.open{opacity:1;visibility:visible}
  .shell__nav a{display:flex;align-items:center;min-height:52px;padding:0 20px;border-bottom:1px solid var(--rule);text-decoration:none}
  .shell__nav img{display:none}
  .shell__nav .navcap{display:none}
  .shell__nav .label{display:block;color:var(--link);font-size:.82rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
  .shell__nav a:active .label{color:#fff}

  /* --- 4. sponsor bar edge to edge --- */
  .shell__foot{
    min-height:0;padding:0;text-align:center;
    background-size:auto 100%;font-size:0;line-height:0;
    /* full-bleed no matter what container it lands in */
    width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  }
  .shell__foot img{width:100vw;max-width:none;height:auto;display:block}

  /* --- 3. hide the animated school banner inside the content --- */
  .shell__main img[src*="djschool.gif"],
  .shell__main img[alt*="United DJ Mixing School - DJ school"],
  .shell__main img.school-banner{display:none!important}

  /* collapse the layout cells/rows/table the banner sat in,
     otherwise a stacked-table gap is left behind */
  /* Collapse ONLY the cell that directly holds the banner.
     Never a <tr> or <table> - on some pages the whole page lives
     inside one row, and hiding it blanks the page. */
  .shell__main td:has(> img.school-banner),
  .shell__main td:has(> img[src*="djschool.gif"]),
  .shell__main td > font:has(> img.school-banner),
  .shell__main p:has(> img.school-banner):not(:has(*:not(img))),
  .shell__main p:has(> img[src*="djschool.gif"]):not(:has(*:not(img))){
    display:none!important;margin:0!important;padding:0!important;
  }

  /* old layout tables are full of spacer cells; when stacked they
     each add a margin. Collapse anything with no real content. */
  /* Only collapse empty TABLE cells. Empty <p> tags are NOT junk on
     these pages - the old markup uses them as line separators, so
     hiding them runs whole lists together. */
  .shell__main td:empty,.shell__main th:empty,.shell__main tr:empty{
    display:none!important;margin:0!important;padding:0!important;
  }

  /* --- old page content --- */
  .shell__main{padding:18px 14px 28px;color:var(--ink);font-size:1.0625rem;line-height:1.65;overflow-wrap:break-word}
  .shell__main a{color:var(--gold)}
  .shell__main img{max-width:100%;height:auto;margin-inline:auto}
  .shell__main iframe,.shell__main embed,.shell__main object,.shell__main video{
    max-width:100%;width:100%;height:auto;aspect-ratio:16/9;display:block;margin-inline:auto}
  .shell__main table{width:100%!important;max-width:100%;border-collapse:collapse}
  .shell__main table,.shell__main tbody,.shell__main tr,.shell__main td,.shell__main th{
    display:block!important;width:100%!important;height:auto!important}
  .shell__main td,.shell__main th{padding:0;margin-bottom:14px;text-align:left!important}
  .shell__main div,.shell__main p,.shell__main span,.shell__main center,.shell__main blockquote,.shell__main form{
    float:none!important;width:auto!important;max-width:100%!important;height:auto!important;
    margin-left:0!important;margin-right:0!important}
  .shell__main input,.shell__main select,.shell__main textarea{
    max-width:100%;width:100%;padding:10px;font-size:16px;font-family:inherit;
    background:#111;color:#fff;border:1px solid var(--rule);border-radius:3px}
  .shell__main input[type=checkbox],.shell__main input[type=radio]{
    width:auto;min-width:22px;min-height:22px;margin:0 8px 0 0;vertical-align:middle}

  /* --- centre the form on mobile --- */
  .shell__main form{text-align:center}
  .shell__main form td,.shell__main form th,
  .shell__main form div,.shell__main form p,.shell__main form label{text-align:center!important}
  .shell__main form input[type=text],
  .shell__main form input[type=email],
  .shell__main form input[type=tel],
  .shell__main form input[type=number],
  .shell__main form textarea,
  .shell__main form select{text-align:center;margin-inline:auto}
  /* checkbox + its label sit together */
  .shell__main form input[type=checkbox],
  .shell__main form input[type=radio]{display:inline-block;margin-inline:0 8px}

  /* A group of checkboxes/radios lives in ONE cell separated by <br>.
     Shrink that cell to its content and centre the cell, so the boxes
     line up in a single column instead of each row centring itself. */
  /* Option groups come in two shapes in these old forms:
       - all options inside ONE cell separated by <br>   (enrolment)
       - one option per cell across a row                (booking)
     Give every option cell the SAME width and centre it, so every
     box lines up on one left edge whichever shape the page uses. */
  .shell__main form td:has(input[type=checkbox]),
  .shell__main form td:has(input[type=radio]),
  .shell__main form div:has(> input[type=checkbox]),
  .shell__main form div:has(> input[type=radio]),
  .shell__main form label:has(> input[type=checkbox]),
  .shell__main form label:has(> input[type=radio]){
    text-align:left!important;
    width:min(16rem,100%)!important;
    max-width:100%!important;
    margin-inline:auto!important;
    margin-bottom:2px!important;
  }
  .shell__main input[type=submit],.shell__main input[type=button],.shell__main input[type=reset],.shell__main button{
    width:auto;min-height:48px;padding:12px 22px;background:#000;color:var(--gold);
    border:1px solid var(--gold);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  .shell__main font{font-family:inherit!important;font-size:inherit!important}
  .shell__main font[size="5"],.shell__main font[size="+2"]{font-size:1.25em!important}
  .shell__main font[size="6"],.shell__main font[size="+3"]{font-size:1.5em!important}
}

/* ============================================================
   2. GREY BACKGROUNDS -> BLACK
   Old pages hard-code bgcolor="#494a5a" / "#484b5a" on the body
   and on table cells. Override every instance.
   ============================================================ */
body[bgcolor],
[bgcolor="#494a5a" i],[bgcolor="#484b5a" i],[bgcolor="#4a4b5a" i],[bgcolor="#494a59" i]{
  background-color:#000!important;
}

/* Section heading strips were mid-grey (#999999) with white text.
   Near-black bar, gold text, gold edge. Desktop and mobile. */
[bgcolor="#999999" i]{
  background-color:#141414!important;
  padding:10px 12px!important;
  letter-spacing:.06em;
}
[bgcolor="#999999" i] font,
[bgcolor="#999999" i] strong,
[bgcolor="#999999" i] span,
[bgcolor="#999999" i] b{
  color:var(--gold)!important;
}

/* ============================================================
   FORMS — DESKTOP (800px+)
   The enrolment and booking forms are raw 1990s markup: labels
   crammed right, inputs sized by character count (size="80"),
   white boxes on black. Give them a consistent modern layout.
   Mobile keeps its own rules above.
   ============================================================ */
@media (min-width:800px){

  .shell__main form{
    max-width:1000px;
    margin:0 auto 3rem;
    padding:0 2rem 2rem;
    background:transparent;
  }

  .shell__main form table{
    width:100%!important;max-width:100%!important;
    margin-left:0!important;margin-right:0!important;
    border-collapse:separate;border-spacing:0;table-layout:auto;
  }
  /* some pages wrap the form table in a centring div that adds an indent */
  .shell__main form > div,
  .shell__main form > center,
  .shell__main form > p{margin-inline:0!important;padding-inline:0!important}
  .shell__main form td,
  .shell__main form th{
    padding:9px 12px!important;
    vertical-align:middle!important;
    height:auto!important;
  }

  /* Label column - ONLY cells that sit directly beside a field.
     Headings and intro text also live in first cells, so a blanket
     td:first-child rule shrinks the page title. */
  .shell__main form td:first-child:not(:has(input)):not(:has(select)):not(:has(textarea)):has(+ td input),
  .shell__main form td:first-child:not(:has(input)):not(:has(select)):not(:has(textarea)):has(+ td select),
  .shell__main form td:first-child:not(:has(input)):not(:has(select)):not(:has(textarea)):has(+ td textarea){
    width:230px!important;
    min-width:230px!important;   /* auto table layout ignores width alone */
    text-align:right!important;
    vertical-align:middle!important;
    color:var(--ink);
    font-size:.92rem;
    line-height:1.45;
    hyphens:none;
    padding-right:16px!important;
  }
  .shell__main form td:first-child:not(:has(input)):not(:has(select)):not(:has(textarea)):has(+ td :is(input,select,textarea)) :is(span,font,div){
    color:var(--ink)!important;
    font-size:.92rem!important;
    line-height:1.45!important;
  }

  /* fields: one consistent look, ignore the old size="" attributes */
  .shell__main form input[type=text],
  .shell__main form input[type=email],
  .shell__main form input[type=tel],
  .shell__main form input[type=number],
  .shell__main form input:not([type]),
  .shell__main form select,
  .shell__main form textarea{
    width:340px!important;
    max-width:100%;
    padding:7px 10px;
    background:#141414;
    color:#fff;
    border:1px solid #333;
    border-radius:3px;
    font-family:var(--font);
    font-size:.9rem;
    line-height:1.3;
    transition:border-color .15s ease;
  }
  .shell__main form textarea{width:420px!important;min-height:100px}
  .shell__main form select{width:auto!important;min-width:150px}
  .shell__main form input:focus,
  .shell__main form select:focus,
  .shell__main form textarea:focus{
    outline:none;border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,204,102,.18);
  }
  .shell__main form input::placeholder{color:#666}

  /* Option cells carry hard-coded widths (148/111/97/124px) so the
     boxes never line up. Force one shared width per cell. */
  .shell__main form td:has(input[type=checkbox]),
  .shell__main form td:has(input[type=radio]){
    color:var(--ink);
    width:170px!important;
    min-width:170px!important;
    max-width:170px!important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:.9rem;
    padding:5px 12px 5px 0!important;
  }
  .shell__main form input[type=checkbox],
  .shell__main form input[type=radio]{
    width:18px!important;height:18px;min-width:18px;
    margin:0 9px 0 0;
    accent-color:var(--gold);
    vertical-align:-3px;
  }

  /* submit */
  .shell__main form input[type=submit],
  .shell__main form input[type=button],
  .shell__main form input[type=reset],
  .shell__main form button{
    width:auto!important;max-width:none;
    min-width:190px;min-height:50px;
    margin-top:.5rem;
    padding:14px 30px;
    background:var(--gold);
    color:#000;
    border:1px solid var(--gold);
    border-radius:3px;
    font-family:var(--font);
    font-size:.92rem;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;
    cursor:pointer;
    transition:background .15s ease,color .15s ease;
  }
  .shell__main form input[type=submit]:hover,
  .shell__main form button:hover{background:transparent;color:var(--gold)}

  /* the old markup pads forms with empty spacer cells */
  .shell__main form td:empty{padding:0!important}
}

/* ============================================================
   FORM TITLES
   Old pages set headings with inline point sizes meant for 2001
   monitors (e.g. font-size: 36pt = 48px). Bring any point-sized
   heading inside a form to one consistent size, matching the
   enrolment form: 32px desktop, 25.5px mobile.
   ============================================================ */
.shell__main form p[style*="pt"],
.shell__main form p[style*="pt"] :is(b,strong,span,font){
  font-size:32px!important;
  line-height:1.15!important;
}
@media (max-width:799px){
  .shell__main form p[style*="pt"],
  .shell__main form p[style*="pt"] :is(b,strong,span,font){
    font-size:25.5px!important;
  }
}

/* ============================================================
   TYPOGRAPHY CLEAN-UP
   1. Kill stray serif text. 120 places across the section render
      in Times New Roman because the old font tag was missing or
      misspelled (face="arial," with a stray comma appears 9 times).
   2. Lift small body text. A third of the text rendered at 13px
      (<font size="2">), below comfortable reading size.
   Headings are NOT touched here - that is a separate pass.
   ============================================================ */

/* 1. one family for all page content */
.shell__main,
.shell__main :is(p,td,th,li,div,span,font,b,strong,em,i,a,label,blockquote,center){
  font-family:var(--font)!important;
}

/* 2. minimum readable body size */
.shell__main font[size="1"]{font-size:0.9rem!important}
.shell__main font[size="2"]{font-size:1rem!important}
.shell__main [style*="font-size: 10.0pt"],
.shell__main [style*="font-size:10.0pt"],
.shell__main [style*="font-size: 10pt"],
.shell__main [style*="font-size:10pt"],
.shell__main [style*="font-size: 11.0pt"],
.shell__main [style*="font-size:11pt"],
.shell__main [style*="font-size: 12px"],
.shell__main [style*="font-size:12px"],
.shell__main [style*="font-size: 14px"],
.shell__main [style*="font-size:14px"]{
  font-size:1rem!important;
}

/* keep dense results tables compact - small text is doing a job there */
.shell__main table table font[size="1"],
.shell__main table table font[size="2"]{font-size:.95rem!important}

/* Between 800 and 1150px the four option columns plus the label column
   are wider than the screen. Narrow the columns instead of overflowing. */
@media (min-width:800px) and (max-width:1150px){
  /* form must not exceed the content column */
  .shell__main form{padding-inline:1rem}
  .shell__main form table{width:100%!important;max-width:100%!important}
  .shell__main form td:has(input[type=checkbox]),
  .shell__main form td:has(input[type=radio]){
    width:auto!important;min-width:112px!important;max-width:none!important;
    white-space:normal;font-size:.85rem;
  }
  .shell__main form td:first-child:not(:has(input)):not(:has(select)):not(:has(textarea)):has(+ td :is(input,select,textarea)){
    width:180px!important;min-width:180px!important;
  }
  .shell__main form input[type=text],
  .shell__main form input[type=email],
  .shell__main form input[type=tel],
  .shell__main form input:not([type]){width:280px!important}
}

/* ============================================================
   DUPLICATE MASTHEAD
   The banner strip at the top of every page already reads
   "United DJ Mixing School". The djschool.gif inside the page
   content repeats it, so on desktop the heading appeared twice.
   Hide the in-content copy at every screen size.
   ============================================================ */
@media (max-width:799px){
  .shell__main img[src*="djschool.gif"],
  .shell__main img[alt*="United DJ Mixing School - DJ school"],
  .shell__main img.school-banner{display:none!important}

  /* collapse only the cell that directly holds it - never a row or
     table, since on some pages the whole page lives inside one row */
  .shell__main td:has(> img.school-banner),
  .shell__main td:has(> img[src*="djschool.gif"]),
  .shell__main td > font:has(> img.school-banner),
  .shell__main p:has(> img.school-banner):not(:has(*:not(img))),
  .shell__main p:has(> img[src*="djschool.gif"]):not(:has(*:not(img))){
    display:none!important;margin:0!important;padding:0!important;
  }
}

/* ============================================================
   OVERSIZED CONTENT ON DESKTOP
   Old pages hard-code table and image widths for 2003 monitors
   (e.g. <table width="950">, <img width="709">). On anything
   narrower than that the page runs off the right edge and the
   content sits hard left instead of centred.
   ============================================================ */
@media (min-width:800px){
  .shell__main table{
    max-width:100%!important;
    margin-inline:auto!important;
  }
  /* a nested table's cells can still hold it wider than its parent;
     allow the cells to shrink */
  .shell__main table td,
  .shell__main table th{
    max-width:100%;
    overflow-wrap:break-word;
    word-break:break-word;
  }
  .shell__main table table{width:100%!important}
  .shell__main img,
  .shell__main iframe,
  .shell__main embed,
  .shell__main object,
  .shell__main video{
    max-width:100%;
    height:auto;
  }
  /* keep the form panel's own centring - it sets its own max-width */
  .shell__main form table{margin-inline:0!important}
}

/* Between 800 and 950px a few old tables have cell content wider
   than the content column and push the page sideways. Force the
   columns to fit instead. */
@media (min-width:800px) and (max-width:950px){
  .shell__main table{table-layout:fixed!important;width:100%!important}
  .shell__main table td,
  .shell__main table th{overflow-wrap:anywhere}
  .shell__main form table{table-layout:auto!important}
  .shell__main img{max-width:100%!important;height:auto!important}
}

/* ============================================================
   TEXT COLOUR
   Most old pages set body text="#FFCC66", so their copy renders
   gold. The index page uses light grey/white. Bring every page
   into line: white body text, gold kept only for links and the
   menu, so it still signals "this is clickable".
   ============================================================ */
.shell__main{color:#ffffff}
.shell__main :is(p,td,th,li,div,span,font,b,strong,em,i,center,blockquote,label){
  color:#ffffff;
}
/* anything the old markup painted gold */
.shell__main [color="#FFCC66" i],
.shell__main [color="#ffcc66" i],
.shell__main [style*="color:#FFCC66" i],
.shell__main [style*="color: #FFCC66" i]{
  color:#ffffff!important;
}

/* links stay gold so they remain obviously clickable */
.shell__main a,
.shell__main a :is(font,span,b,strong,u){color:var(--gold)!important}
.shell__main a:hover,
.shell__main a:hover :is(font,span,b,strong,u){color:#ffffff!important}

/* keep the section heading strips gold on their dark bar */
[bgcolor="#999999" i] :is(font,strong,span,b){color:var(--gold)!important}

/* ============================================================
   SPONSOR BAR ALIGNMENT
   On pages whose markup nests the shell inside a centring
   element (battles.html has two <body> tags, so the footer ends
   up inside the page content), the bar inherited centring while
   every other page had it left. Set it explicitly so it never
   depends on what it happens to sit inside.
   ============================================================ */
.shell__foot{text-align:left!important}
@media (max-width:799px){
  .shell__foot{text-align:center!important}
}

/* ============================================================
   HEADING STRIPS + LINK COLOUR
   Heading bars: white text on the charcoal bar (the gold edge
   still marks the section).
   Links: gold reads as decoration, not as "clickable". Use the
   standard dark-background link blue instead.
   ============================================================ */
:root{
  --link:#8ab4f8;          /* standard link blue for dark backgrounds */
  --link-visited:#c58af9;  /* visited */
}

[bgcolor="#999999" i],
[bgcolor="#999999" i] :is(font,strong,span,b){
  color:#ffffff!important;
}

.shell__main a,
.shell__main a :is(font,span,b,strong,u,em){
  color:var(--link)!important;
  text-decoration:underline;
  text-underline-offset:2px;
}
.shell__main a:visited,
.shell__main a:visited :is(font,span,b,strong,u,em){color:var(--link-visited)!important}
.shell__main a:hover,
.shell__main a:hover :is(font,span,b,strong,u,em){color:#ffffff!important}
.shell__main a:focus-visible{outline:2px solid var(--link);outline-offset:2px}

/* images wrapped in links keep no underline */
.shell__main a:has(> img){text-decoration:none}

/* ============================================================
   OVERSIZED OLD TABLES
   A few pages contain tables with a hard pixel width (959, 950)
   that cannot shrink because their cells hold fixed-size images.
   Rather than let them push the whole page sideways - which
   drags the banner and menu off screen - contain the scroll to
   the content area. The shell stays put; only that block scrolls.
   ============================================================ */
@media (min-width:800px){
  .shell__main{overflow-x:auto}
}

/* ============================================================
   LINK LISTS
   Old pages set a font size on some link entries and not others
   (the instructors page renders local DJs at 16px and
   international guests at 18px). Link text should match the
   copy around it, whatever the old markup asked for.
   Headings are excluded - they are sized by their own rules.
   ============================================================ */
.shell__main a font[size],
.shell__main a font,
.shell__main a span[style*="font-size"]{
  font-size:inherit!important;
}

/* readable spacing for long lists of links separated by <br> */
.shell__main a{line-height:1.9}

/* size="+1" is used inconsistently for list items - on the
   instructors page it makes the international guests larger than
   the local DJs. Fold it into the body size. */
.shell__main font[size="+1"],
.shell__main a font[size="+1"],
.shell__main font[size="4"]{font-size:1rem!important}

/* ============================================================
   "MORE" LINK AT THE FOOT OF A PAGE
   A single call-to-action link, styled like a button so it reads
   as navigation rather than body text.
   ============================================================ */
.shell__main .morelink{
  display:block;
  text-align:center;
  margin:1.25rem auto;
}
/* two or more buttons in a row sit together */
.shell__main .morelink + .morelink{margin-top:0}
.shell__main a.morebtn,
.shell__main a.morebtn:visited{
  display:inline-block;
  padding:14px 30px;
  min-height:48px;
  border:1px solid var(--link);
  border-radius:3px;
  background:transparent;
  color:var(--link)!important;
  font-family:var(--font);
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  line-height:1.4;
}
.shell__main a.morebtn:hover{
  background:var(--link);
  color:#000!important;
}
.shell__main a.morebtn:focus-visible{outline:2px solid #fff;outline-offset:3px}