@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; flex-wrap: wrap; }
.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: 110%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  padding: 8px;
  display: none;
  text-align: center;
  z-index: 50;
}
.nav-links > li:hover .nav-dropdown { display: block; }
.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); }

@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-toggle-mobile { display: block; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 10px;
    box-shadow: var(--shadow-md);
  }
  .nav-dropdown { position: static; transform: none; box-shadow: none; border: none; display: block; padding-left: 16px; }
}

/* ---------- 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); }

@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; }
}