/* ==========================================================================
   UX polish: easier navigation on the public site and the Admin/Secretary
   dashboards. Loaded after style.css; safe to remove (nothing depends on it).
   ========================================================================== */

/* ---------- Skip link (keyboard / screen-reader users) ---------- */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 3000; background: var(--primary, #0b5fff); color: #fff !important; padding: 10px 16px; border-radius: 8px; font-weight: 600; transition: top .15s ease; }
.skip-link:focus { top: 12px; text-decoration: none; }

/* ---------- Public header: current page + "Get a Quote" button ---------- */
.main-nav > a[aria-current="page"],
.nav-dropdown-heading > a[aria-current="page"] { color: var(--primary, #0b5fff); font-weight: 700; box-shadow: inset 0 -3px 0 var(--primary, #0b5fff); }
.nav-dropdown-menu a[aria-current="page"] { background: var(--primary-light, #eaf1ff); color: var(--primary-dark, #0842b0); font-weight: 600; }
.nav-dropdown.has-current > .nav-dropdown-heading > a { color: var(--primary, #0b5fff); font-weight: 700; }

.main-nav a.nav-action-primary { padding: 9px 18px; border-radius: 999px; font-weight: 700; box-shadow: none; }
.main-nav a.nav-action-primary:hover { background: var(--primary-dark, #0842b0); color: #fff !important; }
.main-nav a.nav-action-primary[aria-current="page"] { box-shadow: none; }

/* Dropdown stays open a moment longer when the pointer drifts (no flicker) */
.nav-dropdown-menu { margin-top: 0; }
.nav-dropdown-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }

@media (max-width: 720px) {
  .main-nav > a[aria-current="page"],
  .nav-dropdown-heading > a[aria-current="page"] { box-shadow: none; background: var(--primary-light, #eaf1ff); color: var(--primary-dark, #0842b0); }
  .main-nav a.nav-action-primary { text-align: center; padding: 13px 18px; border-radius: 10px; margin-top: 8px; }
}

/* ---------- Back-to-top button ---------- */
.to-top { position: fixed; right: 16px; bottom: 84px; z-index: 900; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--primary, #0b5fff); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; box-shadow: 0 6px 16px rgba(12,42,94,.25); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--primary-dark, #0842b0); }
@media (prefers-reduced-motion: reduce) { .to-top, .skip-link { transition: none; } }

/* ---------- Dashboard sidebar: "Find a page" search ---------- */
.dash-find { padding: 0 16px 12px; position: sticky; top: 0; z-index: 2; background: var(--dark, #14213d); }
.dash-find input { width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: .88rem; }
.dash-find input::placeholder { color: #aebbd6; }
.dash-find input:focus { outline: none; border-color: #7fb0ff; background: rgba(255,255,255,.14); }
.dash-find-empty { display: none; padding: 10px 20px; font-size: .85rem; color: #aebbd6; }
.dash-sidebar.is-filtering .dash-find-empty.is-shown { display: block; }
.dash-sidebar.is-filtering .nav-group-tools { display: none; }
.dash-sidebar [hidden] { display: none !important; }
.dash-sidebar a.active { box-shadow: inset 3px 0 0 #7fb0ff; font-weight: 600; }

/* ---------- Dashboard tables: easier to scan ---------- */
.dash-main table.data-table tbody tr:hover { background: var(--primary-light, #eaf1ff); }

.dash-main :target { scroll-margin-top: 80px; }

/* Larger tap targets on touch screens */
@media (pointer: coarse) {
  .dash-sidebar .nav-group-links a, .dash-sidebar a { min-height: 44px; display: flex; align-items: center; }
  .dash-find input { min-height: 44px; }
}
#main-content:focus { outline: none; }

/* ==========================================================================
   LAYOUT & ALIGNMENT (v2)
   One clean page background, consistent widths and spacing, aligned cards.
   ========================================================================== */

/* ---------- Clean page background: no photo behind the content ---------- */
body.public-site-page { background-color: #f4f7fc; background-image: none; background-attachment: scroll; }
.svc-page::before { background: none !important; }
.page-content { padding-top: clamp(20px, 2.5vw, 32px); padding-bottom: clamp(32px, 4vw, 56px); }

/* ---------- Home: hero, hiring banner, quick links, stats line up ---------- */
/* The trust badge was sitting underneath the blue overlay (looked faded) */
.hero-home .hero-trust-badge { position: relative; z-index: 2; background: #fff; border: 1px solid rgba(11,95,255,.12); }
.hero-home .trust-text { font-size: .8rem; }
.hero-home .trust-number { line-height: 1; }
.hero-home .hero-actions .btn { min-width: 190px; text-align: center; justify-content: center; }
@media (max-width: 480px) { .hero-home .hero-actions .btn { width: 100%; max-width: 320px; } }

/* Same left/right edges as the hero, the quick links and the stats card */
main .home-hiring-banner { width: 100%; max-width: none; box-sizing: border-box; margin: 20px 0 0; }
.service-strip { margin: 20px 0 32px; }
.service-chip { justify-content: flex-start; min-height: 108px; }
.stats-section { margin: 32px 0 48px; padding: 40px 28px; }
.stat-card { display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .stat-number { font-size: 2rem; }
  .stat-label { font-size: .85rem; }
}
.author-avatar { background: linear-gradient(135deg, #0b5fff, #0842b0) !important; } /* was purple; matches brand */

/* ---------- Inner-page banners: balanced padding ---------- */
.hero:not(.hero-home) { padding: 44px 24px; }
.hero:not(.hero-home) h1 { text-align: center; }
@media (max-width: 640px) { .hero:not(.hero-home) { padding: 30px 18px; } }

/* ---------- Services directory: every card lines up ---------- */
.service-directory h1 { margin: 0 0 20px; }
.service-directory .card-grid { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 20px; margin-top: 0; }
.service-directory .service-card h3 { line-height: 1.3; min-height: 2.6em; margin: 18px 0 8px; }
.service-directory .service-card p { flex: 1 1 auto; margin-bottom: 14px; }
.service-directory .service-card .card-link { display: block; margin-top: 8px; }
.service-directory .service-card-actions { min-height: 0; padding-top: 0; }

/* ---------- Forms: tidy labels and spacing ---------- */
form.stacked-form label { display: block; margin-bottom: 6px; font-weight: 600; }
form.stacked-form input:not([type=checkbox]):not([type=radio]):not([type=file]), form.stacked-form select, form.stacked-form textarea { max-width: 100%; box-sizing: border-box; }
form.stacked-form .form-row, form.stacked-form .form-grid-2 { gap: 14px 18px; }

/* ---------- Sign-in pages (client, admin, secretary): brand blue, not purple ---------- */
.client-auth-page { background: linear-gradient(135deg, #0b5fff 0%, #0842b0 58%, #0c2a5e 100%); }
.client-auth-card { box-shadow: 0 24px 65px rgba(8, 30, 90, .28); }
.client-auth-submit { background: linear-gradient(100deg, #0b5fff, #0842b0); box-shadow: 0 9px 20px rgba(11, 95, 255, .28); }
.client-auth-submit:hover { box-shadow: 0 12px 24px rgba(11, 95, 255, .36); }

/* ---------- Dashboards: aligned content width and headings ---------- */
.dash-main { max-width: 1500px; }
.dash-topbar { gap: 12px 20px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--border, #d7e3fb); }
.dash-topbar h1 { line-height: 1.25; }
.dash-main h2 { margin: 28px 0 12px; font-size: 1.2rem; }
.dash-main table.data-table { table-layout: auto; width: 100%; }
.dash-main table.data-table th, .dash-main table.data-table td { padding: 11px 12px; vertical-align: middle; text-align: left; overflow-wrap: break-word; }
.dash-main table.data-table td.num, .dash-main table.data-table th.num { text-align: right; }
.dash-main .card, .dash-main .panel { margin-bottom: 20px; }
@media (max-width: 900px) { .dash-main { padding: 16px 14px; } .dash-topbar { align-items: flex-start; } }

/* Small alignment touches */
.hero-home .trust-text { text-align: left; }
.hero-home .trust-text br { display: none; }
.hero-home .trust-text span { display: block; opacity: .8; }
.hero h1, .section-heading h2, .cta-banner h2 { text-wrap: balance; }

/* ==========================================================================
   LOGGED-IN SCREENS (v3): client dashboard and staff pages
   ========================================================================== */
/* A form inside a card should not be a second card, centred, inside the first */
.detail-box form.stacked-form { max-width: 720px; margin: 12px 0 0; padding: 0; border: 0; box-shadow: none; background: transparent; }
.detail-box > :first-child { margin-top: 0; }
.detail-box h2 { margin: 0 0 10px; font-size: 1.2rem; }
.detail-box > p:last-child { margin-bottom: 0; }

/* Staff/marketer pages: boxes capped at ~600px left a big empty gap on the right */
.dash-main .detail-box[style*="max-width"] { max-width: 920px !important; }

/* Client dashboard: quick links to each section */
.page-jump { position: sticky; top: 62px; z-index: 40; display: flex; gap: 8px; overflow-x: auto; padding: 10px 0; margin: 0 0 12px; background: #f4f7fc; scrollbar-width: none; }
.page-jump::-webkit-scrollbar { display: none; }
.page-jump a { flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border, #d7e3fb); background: #fff; color: var(--primary-dark, #0842b0); font-size: .88rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.page-jump a:hover, .page-jump a:focus-visible { border-color: var(--primary, #0b5fff); background: var(--primary-light, #eaf1ff); }
.detail-box[id] { scroll-margin-top: 130px; }

/* ==========================================================================
   ALL LOGGED-IN PAGES (v4)
   ========================================================================== */
/* Wide tables inside the two-column detail layout pushed the page sideways on phones */
.detail-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 800px) { .detail-grid { grid-template-columns: minmax(0, 1fr); } }
.detail-grid > *, .detail-box { min-width: 0; }
@media (max-width: 800px) {
  .detail-box table.data-table, .dash-main table.data-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Search + filter bars: the search box takes the free space instead of being squeezed */
.dash-main .toolbar input[type="search"], .dash-main .toolbar input[type="text"], .dash-main .toolbar input:not([type]) { flex: 1 1 260px; min-width: 200px; }
.dash-main .toolbar { margin-bottom: 14px; }

/* Number cards: tidy rows instead of "5 + 1 left over" */
@media (min-width: 760px) {
  .kpi-grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi-grid:has(> :nth-child(4):last-child), .kpi-grid:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Forms in dashboards: even spacing between label and field */
.dash-main .stacked-form label, .dash-main .detail-box form > label { display: block; margin: 14px 0 6px; font-weight: 600; }
.dash-main .stacked-form > label:first-child, .dash-main .detail-box form > label:first-child { margin-top: 0; }
.dash-main .stacked-form label:has(> input[type="checkbox"]), .dash-main .stacked-form label:has(> input[type="radio"]) { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.dash-main .stacked-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .dash-main .stacked-form select, .dash-main .stacked-form textarea { width: 100%; box-sizing: border-box; }

/* Top bar: never let "Signed in as…" be cut off */
.dash-topbar > * { min-width: 0; }
.dash-topbar .signed-in, .dash-topbar span { white-space: normal; }

/* Phones: number cards two per row instead of a long single column */
@media (max-width: 600px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; } .kpi-card { padding: 12px 14px; } }

/* ==========================================================================
   ACTION-FIRST LAYOUT (v7)
   List pages used a 2fr/1fr split that squeezed the table and pushed the
   "create" card to the side. With .actions-top the create/publish card sits
   full-width ABOVE the list, and the list gets the full page width.
   Forms open one at a time (modal), so only one action form shows per screen.
   ========================================================================== */
.detail-grid.actions-top { grid-template-columns: minmax(0, 1fr); gap: 0; }
.detail-grid.actions-top > :last-child { order: -1; }
.detail-grid.actions-top > :last-child > .detail-box,
.detail-grid.actions-top > .detail-box:last-child { margin-bottom: 18px; }

/* Compact action bar: text on the left, button on the right */
.detail-grid.actions-top > :last-child > .detail-box:not(:has(form)) {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: center;
}
.detail-grid.actions-top > :last-child > .detail-box:not(:has(form)) > h3,
.detail-grid.actions-top > :last-child > .detail-box:not(:has(form)) > p { grid-column: 1; margin: 0 0 4px; }
.detail-grid.actions-top > :last-child > .detail-box:not(:has(form)) > .btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; white-space: nowrap; }
@media (max-width: 640px) {
  .detail-grid.actions-top > :last-child > .detail-box:not(:has(form)) { grid-template-columns: minmax(0, 1fr); }
  .detail-grid.actions-top > :last-child > .detail-box:not(:has(form)) > .btn { grid-column: 1; grid-row: auto; margin-top: 10px; justify-self: start; }
}
/* Several action buttons (e.g. Projects): sit side by side */
.detail-grid.actions-top > :last-child:has(> .detail-box + .detail-box) { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.detail-grid.actions-top > :last-child:has(> .detail-box + .detail-box) > .detail-box { margin: 0 !important; padding: 12px 16px; }
.detail-grid.actions-top > :last-child:has(> .detail-box + .detail-box) { flex-direction: column; flex-wrap: nowrap; }
.detail-grid.actions-top > :last-child:has(> .detail-box + .detail-box):not(:has(form)) { flex-direction: row; flex-wrap: wrap; }

/* Inline (non-modal) forms placed on top: two columns instead of one long column */
.detail-grid.actions-top > .detail-box:last-child form.stacked-form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; max-width: none;
}
.detail-grid.actions-top > .detail-box:last-child form.stacked-form > .form-grid-2,
.detail-grid.actions-top > .detail-box:last-child form.stacked-form > .form-row:has(textarea),
.detail-grid.actions-top > .detail-box:last-child form.stacked-form > p,
.detail-grid.actions-top > .detail-box:last-child form.stacked-form > button,
.detail-grid.actions-top > .detail-box:last-child form.stacked-form > a { grid-column: 1 / -1; justify-self: start; }
.detail-grid.actions-top > .detail-box:last-child form.stacked-form > .form-grid-2 { justify-self: stretch; }
@media (max-width: 800px) { .detail-grid.actions-top > .detail-box:last-child form.stacked-form { grid-template-columns: minmax(0, 1fr); } }