/* Merk's Bar & Grill — responsive homepage */
:root { --yellow:#ffeb00; --turquoise:#05b8c4; --ink:#15100d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#111; font-family:Georgia, 'Times New Roman', serif; }
a { color:inherit; }
img { display:block; max-width:100%; }
.hero { position:relative; isolation:isolate; background:#56b6e4; overflow:hidden; }
.hero-photo { position:relative; height:clamp(350px,38vw,720px); background:url('images/building.jpg') center bottom/cover no-repeat; z-index:-2; }
.header-inner { position:absolute; z-index:5; top:12px; left:50%; transform:translateX(-50%); width:min(96%,1600px); display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.brand { display:block; width:clamp(220px,31vw,470px); flex-shrink:0; filter:drop-shadow(2px 3px 2px rgba(0,0,0,.4)); }
.brand img { width:100%; }
.palm { position:absolute; z-index:2; width:clamp(175px,24vw,430px); pointer-events:none; }
.palm-left { top:-8px; left:-22px; }
.palm-right { top:-8px; right:-22px; }
.main-nav { display:flex; align-items:center; justify-content:center; gap:0; width:min(58%,780px); min-height:75px; padding:12px 5.5% 12px 5%; background:url('images/nav-wood.png') center/100% 100% no-repeat; }
.main-nav a { text-decoration:none; font:700 clamp(13px,1.35vw,20px)/1 'Oswald',Arial,sans-serif; color:#20140d; padding:15px clamp(7px,1.1vw,17px); white-space:nowrap; transition:color .2s,background .2s; }
.main-nav a:hover,.main-nav a:focus-visible { color:#e7ba00; background:rgba(0,0,0,.11); outline-offset:2px; }
.main-nav a.active { background:var(--yellow); color:#16110b; }
.menu-toggle { display:none; }
.wood-area { background:#08b8c3 url('images/turquoise-wood.png') center top/cover repeat-y; padding:0 20px 35px; }
.welcome-section { max-width:1430px; margin:0 auto; padding:0; position:relative; }
.welcome-board { background:url('images/welcome-frame.png') center/100% 100% no-repeat; min-height:500px; padding:clamp(45px,6.5vw,100px) clamp(42px,8vw,130px); transform:translateY(-12px); margin-bottom:-12px; }
.welcome-content { max-width:1160px; margin:auto; text-align:center; }
.welcome-content h1 { color:#d51416; font-size:clamp(26px,3.6vw,51px); line-height:1.08; margin:0 0 6px; text-shadow:1px 2px #fff,2px 3px 2px #6b2818; }
.welcome-content h2 { color:#007b85; font-size:clamp(17px,2vw,29px); margin:4px 0; }
.welcome-content .sports-line { font-size:clamp(15px,1.6vw,22px); font-weight:bold; margin:0 0 8px; }
.rule { height:3px; width:min(60%,420px); background:#bd2022; margin:9px auto 16px; }
.welcome-content p { font-size:clamp(14px,1.22vw,18px); line-height:1.35; margin:8px auto; }
.welcome-content .specials-link { font-family:'Oswald',Arial,sans-serif; font-weight:700; font-size:clamp(14px,1.6vw,20px); margin:13px auto; }
.specials-link a { color:#d01416; text-decoration:none; }
.specials-link a:hover { text-decoration:underline; }
.welcome-content h3 { font-size:clamp(19px,2vw,27px); color:#007b85; margin:13px 0 0; }
.welcome-content .tagline { font-weight:bold; margin-top:2px; }
.phone-section { max-width:880px; margin:12px auto 25px; }
.phone-sign { display:grid; align-items:center; justify-items:center; width:100%; aspect-ratio:2048/684; text-decoration:none; background:url('images/phone-sign.png') center/contain no-repeat; }
.phone-number { margin-left:19%; padding-right:2%; font-family:'Anton',Impact,sans-serif; font-size:clamp(26px,5.3vw,78px); letter-spacing:1px; color:#fff0cb; -webkit-text-stroke:1.5px #24160d; text-shadow:1px 1px #24160d,2px 2px #24160d,3px 3px #24160d,4px 5px 4px rgba(0,0,0,.75); white-space:nowrap; }
.phone-sign:hover .phone-number { color:var(--yellow); }
.promos { max-width:1320px; margin:0 auto; }
.promo-board { position:relative; padding:25px 35px; }
.promo-board-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; }
.promo-items { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:center; gap:8px; }
.promo-items a { display:flex; align-items:center; justify-content:center; transition:transform .2s; }
.promo-items a:hover { transform:translateY(-5px) scale(1.03); }
.promo-items img { width:100%; max-height:170px; object-fit:contain; }
.site-footer { background:#101010; color:#eee; padding:48px 25px 18px; }
.footer-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:38px; max-width:1250px; margin:auto; }
.footer-grid h2 { color:var(--yellow); font:700 21px 'Oswald',Arial,sans-serif; letter-spacing:.05em; margin:0 0 15px; }
.footer-grid p,.footer-grid a { font:16px/1.65 Arial,sans-serif; }
.footer-grid section > a:not(:has(img)) { display:block; text-decoration:none; color:#ddd; }
.footer-grid section > a:hover { color:var(--yellow); }
.footer-note { font-size:12px!important; color:#999; }
.footer-social img { width:min(100%,245px); height:auto; }
.copyright { text-align:center; border-top:1px solid #333; margin:35px auto 0; max-width:1250px; padding-top:16px; font:12px Arial,sans-serif; color:#aaa; }
@media(max-width:1000px) {
  .header-inner { top:12px; }
  .main-nav { width:62%; padding:8px 5%; min-height:62px; }
  .main-nav a { padding:10px 6px; font-size:13px; }
  .welcome-board { padding:50px 65px; }
  .footer-grid { gap:20px; }
}
@media(max-width:760px) {
  .hero-photo { height:420px; background-position:center bottom; }
  .header-inner { align-items:flex-start; }
  .brand { width:min(65vw,320px); }
  .palm { width:185px; opacity:.9; }
  .menu-toggle { display:flex; position:relative; z-index:10; flex-direction:column; gap:5px; justify-content:center; align-items:center; width:48px; height:44px; border:2px solid #34231b; border-radius:5px; background:var(--yellow); cursor:pointer; }
  .menu-toggle span { width:25px; height:3px; background:#261810; }
  .main-nav { display:none; position:absolute; top:56px; right:0; width:min(270px,80vw); min-height:0; padding:15px; flex-direction:column; align-items:stretch; background:#e6bb85; border:3px solid #674024; border-radius:7px; box-shadow:0 6px 20px #0008; }
  .main-nav.open { display:flex; }
  .main-nav a { padding:13px 16px; font-size:17px; }
  .wood-area { padding:0 8px 25px; }
  .welcome-board { background-size:100% 100%; padding:45px 32px; }
  .welcome-content p { line-height:1.4; }
  .phone-section { margin:0 auto 15px; }
  .phone-number { font-size:clamp(19px,5.5vw,42px); -webkit-text-stroke:1px #24160d; }
  .promo-board { padding:18px; }
  .promo-items { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; }
  .promo-items img { max-height:140px; }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; }
}
@media(max-width:480px) {
  .hero-photo { height:340px; }
  .palm { width:135px; }
  .welcome-board { padding:40px 25px; }
  .welcome-content h1 { font-size:25px; }
  .welcome-content p { font-size:13px; }
  .phone-number { font-size:clamp(17px,5.6vw,28px); letter-spacing:0; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:20px; }
  .footer-grid h2 { font-size:18px; }
  .footer-grid p,.footer-grid a { font-size:14px; }
}

/* Refinements: navigation without yellow active block */
.main-nav a.active { background:transparent; color:#20140d; }
.main-nav a:hover,.main-nav a:focus-visible,.main-nav a.active:hover { background:transparent; color:#f4d900; text-shadow:1px 1px 1px #0009; }
/* More generous inner padding keeps copy away from the rope */
.welcome-board { min-height:0; padding:clamp(65px,7.4vw,112px) clamp(85px,11vw,175px); }
.welcome-content { max-width:950px; }
.welcome-content h1 { font-size:clamp(25px,3.1vw,45px); }
.welcome-content h2 { font-size:clamp(17px,1.8vw,26px); }
.welcome-content p { font-size:clamp(14px,1.15vw,17px); line-height:1.3; margin:7px auto; }
.welcome-content h3 { margin-top:8px; }
.welcome-content .tagline { margin-bottom:0; }
/* Reduce vertical gaps below welcome section */
.wood-area { padding-bottom:8px; }
.phone-section { max-width:760px; margin:-8px auto -8px; }
.promos { max-width:1180px; }
.promo-board { padding:12px 28px; }
.promo-items img { max-height:145px; }
@media(max-width:1000px) { .welcome-board { padding:65px 85px; } .welcome-content { max-width:100%; } }
@media(max-width:760px) { .welcome-board { padding:55px 46px; } .welcome-content p { font-size:14px; } .phone-section { margin:0 auto -5px; } .promo-board { padding:12px 18px; } }
@media(max-width:480px) { .welcome-board { padding:45px 29px; } .welcome-content h1 { font-size:23px; } .welcome-content h2 { font-size:16px; } .welcome-content p { font-size:13px; line-height:1.32; margin:7px auto; } .welcome-content .sports-line { font-size:14px; } }


/* Readability and tighter welcome-to-phone spacing */
.welcome-content {
  font-family: Arial, Helvetica, sans-serif;
}
.welcome-content p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(14px, 1.18vw, 17px);
  font-weight: 600;
  line-height: 1.38;
}
.welcome-content h1,
.welcome-content h2,
.welcome-content h3,
.welcome-content .sports-line {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
}
.welcome-content .sports-line { font-weight: 700; }
.welcome-content .tagline { font-weight: 700; }

/* Pull the phone sign closer without changing the turquoise background. */
.phone-section { margin-top: -48px; margin-bottom: -10px; }

@media (max-width: 760px) {
  .welcome-content p { font-size: 14px; line-height: 1.4; }
  .phone-section { margin-top: -18px; margin-bottom: -8px; }
}
@media (max-width: 480px) {
  .welcome-content p { font-size: 13px; line-height: 1.4; }
  .phone-section { margin-top: -8px; margin-bottom: -5px; }
}

/* Oct 23: keep all welcome copy comfortably inside the rope frame. */
.welcome-board {
  box-sizing: border-box;
  padding-top: clamp(90px, 8.2vw, 125px);
  padding-bottom: clamp(100px, 9vw, 145px);
  padding-left: clamp(85px, 11vw, 175px);
  padding-right: clamp(85px, 11vw, 175px);
}
.phone-section { margin-top: -25px; }
@media (max-width: 760px) {
  .welcome-board { padding: 78px 48px 88px; }
  .phone-section { margin-top: -12px; }
}
@media (max-width: 480px) {
  .welcome-board { padding: 70px 32px 82px; }
  .phone-section { margin-top: -8px; }
}


/* ==============================================================
   MOBILE WELCOME PANEL — Oct 23, 2026
   Desktop retains the original rope-framed welcome graphic.
   On smaller screens, a flexible panel prevents ropes crossing text.
   ============================================================== */
@media (max-width: 760px) {
  .welcome-section {
    width: 100%;
    padding: 20px 0 0;
  }

  .welcome-board {
    transform: none;
    margin: 0 auto;
    min-height: 0;
    width: 100%;
    background: #f6ebd8;
    background-image: repeating-linear-gradient(
      0deg,
      rgba(122, 78, 37, .055) 0px,
      rgba(122, 78, 37, .055) 1px,
      transparent 1px,
      transparent 38px
    );
    border: 7px solid #a76a34;
    border-radius: 16px;
    box-shadow: inset 0 0 0 3px #e0b37a,
                inset 0 0 25px rgba(99, 58, 20, .14),
                0 7px 18px rgba(0, 0, 0, .25);
    padding: 26px 23px 28px;
  }

  .welcome-content {
    max-width: 100%;
    overflow-wrap: break-word;
    text-align: center;
  }

  .welcome-content h1 {
    font-size: clamp(23px, 5.7vw, 34px);
    line-height: 1.14;
    margin: 0 0 10px;
  }

  .welcome-content h2 {
    font-size: clamp(17px, 4.2vw, 23px);
    line-height: 1.25;
    margin: 0 0 7px;
  }

  .welcome-content .sports-line {
    font-size: clamp(14px, 3.7vw, 18px);
    line-height: 1.3;
  }

  .welcome-content .rule {
    margin: 13px auto 18px;
  }

  .welcome-content p {
    font-size: clamp(14px, 3.5vw, 16px);
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 14px;
    text-align: left;
  }

  .welcome-content .sports-line,
  .welcome-content .specials-link,
  .welcome-content .tagline {
    text-align: center;
  }

  .welcome-content .specials-link {
    font-size: clamp(15px, 3.7vw, 18px);
    line-height: 1.35;
    margin: 16px 0;
  }

  .welcome-content h3 {
    font-size: clamp(19px, 4.8vw, 25px);
    line-height: 1.2;
    margin: 14px 0 6px;
  }

  .welcome-content .tagline {
    margin: 0;
    line-height: 1.35;
  }

  .phone-section {
    margin: 6px auto 0;
  }

  .promos {
    margin-top: 0;
  }
}

@media (max-width: 480px) {
  .wood-area {
    padding: 0 10px 16px;
  }

  .welcome-section {
    padding-top: 14px;
  }

  .welcome-board {
    border-width: 6px;
    border-radius: 12px;
    padding: 24px 18px 26px;
  }

  .welcome-content p {
    font-size: 14px;
    line-height: 1.48;
    margin-bottom: 13px;
  }

  .welcome-content h1 {
    font-size: clamp(22px, 6vw, 29px);
  }

  .welcome-content h2 {
    font-size: clamp(17px, 4.6vw, 21px);
  }

  .phone-section {
    margin-top: 4px;
    margin-bottom: 0;
  }

  .promo-board {
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

/* ==============================================================
   OCT 23 — CLEAN WOOD PANEL ON DESKTOP AND MOBILE
   Replace the old rope graphic on wider screens with the same
   flexible cream panel already approved on iPhone.
   ============================================================== */
@media (min-width: 761px) {
  .welcome-section {
    max-width: 1180px;
    padding: 24px 12px 0;
  }

  .welcome-board {
    width: 100%;
    min-height: 0;
    transform: none;
    margin: 0 auto;
    background: #f6ebd8;
    background-image: repeating-linear-gradient(
      0deg,
      rgba(122, 78, 37, .055) 0px,
      rgba(122, 78, 37, .055) 1px,
      transparent 1px,
      transparent 38px
    );
    border: 7px solid #a76a34;
    border-radius: 16px;
    box-shadow: inset 0 0 0 3px #e0b37a,
                inset 0 0 25px rgba(99, 58, 20, .14),
                0 7px 18px rgba(0, 0, 0, .25);
    padding: clamp(30px, 4vw, 56px) clamp(36px, 5.5vw, 82px);
  }

  .welcome-content {
    max-width: 960px;
    overflow-wrap: break-word;
    text-align: center;
  }

  .welcome-content p {
    font-size: clamp(15px, 1.22vw, 17px);
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 14px;
    text-align: left;
  }

  .welcome-content .sports-line,
  .welcome-content .specials-link,
  .welcome-content .tagline {
    text-align: center;
  }

  .welcome-content h1 { margin-bottom: 10px; }
  .welcome-content h2 { margin-bottom: 7px; }
  .welcome-content .rule { margin: 13px auto 18px; }
  .welcome-content .specials-link { margin: 16px auto; }
  .welcome-content h3 { margin: 14px 0 6px; }
  .welcome-content .tagline { margin-bottom: 0; }

  .phone-section { margin: 4px auto 0; }
}