/*
Theme Name: Bali Virtual Guide
Theme URI: https://balivirtualguide.com/
Author: ChatGPT (for Reki)
Author URI: https://chat.openai.com/
Description: Clean, fast, and mobile-first theme optimized for a Bali travel guide. Customizable banner header, centered menu with per-item underline, Customizer colors & layout, and optional auto-translate.
Version: 1.1.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: balivirtualguide
Tags: blog, responsive-layout, custom-logo, custom-colors, custom-menu, custom-header
*/

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color: var(--text, #111); background: var(--bg,#fff); line-height: 1.6; }
img { max-width: 100%; height: auto; }

:root {
  --bg: #ffffff;
  --text: #111111;
  --muted: #666666;
  --accent: #ff7a00;
  --accent-600: #e96e00;
  --border: #eaeaea;
  --logo-height: 56px;
  --banner-height: 360px;
  --banner-height-mobile: 220px;
}

.container { width: min(1100px, 92%); margin-inline: auto; }
.grid { display: grid; gap: 1rem; }
.grid-1 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--border); backdrop-filter: saturate(180%) blur(6px); }
.brand { display:flex; align-items:center; gap:.6rem; padding:.5rem 0; }
.brand .site-title { font-size: 1.2rem; font-weight: 700; margin:0; }
.brand .tagline { color: var(--muted); font-size:.9rem; margin:0; }
.navbar { display:flex; align-items:center; justify-content:space-between; }
.menu-toggle { display:none; border:1px solid var(--border); background:#fff; padding:.5rem .7rem; border-radius:.5rem; }

/* Nav: transparent centered menu, underline per item only */
.primary-nav{
  background: transparent !important;
  border: 0;
  display:block;
  width:100%;
}
.primary-nav .menu{
  margin:0;
  padding:.2rem .5rem;
  list-style:none;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:.2rem .4rem;
}
.primary-nav .menu > li > a{
  display:inline-block;
  text-decoration:none;
  font-weight:700;
  padding:.5rem .8rem;
  border-radius:.3rem;
  color: var(--text);
  border-bottom: 2px solid transparent;
}
.primary-nav .menu > li > a:hover,
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a{
  background: transparent;
  border-bottom-color: var(--accent);
  color: var(--accent);
}
@media (max-width: 860px){
  .menu-toggle{ display:inline-flex; }
  .primary-nav{ display:none; }
  .primary-nav.open{ display:block; }
}

/* Banner (Header Image) full-bleed */
.site-banner{
  height: var(--banner-height);
  width: 100vw; margin-left:50%; transform: translateX(-50%);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.site-banner img{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
}
@media (max-width: 640px){
  .site-banner{ height: var(--banner-height-mobile); }
}

a { color: var(--accent); }
a:hover { color: var(--accent-600); }
.button, .wp-block-button__link { display:inline-block; padding:.7rem 1rem; border-radius:.7rem; background:var(--accent); color:#fff; text-decoration:none; border:0; }
.button:hover, .wp-block-button__link:hover { background: var(--accent-600); color:#fff; }

.hero { padding: 1.2rem 0 .8rem; }
.hero .title { font-size: clamp(1.6rem, 2.2vw + 1rem, 2.4rem); margin:.2rem 0 .2rem; }
.hero .subtitle { color: var(--muted); margin:0 0 .6rem; }
.searchbar { display:flex; gap:.5rem; margin-top:.8rem; }
.searchbar input[type="search"]{ flex:1; padding:.8rem 1rem; border:1px solid var(--border); border-radius:.7rem; }
.searchbar button{ padding:.8rem 1rem; }

.card { border:1px solid var(--border); border-radius:1rem; overflow:hidden; background:#fff; display:flex; flex-direction:column; transition: transform .12s ease, box-shadow .12s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.card .thumb{ aspect-ratio: 16/9; background:#f7f7f7; overflow:hidden; }
.card .content{ padding:1rem; }
.card .meta{ display:flex; gap:.8rem; font-size:.85rem; color:var(--muted); margin:.2rem 0 .6rem; }

.entry-header h1{ font-size: clamp(1.6rem, 2vw + 1rem, 2.2rem); margin:.6rem 0; }
.entry-meta{ color:var(--muted); font-size:.9rem; }
.entry-content{ font-size:1.02rem; }
.entry-content p{ margin: 0 0 1rem; }
.entry-content h2, .entry-content h3{ margin-top: 1.6rem; }
.entry-footer{ margin-top: 1.6rem; border-top:1px solid var(--border); padding-top:1rem; }

.sidebar .widget{ border:1px solid var(--border); border-radius: .8rem; padding: .9rem; margin-bottom:1rem; }
.sidebar .widget-title{ margin:.2rem 0 1rem; font-size:1.05rem; }

.site-footer{ margin-top:2rem; border-top:1px solid var(--border); padding:1.2rem 0; color:var(--muted); font-size:.95rem; text-align:center; }

.badge{ font-size:.78rem; background:rgba(255,122,0,.1); color:var(--accent); padding:.25rem .5rem; border-radius:.5rem; }
.screen-reader-text{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

/* Sidebar placement fixes */
@media (min-width: 981px){
  .site-content { display: block; }
  .sidebar-left .site-content { display:grid; grid-template-columns: 1fr 280px; gap: 1rem; }
  .sidebar-left .site-content > aside.sidebar { grid-column: 1; }
  .sidebar-left .site-content > :not(aside.sidebar) { grid-column: 2; }
}
.no-sidebar .sidebar{ display:none; }
.no-sidebar .site-content { max-width: 860px; }

.custom-logo{ height:auto; max-height: var(--logo-height); width:auto; }
@media (max-width:640px){ .custom-logo{ max-height: calc(var(--logo-height) * .9); } }