/* ============================================================
   ADMIN-BUILT CONTENT
   Styles for the markup the admin tools generate: pages built from a Word
   document or a layout, dropped-in sections, blog cards, city chips, and the
   hero's optional bold line. The colours below are this site's, so anything
   created in the admin looks like it was always part of the site.
   Everything is namespaced adm- so it can never collide with the rules above.
   ============================================================ */

:root {
    --adm-accent: #8C2332;
    --adm-accent-dark: #6B1A27;
    --adm-ink: #2D2D2D;
    --adm-body: #3A3A3A;
    --adm-muted: #58595B;
    --adm-line: #E0E0E0;
    --adm-soft: #F7F7F7;
    --adm-dark: #2D2D2D;
    --adm-radius: 6px;
    --adm-head-font: 'Merriweather', Georgia, serif;
}

/* ── Sections ─────────────────────────────────────────────── */
.adm-section { padding: 64px 0; background: #fff; color: var(--adm-body); }
.adm-section--alt { background: var(--adm-soft); }
.adm-section--dark { background: var(--adm-dark); color: #fff; }
.adm-section--dark h2, .adm-section--dark h3, .adm-section--dark h4 { color: #fff; }
.adm-section--dark p { color: rgba(255,255,255,0.82); }
.adm-section--cta { background: linear-gradient(135deg, var(--adm-accent), var(--adm-accent-dark)); color: #fff; }
.adm-section--cta h2, .adm-section--cta p { color: #fff; }
.adm-section > .container { max-width: 1160px; margin: 0 auto; padding: 0 22px; }

.adm-section-head { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.adm-section-head h2 { font-family: var(--adm-head-font); color: var(--adm-ink); font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 12px; line-height: 1.2; }
.adm-section--dark .adm-section-head h2 { color: #fff; }
.adm-section-head p { color: var(--adm-muted); margin: 0; }
.adm-eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--adm-accent); margin-bottom: 10px; }
.adm-section--dark .adm-eyebrow, .adm-section--cta .adm-eyebrow { color: rgba(255,255,255,0.85); }

/* ── Readable prose column ────────────────────────────────── */
.adm-prose { max-width: 820px; margin: 0 auto; line-height: 1.75; }
.adm-prose h2 { font-family: var(--adm-head-font); color: var(--adm-ink); font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 34px 0 14px; line-height: 1.25; }
.adm-prose h2:first-child { margin-top: 0; }
.adm-prose h3 { font-family: var(--adm-head-font); color: var(--adm-ink); font-size: 1.25rem; margin: 26px 0 10px; }
.adm-prose p { margin: 0 0 16px; }
.adm-prose ul, .adm-prose ol { margin: 0 0 18px; padding-left: 22px; }
.adm-prose li { margin-bottom: 8px; }
.adm-prose a { color: var(--adm-accent); }
.adm-prose img { max-width: 100%; height: auto; }
.adm-lead-img { width: 100%; height: auto; border-radius: var(--adm-radius); margin-bottom: 28px; display: block; }

/* ── Buttons ──────────────────────────────────────────────── */
.adm-cta-line { margin-top: 26px; }
.adm-cta-btn {
    display: inline-block; padding: 14px 30px; border-radius: var(--adm-radius);
    background: var(--adm-accent); color: #fff !important; text-decoration: none;
    font-weight: 700; letter-spacing: 0.02em; transition: background 0.2s, transform 0.2s;
}
.adm-cta-btn:hover { background: var(--adm-accent-dark); transform: translateY(-1px); }
.adm-section--cta .adm-cta-btn { background: #fff; color: var(--adm-accent) !important; }
.adm-cta-btn--ghost { background: transparent; border: 2px solid currentColor; color: #fff !important; }
.adm-section--cta .adm-cta-btn--ghost { background: transparent; color: #fff !important; }
.adm-cta { text-align: center; max-width: 760px; margin: 0 auto; }
.adm-cta h2 { font-family: var(--adm-head-font); font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 12px; }
.adm-cta p { margin: 0 0 26px; }
.adm-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── Photo + text split ───────────────────────────────────── */
.adm-split { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
.adm-split-img img { width: 100%; height: auto; border-radius: var(--adm-radius); display: block; }
.adm-split-body h2 { font-family: var(--adm-head-font); color: var(--adm-ink); font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0 0 14px; line-height: 1.25; }
.adm-split-body p { margin: 0 0 14px; line-height: 1.75; }
@media (max-width: 820px) { .adm-split { grid-template-columns: 1fr; gap: 26px; } }

/* ── Card grids ───────────────────────────────────────────── */
.adm-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 26px; }
.adm-card {
    background: #fff; border: 1px solid var(--adm-line); border-top: 3px solid var(--adm-accent);
    border-radius: var(--adm-radius); padding: 28px;
}
.adm-card h4 { font-family: var(--adm-head-font); color: var(--adm-ink); font-size: 1.1rem; margin: 0 0 10px; }
.adm-card p { color: var(--adm-muted); margin: 0; line-height: 1.65; }

.adm-link-card {
    display: block; background: #fff; border: 1px solid var(--adm-line);
    border-radius: var(--adm-radius); overflow: hidden; text-decoration: none; color: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
}
.adm-link-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,0.10); }
.adm-link-card-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--adm-soft); }
.adm-link-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-link-card-body { padding: 22px; }
.adm-link-card-body h3 { font-family: var(--adm-head-font); color: var(--adm-ink); font-size: 1.15rem; margin: 0 0 8px; }
.adm-link-card-body p { color: var(--adm-muted); margin: 0 0 14px; line-height: 1.6; }
.adm-link-more { color: var(--adm-accent); font-weight: 700; font-size: 0.9rem; }

/* ── Numbered steps ───────────────────────────────────────── */
.adm-step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 30px; }
.adm-step { display: flex; gap: 16px; align-items: flex-start; }
.adm-step-num {
    flex: none; width: 46px; height: 46px; border-radius: 50%;
    background: var(--adm-accent); color: #fff; font-weight: 800;
    display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
}
.adm-step-body h4 { font-family: var(--adm-head-font); font-size: 1.05rem; margin: 0 0 6px; }
.adm-step-body p { margin: 0; line-height: 1.6; }

/* ── Blog / article listing cards ─────────────────────────── */
.adm-post-card {
    display: block; background: #fff; border: 1px solid var(--adm-line);
    border-radius: var(--adm-radius); overflow: hidden; text-decoration: none; color: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
}
.adm-post-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,0.10); }
.adm-post-card-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--adm-soft); }
.adm-post-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-post-card-body { padding: 22px; }
.adm-post-card-date { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--adm-accent); margin-bottom: 8px; }
.adm-post-card-body h3 { font-family: var(--adm-head-font); color: var(--adm-ink); font-size: 1.15rem; margin: 0 0 10px; line-height: 1.35; }
.adm-post-card-body p { color: var(--adm-muted); margin: 0 0 14px; line-height: 1.6; }

/* The listing grid itself, so the first published post has somewhere to sit. */
.adm-post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; }
.adm-empty-note { color: var(--adm-muted); text-align: center; padding: 30px 0; margin: 0; }
.adm-post-grid:not(:empty) + .adm-empty-note { display: none; }

/* ── Article page ─────────────────────────────────────────── */
.adm-article-meta { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--adm-accent); margin: 0 0 18px; }
.adm-article-hero { width: 100%; height: auto; border-radius: var(--adm-radius); margin: 0 0 30px; display: block; }

/* ── City chips (home page) + city cards (hub page) ───────── */
.adm-area-tags { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.adm-area-tag {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 20px; border-radius: 40px;
    background: #fff; border: 1px solid var(--adm-line); color: var(--adm-ink);
    text-decoration: none; font-size: 0.92rem; font-weight: 600;
    transition: all 0.2s;
}
.adm-area-tag:hover { border-color: var(--adm-accent); color: var(--adm-accent); transform: translateY(-2px); }
.adm-area-tag--primary { background: var(--adm-accent); border-color: var(--adm-accent); color: #fff; }
.adm-area-tag--primary:hover { background: var(--adm-accent-dark); border-color: var(--adm-accent-dark); color: #fff; }
.adm-area-tag svg { flex: none; }

.adm-city-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px; }
.adm-city-card {
    display: block; background: #fff; border: 1px solid var(--adm-line);
    border-radius: var(--adm-radius); padding: 30px 26px; text-decoration: none; color: inherit;
    text-align: center; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.adm-city-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,0.10); border-color: var(--adm-accent); }
.adm-city-icon { color: var(--adm-accent); margin-bottom: 14px; }
.adm-city-card h4 { font-family: var(--adm-head-font); color: var(--adm-ink); font-size: 1.15rem; margin: 0 0 8px; }
.adm-city-card p { color: var(--adm-muted); margin: 0 0 14px; line-height: 1.6; }

/* ── Hero: the optional bold line ─────────────────────────── */
.adm-hero-banner { font-weight: 800; line-height: 1.15; margin: 0 0 14px; }
.adm-hero-banner--normal { font-size: clamp(1.1rem, 2.2vw, 1.5rem); }
.adm-hero-banner--large  { font-size: clamp(1.4rem, 3.2vw, 2.1rem); }
.adm-hero-banner--xlarge { font-size: clamp(1.7rem, 4.4vw, 2.9rem); }
.adm-hero-banner--white  { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.35); }
.adm-hero-banner--red    { color: #e8243f; text-shadow: 0 2px 10px rgba(0,0,0,0.45); }
.adm-hero-banner--yellow { color: #ffd23f; text-shadow: 0 2px 10px rgba(0,0,0,0.45); }
.adm-hero-banner--dark   { color: #10233a; text-shadow: 0 1px 6px rgba(255,255,255,0.35); }

/* ── Menu dropdowns for admin-managed menus ───────────────── */

/* A menu item with nothing in its dropdown yet. */
.adm-nav-hidden { display: none !important; }

/* The two admin-managed dropdowns use the same markup as the existing ones,
   so they inherit .dropdown-menu; this only covers the mobile menu. */
@media (max-width: 968px) {
    .nav-list > li.adm-nav-hidden { display: none !important; }
}