/* TreeHouse Grill — static rebuild of the Divi/WordPress site.
   Values are taken from the original theme customizer, Divi module CSS
   and computed styles of the saved page. */

:root{--green:#4c756d;--tan:#a28c72;--menu-bg:#f7f7f7}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:#666;font-family:"Open Sans",Arial,sans-serif;font-size:14px;font-weight:500;line-height:1.7em;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{margin:0;padding-bottom:10px;color:#333;font-weight:500;line-height:1em}
p{margin:0;padding-bottom:1em}
p:last-of-type{padding-bottom:0}
a{color:var(--green);text-decoration:none}
img{max-width:100%;height:auto;vertical-align:bottom}
ul{margin:0;padding:0;list-style:none}

.ico{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- Layout (Divi section / row / column) ---------- */
.section{position:relative}
.row{position:relative;width:80%;max-width:1080px;margin:0 auto;padding:27px 0}
.row--wide{width:90%;max-width:100%}
.row--35{padding:35px 0}
.cols{display:flex;align-items:flex-start}
.col{position:relative;display:flow-root;margin-right:5.5%}
.col:last-child{margin-right:0}
.col--1-2{width:47.25%}
.col--1-3{width:29.6667%}
.col--2-5{width:36.8%}
.col--3-5{width:57.8%}
.col--pr20{padding-right:20px}

@media (max-width:1349px){
  .row{padding:2% 0}
  .row--35{padding:35px 0}
}

/* ---------- Shared modules ---------- */
.script{font-family:"Rock Salt",cursive;color:var(--green);text-align:center}
h2.script{font-size:42px;font-weight:700;margin-bottom:2.75%}
.divider{position:relative;width:25%;height:23px;margin:0 auto}
.divider::before{content:"";position:absolute;top:0;left:0;width:100%;border-top:1px solid var(--tan)}
.body-text{font-family:"Montserrat",sans-serif;font-size:18px;font-weight:300;line-height:1.8em;color:#000}

.btn{display:inline-block;padding:.3em .7em;font-family:"Montserrat",sans-serif;font-size:24px;font-weight:300;line-height:1.7em;color:#fff;background:var(--green);border:2px solid var(--green);border-radius:3px;transition:all .3s ease}
.btn .ico{margin-left:.3em;vertical-align:-.12em}
.btn:hover{color:var(--green);background:#fff;border-color:#fff}
.btn--alt:hover{border-color:var(--green)}
.btn-wrap--right{text-align:right}
.btn-wrap--center{text-align:center}
.btn-wrap--left{text-align:left}

/* ---------- Header (Divi "split" header) ---------- */
.site-header{position:relative;z-index:100;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.1);font-family:"Montserrat",sans-serif}
.mobile-logo{display:none}
.menu-toggle{display:none}
.menu-list{display:flex;justify-content:center;align-items:flex-start;padding-top:75px;font-size:14px;font-weight:600}
.menu-item{padding-right:22px;margin-right:3.9px;line-height:1em}
.menu-item:last-child{padding-right:0;margin-right:0}
.menu-list li:nth-child(3){margin-right:0}
.menu-link{display:block;padding-bottom:60px;font-size:16px;font-weight:700;line-height:14px;color:var(--green);text-transform:uppercase;transition:opacity .4s ease-in-out}
.menu-link:hover{opacity:.7}
.nav-logo{margin:-48px 3.9px -13px 0;padding-right:22px;height:134px}
.nav-logo img{display:block;width:81px;height:112px}

/* ---------- Hero ---------- */
.hero{padding:8% 0;background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url(/assets/img/hero.jpg) center/cover no-repeat;background-color:#fff}
.hero h1{font-family:"Montserrat",sans-serif;font-size:50px;font-weight:900;line-height:1.3em;color:#fff;text-align:center}
.hero-sub{margin:30px 0;font-family:"Montserrat",sans-serif;font-size:24px;line-height:1.2em;color:#fff;text-align:center}

/* ---------- About ---------- */
.about{width:90%;margin:0 auto;padding:75px 0;background:#fff}
.about-text{margin:30px 0}
.about-photo{width:100%}
.row--photos{padding:75px 0 0}
.food-photo{display:block;width:100%;margin:0 auto}
.js .fade-in{opacity:0;transition:opacity 1s ease-in-out}
.js .fade-in.is-visible{opacity:1}

/* ---------- Menu ---------- */
.menu-section{padding:75px 0;background:var(--menu-bg)}
.row--cat{padding:50px 0}
.row--cat h3{font-family:"Rock Salt",cursive;font-size:36px;color:#000;text-align:center}
.row--items{padding:0}
.item{max-width:550px;margin:0 auto 20px;font-family:"Montserrat",sans-serif;font-size:18px;font-weight:300;color:#000}
.item h4{font-family:"Montserrat",sans-serif;font-size:20px;font-weight:500;line-height:1.7em;color:#000;text-align:left}

/* ---------- Beer, wine & specials (parallax) ---------- */
.specials{padding:50px 0;border-left:12px solid #fff;border-right:12px solid #fff;background:url(/assets/img/drinks.jpg) center/cover no-repeat fixed;background-color:#8a8a8a}
.specials-box{width:85%;max-width:100%;padding:125px 40px;background:rgba(255,255,255,.79)}
.specials-box h3{font-size:36px;font-weight:700;margin-bottom:2.75%}
.specials-box .divider{margin-bottom:2.75%}
.specials-box .body-text{text-align:center}

/* ---------- Catering ---------- */
.catering{padding:75px 0}
.catering .divider{margin-bottom:2.75%}
.catering-text{margin-bottom:2.75%;text-align:center}

/* ---------- Contact ---------- */
.contact{padding:75px 0}
.row--contact{padding:1px 0 0}
.info{display:flex;align-items:flex-start;margin-bottom:7.47%}
.info:last-child{margin-bottom:0}
.info-icon{display:flex;width:32px;flex:none;padding-top:2px;font-size:28px;color:var(--green)}
.info-body{flex:1;padding-left:15px;min-width:0}
.info h4{font-family:"Montserrat",sans-serif;font-size:20px;font-weight:700;line-height:1.7em;color:#000}
.info h4 a{color:#000}
.hours p{padding-bottom:1em;font-family:"Montserrat",sans-serif;font-size:18px;font-weight:500;color:#000}
.hours p:last-child{padding-bottom:0}
.map-col{text-align:center}
.map-col iframe{max-width:100%}

/* ---------- Footer ---------- */
.site-footer{padding:15px 0 5px;background:var(--green)}
.footer-inner{width:80%;max-width:1080px;margin:0 auto}
.footer-inner::after{content:"";display:block;clear:both}
.social{float:right}
.social li{display:inline-block;height:28px;margin-left:20px;vertical-align:top}
.social a{display:inline-block;width:24px;height:24px;margin-top:2px;color:#fff;transition:opacity .4s ease-in-out}
.social a:hover{opacity:.7}
.social svg{display:block;width:24px;height:24px}
.footer-info{float:left;padding-bottom:10px;color:#fff}

/* ---------- Tablet and below ---------- */
@media (max-width:980px){
  .row{padding:0}
  .row--35{padding:35px 0}
  .row--cat{padding:50px 0}
  .row--photos{padding:75px 0 0}
  .row--contact{padding:1px 0 0}
  .specials-box{padding:125px 40px}
  .cols{display:block}
  .col,.col--1-2,.col--1-3,.col--2-5,.col--3-5{width:100%;margin-right:0;margin-bottom:30px}
  .col:last-child{margin-bottom:0}
  h2.script,.specials-box h3,.specials-box .divider,.catering .divider,.catering-text{margin-bottom:30px}
  .info{margin-bottom:30px}
  .info:last-child{margin-bottom:0}
  .btn-wrap--right,.btn-wrap--left{text-align:center}
  .about-photo,.food-photo{width:auto}
  .menu-section,.specials,.catering,.contact{padding:50px 0}
  .social,.footer-info{float:none;text-align:center}
  .social{margin:0 0 5px}

  /* mobile header */
  .site-header .header-inner{position:relative;padding:20px 0;width:80%;margin:0 auto;display:flex;justify-content:center}
  .mobile-logo{display:block;position:relative;z-index:1002}
  .mobile-logo img{display:block;width:auto;height:60px}
  .menu{position:static}
  .menu-toggle{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:1002;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer}
  .menu-toggle-lines,.menu-toggle-lines::before,.menu-toggle-lines::after{display:block;width:30px;height:3px;border-radius:2px;background:var(--green)}
  .menu-toggle-lines{position:relative;transition:background-color .2s ease .15s}
  .menu-toggle-lines::before,.menu-toggle-lines::after{content:"";position:absolute;left:0;transition:top .2s cubic-bezier(.4,0,.2,1) .2s,transform .3s cubic-bezier(.4,0,.2,1),background-color .3s}
  .menu-toggle-lines::before{top:-9px}
  .menu-toggle-lines::after{top:9px}
  .menu.is-open .menu-toggle-lines{background:transparent;transition-delay:0s}
  .menu.is-open .menu-toggle-lines::before,.menu.is-open .menu-toggle-lines::after{top:0;background:#fff;transition:top .2s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1) .2s,background-color .3s}
  .menu.is-open .menu-toggle-lines::before{transform:rotate(45deg)}
  .menu.is-open .menu-toggle-lines::after{transform:rotate(-45deg)}

  /* full-screen menu */
  .menu-list{position:fixed;inset:0;z-index:1001;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:110px 24px 60px;background:var(--green);
    clip-path:circle(0 at var(--menu-x,calc(100% - 40px)) var(--menu-y,50px));visibility:hidden;
    transition:clip-path .6s cubic-bezier(.77,0,.18,1),visibility 0s linear .6s}
  .menu.is-open .menu-list{clip-path:circle(150vmax at var(--menu-x,calc(100% - 40px)) var(--menu-y,50px));visibility:visible;transition:clip-path .7s cubic-bezier(.77,0,.18,1),visibility 0s}
  .menu-list .nav-logo{display:none}
  .menu-item,.menu-item:last-child{padding:4px 0;margin:0;overflow:hidden}
  .menu-link{position:relative;padding:6px 4px;font-size:28px;font-weight:600;line-height:1.15;letter-spacing:.05em;color:#fff;text-align:center;
    transform:translateY(110%);opacity:0;transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .3s ease}
  .menu-link:hover{opacity:1}
  .menu.is-open .menu-link{transform:none;opacity:1;transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .6s ease;transition-delay:calc(.25s + var(--i,0) * .07s)}
  .menu-list li:nth-child(2){--i:1}
  .menu-list li:nth-child(3){--i:2}
  .menu-list li:nth-child(5){--i:3}
  .menu-list li:nth-child(6){--i:4}
  .menu-list li:nth-child(7){--i:5}
  .menu-link::after{content:"";position:absolute;left:4px;right:4px;bottom:0;height:2px;background:#fff;transform:scaleX(0);transition:transform .4s cubic-bezier(.4,0,.2,1)}
  .menu-link:hover::after,.menu-link:focus-visible::after{transform:scaleX(1)}
  html.menu-locked,html.menu-locked body{overflow:hidden}
}
@media (max-width:980px) and (hover:none){
  .specials{background-attachment:scroll}
}
@media (max-width:980px) and (prefers-reduced-motion:reduce){
  .menu-list,.menu.is-open .menu-list{clip-path:none;opacity:0;transition:opacity .2s ease,visibility 0s}
  .menu.is-open .menu-list{opacity:1}
  .menu-link,.menu.is-open .menu-link{transform:none;opacity:1;transition:none}
}
@media (max-width:767px){
  .hero h1{font-size:36px}
  .row--photos .col{text-align:center}
  .food-photo{width:80%;max-width:80%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .fade-in{opacity:1;transition:none}
}
