/* ─────────────────────────────────────────────────────────────────────────
   blog.css — shared stylesheet for HireMUA's blog (index + posts).
   Self-contained like index.html (own tokens, not shell.css — shell.css is
   scoped to authenticated app pages per its own header comment). Nav/footer/
   button rules below are copied verbatim from index.html's embedded <style>
   so the blog reads as part of the same site, not a bolted-on afterthought.
   Keep both in sync if the homepage nav/footer/button styles change.
───────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
:root {
  --c-primary:        #8B2252;
  --c-primary-dark:   #6A1A3E;
  --c-on-primary:     #FFFFFF;
  --c-primary-cnt:    #FFD7ED;
  --c-on-primary-cnt: #3C0029;
  --c-surface:        #FFFBFE;
  --c-surface-var:    #EEDDE6;
  --c-on-surface:     #1C1B1E;
  --c-on-surf-var:    #4E3B47;
  --c-outline:        #7F6773;
  --c-outline-var:    #D1BFCA;
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px;
  --r-lg: 16px; --r-xl: 28px; --r-full: 9999px;
  --font:   'Roboto', system-ui, sans-serif;
  --font-d: 'Playfair Display', Georgia, serif;
  --shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.1);
  --shadow-2: 0 2px 8px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
}
body { font-family: var(--font); color: var(--c-on-surface); background: var(--c-surface); font-size: 16px; line-height: 1.6; }

.icon { font-size: 20px; line-height: 1; display: inline-block; vertical-align: middle; }
.icon-svg { width: 1em; height: 1em; display: inline-block; vertical-align: middle; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 24px; border-radius: var(--r-full); border: none; cursor: pointer;
  font-family: var(--font); font-size: 14px; font-weight: 500; letter-spacing: .015em;
  text-decoration: none; transition: background .15s, box-shadow .15s, opacity .15s;
  white-space: nowrap; min-height: 40px;
}
.btn-filled  { background: var(--c-primary); color: var(--c-on-primary); }
.btn-filled:hover  { background: var(--c-primary-dark); box-shadow: var(--shadow-1); }
.btn-tonal   { background: var(--c-primary-cnt); color: var(--c-on-primary-cnt); }
.btn-tonal:hover   { box-shadow: var(--shadow-1); opacity: .92; }
.btn-lg { padding: 14px 32px; font-size: 15px; min-height: 48px; }

/* ── Nav (copied from index.html) ── */
.nav {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,251,254,.92); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-outline-var);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 32px; }
.nav-logo { font-family: var(--font-d); font-size: 22px; font-weight: 600; color: var(--c-primary); text-decoration: none; flex-shrink: 0; }
.nav-links { display: flex; gap: 4px; }
.nav-links a { font-size: 14px; font-weight: 400; color: var(--c-on-surf-var); text-decoration: none; padding: 8px 12px; border-radius: var(--r-full); transition: background .15s, color .15s; }
.nav-links a:hover { background: var(--c-surface-var); color: var(--c-on-surface); }
.nav-links a.active { color: var(--c-primary); font-weight: 500; }
.nav-ctas { display: flex; gap: 8px; flex-shrink: 0; }
.nav-burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; border-radius: var(--r-sm); color: var(--c-on-surface); flex-shrink: 0; }

.mobile-nav { display: none; position: fixed; inset: 0; z-index: 300; }
.mobile-nav.open { display: block; }
.mobile-nav-backdrop { position: absolute; inset: 0; background: rgba(28,27,30,.5); backdrop-filter: blur(2px); }
.mobile-nav-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 85vw); background: var(--c-surface); display: flex; flex-direction: column; box-shadow: -8px 0 32px rgba(0,0,0,.15); transform: translateX(100%); transition: transform .25s cubic-bezier(.2,0,0,1); }
.mobile-nav.open .mobile-nav-drawer { transform: none; }
.mobile-nav-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--c-outline-var); }
.mobile-nav-header .nav-logo { font-size: 20px; }
.mobile-nav-close { background: none; border: none; cursor: pointer; padding: 6px; border-radius: var(--r-sm); color: var(--c-on-surface); }
.mobile-nav-links { padding: 12px 8px; flex: 1; }
.mobile-nav-links a { display: block; padding: 12px 16px; font-size: 15px; color: var(--c-on-surface); text-decoration: none; border-radius: var(--r-md); transition: background .12s; }
.mobile-nav-links a:hover { background: var(--c-surface-var); }
.mobile-nav-footer { padding: 16px 20px; border-top: 1px solid var(--c-outline-var); display: flex; flex-direction: column; gap: 8px; }

/* ── Footer (copied from index.html) ── */
.footer { background: var(--c-on-primary-cnt, #3C0029); padding: 56px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-brand h2 { font-family: var(--font-d); font-size: 24px; color: #fff; margin-bottom: 8px; }
.footer-brand p  { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.7; }
.footer-col h4   { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 14px; }
.footer-col ul   { list-style: none; }
.footer-col li   { margin-bottom: 8px; }
.footer-col a    { font-size: 13px; color: rgba(255,255,255,.7); text-decoration: none; transition: color .15s; }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12.5px; color: rgba(255,255,255,.45); }

@media (max-width: 900px) {
  .nav-links, .nav-ctas { display: none; }
  .nav-burger { display: block; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; gap: 6px; }
}

/* ── Blog: index/hero ── */
.blog-hero { padding: 64px 0 48px; background: linear-gradient(160deg, #FFF5FA 0%, var(--c-surface) 60%); text-align: center; }
.blog-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--c-primary); margin-bottom: 10px; }
.blog-title { font-family: var(--font-d); font-size: clamp(30px, 5vw, 44px); font-weight: 600; margin-bottom: 12px; }
.blog-sub { font-size: 17px; font-weight: 300; color: var(--c-on-surf-var); max-width: 560px; margin: 0 auto; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 56px 0 96px; }
.post-card { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-outline-var); border-radius: var(--r-xl); padding: 28px; text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.post-card .cat { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-primary); margin-bottom: 10px; }
.post-card h3 { font-family: var(--font-d); font-size: 20px; font-weight: 600; line-height: 1.3; margin-bottom: 10px; }
.post-card p { font-size: 14px; color: var(--c-on-surf-var); line-height: 1.6; flex: 1; }
.post-card .meta { font-size: 12px; color: var(--c-outline); margin-top: 16px; }
@media (max-width: 900px) { .post-grid { grid-template-columns: 1fr; } }

/* ── Blog: post page ── */
.post-header { padding: 48px 0 40px; border-bottom: 1px solid var(--c-outline-var); }
.post-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--c-on-surf-var); text-decoration: none; margin-bottom: 24px; }
.post-back:hover { color: var(--c-primary); }
.post-cat { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-primary); margin-bottom: 14px; }
.post-title { font-family: var(--font-d); font-size: clamp(30px, 4.5vw, 46px); font-weight: 600; line-height: 1.15; margin-bottom: 16px; max-width: 820px; }
.post-dek { font-size: 18px; font-weight: 300; color: var(--c-on-surf-var); max-width: 680px; margin-bottom: 20px; }
.post-meta { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--c-outline); }

.post-body { max-width: 680px; margin: 0 auto; padding: 48px 24px 32px; }
.post-body h2 { font-family: var(--font-d); font-size: 26px; font-weight: 600; margin: 44px 0 16px; }
.post-body h3 { font-size: 18px; font-weight: 600; margin: 32px 0 12px; }
.post-body p { font-size: 16.5px; line-height: 1.75; color: var(--c-on-surface); margin-bottom: 18px; }
.post-body ul, .post-body ol { padding-left: 22px; margin-bottom: 18px; }
.post-body li { font-size: 16.5px; line-height: 1.75; margin-bottom: 8px; }
.post-body strong { font-weight: 600; }
.post-body p a, .post-body li a { color: var(--c-primary); text-decoration: underline; text-decoration-color: var(--c-outline-var); text-underline-offset: 2px; }

.post-callout { background: var(--c-surface-var); border-radius: var(--r-lg); padding: 24px 28px; margin: 28px 0; }
.post-callout h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--c-primary); margin-bottom: 12px; }
.post-callout p:last-child { margin-bottom: 0; }

.post-cta { max-width: 680px; margin: 40px auto 0; background: var(--c-on-primary-cnt, #3C0029); border-radius: var(--r-xl); padding: 32px 36px; text-align: center; }
.post-cta h3 { font-family: var(--font-d); font-size: 22px; color: #fff; margin-bottom: 10px; }
.post-cta p { font-size: 14.5px; color: rgba(255,255,255,.8); line-height: 1.6; margin-bottom: 22px; }

.related { max-width: 900px; margin: 0 auto; padding: 48px 24px 80px; }
.related h4 { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-on-surf-var); margin-bottom: 18px; }
.related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.related-card { display: block; padding: 18px 20px; border: 1px solid var(--c-outline-var); border-radius: var(--r-lg); text-decoration: none; color: inherit; font-size: 14.5px; font-weight: 500; transition: background .15s; }
.related-card:hover { background: var(--c-surface-var); }
@media (max-width: 640px) { .related-grid { grid-template-columns: 1fr; } }

/* ── Guide entries ─────────────────────────────────────────────────────
   Compact rows, chosen over cards after rendering both at 386px: a card
   pushes its facts row onto two lines and fills the screen, so only one
   entry is visible at a time. Mockup: mockups/2026-09-10-guide-entry-layouts.html

   Left column holds every platform the business is actually on, one icon
   each, plus share. Right column is text only. Links live in one predictable
   place instead of the primary sitting at the top and a second buried
   mid-sentence. An icon renders only when that link exists. */
.entries { list-style: none; margin: 20px 0 8px; padding: 0; }
.entry { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid #F1E6ED; }
.entry:last-child { border-bottom: 0; }

.entry-icons { display: flex; flex-direction: column; gap: 6px; flex: none; margin-top: 2px; }
.entry-icons a, .entry-icons button {
  width: 32px; height: 32px; border-radius: 9px; border: 0; padding: 0; cursor: pointer;
  background: var(--c-primary-cnt); display: flex; align-items: center; justify-content: center; }
.entry-icons a:hover, .entry-icons button:hover { background: #FFC9E5; }
.entry-icons svg { width: 16px; height: 16px; fill: none; stroke: var(--c-primary);
                   stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.entry-icons button[data-done="1"] { background: #D9F2E3; }
.entry-icons button[data-done="1"] svg { stroke: #1B6E35; }

.entry-body { min-width: 0; }
.entry-name { font-size: 16px; font-weight: 600; color: var(--c-on-surface); line-height: 1.35; }
.entry-where { font-size: 13px; font-weight: 400; color: var(--c-outline); }
.entry-handle { font-size: 13px; color: var(--c-outline); margin-top: 1px; word-break: break-word; }
.entry-body p { font-size: 14.5px; line-height: 1.65; color: var(--c-on-surf-var); margin: 6px 0 0; }

/* ── Share ─────────────────────────────────────────────────────────────
   navigator.share on a phone opens the native sheet, which is how this
   audience passes a link around (WhatsApp, iMessage). Anything without it
   copies the URL. No third-party widget: those are tracking scripts and this
   site tells readers it does not host their data. */
.share-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
             margin: 28px 0 4px; padding-top: 20px; border-top: 1px solid #F1E6ED; }
.share-label { font-size: 14px; color: var(--c-on-surf-var); }
.share-btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font);
             font-size: 13.5px; font-weight: 600; color: var(--c-primary); background: var(--c-primary-cnt);
             border: 0; border-radius: 999px; padding: 9px 16px; cursor: pointer; }
.share-btn:hover { background: #FFC9E5; }
.share-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.share-btn[data-done="1"] { background: #D9F2E3; color: #1B6E35; }

/* An entry reached by a shared deep link. scroll-margin clears the 64px sticky
   nav, which would otherwise hide the name the link was pointing at. The tint
   fades so the page does not stay visibly "highlighted" while being read. */
.entry { scroll-margin-top: 80px; }
.entry:target { animation: entry-flash 2.8s ease-out 1; border-radius: 12px; }
@keyframes entry-flash {
  0%, 45% { background: #FFE8F4; box-shadow: 0 0 0 8px #FFE8F4; }
  100%    { background: transparent; box-shadow: 0 0 0 8px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .entry:target { animation: none; background: #FFE8F4; box-shadow: 0 0 0 8px #FFE8F4; }
}