/* SOHOFRANCHISE brand header v2 — minimal header + hidden menu
   Loaded after style.css / tourism-v5.css */
:root{
  --sf-header-bg:#1E2B30;
  --sf-header-line:rgba(255,255,255,.12);
  --sf-green:#2E7D4F;
  --sf-green-light:#4CAF7A;
  --sf-text:#FFFFFF;
  --sf-text-dim:#C9D3D8;
  --sf-youtube:#FF0033;
}

/* ---------- Header ---------- */
.sf-header{
  background:var(--sf-header-bg);
  position:sticky;top:0;z-index:200;
}
.sf-header-row{
  display:flex;align-items:center;justify-content:space-between;
  min-height:76px;gap:16px;
}

/* Brand */
.sf-brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.sf-brand-mark{width:46px;height:46px;flex:0 0 46px;display:block;transition:transform .25s ease}
.sf-brand:hover .sf-brand-mark{transform:rotate(-8deg) scale(1.04)}
.sf-brand-mark img{width:100%;height:100%;display:block}
.sf-brand-copy{display:flex;flex-direction:column;line-height:1;min-width:0}
.sf-brand-copy strong{
  font-family:Montserrat,"Arial Black","Helvetica Neue",Arial,sans-serif;
  font-weight:800;font-size:21px;letter-spacing:.01em;color:var(--sf-text);
}
.sf-brand-copy small{
  font-family:Montserrat,"Helvetica Neue",Arial,sans-serif;
  font-weight:500;font-size:10px;letter-spacing:.14em;
  color:var(--sf-text-dim);margin-top:6px;white-space:nowrap;
}

/* Two-line menu button */
.sf-menu-btn{
  position:relative;width:44px;height:44px;flex:0 0 44px;
  display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px;
  background:none;border:0;border-radius:10px;cursor:pointer;padding:0 8px;
  -webkit-tap-highlight-color:transparent;
}
.sf-menu-btn:hover{background:rgba(255,255,255,.06)}
.sf-menu-btn:focus-visible{outline:2px solid var(--sf-green-light);outline-offset:2px}
.sf-menu-line{
  display:block;height:2px;border-radius:2px;background:var(--sf-text);
  transition:transform .25s ease,width .25s ease;
}
.sf-menu-line:nth-child(1){width:22px}
.sf-menu-line:nth-child(2){width:14px}
.sf-menu-btn:hover .sf-menu-line:nth-child(2){width:22px}
/* open state → X */
.sf-header.is-open .sf-menu-line{width:22px}
.sf-header.is-open .sf-menu-line:nth-child(1){transform:translateY(4px) rotate(45deg)}
.sf-header.is-open .sf-menu-line:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

/* Header tools: search + menu */
.sf-header-tools{display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0}
.sf-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.sf-header .sf-search{
  display:flex;align-items:center;margin:0;
  width:260px;height:40px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  transition:border-color .2s ease,background .2s ease,width .25s ease;
}
.sf-header .sf-search:focus-within{background:rgba(255,255,255,.12);border-color:var(--sf-green-light);width:300px}
.sf-header .sf-search input[type="search"]{
  flex:1;min-width:0;height:100%;margin:0;padding:0 4px 0 16px;
  background:transparent;border:0;outline:0;box-shadow:none;
  color:var(--sf-text);font:500 14px/1 Montserrat,"Helvetica Neue",Arial,sans-serif;
  -webkit-appearance:none;appearance:none;
}
.sf-header .sf-search input::placeholder{color:rgba(201,211,216,.7)}
.sf-header .sf-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.sf-header .sf-search button{
  display:flex;align-items:center;justify-content:center;flex:0 0 38px;
  width:38px;height:38px;margin:0;padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--sf-text-dim);cursor:pointer;
}
.sf-header .sf-search button:hover{color:var(--sf-text)}
.sf-search-toggle{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border:0;border-radius:10px;
  background:none;color:var(--sf-text);cursor:pointer;
}
.sf-search-toggle:hover{background:rgba(255,255,255,.06)}
.sf-search-toggle:focus-visible{outline:2px solid var(--sf-green-light);outline-offset:2px}

@media (max-width:760px){
  .sf-search-toggle{display:flex}
  .sf-header .sf-search{
    display:none;position:absolute;left:12px;right:12px;top:calc(100% - 6px);z-index:5;
    width:auto;height:46px;background:#2a3a40;border-color:var(--sf-green-light);
    box-shadow:0 12px 28px rgba(0,0,0,.35);
  }
  .sf-header .sf-search:focus-within{width:auto;background:#2a3a40}
  .sf-header .sf-search input[type="search"]{font-size:16px} /* prevents iOS zoom */
  .sf-header.search-open .sf-search{display:flex}
  .sf-header-row{position:relative}
}

/* Category bar (replaces tagline strip) */
.sf-catbar{border-top:1px solid var(--sf-header-line)}
.sf-header .sf-catbar-inner{
  display:flex;justify-content:center;align-items:center;gap:6px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding-top:6px;padding-bottom:6px;
}
.sf-catbar-inner::-webkit-scrollbar{display:none}
.sf-catbar a{
  position:relative;flex:0 0 auto;padding:9px 14px;border-radius:999px;
  font-family:Montserrat,"Helvetica Neue",Arial,sans-serif;
  font-size:13px;font-weight:600;letter-spacing:.02em;white-space:nowrap;
  color:var(--sf-text-dim);text-decoration:none;
  transition:color .2s ease,background .2s ease;
}
.sf-catbar a:hover{color:var(--sf-text);background:rgba(255,255,255,.07)}
.sf-catbar a:focus-visible{outline:2px solid var(--sf-green-light);outline-offset:1px}
.sf-catbar a[aria-current="page"]{color:var(--sf-text);background:rgba(76,175,122,.18)}
.sf-catbar a[aria-current="page"]::after{
  content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;background:var(--sf-green-light);
}
.sf-catbar a.sf-catbar-green{color:#9BD83A}
.sf-catbar a.sf-catbar-green:hover{color:#b8ee5e}

/* Drop-down menu panel */
.sf-nav{
  position:absolute;left:0;right:0;top:76px;
  background:var(--sf-header-bg);
  border-top:1px solid var(--sf-header-line);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  animation:sfNavIn .22s ease;
}
.sf-nav[hidden]{display:none}
.sf-nav .sf-nav-inner{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:2px 24px;padding:18px 0 26px;
}
.sf-nav a{
  display:block;padding:13px 0;
  font-family:Montserrat,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;font-weight:600;color:var(--sf-text-dim);text-decoration:none;
  border-bottom:1px solid var(--sf-header-line);
  transition:color .2s ease,padding-left .2s ease;
}
.sf-nav a:hover,.sf-nav a:focus-visible{color:var(--sf-text);padding-left:6px;outline:none}
.sf-nav a[aria-current="page"]{color:var(--sf-green-light)}
@keyframes sfNavIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.sf-nav-backdrop{position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.35)}
.sf-nav-backdrop[hidden]{display:none}

@media (max-width:520px){
  .sf-header-row{min-height:66px}
  .sf-nav{top:66px}
  .sf-brand-mark{width:40px;height:40px;flex-basis:40px}
  .sf-brand-copy strong{font-size:18px}
  .sf-brand-copy small{font-size:8.5px;letter-spacing:.12em}
  .sf-header .sf-catbar-inner{justify-content:flex-start;padding-top:4px;padding-bottom:4px}
  .sf-catbar a{font-size:12.5px;padding:9px 11px}
  .sf-header .sf-catbar-inner{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);padding-right:32px}
  .sf-nav .sf-nav-inner{grid-template-columns:1fr}
}

/* ---------- Footer buttons (moved from header) ----------
   High specificity + !important on layout so footer link styles in
   style.css (display:block, padding, line-height…) can't squash them. */
.site-footer .sf-footer-actions{
  display:flex!important;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px;
}
.site-footer .sf-footer-actions a.sf-footer-btn{
  display:inline-flex!important;align-items:center!important;justify-content:center;
  flex-direction:row!important;gap:8px;
  box-sizing:border-box;min-height:46px;height:auto!important;
  padding:12px 26px!important;margin:0!important;
  border-radius:999px;line-height:1!important;white-space:nowrap;
  font-family:Montserrat,"Helvetica Neue",Arial,sans-serif;
  font-size:14px!important;font-weight:700;letter-spacing:.02em;
  text-decoration:none!important;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.site-footer .sf-footer-actions a.sf-footer-btn:hover{transform:translateY(-1px)}
.site-footer .sf-footer-actions a.sf-footer-btn svg{flex:0 0 auto;display:block;width:20px;height:20px;margin:0}
.site-footer .sf-footer-actions a.sf-footer-btn span{display:inline;line-height:1}
.site-footer .sf-footer-actions a.sf-footer-advertise{
  border:2px solid var(--sf-green-light)!important;color:#fff!important;background:transparent;
}
.site-footer .sf-footer-actions a.sf-footer-advertise:hover{background:var(--sf-green);border-color:var(--sf-green)!important}
.site-footer .sf-footer-actions a.sf-footer-youtube{
  border:2px solid var(--sf-youtube)!important;background:var(--sf-youtube);color:#fff!important;
}
.site-footer .sf-footer-actions a.sf-footer-youtube:hover{background:#d4002a;border-color:#d4002a!important}
.site-footer .sf-footer-actions a.sf-footer-btn:focus-visible{outline:2px solid var(--sf-green-light);outline-offset:3px}

/* Consistent grape logo rendering on mobile */
.sf-brand-mark img{object-fit:contain;object-position:center}
@media(max-width:520px){.sf-brand-mark{overflow:visible}.sf-brand-mark img{width:100%;height:100%}}