/* shared.css — Universal styles for all pages on rausarusso.com
   Font declarations, reset, layout, language toggle, skip link,
   accessibility, and print base rules. */

/* ── Fonts ── */
@font-face{font-family:'Playfair Display';src:url('/fonts/playfair-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('/fonts/playfair-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('/fonts/playfair-700i.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'Outfit';src:url('/fonts/outfit-latin.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'DM Mono';src:url('/fonts/dm-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Outfit',system-ui,sans-serif;color:#1d2a40;background:#fafaf8;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:#1d2a40;text-decoration:none}
a:hover{color:#9e7b1e}
/* WCAG 1.4.1 (Use of Color): in-text links (newsletter sub-notes + footer disclaimer prose) are distinguished by an underline, not color alone. Standalone footer utility-nav links are not in a text block, so they are intentionally left un-underlined to preserve the footer design. */
.blog-sub-note a,.pa-sub-note a,.gl-sub-note a,.nl-sub-note a,.sub-note a,footer p a,a[style*="--gold-h"]{text-decoration:underline}
/* bare (class-less) links inside article body prose + capital quarterly callouts and team bylines — underline; leaves buttons/.inline-link/cards untouched */
.blog-body a:not([class]),.pa-body a:not([class]),.gl-body a:not([class]),.cap-q-takeaway a:not([class]),.bio-meta a:not([class]){text-decoration:underline}
img{display:block;max-width:100%}

/* ── Layout ── */
.wrap{max-width:800px;margin:0 auto;padding:0 24px}

/* ── Skip link ── */
.skip-link{position:absolute;top:-100px;left:16px;z-index:99999;background:#9e7b1e;color:#000;padding:8px 16px;font-family:'DM Mono',monospace;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;border-radius:4px;transition:top .15s}
.skip-link:focus{top:16px}

/* ── Language toggle ── */
.lang-toggle{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding-left:12px;border-left:1px solid rgba(255,255,255,0.15)}
.lang-btn{background:none;border:1px solid transparent;border-radius:3px;padding:2px;cursor:pointer;opacity:.5;transition:opacity .2s,border-color .2s;display:flex;align-items:center;min-height:auto;min-width:auto}
.lang-btn:hover,.lang-btn--active{opacity:1;border-color:rgba(255,255,255,.55)}
/* Unavailable-language state: gray-out (not hide). Shown where this page's
   body is not fully translated in that language, so the bilingual-service
   signal stays visible but the control is honestly disabled. aria-disabled
   keeps it focusable/announced to screen readers; site.js blocks the click;
   the title attribute explains why in the target language. */
.lang-btn[aria-disabled="true"]{opacity:.3;cursor:not-allowed;filter:grayscale(1)}
.lang-btn[aria-disabled="true"]:hover{opacity:.3;border-color:transparent}
@media (forced-colors: active){.lang-btn[aria-disabled="true"]{filter:none}}

/* ── Footer logo ── */
.footer-logo-img:hover{opacity:1!important}

/* ── Site nav mobile (applies to .site-nav pages: blog, guides, newsletters) ── */
@media(max-width:600px){
  .site-nav .nav-inner{padding:10px 16px 8px;flex-wrap:wrap;gap:6px}
  .site-nav .nav-logo img{max-height:22px;width:auto;height:auto;flex-shrink:0}
  .site-nav .nav-links{display:none}
  .site-nav .nav-right{margin-left:auto}
  .site-nav .btn-nav-cta{font-size:.55rem;padding:10px 14px;min-height:44px}
  .wrap{padding:0 16px}
}

/* ── Focus indicators ── */
:focus-visible{outline:3px solid #9e7b1e;outline-offset:2px;border-radius:4px}

/* ── Accessibility ── */
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Visible breadcrumb trail (matches BreadcrumbList JSON-LD) */
.breadcrumb{font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.04em;background:transparent}
.breadcrumb .wrap{padding-top:14px;padding-bottom:0}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.breadcrumb li{display:flex;align-items:center;color:#6b7280}
.breadcrumb li+li::before{content:"/";margin-right:6px;color:#9ca3af}
.breadcrumb a{color:#6b7280;text-decoration:none}
.breadcrumb a:hover{color:#9e7b1e;text-decoration:underline}
.breadcrumb li[aria-current="page"]{color:#1d2a40;font-weight:500}