/* =========================================================
   SAVILES HALL – sitewide stylesheet
   Link on every page, AFTER the existing <style> blocks:
   <link rel="stylesheet" href="/css/saviles.css" type="text/css">
   Works with the legacy table markup – no HTML changes needed.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink:#0d0b12; --panel:#17131f; --line:rgba(255,255,255,.09);
  --gold:#d4af6a; --violet:#934fe8; --text:#ece8f3; --muted:#a79fb8;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0!important;padding:0;min-height:100vh;
  font-family:'Inter',Arial,sans-serif!important;font-size:15px;line-height:1.65;
  color:var(--text)!important;
  background:
    radial-gradient(900px 500px at 85% -10%,rgba(147,79,232,.28),transparent 60%),
    radial-gradient(700px 500px at -10% 30%,rgba(212,175,106,.14),transparent 60%),
    var(--ink)!important;
  background-attachment:fixed!important;
}
img{max-width:100%;height:auto;border:0}
a{color:var(--gold);text-decoration:none;transition:.25s}
a:hover{color:var(--violet)!important}
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif;color:var(--gold);line-height:1.25}
p{margin:0 0 .9em}
hr{border:0;border-top:1px solid var(--line)}
ul,ol{padding-left:1.3em}

/* Neutralise legacy fixed widths / fonts / colours */
table{border-collapse:collapse;max-width:100%}
table[width]{width:auto!important}
td,th,p,span,div,li,strong,b,font{color:inherit}
font[color],font[face]{color:inherit!important;font-family:inherit!important}
[class^="style"],[class*=" style"]{
  font-family:'Inter',Arial,sans-serif!important;
  font-size:.92rem!important;color:var(--text)!important;
}
a[class^="style"],a[class*=" style"]{color:var(--gold)!important;font-weight:600}
a[class^="style"]:hover,a[class*=" style"]:hover{color:var(--violet)!important}
.style12,.style8,.style6,.style7{font-weight:700}
.style7{font-size:.8rem!important}

/* ---------- Page layout (root table) ---------- */
body>table,body>table>tbody,body>table>tbody>tr,body>table>tbody>tr>td{display:block}
body>table{width:100%!important}

/* Header row: logo / banner images */
body>table>tbody>tr:first-child{
  position:sticky;top:0;z-index:50;
  background:rgba(13,11,18,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
body>table>tbody>tr:first-child table,
body>table>tbody>tr:first-child tbody{display:block;width:100%!important}
body>table>tbody>tr:first-child tr{
  display:flex;align-items:center;gap:.6rem;
  padding:.5rem clamp(1rem,4vw,3rem);
}
body>table>tbody>tr:first-child td{display:block;width:auto!important}
body>table>tbody>tr:first-child img{height:48px;width:auto;border-radius:8px}

/* Layout row: nav on top, content below */
body>table>tbody>tr:nth-child(2)>td>table,
body>table>tbody>tr:nth-child(2)>td>table>tbody{display:block;width:100%!important}
body>table>tbody>tr:nth-child(2)>td>table>tbody>tr{display:flex;flex-direction:column}
body>table>tbody>tr:nth-child(2)>td>table>tbody>tr>td{display:block;width:auto!important}

/* ---------- Horizontal navigation ---------- */
table[background*="nav_back"]{
  display:block;width:100%!important;background:none!important;
  border-bottom:1px solid var(--line);background-color:rgba(255,255,255,.03)!important;
}
table[background*="nav_back"]>tbody{display:block}
/* hide logo rows & spacer rows in the old sidebar */
table[background*="nav_back"]>tbody>tr:not(:has(table)){display:none}
table[background*="nav_back"]>tbody>tr{display:block}
table[background*="nav_back"]>tbody>tr>td{display:block;padding:0}
table[background*="nav_back"] table,
table[background*="nav_back"] table>tbody{display:flex;flex-wrap:wrap;justify-content:center;width:100%!important;gap:.1rem .2rem;padding:.35rem clamp(.5rem,3vw,2rem)}
table[background*="nav_back"] table>tbody>tr{display:block}
table[background*="nav_back"] table td:first-child{display:none}   /* bullet images */
table[background*="nav_back"] table td{display:block;height:auto!important;width:auto!important;padding:0}
table[background*="nav_back"] table p{margin:0}
table[background*="nav_back"] a{
  display:block;padding:.4rem .65rem;font-size:.72rem!important;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  border-radius:99px;color:var(--text)!important;
}
table[background*="nav_back"] a:hover{color:var(--ink)!important;background:var(--gold)}

/* ---------- Content area ---------- */
body>table>tbody>tr:nth-child(2)>td>table>tbody>tr>td:not(:first-child){
  max-width:1240px;margin:0 auto;width:100%!important;
  padding:clamp(1.2rem,3vw,2.5rem) clamp(1rem,4vw,3rem);
}
td[valign="top"]>table[cellpadding="7"],
td[valign="top"]>table[cellpadding="7"] td{padding:.5rem}
td{vertical-align:top}

/* Bullet lists / headings */
.style8,.style12{color:var(--gold)!important}
.style8{font-size:1rem!important}

/* ---------- Cards (themed dinners, rooms, event grids) ---------- */
table[cellpadding="6"]{
  display:block;width:100%!important;overflow:hidden;
  border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
table[cellpadding="6"]:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 20px 50px -20px rgba(147,79,232,.6)}
table[cellpadding="6"]>tbody{display:block}
table[cellpadding="6"] tr{display:block}
table[cellpadding="6"] td{display:block;height:auto!important;padding:.7rem .9rem;background:transparent!important}
table[cellpadding="6"] td[bgcolor="#000000"]{background:#1b1526!important;text-align:center;border-bottom:1px solid var(--line)}
table[cellpadding="6"] td[bgcolor="#000000"] a{color:var(--gold)!important;font-family:'Playfair Display',serif!important;font-size:1rem!important}
table[cellpadding="6"] td[bgcolor="#666666"]{padding:0;background:#0d0b12!important}
table[cellpadding="6"] td[bgcolor="#666666"] img{width:100%;height:150px;object-fit:cover;border-radius:0;transition:transform .6s}
table[cellpadding="6"]:hover td[bgcolor="#666666"] img{transform:scale(1.06)}
table[cellpadding="6"] td[bgcolor="#CCCCCC"]{color:var(--text)!important}
table[cellpadding="6"] td[bgcolor="#CCCCCC"] a{display:inline-block;margin:.15rem 0;color:var(--gold)!important}

/* Grid wrapper tables that hold the cards: make cells breathe */
table[cellspacing="7"]{border-spacing:.8rem;border-collapse:separate;width:100%!important;float:none!important}
table[cellspacing="7"]>tbody>tr>td{width:25%}

/* ---------- Generic coloured cells from legacy markup ---------- */
td[bgcolor="#000000"],td[bgcolor="#000"]{background:#1b1526!important}
td[bgcolor="#666666"]{background:#241c33!important}
td[bgcolor="#CCCCCC"],td[bgcolor="#cccccc"],td[bgcolor="#FFFFFF"],td[bgcolor="#ffffff"],
td[bgcolor="#EEEEEE"],td[bgcolor="#eeeeee"],td[bgcolor="#F0F0F0"]{background:rgba(255,255,255,.05)!important}

/* ---------- Data tables (rates, rooms, spec sheets) ---------- */
table[border="1"],table[border="2"]{border:1px solid var(--line)!important;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.03)}
table[border="1"] td,table[border="1"] th,
table[border="2"] td,table[border="2"] th{border:1px solid var(--line)!important;padding:.55rem .8rem}
th{background:#1b1526;color:var(--gold);text-align:left;font-weight:700}
tr:nth-child(even)>td{background-color:rgba(255,255,255,.015)}

/* ---------- Forms (booking form, enquiries) ---------- */
input[type="text"],input[type="email"],input[type="tel"],input[type="password"],
input[type="number"],input[type="date"],select,textarea{
  width:100%;max-width:420px;padding:.6rem .8rem;font:inherit;color:var(--text);
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:10px;outline:0;
}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,106,.2)}
select option{background:var(--panel);color:var(--text)}
input[type="submit"],input[type="button"],input[type="reset"],button{
  padding:.65rem 1.4rem;font:600 .8rem 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);background:var(--gold);border:0;border-radius:99px;cursor:pointer;transition:.25s;
}
input[type="submit"]:hover,input[type="button"]:hover,button:hover{background:var(--violet);color:#fff}
input[type="checkbox"],input[type="radio"]{accent-color:var(--gold)}

/* ---------- Images in content ---------- */
td>img,p>img,div>img{border-radius:12px}
a>img{transition:transform .5s,filter .5s}
a:hover>img{filter:brightness(1.08)}

/* ---------- Footer ---------- */
body>table>tbody>tr:last-child{
  display:block;margin-top:2.5rem;border-top:1px solid var(--line);background:rgba(0,0,0,.25);
}
body>table>tbody>tr:last-child table,
body>table>tbody>tr:last-child tbody,
body>table>tbody>tr:last-child tr,
body>table>tbody>tr:last-child td{display:block;width:100%!important}
body>table>tbody>tr:last-child td{max-width:1240px;margin:0 auto;padding:1.4rem clamp(1rem,4vw,3rem)}
body>table>tbody>tr:last-child p,
body>table>tbody>tr:last-child a{font-size:.8rem!important;color:var(--muted)!important}
body>table>tbody>tr:last-child a{color:var(--text)!important;border-bottom:1px solid transparent}
body>table>tbody>tr:last-child a:hover{color:var(--violet)!important;border-color:var(--violet)}
td[background*="base_line"]{height:1px!important;background:var(--line)!important}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  table[cellspacing="7"],table[cellspacing="7"]>tbody{display:block}
  table[cellspacing="7"]>tbody>tr{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
  table[cellspacing="7"]>tbody>tr>td{display:block;width:auto}
}
@media(max-width:560px){
  table[cellspacing="7"]>tbody>tr{grid-template-columns:1fr}
  body>table>tbody>tr:first-child img:not(:first-child){display:none}
}
