/* Spreadsheet-Tutorials.com usability cleanup — 2026-10-11.
   Designed for the supplied Hugo source; avoids rewriting the function library. */
:root {
  --bg: #f8fafc;
  --text: #203248;
  --muted: #51677c;
  --border: #d8e3eb;
  --hover: #ecf7f7;
  --card-bg: #fff;
  --code-bg: #142b3d;
  --code-text: #eff8ff;
  --accent-soft: #e6f5f5;
  --readability-accent: #087981;
}
.dark {
  --bg: #101a2a;
  --text: #e8f2fb;
  --muted: #b7c9d8;
  --border: #34495d;
  --hover: #1d394b;
  --card-bg: #172637;
  --code-bg: #0d1828;
  --code-text: #f1f8fd;
  --accent-soft: #183a48;
  --readability-accent: #79e5d7;
}
html { scroll-padding-top: 1.2rem; }
body { background: var(--bg); color: var(--text); line-height: 1.65; }
.dark body { background: var(--bg); color: var(--text); }
main { min-width: 0; }
main :where(h1,h2,h3,h4) { text-wrap: balance; }
main :where(p,li) { overflow-wrap: break-word; }
.site-header-v2 :focus-visible, .home-hero-v2 :focus-visible,
.home-tool-card:focus-visible { outline: 3px solid #00c5bd; outline-offset: 3px; }

/* Clear, keyboard-friendly header that doesn't hide every tool under Browse. */
.site-header-v2.hh-header { background: var(--card-bg); border-bottom: 1px solid var(--border); padding: 0; position: relative; z-index: 30; }
.site-header-v2 .site-header-top {
  max-width: 1160px; width: 100%; display: grid;
  grid-template-columns: minmax(180px, 238px) minmax(180px, 1fr) auto;
  align-items: center; gap: clamp(.8rem, 2vw, 1.6rem);
  padding: .8rem 1.25rem;
}
.site-header-v2 .site-logo { width: 100%; max-width: 238px; min-width: 0; }
.site-header-v2 .site-logo img { height: auto !important; max-height: 50px; width: 100%; object-fit: contain; }
.site-header-v2 .site-header-search { display: flex; max-width: 520px; width: 100%; gap: .4rem; align-items: center; justify-self: center; }
.site-header-v2 .site-header-search input { min-width: 0; flex: 1; width: 100%; border-radius: 10px; border: 1px solid var(--border); padding: .67rem .85rem; color: var(--text); background: var(--card-bg); }
.site-header-v2 .site-search-button { padding: .69rem 1.05rem; background: #087981; color: #fff; }
.site-header-v2 .hh-actions { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; min-width: 0; }
.site-header-v2 .site-header-contact { color: var(--text); font-weight: 700; font-size: .93rem; white-space: nowrap; }
.site-header-v2 .hh-dark-toggle { flex-shrink: 0; border: 0; background: transparent; padding: 0; }
.site-header-v2 .hh-toggle-icon { display: inline-flex; justify-content: center; align-items: center; width: 43px; height: 41px; padding: .35rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); color: var(--text); }
.site-nav-shell { background: var(--bg); border-top: 1px solid var(--border); }
.site-nav-inner { max-width: 1160px; min-height: 47px; margin: 0 auto; padding: .1rem 1.25rem; display: flex; justify-content: space-between; align-items: center; gap: .65rem; }
.site-nav-links { display: flex; align-items: center; gap: .08rem; flex-wrap: wrap; min-width: 0; }
.site-nav-links a { font-size: .875rem; font-weight: 680; line-height: 1.4; text-decoration: none; color: var(--text); padding: .55rem .65rem; border-radius: 8px; white-space: nowrap; }
.site-nav-links a:hover, .site-nav-links a:focus-visible { color: var(--readability-accent); background: var(--hover); text-decoration: none; }
.site-header-v2 .hh-dropdown { margin-left: auto; }
.site-header-v2 .hh-dropdown summary { border: 1px solid var(--border); border-radius: 8px; font-size: .85rem; line-height: 1.4; font-weight: 750; padding: .48rem .75rem; white-space: nowrap; color: var(--text); background: var(--card-bg); cursor: pointer; }
.site-header-v2 .hh-dropdown[open] summary, .site-header-v2 .hh-dropdown summary:hover { border-color: #2a959e; }
.site-header-v2 .hh-dropdown-menu { min-width: 265px; max-width: min(94vw, 365px); max-height: min(70vh, 520px); overflow-y: auto; padding: .45rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 11px; box-shadow: 0 12px 26px #061c2b24; }
.site-header-v2 .hh-dropdown-menu a { color: var(--text); border-radius: 6px; padding: .57rem .75rem; font-size: .9rem; line-height: 1.4; }
.site-header-v2 .hh-dropdown-menu a:hover { background: var(--hover); color: var(--readability-accent); text-decoration: none; }
.site-mobile-menu { display: none; }
.site-header-v2 summary:focus-visible { outline: 3px solid #00b8b8; outline-offset: 2px; }

/* Home: a focused task-first layout with readable, equal-height cards. */
.home-hero-v2 { padding-top: clamp(2.5rem, 5vw, 4.3rem); padding-bottom: clamp(2.75rem, 5vw, 4rem); }
.home-hero-v2 .home-hero-inner { max-width: 1160px; }
.home-hero-v2 h1 { max-width: 840px; font-size: clamp(2.05rem, 4.7vw, 3.3rem); line-height: 1.13; letter-spacing: -.035em; color: #fff; font-weight: 850; margin: .6rem 0 1.05rem; }
.home-hero-v2 .home-hero-description { max-width: 750px; font-size: clamp(1.04rem, 1.6vw, 1.2rem); color: #f4ffff; line-height: 1.65; }
.home-hero-v2 .home-search { max-width: 690px; margin-top: 1.65rem; }
.home-hero-v2 .home-search input { color: #1c2d40; min-height: 50px; background: #fff; }
.home-hero-v2 .home-search button { min-height: 50px; padding: .7rem 1.25rem; background: #fff; color: #075966; }
.home-hero-links { display: flex; flex-wrap: wrap; gap: .55rem 1.45rem; margin-top: 1.5rem; }
.home-hero-links a { color: #efffff; font-size: .94rem; font-weight: 720; text-decoration: underline; text-underline-offset: 4px; }
.home-hero-links a:hover { color: white; }
.home-section { padding-top: clamp(1.6rem, 3vw, 2.5rem); padding-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.home-section > .section-title-row { margin-bottom: .65rem; align-items: baseline; }
.home-section .site-heading { font-size: clamp(1.4rem, 2.5vw, 1.95rem); line-height: 1.25; color: var(--text); }
.home-section-intro { max-width: 760px; margin: 0 0 1.25rem; color: var(--muted); font-size: 1.02rem; line-height: 1.65; }
.home-tools-section { margin-top: .6rem; }
.home-tools-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.home-tool-card { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; min-height: 220px; padding: 1.35rem; border: 1px solid var(--border); border-radius: 15px; background: var(--card-bg); box-shadow: 0 3px 15px #0c2e420d; text-decoration: none; color: var(--text); }
.home-tool-card:hover, .home-tool-card:focus-visible { border-color: #168993; box-shadow: 0 8px 21px #0c2e4219; text-decoration: none; }
.home-tool-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 39px; border-radius: 9px; background: #e5f5f3; color: #075c67; font-size: .92rem; letter-spacing: -.02em; font-weight: 850; }
.home-tool-card strong { display: block; color: var(--text); font-size: 1.13rem; line-height: 1.35; }
.home-tool-card > span:not(.home-tool-icon):not(.home-tool-link) { color: var(--muted); line-height: 1.55; font-size: .94rem; }
.home-tool-link { display: block; margin-top: auto; color: var(--readability-accent); font-size: .9rem; font-weight: 750; }
.dark .home-tool-icon { background: #1c4953; color: #9ffff1; }
.home-software .software-nav-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .85rem; }
.home-software .software-link-card { padding: 2.65rem 1.1rem 1.1rem; min-height: 158px; border-radius: 12px; box-shadow: 0 2px 9px #081d2a0d; }
.home-software .software-link-card::before { top: .83rem; left: 1.1rem; width: 23px; height: 23px; }
.home-software .software-link-card h3 { font-size: 1.06rem; line-height: 1.4; margin: .3rem 0 .2rem; color: var(--text); }
.home-software .software-link-card p { color: var(--muted); font-size: .9rem; line-height: 1.5; margin: 0 0 .65rem; }
.home-software .software-link-card .home-card-arrow { margin-top: auto; color: var(--readability-accent); font-size: .88rem; }
.home-section .guide-card-grid { grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: .85rem; }
.home-section .guide-card { box-shadow: 0 2px 10px #081d2a0d; border-radius: 12px; padding: 1.15rem; }
.home-section .guide-card strong { font-size: 1.04rem; color: var(--readability-accent); }
.home-section .guide-card span:not(.sr-only) { color: var(--muted); line-height: 1.55; }
.home-supporting-link { padding-top: .9rem; max-width: 820px; color: var(--muted); font-size: .96rem; }
.home-transparency-panel { border-radius: 16px; background: var(--card-bg); border: 1px solid var(--border); padding: clamp(1.35rem, 3vw, 2rem); }
.home-transparency-panel .site-heading { margin: 0 0 .6rem; }
.home-transparency-panel p { max-width: 830px; color: var(--muted); line-height: 1.7; }
.home-trust-links { display: flex; flex-wrap: wrap; gap: .5rem 1.8rem; margin-top: .9rem; font-weight: 700; }
.home-trust-links a { color: var(--readability-accent); }

/* Readable Markdown on the About, Privacy, Guides, Search, and standard pages. */
.site-list-page.content-page { max-width: 1100px; padding-top: clamp(1.45rem, 3.5vw, 2.7rem); }
.site-list-page.content-page > h1 { max-width: 850px; line-height: 1.2; letter-spacing: -.025em; margin-bottom: 1.4rem; }
.content-page .page-body { max-width: 925px; font-size: 1.02rem; line-height: 1.78; }
.content-page .page-body > p { max-width: 78ch; margin: .85rem 0 1.25rem; }
.content-page .page-body > h2 { font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 800; border-top: 1px solid var(--border); margin: 2.1rem 0 .75rem; padding-top: 1.4rem; scroll-margin-top: 1rem; line-height: 1.35; }
.content-page .page-body > h3 { font-size: 1.19rem; margin: 1.45rem 0 .5rem; font-weight: 750; line-height: 1.35; }
.content-page .page-body > ul, .content-page .page-body > ol { list-style: revert; padding-left: 1.5rem; margin: .75rem 0 1.35rem; }
.content-page .page-body > ul > li, .content-page .page-body > ol > li { padding-left: .2rem; margin: .4rem 0; }
.content-page .page-body a { text-decoration: underline; text-underline-offset: 3px; }
.content-page .page-body :not(pre) > code { overflow-wrap: anywhere; background: var(--accent-soft); padding: .1rem .32rem; border-radius: 4px; }
.content-page .page-body pre { overflow-x: auto; max-width: 100%; border-radius: 9px; padding: 1rem 1.15rem; background: var(--code-bg); color: var(--code-text); line-height: 1.55; margin: 1.1rem 0 1.4rem; }
.content-page .page-body > table { display: block; width: 100%; overflow-x: auto; margin: 1rem 0 1.5rem; }
.content-page .page-body table :is(td,th) { padding: .67rem .8rem; vertical-align: top; min-width: 110px; }
.content-page .page-body > blockquote { margin: 1.3rem 0; border-left: 4px solid var(--readability-accent); padding: .65rem 1.15rem; background: var(--card-bg); color: var(--muted); }
.site-list-page .breadcrumbs { display: flex; align-items: baseline; flex-wrap: wrap; gap: .45rem; font-size: .88rem; margin-bottom: 1.4rem; color: var(--muted); }

/* Softer visual hierarchy on software directories and long tutorials. */
.software-landing .software-hero { padding: clamp(1.3rem, 3vw, 2rem); border-radius: 15px; }
.software-landing .software-hero h1 { font-size: clamp(1.9rem, 3.5vw, 2.65rem); line-height: 1.25; }
.software-landing .software-hero p { max-width: 76ch; line-height: 1.7; }
.software-landing .software-categories { padding: clamp(1.2rem, 2.5vw, 1.65rem); }
.software-landing .software-featured, .software-landing .software-all-content { margin: 1.7rem 0; }
.tutorial-article .tutorial-header { border-radius: 14px; padding: clamp(1.2rem, 3vw, 2rem); }
.tutorial-article .tutorial-body { padding: clamp(1.1rem, 2.8vw, 2rem); }
.tutorial-article .tutorial-body p, .tutorial-article .tutorial-body li { line-height: 1.75; }
.tutorial-article .tutorial-body table { max-width: 100%; overflow-x: auto; display: block; }
.csvd .csvd-content { line-height: 1.7; }

/* Footer sections look like ordered navigation rather than a dense paragraph. */
.site-footer { background: var(--card-bg); border-top: 1px solid var(--border); margin-top: 2rem; }
.site-footer .trust-footer-grid { grid-template-columns: 1.4fr repeat(3,minmax(0,1fr)); gap: clamp(1rem, 2vw, 2rem); }
.site-footer .trust-footer-nav a { font-size: .92rem; padding: .12rem 0; color: var(--muted); }
.site-footer .trust-footer-nav h2 { margin-bottom: .35rem; color: var(--text); }
.site-footer .site-footer-contact { display: inline-block; font-size: .92rem; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; color: var(--readability-accent); margin-top: .35rem; }
.site-footer .trust-footer-bottom { margin-top: 1.5rem; }

@media (max-width: 1100px) {
  .site-nav-inner { padding: .35rem 1.05rem; }
  .site-nav-links a { padding: .48rem .43rem; font-size: .81rem; }
}
@media (max-width: 950px) {
  .home-tools-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-software .software-nav-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .site-footer .trust-footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 800px) {
  .site-header-v2 .site-header-top { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto; gap: .6rem .7rem; padding: .65rem 1rem; }
  .site-header-v2 .site-logo { grid-column: 1; grid-row: 1; max-width: min(210px, 100%); width: 100%; }
  .site-header-v2 .site-header-actions { grid-column: 2; grid-row: 1; gap: .45rem; }
  .site-header-v2 .site-header-search { grid-column: 1 / -1; grid-row: 2; max-width: none; margin: 0; justify-self: stretch; }
  .site-header-v2 .site-header-contact { display: none; }
  .site-nav-inner { display: block; padding: .38rem 1rem; }
  .site-nav-links, .site-software-menu { display: none !important; }
  .site-mobile-menu { display: block; position: relative; }
  .site-mobile-menu summary { padding: .43rem .6rem; border-radius: 8px; list-style: none; font-weight: 760; color: var(--text); cursor: pointer; width: fit-content; }
  .site-mobile-menu summary::-webkit-details-marker { display: none; }
  .site-mobile-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .22rem .45rem; max-height: min(68vh, 560px); overflow-y: auto; padding: .65rem 0 .6rem; border-top: 1px solid var(--border); margin-top: .35rem; }
  .site-mobile-links > a { display: block; padding: .5rem .55rem; border-radius: 8px; font-size: .92rem; font-weight: 650; line-height: 1.45; color: var(--text); text-decoration: none; }
  .site-mobile-links > a:hover { background: var(--hover); color: var(--readability-accent); }
  .site-mobile-links > strong { grid-column: 1 / -1; padding: .55rem .5rem .18rem; color: var(--muted); font-size: .77rem; text-transform: uppercase; letter-spacing: .045em; }
  .home-tools-grid { grid-template-columns: 1fr; }
  .home-tool-card { min-height: 0; }
  .home-hero-links { gap: .7rem 1.15rem; }
  .home-section { padding-top: 1.65rem; padding-bottom: 1.65rem; }
  .site-footer .trust-footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .home-software .software-nav-grid, .site-footer .trust-footer-grid { grid-template-columns: 1fr; }
  .site-mobile-links { grid-template-columns: 1fr; }
  .site-header-v2 .site-header-top { padding: .55rem .85rem; }
  .site-header-v2 .site-header-search input { padding: .6rem .7rem; font-size: .91rem; }
  .site-header-v2 .site-search-button { padding: .62rem .75rem; }
  .home-hero-v2 .home-search { flex-direction: column; }
  .home-hero-v2 .home-search button { width: 100%; }
  .home-software .software-link-card { min-height: 0; }
  .content-page .page-body { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .home-tool-card, .site-nav-links a { transition: none; }
  html { scroll-behavior: auto; }
}