/*
Theme Name: London Guide UK
Theme URI: https://www.londonguideuk.co.uk
Template: twentytwentyfive
Description: Luxury Black, app style. An independent London visitor and luxury guide, built mobile first with a native iPhone feel (frosted glass, bottom tab bar, momentum scroll). Off black, foil gold and warm ivory, Playfair Display and Inter.
Author: London Guide UK
Version: 0.3.3
Requires at least: 6.7
Tested up to: 7.0
Text Domain: londonguide
*/

/* Fonts are also enqueued via functions.php; kept here as a fallback. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --lg-bg:#0A0A0A;
  --lg-surface:#141414;
  --lg-surface-2:#1b1b1b;
  --lg-ivory:#F4EADE;
  --lg-gold:#C69B3C;
  --lg-gold-soft:#dcb45a;
  --lg-hairline:rgba(198,155,60,.22);
  --lg-muted:#9b8a76;
  --lg-radius:18px;
  --lg-radius-lg:24px;
  --lg-tabbar-h:64px;
  --lg-serif:"Playfair Display", Georgia, serif;
  --lg-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* ---------- app base / iOS feel ---------- */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  background:var(--lg-bg) !important;
  color:var(--lg-ivory) !important;
  font-family:var(--lg-sans) !important;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
  /* clear the fixed bottom tab bar + iPhone home indicator */
  padding-bottom:calc(var(--lg-tabbar-h) + env(safe-area-inset-bottom, 0px)) !important;
}
*{ -webkit-tap-highlight-color:transparent; }

/* momentum scroll on any scroll containers */
.wp-site-blocks, .entry-content, main{ -webkit-overflow-scrolling:touch; }

img{ border-radius:14px; }

/* ---------- typography ---------- */
h1,h2,h3,h4,h5{
  font-family:var(--lg-serif) !important;
  color:var(--lg-ivory) !important;
  letter-spacing:.2px;
  line-height:1.18;
}
h1{ font-size:clamp(2rem, 7vw, 3.1rem); font-weight:600; }
h2{ font-size:clamp(1.5rem, 5.2vw, 2.1rem); font-weight:600; margin-top:1.6em; }
h3{ font-size:clamp(1.18rem, 4.4vw, 1.4rem); font-weight:600; }
p, li{ font-family:var(--lg-sans); }
a{ color:var(--lg-gold); text-decoration:none; }
a:active{ color:var(--lg-gold-soft); }

/* ---------- top navigation removed: a slim brand bar stays on top, nav lives in the bottom tab bar ---------- */
.wp-site-blocks > header,
header.wp-block-template-part{ display:none !important; }

/* slim frosted brand bar (logo only, injected by functions.php) */
.lg-topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:950;
  display:flex;
  align-items:center;
  justify-content:center;
  height:calc(50px + env(safe-area-inset-top, 0px));
  padding-top:env(safe-area-inset-top, 0px);
  background:rgba(10,10,10,.72);
  -webkit-backdrop-filter:saturate(160%) blur(20px);
  backdrop-filter:saturate(160%) blur(20px);
  border-bottom:1px solid var(--lg-hairline);
}
.lg-brand{
  display:inline-flex;
  align-items:baseline;
  gap:.4rem;
  font-family:var(--lg-serif);
  font-weight:700;
  font-size:1.18rem;
  letter-spacing:.4px;
  color:var(--lg-ivory) !important;
  line-height:1;
}
.lg-brand-uk{ color:var(--lg-gold); }
.lg-brand:active{ opacity:.8; }

/* push content clear of the fixed brand bar + iPhone status bar */
.wp-site-blocks{ padding-top:calc(64px + env(safe-area-inset-top, 0px)); }

/* ---------- footer: independent publication line (replaces the default footer) ---------- */
.wp-site-blocks > footer,
footer.wp-block-template-part{ display:none !important; }
.lg-footer{
  margin:2.5rem auto 0.5rem;
  padding:1.8rem 1.25rem;
  max-width:42rem;
  text-align:center;
  border-top:1px solid var(--lg-hairline);
}
.lg-foot-brand{ font-family:var(--lg-serif); color:var(--lg-ivory); font-size:1.3rem; font-weight:600; margin:0 0 .15rem; }
.lg-foot-tag{ color:var(--lg-gold); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; margin:0 0 1.1rem; }
.lg-foot-note{ color:var(--lg-muted); font-size:.82rem; line-height:1.75; margin:0 auto 1rem; max-width:36rem; }
.lg-foot-copy{ color:var(--lg-muted); font-size:.78rem; margin:0; }

/* ---------- content as app cards ---------- */
.entry-content{ font-size:1.0625rem; }
.entry-content > p,
.entry-content > ul,
.entry-content > ol{ max-width:42rem; }

/* the answer-first box and quotes become liquid-glass cards */
.entry-content blockquote,
.wp-block-quote{
  margin:1.4em 0;
  padding:1.1rem 1.2rem;
  background:rgba(198,155,60,.07);
  border:1px solid var(--lg-hairline);
  border-left:3px solid var(--lg-gold);
  border-radius:var(--lg-radius);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}

/* numbered and bulleted picks, comfortable tap spacing */
.entry-content ol li,
.entry-content ul li{ margin:.55em 0; padding-left:.15em; }
.entry-content ol li::marker{ color:var(--lg-gold); font-weight:600; }
.entry-content strong{ color:var(--lg-ivory); }
.entry-content em{ color:var(--lg-muted); font-style:normal; }

/* FAQ answers feel like settings rows */
.entry-content h3{ margin-top:1.4em; }

/* gold hairline dividers */
hr, .wp-block-separator{
  border:0 !important;
  height:1px !important;
  background:var(--lg-hairline) !important;
}

/* ---------- buttons / pills ---------- */
.wp-block-button__link, .wp-element-button{
  background:var(--lg-gold) !important;
  color:#0A0A0A !important;
  border-radius:999px !important;
  font-family:var(--lg-sans) !important;
  font-weight:600 !important;
  letter-spacing:.02em;
  padding:.8em 1.5em !important;
  transition:transform .15s ease, background .2s ease;
}
.wp-block-button__link:active, .wp-element-button:active{ transform:scale(.97); }

/* post cards on lists / home (query loop) */
.wp-block-post{
  background:var(--lg-surface);
  border:1px solid var(--lg-hairline);
  border-radius:var(--lg-radius-lg);
  padding:1.1rem 1.15rem;
  margin-bottom:1.1rem;
  transition:transform .15s ease;
}
.wp-block-post:active{ transform:scale(.99); }
.wp-block-post-title a{ color:var(--lg-ivory) !important; }
.wp-block-post-title a:active{ color:var(--lg-gold) !important; }

/* ---------- bottom tab bar (injected by functions.php) ---------- */
.lg-tabbar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:1000;
  display:flex;
  justify-content:space-around;
  align-items:stretch;
  gap:2px;
  height:calc(var(--lg-tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding:6px 10px env(safe-area-inset-bottom, 0px);
  background:rgba(14,14,14,.78);
  -webkit-backdrop-filter:saturate(160%) blur(22px);
  backdrop-filter:saturate(160%) blur(22px);
  border-top:1px solid var(--lg-hairline);
}
.lg-tab{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  color:var(--lg-muted);
  font-family:var(--lg-sans);
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
  border-radius:14px;
  transition:color .2s ease, background .2s ease, transform .12s ease;
}
.lg-tab svg{ width:24px; height:24px; display:block; }
.lg-tab span{ line-height:1; }
.lg-tab:active{ transform:scale(.92); background:rgba(198,155,60,.08); }
.lg-tab.is-active{ color:var(--lg-gold); }
.lg-tab:hover{ color:var(--lg-ivory); }

/* ---------- desktop: keep it elegant, float the tab bar as a centered pill ---------- */
@media (min-width:900px){
  body{ font-size:18px; }
  .lg-tabbar{
    left:50%; right:auto; bottom:22px;
    transform:translateX(-50%);
    width:min(440px, 92vw);
    height:62px;
    padding:6px 12px;
    border:1px solid var(--lg-hairline);
    border-radius:999px;
    box-shadow:0 12px 40px rgba(0,0,0,.5);
  }
  body{ padding-bottom:108px !important; }
}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}