@import url('https://fonts.googleapis.com/css2?family=Nixie+One&family=PT+Mono&display=swap');

/* ==========================================================================
   4Degrees — Craft Beer & Kitchen, Royal Star Arcade, Maidstone
   Site-wide stylesheet, v2.

   Install, on every page, AFTER the builder's viewer.css link:
       <link rel="stylesheet" href="/4degrees.css">

   v2 adds a builder-override layer, because pages built against a live
   viewer.css (anything on the g-2026... build) come with absolute
   positioning and a loading lock that outrank a plain stylesheet.
   Selectors are scoped to #body-element to win on specificity, and the
   layout reset uses !important so it also beats inline styles set by
   viewer.js at runtime.

   Selectors key off [element-type], shared by every page, not
   [element-id], which is unique per page. Per-page tweaks go at the end.
   ========================================================================== */

:root {
  --stout: #120f0c;
  --tap: #1b1712;
  --board: #241e18;
  --amber: #d79a3c;
  --amber-dim: rgba(215, 154, 60, .28);
  --hop: #8c9a5b;
  --chalk: #ece5d8;
  --chalk-dim: rgba(236, 229, 216, .64);
  --hairline: rgba(236, 229, 216, .12);
  --display: "Nixie One", "Times New Roman", Georgia, serif;
  --mono: "PT Mono", "SFMono-Regular", Consolas, monospace;
  --shell: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* ==========================================================================
   1. BUILDER OVERRIDE LAYER
   Delete this whole section if you remove the viewer.css link instead.
   ========================================================================== */

/* The loading class is meant to be stripped by viewer.js. If that script is
   blocked or errors, the page stays one screen tall and cannot scroll. */
body[class*="state-loading"],
body[class*="state-loading"] #body-element,
body[class*="state-loading"] .page-element {
  height: auto !important;
  min-height: 0 !important;
  overflow-y: visible !important;
}

#desktop-loading-screen,
#mobile-loading-screen { display: none !important; }

/* The builder lays the page out with absolute coordinates, and viewer.js
   writes more of them inline. This returns everything to document flow so
   the design below can take over. Positioned pieces are re-asserted after. */
#body-element .site-element,
#body-element .element-children-container {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  transform: none !important;
  float: none !important;
  z-index: auto !important;
}

/* ==========================================================================
   2. FOUNDATIONS
   ========================================================================== */

/* Every page carries the site name as a bare text node in <body>, outside
   any element, which CSS cannot select. Type is zeroed here and restored on
   the page root. Deleting that line from each page is the cleaner fix. */
body {
  margin: 0;
  font-size: 0;
  background: var(--stout);
}

#body-element {
  font-size: 1rem;
  font-family: var(--display);
  line-height: 1.75;
  color: var(--chalk-dim);
  -webkit-font-smoothing: antialiased;
}

#body-element img { max-width: 100%; height: auto; border: 0; display: block; }
#body-element a { color: var(--amber); text-decoration: none; transition: color .22s ease; }
#body-element a:hover { color: var(--chalk); }
#body-element ol, #body-element ul { list-style: none; margin: 0; padding: 0; }
#body-element p { margin: 0 0 1rem; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

#body-element h1, #body-element h2, #body-element h3 {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.2;
  color: var(--chalk);
}

#body-element h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); }
#body-element h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
#body-element h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }

/* builder theme colour hooks */
#body-element .theme-text-color-0-0 { color: var(--amber); }
#body-element .theme-text-color-1-0 { color: var(--chalk); }
#body-element [class*="theme-text-color-4"] { color: var(--amber); }

/* --- shells -------------------------------------------------------------- */

#body-element header > .element-children-container,
#body-element footer > .element-children-container,
#body-element section > .element-children-container,
#body-element [element-type="PageContentElement"] > .element-children-container {
  width: 100% !important;
  max-width: var(--shell);
  margin: 0 auto !important;
  padding: 0 28px;
}

#body-element section > .element-children-container,
#body-element [element-type="PageContentElement"] > .element-children-container {
  padding-top: 4.5rem;
  padding-bottom: 5rem;
}

#body-element [element-type="SectionElement"]:nth-of-type(even) {
  background: var(--tap);
  border-top: 1px solid rgba(236, 229, 216, .08);
  border-bottom: 1px solid rgba(236, 229, 216, .08);
}

/* widgets the builder leaves behind empty */
#body-element :is(section, div, nav, ol, h1, h2, h3)[element-type]:empty,
#body-element [element-type="label"]:empty { display: none !important; }

#body-element .element-children-container > a:empty { display: none; }

/* ==========================================================================
   3. MASTHEAD (shared master page, so no element-ids needed)
   ========================================================================== */

#body-element header[element-type="HeaderElement"] {
  position: relative !important;
  overflow: hidden;
  padding: 3.4rem 0 0;
  background:
    radial-gradient(70% 120% at 50% -30%, rgba(215, 154, 60, .17), rgba(215, 154, 60, 0) 62%),
    linear-gradient(180deg, #0e0b09, var(--stout));
}

/* the builder Rectangle becomes the brass edge along the top */
#body-element header [element-type="Rectangle"] {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--hop), var(--amber) 42%, #a4712a);
}

#body-element header > .element-children-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#body-element header [element-type="image"] { order: 1; }
#body-element header [element-type="image"] img { width: 200px; }
#body-element header > .element-children-container > div:not([element-type]) { order: 2; }

#body-element header h1[element-type="freeText"] {
  max-width: none;
  margin: 1.6rem 0 0;
  letter-spacing: .02em;
  line-height: 1.15;
}

#body-element header h1[element-type="freeText"] span {
  font-size: clamp(2.1rem, 5.6vw, 3.4rem) !important;
  line-height: 1.15 !important;
  color: var(--chalk);
}

#body-element header div[element-type="freeText"] {
  order: 3;
  max-width: none;
  margin-top: 1.1rem;
}

#body-element header div[element-type="freeText"] span {
  font-family: var(--mono) !important;
  font-size: .72rem !important;
  letter-spacing: .22em;
  color: var(--amber);
}

#body-element header div[element-type="freeText"] br { display: none; }

/* --- fascia-board navigation --------------------------------------------- */

#body-element [element-type="PagesMenu"] {
  order: 4;
  width: 100% !important;
  margin-top: 2.8rem;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

#body-element [element-type="PagesMenu"] > nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem 2rem;
  padding: 1.05rem 0;
}

#body-element [element-type="PagesMenu"] a {
  position: relative;
  padding: .3rem 0;
  max-width: 22ch;
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .13em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--chalk-dim);
}

#body-element [element-type="PagesMenu"] a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .26s ease;
}

#body-element [element-type="PagesMenu"] a:hover,
#body-element [element-type="PagesMenu"] a:focus-visible { color: var(--amber); }

#body-element [element-type="PagesMenu"] a:hover::after,
#body-element [element-type="PagesMenu"] a:focus-visible::after { transform: scaleX(1); }

#body-element [element-type="PagesMenu"] a[aria-current],
#body-element [element-type="PagesMenu"] a.selected { color: var(--amber); }

/* ==========================================================================
   4. PROSE
   ========================================================================== */

#body-element [element-type="freeText"] {
  max-width: 66ch;
  margin-left: auto;
  margin-right: auto;
}

#body-element [element-type="freeText"] span:empty { display: none; }
#body-element [element-type="freeText"] div { margin: 0; }

/* editor text carries inline line-height, which cramps long passages */
#body-element section [element-type="freeText"] span { line-height: inherit !important; }

/* the opening text block on a page reads as the lede or page title */
#body-element .element-children-container > [element-type="freeText"]:first-child > div:first-child {
  margin-bottom: 2.2rem;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.45;
  color: var(--chalk);
}

/* a lone accent-coloured line is a subheading in this theme */
#body-element [element-type="freeText"] div > span[class*="theme-text-color-4"]:only-child {
  display: block;
  margin: 2.6rem 0 1.2rem;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  line-height: 1.3;
  letter-spacing: .01em;
}

#body-element [element-type="freeText"] + [element-type="freeText"] { margin-top: 1.4rem; }

/* ==========================================================================
   5. MEDIA AND EMBEDS
   ========================================================================== */

#body-element [element-type="VideoPlayer"],
#body-element [element-type^="ExternalApp"]:has(iframe) {
  width: 100% !important;
  max-width: 880px;
  margin: 0 auto 2.6rem !important;
  padding: 10px;
  background: #0b0908;
  border: 1px solid var(--amber-dim);
  box-shadow: 0 40px 70px -46px rgba(0, 0, 0, .9);
}

#body-element [element-type="VideoPlayer"] iframe,
#body-element [element-type^="ExternalApp"] iframe {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
}

#body-element [element-type*="Map"] iframe { aspect-ratio: 21 / 9; }

/* Facebook comments render nothing without the SDK, leaving an empty box.
   Shown only once Facebook has actually rendered into it. */
#body-element [element-type*="FacebookComments"]:not(:has([fb-xfbml-state])) { display: none; }

#body-element section [element-type="image"] img,
#body-element [element-type="PageContentElement"] [element-type="image"] img {
  margin: 2rem auto;
  border: 1px solid rgba(236, 229, 216, .1);
}

/* ==========================================================================
   6. BUTTONS, FORMS, TABLES
   ========================================================================== */

#body-element [element-type="SkinButtonElement"] {
  display: inline-block;
  border: 1px solid rgba(236, 229, 216, .38);
  color: var(--chalk);
  transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}

#body-element [element-type="SkinButtonElement"] > div { padding: .95rem 2.2rem; text-align: center; }
#body-element [element-type="SkinButtonElement"] span { font-size: 1rem !important; letter-spacing: .1em; }
#body-element [element-type="SkinButtonElement"]:hover { border-color: var(--amber); color: var(--amber); }

#body-element input,
#body-element textarea,
#body-element select {
  width: 100% !important;
  padding: .8rem .9rem;
  background: rgba(11, 9, 8, .6);
  border: 1px solid rgba(236, 229, 216, .22);
  border-radius: 0;
  font-family: var(--mono);
  font-size: .88rem;
  color: var(--chalk);
  transition: border-color .22s ease;
}

#body-element input::placeholder,
#body-element textarea::placeholder { color: rgba(236, 229, 216, .38); }

#body-element input:focus,
#body-element textarea:focus,
#body-element select:focus { border-color: var(--amber); outline: none; }

#body-element textarea { min-height: 9rem !important; resize: vertical; }

#body-element label {
  display: block;
  margin-bottom: .35rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--chalk-dim);
}

#body-element input[type="submit"],
#body-element input[type="button"],
#body-element button {
  width: auto !important;
  padding: .9rem 2.1rem;
  background: var(--amber);
  border: 1px solid var(--amber);
  color: var(--stout);
  letter-spacing: .1em;
  cursor: pointer;
}

#body-element input[type="submit"]:hover,
#body-element input[type="button"]:hover,
#body-element button:hover { background: #e8ac4d; }

#body-element input[type="checkbox"],
#body-element input[type="radio"] { width: auto !important; accent-color: var(--amber); }

#body-element table { width: 100% !important; border-collapse: collapse; margin: 0 0 2rem; }

#body-element th,
#body-element td {
  padding: .75rem .5rem;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
}

#body-element th {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber);
}

#body-element hr,
#body-element [element-type="Line"],
#body-element [element-type="HorizontalLine"] {
  height: 0 !important;
  margin: 2.6rem auto;
  border: 0;
  border-top: 1px solid var(--amber-dim);
}

#body-element [element-type="label"] {
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--chalk-dim);
}

/* ==========================================================================
   7. GALLERIES
   ========================================================================== */

#body-element [element-type="Gallery"] { width: 100% !important; }

#body-element [element-type="Gallery"] > ol {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 16px;
}

#body-element [element-type="skinGalleryItem"],
#body-element [element-type="skinGalleryItem"] > div { height: 100% !important; }

#body-element [element-type="skinGalleryItem"] [element-type="skinHierarchyBox"] > .element-children-container {
  position: relative !important;
  height: 100% !important;
  overflow: hidden;
  border: 1px solid rgba(236, 229, 216, .1);
}

#body-element [element-type="skinGalleryItem"] [element-type="image"] img {
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(.96) contrast(1.04);
}

#body-element [element-type="skinGalleryItem"] [element-type="userBox"] {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 2.6rem .95rem .85rem;
  background: linear-gradient(to top, rgba(18, 15, 12, .93) 12%, rgba(18, 15, 12, 0));
}

#body-element [element-type="skinGalleryItem"] [element-type="label"] {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .06em;
  line-height: 1.4;
  color: var(--chalk);
}

@media (min-width: 900px) {
  #body-element [element-type="Gallery"] > ol > li:first-child { grid-column: span 2; }
  #body-element [element-type="Gallery"] > ol > li:first-child img { aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   8. SOCIAL ROWS — shown only when the icons actually link somewhere
   ========================================================================== */

#body-element nav[element-type="SocialIconsElement"]:not(:has(a[href])),
#body-element nav[element-type="Menu"]:not(:has(a:not(:empty))) { display: none; }

#body-element nav[element-type="SocialIconsElement"] > ol {
  display: flex;
  justify-content: center;
  gap: .8rem;
  width: 100%;
}

#body-element [element-type="SkinSocialIconItem"] {
  display: grid;
  place-items: center;
  width: 42px !important;
  height: 42px !important;
  border: 1px solid var(--amber-dim);
  border-radius: 50%;
  transition: background-color .22s ease, border-color .22s ease;
}

#body-element [element-type="SkinSocialIconItem"]:hover {
  border-color: var(--amber);
  background: rgba(215, 154, 60, .12);
}

#body-element [element-type="Icon"]:empty,
#body-element [element-type="Ellipse"]:empty { display: none; }

/* ==========================================================================
   9. FOOTER
   ========================================================================== */

#body-element footer[element-type="FooterElement"] {
  background: var(--stout);
  border-top: 1px solid rgba(236, 229, 216, .1);
}

#body-element footer > .element-children-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding-top: 2.1rem;
  padding-bottom: 2.1rem;
}

#body-element footer [element-type="freeText"] {
  max-width: none;
  margin: 0;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .1em;
  color: rgba(236, 229, 216, .45);
}

#body-element footer [element-type="image"] img {
  width: 73px;
  margin: 0;
  border: 1px solid rgba(236, 229, 216, .16);
}

/* ==========================================================================
   10. NARROW SCREENS
   Needs <meta name="viewport" content="width=device-width, initial-scale=1">
   in place of the builder's width=1024.
   ========================================================================== */

@media (max-width: 767px) {
  #body-element header[element-type="HeaderElement"] { padding-top: 2.4rem; }

  #body-element header > .element-children-container,
  #body-element footer > .element-children-container,
  #body-element section > .element-children-container,
  #body-element [element-type="PageContentElement"] > .element-children-container {
    padding-left: 18px;
    padding-right: 18px;
  }

  #body-element section > .element-children-container,
  #body-element [element-type="PageContentElement"] > .element-children-container {
    padding-top: 3.2rem;
    padding-bottom: 3.6rem;
  }

  #body-element [element-type="PagesMenu"] > nav { gap: .2rem 1.15rem; }
  #body-element [element-type="SkinButtonElement"] { display: block; }
  #body-element [element-type="Gallery"] > ol { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
  #body-element footer > .element-children-container { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ==========================================================================
   11. PER-PAGE OVERRIDES
   Everything above is site-wide. One-page tweaks go here, by element-id.
   ========================================================================== */

/* HOME — "Book a table" is the primary action, "See Our Menu" secondary */
#body-element [element-id="id1517490962932"] {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--stout);
}

#body-element [element-id="id1517490962932"]:hover {
  background: #e8ac4d;
  border-color: #e8ac4d;
  color: var(--stout);
}

/* HOME — burger and allergy lines sit under a rule, as a menu note */
#body-element [element-id="1404635436246"] > div:nth-child(3) {
  max-width: 58ch;
  margin: 0 auto;
  padding-top: 1.8rem;
  border-top: 1px solid var(--amber-dim);
}

/* ABOUT US — the title section is a band, not a full-height section */
#body-element [element-id="1404644371203"] > .element-children-container {
  padding-top: 3.2rem;
  padding-bottom: 3.2rem;
  text-align: center;
}

/* ABOUT US — the shelf photo sits right of the closing paragraphs on wide screens */
@media (min-width: 900px) {
  #body-element [element-id="1404645248048"] img {
    float: right;
    width: 288px;
    margin: .4rem 0 1.6rem 2.4rem;
  }
}