/* ==========================================================================
   sitenn.com (Spectrum Interiors of Tennessee) — responsive / design layer
   for the flattened FlexSite build.
   Loaded last, after publicstyle.css, mbcsmbmcp.css and responsive.css.

   Tokens are taken from the live site so mobile stays on-brand:
     ink        #343530   copyright bar, the header's own scrolled state
                          (.fixed-pos), the footer address panel
     brand      #d72229   H1 colour and the #rectangle rule
     band       #bcbdae   sub-footer 5 (footer navigation)
     link       #cc3300   body links
     display    PT Serif 700          H1
     accent     Playfair Display      nav, footer links, project buttons
     body       Rubik 400
   All three faces are @import-ed by publicstyle.css, so they survive
   flattening; the stacks below only supply fallbacks.

   Upstream served phones a SEPARATE site at /mobile/ via a user-agent 302.
   The flattened build has no user-agent sniffing: everyone gets these pages,
   which carry strictly more content than /mobile/ ever did.
   ========================================================================== */

:root {
  --sp-ink: #343530;
  --sp-brand: #d72229;
  --sp-band: #bcbdae;
  --sp-text: #333;
  --sp-muted: #6b7280;
  --sp-line: rgba(255, 255, 255, .14);

  --sp-display: "PT Serif", Georgia, "Times New Roman", serif;
  --sp-accent: "Playfair Display", Georgia, "Times New Roman", serif;
  --sp-body: "Rubik", "Segoe UI", Helvetica, Arial, sans-serif;

  --sp-gutter: 20px;          /* one horizontal gutter used everywhere */
  --sp-section: 48px;         /* one vertical rhythm step */
  --sp-headerh: 64px;         /* mobile header height */
  --sp-tap: 52px;             /* minimum touch target */
}

/* The CMS declares the nav as "playfair Display", sans-serif — a serif face
   with a SANS fallback, so a font-load failure silently changes the voice of
   the whole site. Restore serif fallbacks wherever a display face is used. */
h1, h1 span, .pageHeader { font-family: var(--sp-display) !important; }
#mbmcpebul_table a, .footerlink, .projects, .homeblocklink,
.projbutton span, [style*="Playfair"] { font-family: var(--sp-accent) !important; }

/* ---------- hidden at every width; the <=900 block switches them on -------
   sp-mobile.js injects the burger, panel, backdrop AND the mobile hero on
   every page, so each needs a base-level hide or it leaks onto desktop (the
   hero would render a second time above the real slider). */
#spBurger,
#spNav,
#spBackdrop,
#spHero { display: none; }

/* NB: .spEmptyCell is tagged by sp-mobile.js at every width but is only
   collapsed inside the <=900px block below. On desktop those cells are the
   spacer columns and rails that hold the footer's six-column layout apart —
   hiding them there would reflow it. */

/* ==========================================================================
   <= 900px
   ========================================================================== */
@media (max-width: 900px) {

  /* ---- reset the legacy table layout ----------------------------------- */
  /* Every page is nested fixed-width tables (1200px). A <table> will not
     render narrower than its min-content width whatever width you set, so
     the cells are taken out of table layout entirely and stack in source
     order. The slider and the Elfsight widgets manage their own layout. */
  table, tbody, tr, td, th {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }
  td, th { padding-left: 0 !important; padding-right: 0 !important; }
  /* every box this file adds padding to is also forced to width:100%, so it
     has to measure border-box or it overflows its parent by the padding —
     and an overflowing child inside the CMS's <center> wrappers drags the
     whole column off-screen to the LEFT, not just past the right edge */
  .bigTable > tbody > tr > td, .contentTable > tbody > tr > td,
  .column001, .column002, .column003, .column004, .column005, .column006,
  .gallery01 { box-sizing: border-box !important; }
  colgroup, col { display: none !important; }
  #layerslider table, #layerslider tbody, #layerslider tr, #layerslider td,
  [class*="elfsight"] table, [class*="elfsight"] tbody,
  [class*="elfsight"] tr, [class*="elfsight"] td { display: revert !important; }

  .bigTable, .contentTable, .contentTableFull, .headerRow {
    width: 100% !important;
    max-width: 100% !important;
  }
  img { max-width: 100%; height: auto; }
  iframe { max-width: 100% !important; }
  div[style*="width:"], p[style*="width:"], span[style*="width:"],
  img[style*="width:"] { max-width: 100% !important; }
  /* the CMS pins width AND height inline on the home logo; freeing only the
     width would squash it */
  img[style*="width:"][style*="height:"] { height: auto !important; }
  #layerslider, #layerslider *, #layerslider-container-fw { max-width: none !important; }
  body { overflow-x: hidden; }

  /* one gutter, applied on the CELLS — padding on a <table> does not inset
     its rows */
  .bigTable > tbody > tr > td {
    padding-left: var(--sp-gutter) !important;
    padding-right: var(--sp-gutter) !important;
  }
  /* full-bleed sections opt out */
  #rowSlideshow > td,
  #rowSubFooter41 > td,
  .bigTable > tbody > tr > td.headerCell {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ---- content columns: align to the one gutter ------------------------ */
  /* The CMS's own responsive.css gives .column001..006 `width:92%; padding:3%`
     below 680px. Those percentage gutters sit INSIDE the cell gutter and do
     not resolve to the same value, so headings land at a different inset on
     the left than on the right. They are also inline-block, so they
     shrink-wrap and inherit inline whitespace. Normalise all of them to plain
     blocks and let the cell own the horizontal gutter. */
  .column001, .column002, .column003, .column004, .column005, .column006 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 0 26px !important;
    text-align: left !important;
  }
  .column001:last-child, .column002:last-child,
  .column003:last-child, .column004:last-child,
  .column005:last-child, .column006:last-child { margin-bottom: 0 !important; }
  /* the CMS leaves these wrappers at line-height 20px, which is tight for
     16px copy; match the body rhythm */
  .column001, .column002, .column003 { line-height: 1.65 !important; }
  .column003 img, .column005 img { display: block; width: 100%; height: auto; }
  /* the contact page centres its own heading and address block inline */
  .column001[style*="text-align: center"] { text-align: center !important; }

  /* ---- typography: one scale, used everywhere -------------------------- */
  body { font-family: var(--sp-body); font-size: 16px; line-height: 1.65; color: var(--sp-text); }
  h1, h1 span {
    font-family: var(--sp-display) !important;
    font-size: clamp(30px, 8.4vw, 42px) !important;
    line-height: 1.12 !important;
    font-weight: 700 !important;
    color: var(--sp-brand) !important;
    margin: 0 0 .5em !important;
  }
  h2, h2 span {
    font-size: clamp(20px, 5.2vw, 27px) !important;
    line-height: 1.32 !important;
    margin: 0 0 .6em !important;
  }
  h3, h3 span { font-size: clamp(18px, 4.6vw, 22px) !important; line-height: 1.35 !important; }
  p, li, td { font-size: 16px !important; line-height: 1.65 !important; }
  /* the CMS pins font-size inline on nearly every span — override it, or the
     scale above is cosmetic only */
  .bigTable span[style*="font-size"] { font-size: inherit !important; }
  h1 span[style*="font-size"] { font-size: clamp(30px, 8.4vw, 42px) !important; }
  h2 span[style*="font-size"] { font-size: clamp(20px, 5.2vw, 27px) !important; }

  /* ---- header ---------------------------------------------------------- */
  /* Upstream the header is transparent and only picks up #343530 once the
     page is scrolled past 10px (the .fixed-pos handler). That leaves a white
     logo on white content at the top of any page without a slideshow — the
     404 page does exactly this. On mobile the bar is solid at all times. */
  .header, .header.fixed-pos {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    height: var(--sp-headerh) !important;
    background: var(--sp-ink) !important;
    z-index: 2000;
    display: flex !important;
    align-items: center !important;
  }
  .header .headerRow,
  .header .headerRow tbody,
  .header .headerRow tr {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    height: var(--sp-headerh) !important;
  }
  .header .headerRow td {
    display: flex !important;
    align-items: center !important;
    height: var(--sp-headerh) !important;
    padding: 0 !important;
  }
  .header .headerRow td:first-child { flex: 1 1 auto; padding-left: var(--sp-gutter) !important; }
  /* the desktop menu cell collapses; the burger takes its place */
  .header .headerRow td:last-child { flex: 0 0 auto; }
  #imgBannerLogo { max-height: 38px !important; width: auto !important; display: block; }
  #mbmcpebul_table { display: none !important; }

  /* the header is opaque here, so every page — hero or not — gets its height
     back as top padding on the first row */
  .bigTable > tbody > tr:first-child > td { padding-top: var(--sp-headerh) !important; }
  /* #rowHome carries an ID, so the rhythm rule below outranks the line above
     and the heading slides under the fixed bar. Only the 404 page has
     #rowHome first (every other page opens with the slideshow row), and there
     the offset has to be restated at ID specificity. */
  #rowHome:first-child > td {
    padding-top: calc(var(--sp-headerh) + var(--sp-section)) !important;
  }

  /* ---- hamburger ------------------------------------------------------- */
  /* Three 2px hairlines at the screen edge are easy to miss entirely, so the
     control is a labelled button with a visible outline. */
  #spBurger {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    height: 40px;
    margin-right: var(--sp-gutter);
    padding: 0 12px 0 10px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 4px;
    cursor: pointer;
    -webkit-appearance: none;
  }
  #spBurger:hover { background: rgba(255, 255, 255, .16); }
  #spBurger .spBars {
    display: flex; flex-direction: column; justify-content: center;
    gap: 5px; width: 22px; flex: 0 0 22px;
  }
  #spBurger .spBars span {
    display: block; width: 22px; height: 3px; margin: 0;
    background: #fff; border-radius: 2px;
    transition: transform .22s ease, opacity .18s ease;
  }
  #spBurger .spLabel {
    color: #fff;
    font-family: var(--sp-body);
    font-size: 12px; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase;
    line-height: 1;
  }
  #spBurger[aria-expanded="true"] .spBars span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  #spBurger[aria-expanded="true"] .spBars span:nth-child(2) { opacity: 0; }
  #spBurger[aria-expanded="true"] .spBars span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* ---- slide-in nav ---------------------------------------------------- */
  #spNav {
    display: block !important;
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(84%, 340px);
    background: var(--sp-ink);
    z-index: 2100;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), visibility 0s .28s;
    padding: calc(var(--sp-headerh) + 12px) 0 40px;
    box-shadow: -4px 0 24px rgba(0, 0, 0, .35);
  }
  #spNav.open { transform: translateX(0); visibility: visible; transition-delay: 0s; }
  #spNav a {
    display: flex; align-items: center;
    min-height: var(--sp-tap);
    padding: 0 26px;
    font-family: var(--sp-accent);
    font-size: 19px;
    letter-spacing: .02em;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid var(--sp-line);
  }
  #spNav a:hover, #spNav a:focus-visible { background: rgba(255, 255, 255, .07); }
  #spNav a[aria-current="page"] { color: #fff; box-shadow: inset 3px 0 0 var(--sp-brand); }
  #spBackdrop {
    display: block !important;
    position: fixed; inset: 0;
    background: rgba(52, 53, 48, .58);
    z-index: 2050;
    opacity: 0; pointer-events: none;
    transition: opacity .28s ease;
  }
  #spBackdrop.open { opacity: 1; pointer-events: auto; }
  body.spNavOpen { overflow: hidden; }

  /* ---- hero band ------------------------------------------------------- */
  /* LayerSlider runs responsive:false with a 1200px sublayer container and
     rewrites its own layer markup on init, so styling the source class names
     has no effect once it has run. It is hidden below 900px and sp-mobile.js
     rebuilds the band as plain markup (#spHero) from the slide's own image.
     That image is a 1651x245 blueprint texture with no focal point — pure
     decoration — so a short band that crops is the honest treatment; scaling
     it to its own 6.7:1 ratio would leave a 56px sliver. */
  #layerslider-container-fw, #layerslider { display: none !important; }

  #spHero {
    display: block;
    height: 26vw;
    min-height: 96px;
    max-height: 160px;
    background-color: #4a4b46;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  /* ---- section rhythm -------------------------------------------------- */
  #rowHome > td,
  [id^="rowSubFooter"] > td {
    padding-top: var(--sp-section) !important;
    padding-bottom: var(--sp-section) !important;
  }
  .spacerRow { display: none !important; }

  /* ---- projects list --------------------------------------------------- */
  /* Each project is a .gallery01 card (a 900x150 texture) wrapping one
     .projbutton link. responsive.css re-pads it to `width:92%; padding:5%`
     below 680px — the same nested-percentage problem as .column00N — and the
     link itself is an 80%-wide inline-block roughly 33px tall, well under a
     usable tap target. */
  .gallery01 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px 14px !important;
    margin: 0 0 14px !important;
    background-position: center !important;
    background-size: cover !important;
  }
  .gallery01:last-child { margin-bottom: 0 !important; }
  .projbutton, a.projbutton:link, a.projbutton:visited {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    box-sizing: border-box;
    min-height: var(--sp-tap);
    margin: 0 !important;
    padding: 12px 16px !important;
    background-color: #fff;
    color: #1a1a1a !important;
    border-bottom: 3px solid var(--sp-brand) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    text-align: center;
  }
  .projbutton span {
    font-family: var(--sp-accent) !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
    margin-bottom: 0 !important;
  }

  /* ---- contact-info strip (home) --------------------------------------- */
  /* Icon and value are separate <td>s; as blocks they would stack one per
     line. The icon/value cells sit THREE tables deep (contentTable > layout
     table > detail table). Only that innermost level goes back inline, so
     each icon stays beside its value while every wrapper above it stays a
     centred block. Matching a shallower level turns the wrappers into
     zero-width inline boxes and collapses the whole section. */
  #rowSubFooter31 > td { text-align: center !important; }
  #rowSubFooter31 h1 { text-align: center !important; }
  #rowSubFooter31 table table table td {
    display: inline-block !important;
    width: auto !important;
    vertical-align: middle !important;
    padding: 2px 1px !important;
    text-align: left !important;
  }
  /* the spacer row of five &nbsp; cells above the details */
  #rowSubFooter31 table table table tr:first-child { display: none !important; }
  #rowSubFooter31 img { vertical-align: middle; margin-right: 4px; }
  #rowSubFooter31 strong { font-weight: 500; }

  /* ---- decorative photo band: full bleed, no rhythm padding ------------- */
  #rowSubFooter41 > td {
    height: 200px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background-size: cover !important;
    background-position: center !important;
  }

  /* ---- footer navigation ----------------------------------------------- */
  /* Six links laid out as a 3x3 table beside the logo and an address panel.
     On a phone they were 16px inline text — far below a usable tap target.
     Stacked as a real menu on the sage band. Upstream sets them white on
     #bcbdae, which is roughly 1.8:1; on the band they are the ink colour
     instead (about 6:1) and the band keeps its brand colour. */
  #rowSubFooter51 > td { background: var(--sp-band) !important; text-align: center; }
  #rowSubFooter51 table td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  /* the cells that hold only &nbsp; or <br>; each becomes its own ~27px empty
     line box once un-tabled. Stated at ID specificity so it outranks the
     display:block rule above. */
  .spEmptyCell, #rowSubFooter51 td.spEmptyCell { display: none !important; }
  /* stray <br> between the layout cells; the ones inside the address panel's
     <span>s are real line breaks and are not direct children */
  #rowSubFooter51 td > br { display: none !important; }
  #rowSubFooter51 .footerlink {
    display: block !important;
    min-height: var(--sp-tap);
    line-height: var(--sp-tap);
    font-family: var(--sp-accent);
    font-size: 17px;
    letter-spacing: .05em;
    color: var(--sp-ink) !important;
    text-decoration: none;
    border-bottom: 1px solid rgba(52, 53, 48, .22);
  }
  #rowSubFooter51 .footerlink:hover { background: rgba(255, 255, 255, .28); }
  #rowSubFooter51 img[src*="footerlogo"] {
    display: block; margin: 0 auto 22px; max-height: 74px; width: auto;
  }
  /* the address panel is the one cell that keeps its own dark background */
  #rowSubFooter51 td[style*="#343530"] {
    background: var(--sp-ink) !important;
    padding: 22px var(--sp-gutter) !important;
    margin-top: 22px;
    box-sizing: border-box !important;
  }
  #rowSubFooter51 td[style*="#343530"] span { line-height: 1.6 !important; }
  #rowSubFooter51 .footerlink2 {
    display: inline-block;
    min-height: 40px; line-height: 40px;
    font-size: 16px;
  }

  /* ---- copyright bar --------------------------------------------------- */
  #rowFooter1 > td {
    background: var(--sp-ink) !important;
    text-align: center;
    padding-top: 22px !important; padding-bottom: 22px !important;
  }
  #rowFooter1 p { font-size: 12px !important; letter-spacing: .04em; margin: 0 !important; line-height: 1.6 !important; }

  /* ---- Elfsight widgets (home gallery, project galleries, contact form) -- */
  [class*="elfsight-app"] { width: 100% !important; max-width: 100% !important; }
}

/* ==========================================================================
   <= 600px — tighten the scale one more step
   ========================================================================== */
@media (max-width: 600px) {
  :root { --sp-gutter: 16px; --sp-section: 38px; }
  #rowSubFooter41 > td { height: 150px !important; }
}