/* ============================================================
   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: #b91c1c;
    --adm-accent-dark: #991b1b;
    --adm-ink: #111827;
    --adm-body: #374151;
    --adm-muted: #6b7280;
    --adm-line: #e5e7eb;
    --adm-soft: #f9fafb;
    --adm-dark: #111111;
    --adm-radius: 10px;
    --adm-head-font: var(--font-display, 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 mobile menu now mirrors the desktop one, dropdowns included. The
   desktop .dropdown is a hover fly-out (absolute, hidden until hover), which
   would leave every sub-item unreachable on a phone — so inside the mobile
   menu it is laid out inline as an indented sub-list instead. */
.mobile-menu .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; background: transparent; border: none; box-shadow: none;
    padding: 0 0 8px 18px; list-style: none;
}
.mobile-menu .dropdown li a {
    font-size: 16px; font-weight: 500; color: var(--gray-600);
    padding: 11px 0; border-bottom: 1px solid var(--gray-100);
}
.mobile-menu .dropdown li a:hover { color: var(--navy); }