/* ============================================================
   Frank Gardner Construction — flat HTML rebuild
   Converted from Drupal by Think Advertising, Inc.
   ============================================================ */

:root{
  --yellow:      #f2a71b;   /* headings / links */
  --yellow-hi:   #f7c245;   /* bar gradient top  */
  --yellow-lo:   #dd9710;   /* bar gradient btm  */
  --blue:        #2ab0e8;   /* active nav dashes */
  --ink:         #1a1512;   /* nav text          */
  --body-bg:     #2b231e;
  --panel-bg:    #3a322b;
  --text:        #ffffff;
  --wrap:        720px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; background:#2a211a; }

body{
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  background-color: #2a211a;
  background-image: url("../img/bodybg.jpg");
  background-repeat: repeat;
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
}

img{ max-width:100%; height:auto; display:block; }

a{ color: var(--yellow); text-decoration:none; }
a:hover, a:focus{ text-decoration:underline; }
a:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

.wrap{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 16px;
}

/* ---------------- header ---------------- */

.site-header{ position:relative; }

.tread{
  height:60px;
  background: #17110d url("../img/tread.jpg") repeat-x top center;
}

.navbar{
  background: linear-gradient(to bottom, var(--yellow-hi), var(--yellow-lo));
  border-top: 1px solid #8a6a1c;
  border-bottom: 2px solid #6e5312;
}

.navbar .wrap{
  display:flex;
  justify-content:center;
  gap: 8px;
  padding-left: 250px;              /* clears the overlapping logo */
}

.navbar a{
  position:relative;
  display:block;
  white-space:nowrap;
  padding: 7px 15px 6px;
  color: var(--ink);
  font-weight: bold;
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration:none;
}

.navbar a:hover{ color:#000; text-decoration:none; }

/* slanted blue dashes above the active item */
.navbar a[aria-current="page"]::before{
  content:"";
  position:absolute;
  top:-9px;
  left:50%;
  width:64px;
  height:6px;
  margin-left:-32px;
  transform: skewX(-35deg);
  background: repeating-linear-gradient(
    90deg,
    var(--blue) 0 11px,
    transparent 11px 17px
  );
}

.logo{
  position:absolute;
  z-index:10;
  top:24px;
  left: calc(50% - (var(--wrap) / 2));
  width: 232px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}

/* photo banners */
.banner{
  border-bottom: 8px solid transparent;
  border-image: linear-gradient(to bottom, var(--yellow-hi), var(--yellow-lo)) 1;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.banner--sub{
  height:226px;
  background-image: url("../img/banner-sub.jpg");
}

.banner--about{
  height:220px;
  background-image: url("../img/banner-about.jpg");
}

.banner--home{
  position:relative;
  height:317px;
  background-image: url("../img/HomeBanner.jpg");
  background-position: center;
  border-bottom:0;                  /* home flows into the yellow band */
}

.home-text{
  position:absolute;
  left: calc(50% - (var(--wrap) / 2) + 10px);
  top: 54px;
  width: 300px;
  z-index: 6;
  margin:0;
  font-size: 25px;
  font-weight: bold;
  font-style: italic;
  line-height: 1.32;
  text-transform: uppercase;
  color: #222;
  text-shadow:
    0 0 5px rgba(255,255,255,.95),
    0 0 12px rgba(255,255,255,.85),
    0 0 22px rgba(255,255,255,.7),
    0 0 34px rgba(255,255,255,.5);
}

/* ---------------- home: yellow services band ---------------- */

.band{
  position:relative;
  background: #e7a416 url("../img/band.jpg") repeat-x;
  background-size: auto 100%;
  padding: 22px 0 36px;
}

.band .wrap{ padding-left: 380px; }  /* clears the big mascot */

.services{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
}

.services li{ width:50%; padding: 5px 8px 5px 0; }

.services li{
  color: var(--ink);
  font-weight:bold;
  font-size:12px;
  text-transform:uppercase;
  white-space:nowrap;
}

.services li::before{
  content:"\25A0\2002";              /* ■  */
  font-size:10px;
  position:relative;
  top:-1px;
}

.mascot-home{
  position:absolute;
  top:-115px;                        /* upper half over the hero, base in the band */
  left: calc(50% - (var(--wrap) / 2) - 50px);   /* centered under the tagline */
  width:420px;
  z-index:5;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
}

/* ---------------- panels ---------------- */

.main{ padding: 26px 0 20px; }

.panel{
  background: var(--panel-bg);
  background-image: repeating-linear-gradient(
    180deg,
    rgba(255,255,255,.015) 0 2px,
    rgba(0,0,0,.05) 2px 5px
  );
  border-radius: 10px;
  padding: 26px 30px 30px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}

.panel h1{
  color: var(--yellow);
  font-size: 20px;
  letter-spacing:.03em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--yellow);
  padding-bottom: 8px;
  margin-bottom: 18px;
  max-width: 290px;
}

.panel p{ font-weight:bold; margin-bottom: 16px; }
.panel p.caps{ text-transform: uppercase; }
.panel ul.plain{ font-weight:bold; margin: 0 0 16px 20px; }
.panel ul.plain li{ margin-bottom:4px; }

/* phone / address block */
.contact-block{ margin-top: 30px; text-align:left; }
.contact-block .phone{
  font-size: 28px;
  font-weight: bold;
  letter-spacing:.02em;
  margin-bottom: 6px;
}
.contact-block .addr{ font-size: 12px; line-height:1.6; }
.contact-block.right{ margin-left:auto; max-width:260px; }

/* ---------------- home two-column area ---------------- */

.home-cols{
  display:flex;
  align-items:flex-start;
}
.home-cols .panel--info{ width:244px; flex:none; margin-right:22px; }
.home-cols .panel--gallery{ flex:1; min-width:0; }

.gallery{
  display:flex;
  flex-wrap:wrap;
  margin: 6px -9px 0;
}

.gallery a.lb{
  width: calc(25% - 19px);
  margin: 8px 9px;
  box-sizing: border-box;
  border: 2px solid var(--yellow);
  line-height:0;
}
.gallery a.lb img{
  width:100%;
  height:66px;
  object-fit:cover;
  display:block;
}
.gallery a.lb:hover, .gallery a.lb:focus-visible{ border-color:#fff; }

/* ---------------- contact page ---------------- */

.contact-cols{
  display:flex;
  align-items:flex-start;
}
.contact-cols .contact-info{ flex:1; }
.contact-cols .mascot-contact{ width:300px; flex:none; margin-left:26px; }

.contact-info p{ margin-bottom: 2px; }
.contact-info .co{ font-weight:bold; }
.contact-info .links{ margin-top: 10px; }
.mascot-contact{ margin-top: 6px; }

/* ---------------- job application ---------------- */

.attachments h2{
  font-size: 13px;
  margin-bottom: 8px;
}
.attachments ul{ list-style:none; }
.attachments li{ margin-bottom: 8px; }
.attachments a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-weight:bold;
}
.pdf-ico{
  width:15px; height:15px; flex:none;
}

/* ---------------- footer ---------------- */

.site-footer{
  padding: 6px 0 28px;
}
.site-footer .wrap{
  text-align:right;
  color: var(--yellow);
  font-size: 12px;
}

/* ============================================================
   Mobile
   ============================================================ */

@media (max-width: 1000px){
  .mascot-home{ width:320px; top:-80px; left: calc(50% - (var(--wrap) / 2)); }
  .band .wrap{ padding-left: 300px; }
}

@media (max-width: 860px){
  .logo{ left: 16px; top: 14px; width: 170px; }
  .navbar .wrap{ padding-left: 200px; gap:0; flex-wrap:wrap; }
  .navbar a{ padding: 9px 12px 8px; }
}

@media (max-width: 640px){
  .site-header{ display:flex; flex-direction:column; }
  .site-header .tread{ height: 36px; order:0; }
  .site-header > a{ order:1; margin: -28px auto 4px; }   /* logo overlaps tread like desktop */
  .site-header .navbar{ order:2; }
  .site-header .banner{ order:3; }

  .logo{
    position: static;
    width: 190px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
  }

  .navbar .wrap{
    padding-left: 16px;
    justify-content: center;
  }
  .navbar a{ font-size: 12px; padding: 10px 10px 9px; }
  .navbar a[aria-current="page"]::before{ top:-4px; }

  .banner--sub, .banner--about{ height: 150px; }
  .banner--home{ height: 220px; background-position: 68% center; }

  .home-text{
    left: 16px;
    top: 48px;
    width: 240px;
    font-size: 16px;
  }

  .band .wrap{ padding-left: 16px; }
  .services li{ width:50%; white-space: normal; font-size: 12px; }
  .mascot-home{ display:none; }

  .panel{ padding: 20px 18px 24px; }

  .home-cols{ display:block; }
  .home-cols .panel--info{ width:auto; margin: 0 0 20px; }
  .gallery a.lb{ width: calc(50% - 19px); }
  .gallery a.lb img{ height: 106px; }

  .contact-cols{ display:block; }
  .contact-cols .mascot-contact{ width:100%; max-width:320px; margin: 18px auto 0; }

  .contact-block .phone{ font-size: 24px; }
  .contact-block.right{ margin-left:0; max-width:none; }

  .site-footer .wrap{ text-align:center; }
}


/* ---------------- lightbox ---------------- */

#lightbox{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
}
#lightbox[hidden]{ display:none; }

.lb-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.8);
}

.lb-frame{
  position:relative;
  background:#fff;
  padding:10px;
  box-shadow:0 8px 40px rgba(0,0,0,.6);
}

#lb-img{
  display:block;
  width: min(86vw, 680px);
  max-height: 78vh;
  height:auto;
  object-fit:contain;
  image-rendering: auto;
}

.lb-btn{
  position:absolute;
  z-index:101;
  background:rgba(0,0,0,.55);
  color:#fff;
  border:2px solid rgba(255,255,255,.7);
  border-radius:50%;
  width:46px; height:46px;
  font-size:26px;
  line-height:1;
  cursor:pointer;
}
.lb-btn:hover, .lb-btn:focus-visible{ background:var(--yellow); color:#1a1512; border-color:#fff; }
.lb-prev{ left:4vw;  top:50%; transform:translateY(-50%); }
.lb-next{ right:4vw; top:50%; transform:translateY(-50%); }
.lb-close{ right:4vw; top:4vh; }

@media (max-width: 640px){
  .lb-prev{ left:8px; }
  .lb-next{ right:8px; }
  .lb-close{ right:8px; top:8px; }
  #lb-img{ width:88vw; }
}