/* ==========================================================================
   Unlimited Welding & Fabrication, LLC - shared stylesheet

   The pages copy the original Wix site's layout. Each block is placed
   absolutely inside its section at the spot it holds on the original at
   1280px wide. The positions live in each page's <style> block (header and
   footer in assets/chrome.css). Positions are measured from the page centre,
   so the content column stays centred at any window width, as on Wix.

   This file holds the theme: fonts, text styles, colours, buttons, the nav,
   the capability tiles, the fit table and the phone layout.
   ========================================================================== */

/* -------- fonts (the original's own Montserrat files, SIL OFL) -------- */
@font-face { font-family: wfont_24c9cc_795a3f54b326429e9c6e003179d3f6af; font-display: swap; src: url("fonts/montserrat-semibold.woff2") format("woff2"); }
@font-face { font-family: wfont_a71992_742595b112bf4ba6835bf037f2cf3599; font-display: swap; src: url("fonts/montserrat-regular.woff2") format("woff2"); }
@font-face { font-family: wfont_a5ed9a_0239b14f25af467aa181840e5bba6dda; font-display: swap; src: url("fonts/montserrat-bold.woff2") format("woff2"); }

:root {
  --ff-semibold: wfont_24c9cc_795a3f54b326429e9c6e003179d3f6af, "Montserrat", sans-serif;
  --ff-regular: wfont_a71992_742595b112bf4ba6835bf037f2cf3599, "Montserrat", sans-serif;
  --ff-bold: wfont_a5ed9a_0239b14f25af467aa181840e5bba6dda, "Montserrat", sans-serif;
  --ff-helvetica-light: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* theme text styles, as defined on the original */
  --font_0: normal normal normal 60px/1.4em var(--ff-semibold);
  --font_1: normal normal normal 16px/1.4em "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font_2: normal normal normal 37px/1.4em var(--ff-semibold);
  --font_3: normal normal normal 35px/1.4em var(--ff-semibold);
  --font_4: normal normal normal 35px/1.4em var(--ff-semibold);
  --font_5: normal normal normal 25px/1.4em var(--ff-semibold);
  --font_6: normal normal normal 20px/1.4em var(--ff-semibold);
  --font_7: normal normal normal 17px/1.4em var(--ff-regular);
  --font_8: normal normal normal 15px/1.4em var(--ff-regular);
  --font_9: normal normal normal 12px/1.4em var(--ff-semibold);
  --font_10: normal normal normal 12px/1.4em "Helvetica Neue", Helvetica, Arial, sans-serif;

  --navy: #1d2a52;
  --orange: #f97316;
  --orange-dark: #d16011;
  --ink: #0f172a;
}

/* -------- base -------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: #000; font: 15px/1.4 var(--ff-regular); }
img { display: block; }
a { color: inherit; text-decoration: none; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; padding: 10px 16px; background: var(--navy); color: #fff; }
.skip-link:focus { left: 0; }

/* -------- section + block placement -------- */
.sec { position: relative; width: 100%; overflow-x: clip; }
.sec > .bg-fill, .bg-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bg-img { object-fit: cover; }
picture { display: contents; }
.c { position: absolute; margin: 0; }
.img img { width: 100%; height: 100%; object-fit: cover; }
.box > img.fill, .box > picture > img.fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vec svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* -------- rich text (Wix text boxes) -------- */
.rt { overflow-wrap: break-word; }
:where(.rt) :is(p, h1, h2, h3, h4, h5, h6, ul, ol, li) { margin: 0; padding: 0; font: inherit; }
.rt ul { list-style: disc; margin-inline: .5em 0; padding-inline: 1.3em 0; letter-spacing: normal; }
.rt ol { list-style: decimal; margin-inline: .5em 0; padding-inline: 1.3em 0; }
.rt li { font-style: inherit; font-weight: inherit; line-height: inherit; letter-spacing: normal; }
.rt li > p { font: inherit; }
.rt a { color: inherit; }
.font_0 { font: var(--font_0); color: var(--ink); letter-spacing: 0em; }
.font_1 { font: var(--font_1); color: #595959; letter-spacing: 0em; }
.font_2 { font: var(--font_2); color: var(--ink); letter-spacing: 0em; }
.font_3 { font: var(--font_3); color: var(--ink); letter-spacing: 0em; }
.font_4 { font: var(--font_4); color: #000; letter-spacing: 0em; }
.font_5 { font: var(--font_5); color: var(--ink); letter-spacing: 0em; }
.font_6 { font: var(--font_6); color: var(--ink); letter-spacing: 0em; }
.font_7 { font: var(--font_7); color: var(--ink); letter-spacing: 0em; }
.font_8 { font: var(--font_8); color: var(--ink); letter-spacing: 0em; }
.font_9 { font: var(--font_9); color: #595959; letter-spacing: 0em; }
.font_10 { font: var(--font_10); color: #595959; letter-spacing: 0em; }
.color_11, .color_36 { color: #fff; }
.color_14, .color_40 { color: #595959; }
.color_15, .color_37 { color: #000; }
.color_18, .color_41 { color: var(--navy); }
.color_39 { color: #c7c7c7; }
.color_42 { color: var(--orange); }
.color_43 { color: var(--ink); }

/* -------- buttons (Wix StylableButton) -------- */
.btn { display: flex; align-items: center; white-space: nowrap; transition: all .2s; }
.btn span, .btn svg * { transition: all .2s; }
.btn > svg { position: absolute; }

/* -------- header + nav (sticky, as on the original) -------- */
#SITE_HEADER { position: sticky; top: 0; height: 105px; background: #fff; z-index: 50; }
#hdr-quote { background: var(--orange); border-radius: 6px; color: #fff; font: 12px/1.25 var(--ff-semibold); letter-spacing: .6px; }
#hdr-quote:hover { background: var(--orange-dark); }
#site-nav { z-index: 60; }
#nav { display: flex; height: 100%; list-style: none; margin: 0; padding: 0; }
#nav > li { position: relative; display: flex; }
#nav > li > a {
  flex: 1; display: flex; align-items: center; justify-content: center; padding: 10px 0;
  border-bottom: 2px solid transparent; color: var(--navy);
  font: 12px/1.25 var(--ff-semibold); letter-spacing: .6px; white-space: nowrap;
}
#nav > li > a:hover, #nav > li > a:focus-visible, #nav > li.has-sub:hover > a { background: #fff; border-bottom-color: var(--orange); }
#nav > li > a[aria-current] { border-bottom-color: var(--orange); }
/* Services flyout (desktop) */
#nav .sub {
  position: absolute; top: 100%; left: .5px; width: 200.9px; margin: 0; padding: 10px;
  list-style: none; display: none; background: var(--navy); border-radius: 0 0 6px 6px;
}
#nav li.has-sub:hover .sub, #nav li.has-sub:focus-within .sub { display: block; }
#nav .sub li { margin-bottom: 8px; }
#nav .sub li:last-child { margin-bottom: 0; }
#nav .sub a { display: block; height: 35px; padding: 10px; color: #fff; font: 12px/15px var(--ff-semibold); letter-spacing: .36px; white-space: nowrap; }
#nav .sub a:hover, #nav .sub a:focus-visible, #nav .sub a[aria-current] { color: var(--orange); }
.sub-toggle, .nav-toggle, .nav-quote { display: none; }

/* -------- capability tiles (Wix Pro Gallery) -------- */
.gitem { overflow: hidden; transform: scale(.95); transition: transform .6s ease; }
.gitem.in { transform: none; }
.g-media, .g-info { transition: transform .4s; }
.g-media img { width: 100%; height: 100%; object-fit: cover; }
.g-media { position: absolute; inset: 0; }
.g-info {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center;
  padding: 0 46px; background: rgba(0, 0, 0, .45); color: #fff; text-align: center;
}
.g-info > div { min-width: 0; }
.g-title { margin: 0 0 6px; font: 20px/28px var(--ff-semibold); }
.g-desc { margin: 0; font: 15px/21px var(--ff-regular); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.gitem:hover .g-media, .gitem:hover .g-info { transform: scale(.985); }

/* -------- "good fit" table (Wix Table Master) -------- */
.fit-table table { width: 970px; border-collapse: collapse; border: 1px solid #c7c7c7; table-layout: fixed; }
.fit-table th { width: 56.1%; padding: 6px; background: var(--navy); color: #fff; text-align: left; vertical-align: top; font: 18px/22px var(--ff-semibold); font-weight: normal; }
.fit-table th + th { width: auto; border-left: 1px solid #c7c7c7; }
.fit-table td { padding: 7px; border-top: 1px solid #c7c7c7; vertical-align: top; font: 14px/17px var(--ff-regular); color: #000; background: #fff; }
.fit-table td + td { border-left: 1px solid #c7c7c7; }

/* -------- mobile --------
   Like the original, phones get Wix's 320px-wide mobile layout (a script in
   each page head sets the viewport to 320px on phones). The block positions
   for it live in the "@media (max-width: 750px)" part of each page's <style>
   block and of chrome.css. */
.m-only { display: none; }
@media (min-width: 751px) { body { min-width: 1280px; } }
@media (max-width: 750px) {
  body { min-width: 320px; }
  .d-only { display: none; }
  .m-only { display: block; }
  #SITE_HEADER { height: 76px; }
  #hdr-quote { display: none; }
  .fit-table table { width: 100%; }
  /* on phones the tile caption tints the whole tile */
  .g-info { background: linear-gradient(rgba(29, 42, 82, .44), rgba(29, 42, 82, .45)); }
  .g-title { margin-bottom: 6px; font-size: 17px; line-height: 21px; }
  .g-desc { font-size: 13px; line-height: 16px; display: block; }

  /* hamburger + full-screen menu */
  .nav-toggle { display: block; left: calc(50% + 100px); top: 13px; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 4px; background: var(--orange); cursor: pointer; z-index: 70; }
  .nav-toggle span { position: absolute; left: 12px; height: 2px; border-radius: 2px; background: #fff; transition: transform .2s, opacity .2s, width .2s; }
  .nav-toggle span:nth-child(1) { top: 15px; width: 13px; }
  .nav-toggle span:nth-child(2) { top: 24px; width: 26px; }
  .nav-toggle span:nth-child(3) { top: 33px; width: 18px; }
  .nav-open .nav-toggle { position: fixed; background: #fff; }
  .nav-open .nav-toggle span { background: var(--navy); left: 11px; width: 28px; }
  .nav-open .nav-toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
  #site-nav { display: none; position: fixed; inset: 0; left: 0 !important; top: 0 !important; height: auto !important; background: #fff; overflow-y: auto; }
  .nav-open #site-nav { display: block; }
  #nav { display: block; width: 188px; height: auto; margin: 58px auto 0; }
  #nav > li { display: block; width: auto !important; }
  #nav > li > a, #nav .sub a {
    display: flex; align-items: center; justify-content: center; height: 56px; padding: 0;
    border: 0; background: none !important; font: 12px/56px var(--ff-semibold); letter-spacing: normal; color: var(--navy);
  }
  #nav > li > a:hover, #nav > li.has-sub:hover > a { color: var(--navy); }
  #nav > li > a[aria-current] { color: var(--orange); }
  #nav .sub { position: static; display: none; width: auto; margin: 0; padding: 0; background: none; border-radius: 0; }
  #nav li.has-sub:hover .sub, #nav li.has-sub:focus-within .sub { display: none; }
  #nav li.has-sub.open .sub { display: block; }
  #nav .sub li { margin: 0; }
  #nav .sub a[aria-current] { color: var(--orange); }
  .sub-toggle { display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; width: 50px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer; }
  .sub-toggle svg { width: 12px; height: 6.3px; fill: #000; transition: transform .2s; }
  .has-sub.open .sub-toggle svg { transform: rotate(180deg); }
  .nav-quote { display: flex; justify-content: center; width: 152px; height: 42px; margin: 51px auto 40px; border-radius: 6px; background: var(--orange); color: #fff; font: 12px/1.25 var(--ff-semibold); letter-spacing: .6px; }
}

@media (prefers-reduced-motion: reduce) {
  .gitem { transform: none; transition: none; }
}