@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Ruabon Wales Guide — Croeso Template v2
   Theme: "Ruabon Red" terracotta, after the village's Victorian brick & tile industry
   ========================================================================== */

:root {
  --primary:       #9c3b28;
  --primary-light: #c1583f;
  --primary-dark:  #5e2015;
  --accent:        #f5c842;
  --accent-2:      #f5c842;
  --gold:          #f5c842;
  --text:          #1c2428;
  --text-light:    #5d6b72;
  --sand:          #f8f0ec;
  --stone:         #f4efe4;
  --light-bg:      #f1e0d7;
  --border:        #e3cec3;
  --white:         #fff;
  --max-width:     1180px;
  --box-width:     1040px;
  --radius:        16px;
  --radius-sm:     10px;
  --shadow-sm:     0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.06);
  --shadow-md:     0 6px 24px rgba(0,0,0,.10);
  --shadow-lg:     0 24px 60px rgba(0,0,0,.18);
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading:  'Fraunces', Georgia, serif;
  --ease:          cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 18px; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  line-height: 1.7;
  font-size: 1.08rem;
}
img { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--text); line-height: 1.2; margin: 0 0 .5em; }
h2 { font-size: 2.1rem; }
h3 { font-size: 1.4rem; }
p { margin: 0 0 1.1em; font-size: 1.08rem; }

/* ---------- Standard readable text column ---------- */
.text-col { max-width: 820px; margin: 0 auto; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  gap: 20px;
}
.nav-logo {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--primary-dark);
  white-space: nowrap;
}
.nav-logo span { color: var(--primary); }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links > li { position: relative; }
.nav-links a, .nav-links > li > span.nav-toggle {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.nav-links a:hover, .nav-links > li:hover > span.nav-toggle, .nav-links a.active {
  background: var(--primary);
  color: var(--white);
}
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 220px;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  padding: 16px 8px 8px;
  text-align: center;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.nav-dropdown a { display: block; padding: 8px 12px; border-radius: 8px; font-weight: 500; }
.nav-dropdown a:hover { background: var(--sand); color: var(--primary-dark); }
.nav-toggle-mobile { display: none; background: none; border: none; font-size: 1.6rem; cursor: pointer; color: var(--primary-dark); }

/* This desktop-only hover/open rule is scoped behind a min-width query so it
   can never win a specificity fight against the mobile accordion rules below.
   It previously sat unscoped at the base level: because its selector
   (.nav-links > li.open-dropdown .nav-dropdown) is more specific than the
   plain ".nav-dropdown" used inside the mobile media query, it kept applying
   its own transform: translateX(-50%) even on mobile whenever a section was
   tapped open — shifting the expanded list sideways by half its own width
   and causing exactly the "pushes everything sideways / needs horizontal
   scroll" look. Confining it to desktop widths removes the conflict outright
   instead of relying on source order or !important. */
@media (min-width: 981px) {
  /* flex-wrap only ever makes sense for the horizontal desktop pill row —
     on mobile the panel is a fixed-height flex COLUMN (see below), and
     flex-wrap there is actively harmful: once an expanded accordion makes
     the stacked items taller than the panel, "wrap" pulls the overflowing
     items into a second column instead of just letting them scroll, which
     is exactly what made a tapped item appear to jump beside its neighbour.
     Keeping flex-wrap scoped to desktop-only avoids that outcome entirely. */
  .nav-links { flex-wrap: wrap; }

  /* The dropdown's own top padding (above) sits inside its hoverable box, right
     up against the nav button, so there is no dead gap for the cursor to lose
     the menu in on the way down. The class below is toggled by nav.js with a
     short close-delay so brief, fast cursor movement doesn't drop the menu. */
  .nav-links > li:hover .nav-dropdown,
  .nav-links > li.open-dropdown .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
}

@media (max-width: 980px) {
  /* backdrop-filter (used for the desktop frosted-glass header) creates a new
     containing block for position:fixed descendants — which silently made
     the "fullscreen" nav panel size itself against the header bar's own
     ~60px height instead of the viewport, squashing it to a sliver. Turning
     it off on mobile removes that containing block so top:0/bottom:0 below
     resolve against the real viewport again. */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }

  .nav-toggle-mobile { display: block; position: relative; z-index: 210; }

  /* Fullscreen slide-in panel. It's always laid out at fixed/inset:0 so its
     entrance can be animated with a transform — sitting off-screen to the
     right (translateX(100%)) until .open slides it fully into view. This is
     deliberately NOT the old display:none/flex toggle, which can't animate
     and was the root of the "still horizontal" symptom: display changes are
     instant and give no slide motion at all. */
  .nav-links {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
    background: var(--white);
    border: none;
    box-shadow: none;
    padding: 86px 20px 30px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 200;
    gap: 2px;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .32s var(--ease), visibility .32s;
  }
  .nav-links.open {
    transform: translateX(0);
    visibility: visible;
  }

  /* Every item is a fixed-size row in a single, non-wrapping column:
     flex: 0 0 auto (don't grow, don't shrink, size to content) plus an
     explicit width so nothing ever squeezes, overlaps, or gets pulled into
     a second column. When a section opens, its own height simply grows in
     normal block flow, which pushes every row below it further down the
     column — the panel's overflow-y:auto (above) is what turns that into a
     scroll once the column runs taller than the screen. */
  .nav-links > li {
    position: static;
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
  }

  /* Header row: label text and chevron on one line, full width, never
     re-centred or wrapped, so nothing shifts sideways when a section opens.
     Scoped to DIRECT children only — this must not also match the <a> links
     nested inside .nav-dropdown one level down. */
  .nav-links > li > a,
  .nav-links > li > span.nav-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 12px;
    border-radius: 10px;
    white-space: nowrap;
  }

  .nav-links > li > span.nav-toggle::after {
    content: "\25BE";
    font-size: .75rem;
    flex-shrink: 0;
    transition: transform .2s var(--ease);
  }
  .nav-links > li.open-dropdown > span.nav-toggle::after {
    transform: rotate(180deg);
  }

  /* Dropdowns are collapsed accordion sections on mobile, not always-open
     lists, so the menu doesn't turn into one long wall of links. Every
     positioning property that the desktop hover-dropdown relies on is
     explicitly neutralised here so nothing carries over sideways. */
  .nav-dropdown {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    min-width: 0;
    max-width: none;
    background: transparent;
    box-shadow: none;
    border: none;
    text-align: left;
    padding: 0 0 6px 16px;
    margin: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none;
  }
  .nav-links > li.open-dropdown .nav-dropdown { display: block; }

  .nav-dropdown a {
    display: block;
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    text-align: left;
    white-space: normal;
  }
}

/* ---------- Hero (homepage) ---------- */
.hero { position: relative; height: 78vh; min-height: 460px; overflow: hidden; color: var(--white); }
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  animation: heroZoom 18s var(--ease) forwards;
}
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.09); } }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,20,15,.15) 0%, rgba(28,20,15,.75) 100%);
}
.hero-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 24px; max-width: var(--max-width); margin: 0 auto; z-index: 2; }
.hero-tag { display: inline-block; background: var(--accent); color: #3a2a05; font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; margin-bottom: 14px; }
.hero-content h1 { color: var(--white); font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 10px; }
.hero-sub { color: rgba(255,255,255,.92); font-size: 1.15rem; max-width: 620px; }
.hero-credit { position: absolute; bottom: 8px; right: 14px; z-index: 2; font-size: .72rem; color: rgba(255,255,255,.75); }
.hero-credit a { color: rgba(255,255,255,.9); text-decoration: underline; }

/* ---------- Page banner (inner pages) ---------- */
.page-banner { position: relative; padding: 76px 24px 56px; background: var(--primary-dark); overflow: hidden; }
.page-banner::before {
  content: ""; position: absolute; top: -40%; right: -10%; width: 480px; height: 480px;
  background: radial-gradient(circle, var(--primary-light) 0%, transparent 70%);
  opacity: .55;
}
.banner-content { position: relative; z-index: 1; max-width: var(--max-width); margin: 0 auto; text-align: center; }
.banner-content h1 { color: var(--white); font-size: clamp(2.1rem, 4.5vw, 3.1rem); }
.banner-sub { color: rgba(255,255,255,.85); font-size: 1.2rem; max-width: 680px; margin: 0 auto; }

/* ---------- Sections ----------
   .section-inner is the ONE shared text column (920px, centred) used by
   every section on every page — white or red — so paragraph text always
   lines up at the same left/right edge across a page.
   Every section's content sits in a rounded, shadowed box that is a little
   WIDER than the 920px text column (matching --box-width, the same width
   as the Booking.com block and the day-trip strip below), then padded
   back in — so every box reads wider than its own text, but the text
   itself always lines up at the same 920px position, and the boxes
   themselves all line up with each other and with the Booking.com block.
   Red sections use a terracotta sand tone; white sections use a paler
   stone/parchment tone with a hairline border, so both read as boxes. */
.section { padding: 34px 24px; width: 100%; }
.section-inner { max-width: 920px; margin: 0 auto; }
.section-alt { padding: 26px 24px; width: 100%; }

.alt-box, .white-box {
  margin: 0 -60px;
  padding: 40px 60px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.alt-box { background: var(--sand); }
.white-box { background: var(--stone); border: 1px solid var(--border); }

@media (max-width: 1048px) {
  .alt-box, .white-box { margin: 0; padding: 30px 26px; }
}
h2::after { content: ""; display: block; width: 56px; height: 3px; background: var(--accent); margin-top: 12px; border-radius: 2px; }

/* ---------- Full-width descriptive images ---------- */
.page-hero-figure { width: 100%; margin: 0; background: var(--light-bg); }
.page-hero-figure img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
}
.page-hero-figure figcaption {
  max-width: var(--box-width);
  margin: 0 auto;
  font-size: .8rem;
  color: var(--text-light);
  padding: 8px 24px;
  text-align: right;
}
figure figcaption { font-size: .8rem; color: var(--text-light); overflow-wrap: break-word; word-break: break-word; }

/* ---------- Inline / floated images (paired with text, not isolated) ----------
   Sized so the image + its margin can never exceed the space available
   inside the box it sits in (image, credit line and all, stay contained). */
.float-fig {
  float: right;
  width: 300px;
  max-width: calc(38% - 20px);
  margin: 4px 0 20px 24px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
}
.float-fig.float-left { float: left; margin: 4px 24px 20px 0; }
.float-fig img { width: 100%; display: block; }
.float-fig figcaption { padding: 8px 12px; text-align: left; background: var(--white); overflow-wrap: break-word; word-break: break-word; }
@media (max-width: 700px) {
  .float-fig, .float-fig.float-left { float: none; width: 100%; max-width: 100%; margin: 8px 0 20px; }
}

/* ---------- Cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; padding: 44px 24px; max-width: var(--max-width); margin: 0 auto; }
.img-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease); text-decoration: none; display: block; color: var(--text); }
.img-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.img-card .card-img-wrap { aspect-ratio: 16/9; overflow: hidden; background: var(--light-bg); }
.img-card img { width: 100%; height: 100%; object-fit: cover; }
.img-card .card-body { padding: 18px 20px 22px; }
.img-card h3 { font-size: 1.3rem; margin-bottom: 6px; }
.img-card p { font-size: 1rem; color: var(--text-light); margin-bottom: 10px; }
.card-arrow { font-weight: 700; color: var(--primary); font-size: .95rem; }

/* ---------- Ads ---------- */
.ad-unit { max-width: var(--max-width); margin: 0 auto; padding: 20px 24px; text-align: center; }

/* ---------- Booking ---------- */
.booking-block { display: block; max-width: var(--box-width); margin: 0 auto 8px; text-decoration: none; }
.booking { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); border-radius: var(--radius); padding: 40px 32px; text-align: center; color: var(--white); box-shadow: var(--shadow-md); }
.booking h3 { color: var(--white); margin-bottom: 8px; }
.bk-sub { color: rgba(255,255,255,.88); max-width: 520px; margin: 0 auto 20px; }
.btn-book { display: inline-block; background: var(--accent); color: #3a2a05; font-weight: 700; padding: 12px 26px; border-radius: 999px; font-size: .95rem; }
.bk-powered { margin: 14px 0 0; font-size: .78rem; color: rgba(255,255,255,.7); }

/* ---------- Nearby strip ---------- */
.nearby-strip { background: var(--light-bg); padding: 26px 24px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.nearby-inner { max-width: var(--box-width); margin: 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nearby-label { font-weight: 700; font-size: .95rem; color: var(--primary-dark); display: flex; align-items: center; gap: 6px; margin-right: 6px; }
.nearby-pill { background: var(--white); border: 1px solid var(--border); border-radius: 999px; padding: 8px 18px; font-size: 1rem; font-weight: 600; color: var(--text); transition: background .2s, color .2s; }
.nearby-pill:hover { background: var(--primary); color: var(--white); border-color: var(--primary); }

/* ---------- Partner strip ---------- */
.partner-strip { padding: 32px 24px; background: var(--white); }

/* ---------- Footer ---------- */
.site-footer { background: var(--primary-dark); color: rgba(255,255,255,.85); }
.footer-inner { max-width: var(--max-width); margin: 0 auto; padding: 48px 24px 28px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.footer-brand strong { color: var(--white); font-family: var(--font-heading); font-size: 1.2rem; }
.footer-brand p { color: rgba(255,255,255,.7); font-size: .92rem; max-width: 320px; }
.footer-links h4 { color: var(--white); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
.footer-links ul { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: rgba(255,255,255,.75); font-size: .92rem; }
.footer-links a:hover { color: var(--accent); }
.footer-base { border-top: 1px solid rgba(255,255,255,.15); padding: 18px 24px; text-align: center; font-size: .82rem; color: rgba(255,255,255,.6); }
.footer-base a { color: rgba(255,255,255,.85); }
.footer-issue { margin: 0 0 10px; }

@media (max-width: 980px) {
  .footer-inner { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  html { font-size: 16px; }
  .nav-logo { font-size: 1.3rem; }
  .hero { height: 68vh; }
  .section, .section-alt { padding: 24px 18px; }
  .alt-box, .white-box { padding: 22px 18px; }
  .card-grid { padding: 30px 18px; }
  .booking { padding: 30px 20px; }
}