/* Visual + Ad Optimization, October 2026.
   This intentionally loads AFTER the existing layers, without removing the
   proven function-card layout or changing any function URL/content. */
:root {
  --visual-line: #d9e3e8;
  --visual-focus: #087981;
  --visual-card-shadow: 0 4px 16px rgba(20, 41, 56, .045);
}

/* Calm editorial surfaces: only clickable navigation cards lift on hover. */
.card:not(a):hover { transform: none; }
.function-page .card:not(a):hover,
.tutorial-article .card:not(a):hover,
.site-list-page .card:not(a):hover {
  transform: none;
}
.guide-card, .software-link-card, .home-topic-card, .tutorial-summary {
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.guide-card:hover, .guide-card:focus-visible,
.software-link-card:hover, .software-link-card:focus-visible,
.tutorial-summary:hover, .tutorial-summary:focus-visible {
  transform: translateY(-2px);
  border-color: #0b7c82;
  box-shadow: 0 10px 26px rgba(22, 75, 82, .10);
  text-decoration: none;
}

/* Homepage: fewer headings/rows, tighter hierarchy, larger useful search. */
.home-hero { padding-top: clamp(3.2rem, 6vw, 5rem); padding-bottom: clamp(3.5rem, 6vw, 5rem); }
.home-hero h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); line-height: 1.11; max-width: 850px; }
.home-hero > div > p.text-xl { font-size: clamp(1.04rem, 1.8vw, 1.2rem); }
.home-section { scroll-margin-top: 1.5rem; }
.home-section > .section-title-row { margin-bottom: 1.2rem; }
.home-section .site-heading { margin-bottom: 0; }
.home-section .section-title-row > a { font-weight: 650; text-underline-offset: 3px; }
.home-software .software-nav-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); }
.home-software .software-link-card { min-height: 0; padding: 3.15rem 1.35rem 1.3rem; position: relative; border-radius: 15px; }
.home-software .software-link-card::before { left: 1.35rem; top: 1.08rem; width: 25px; height: 25px; }
.home-software .software-link-card h3 { font-size: 1.15rem; line-height: 1.35; }
.home-software .software-link-card p { font-size: .93rem; line-height: 1.55; }
.home-card-arrow { display: inline-block; margin-top: 1rem; color: #087981; font-size: .88rem; font-weight: 700; }
.home-compact-links { display:flex; align-items: baseline; flex-wrap: wrap; gap: .65rem 1.25rem; font-size: .91rem; margin-top: 1.05rem; color: var(--muted); }
.home-compact-links a { font-weight: 700; }
.home-topic-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.home-topic-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 15px; padding: 1.5rem; box-shadow: var(--visual-card-shadow); }
.home-topic-card h3 { font-size: 1.23rem; margin: 0 0 .6rem; color: var(--text); }
.home-topic-card p { color: var(--muted); font-size: .94rem; line-height: 1.55; margin: 0 0 .85rem; }
.home-topic-card ul { padding-left: 1.1rem; margin: 0 0 1.05rem; list-style: disc; }
.home-topic-card li { margin: .4rem 0; font-size: .94rem; }
.home-more-link { font-weight: 700; font-size: .9rem; }

/* Clearly grouped directions on long function guides; generated from true H2s. */
.function-page .function-toc {
  margin: 0 0 1.5rem;
  padding: 1.05rem 1.35rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 4px solid #087981;
  border-radius: 13px;
  box-shadow: var(--visual-card-shadow);
}
.function-page .function-toc strong { display: block; margin-bottom: .55rem; color: var(--text); }
.function-page .function-toc ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.3rem 1.3rem; list-style:none; padding:0; margin:0; }
.function-page .function-toc li { margin:0; min-width:0; }
.function-page .function-toc a { display:inline-block; padding:.18rem 0; font-size:.91rem; line-height:1.45; color:#087981; text-decoration:underline; text-underline-offset:3px; }
.function-page .function-content > .function-section.card { scroll-margin-top: 1.3rem; }
/* A quiet left accent replaces repeated large decorative dots, retaining card controls. */
.function-page .function-content > .function-section > h2 { gap:.7rem; padding-left:.9rem !important; border-left:3px solid #15878b !important; }
.function-page .function-content > .function-section > h2::before { content:none !important; display:none !important; }
.function-page .function-content > .function-section > h2 .function-section-toggle { margin-left:auto; }

/* Code copy is a progressive enhancement: formulas remain visible without JS. */
.visual-code-wrap { position:relative; margin:1rem 0 1.35rem; min-width:0; }
.visual-code-wrap pre { margin:0 !important; padding-top:2.9rem !important; }
.visual-copy-button {
  position:absolute; top:.45rem; right:.5rem; z-index:1;
  border-radius:7px; border:1px solid #556578; padding:.27rem .65rem;
  color:#f3f8fd; background:#253448; font-size:.79rem; font-weight:700;
  line-height:1.4; cursor:pointer;
}
.visual-copy-button:hover { background:#38516a; border-color:#9cb9ce; }
.visual-copy-button:focus-visible { outline:3px solid #50e3de; outline-offset:2px; }
.visual-copy-button[data-copied="true"] { background:#125c59; border-color:#65c6b5; }
.visual-copy-button[data-error="true"] { background:#863b3b; border-color:#e9a7a7; }

/* Safe ad slots: no blank placeholders because template emits markup only when enabled. */
.site-manual-ad { clear:both; width:100%; max-width:940px; margin:1.9rem auto 2.25rem; padding: .65rem 0 0; text-align:center; border-top:1px solid var(--border); }
.site-ad-label { display:block; text-align:center; margin-bottom:.7rem; font-size:.72rem; line-height:1.3; letter-spacing:.055em; text-transform:uppercase; color:var(--muted); }
.site-manual-ad ins.adsbygoogle { display:block; width:100%; overflow:hidden; }
/* Avoid unexpected style jumps and cropped formulas on narrow screens. */
.function-page .function-content pre, .tutorial-body pre { white-space:pre; max-width:100%; overflow-x:auto; }
.function-page .function-content table, .tutorial-body table { max-width:100%; overflow-x:auto; }
.function-page .function-section-toggle { min-height:35px; min-width:35px; }

/* Footer links should remain distinguishable in the dark theme. */
.dark .home-card-arrow, .dark .function-page .function-toc a { color:#7de1d8; }
.dark .home-topic-card, .dark .function-page .function-toc { background:#0f172a; border-color:#3c4c5d; color:#e7f1f9; box-shadow:0 4px 16px rgba(0,0,0,.12); }
.dark .home-topic-card p { color:#b8c9d7; }
.dark .function-page .function-content > .function-section > h2 { border-left-color:#64d4c9 !important; }
.dark .home-compact-links { color:#c0d1df; }
.dark .guide-card:hover, .dark .software-link-card:hover { border-color:#64d4c9; }

@media (max-width: 900px) {
  .home-topic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  /* 2-row mobile masthead: logo + controls, then full-width search. */
  .hh-header .hh-container { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; align-items:center; gap:.65rem .65rem; padding:.45rem .85rem .75rem; }
  .hh-header .site-logo { grid-column:1; grid-row:1; width:clamp(155px,46vw,207px); max-width:100%; }
  .hh-header .hh-actions { grid-column:2; grid-row:1; justify-content:flex-end; min-width:0; gap:.4rem; }
  .hh-header .hh-search { grid-column:1 / -1; grid-row:2; order:0; width:100%; max-width:none; }
  .hh-header .hh-search input { min-width:0; flex:1; padding:.58rem .75rem; }
  .hh-header .hh-dropdown summary { padding:.43rem .56rem; }
  .hh-header .hh-dark-toggle { flex:0 0 auto; }
  .home-hero { padding-top:2.6rem; padding-bottom:3rem; }
  .home-section { padding-top:1.5rem; padding-bottom:1.85rem; }
  .home-topic-grid { grid-template-columns:1fr; }
  .home-software .software-link-card { padding: 2.6rem 1.15rem 1.1rem; }
  .home-software .software-link-card::before { top:.85rem; left:1.15rem; }
  .function-page .function-toc ul { grid-template-columns:1fr; }
  .function-page .function-toc { padding: .95rem 1rem; }
  .function-page .function-content > .function-section > h2 { font-size:1.13rem; }
  .site-manual-ad { margin:1.45rem auto 1.7rem; }
}
@media (max-width: 420px) {
  .hh-header .site-logo { width:clamp(138px,42vw,175px); }
  .hh-header .hh-search { gap:.32rem; }
  .hh-header .site-search-button { padding:.58rem .7rem; }
  .hh-header .hh-dropdown summary { font-size:.85rem; }
  .function-page .function-toc ul { gap:.12rem; }
}
@media (prefers-reduced-motion:reduce) {
  .guide-card, .software-link-card, .home-topic-card, .tutorial-summary { transition:none; }
  .guide-card:hover, .software-link-card:hover, .tutorial-summary:hover { transform:none; }
}