/* site.css (optional overrides)
   - Header spacer for pages where the first section can be overlapped by the fixed header.
   - Safe URL wrapping for reference lists.
*/

/* Add top padding to the main content on selected pages */
body.has-fixed-header-offset main{
  padding-top: 84px; /* header height + breathing room */
}

/* Ensure long URLs never overflow reference boxes */
.gs-sources a{
  word-break: break-all;
}

/* Language toggling (global, prevents mixed-language leakage on pages that miss local rules) */
html[data-lang="pl"] .lang-en,
body[data-lang="pl"] .lang-en{ display: none !important; }

/* -------------------------------------------------------------------------- */
/* Page-specific typography
   Keep headings and lists readable, while making long-form paragraphs justified
   for a consistent “editorial” look (as on "Dlaczego my?").
*/

/* WHY LLC (O LLC) */
.page-why-llc #llc-deep-dive .prose p{ text-align: justify; }
.page-why-llc #wyoming p,
.page-why-llc #llc p{ text-align: justify; }
.page-why-llc #seo-pack p{ text-align: justify; }
html[data-lang="en"] .lang-pl,
body[data-lang="en"] .lang-pl{ display: none !important; }
/* Consistent logo sizing (top nav + mobile menu) */
nav img[alt="GO SOLUTIONS"],
#mobileMenu img[alt="GO SOLUTIONS"]{
  width: 130px;
  height: auto;
}

/* -------------------------------------------------------------------------- */
/* Offline-safe icons
   The site uses <span class="material-symbols-…">icon_name</span> in markup.
   When Google Fonts are unavailable (offline / restricted), those can render
   as raw text. We replace them with inline SVG in assets/app.js.
   The CSS below hides the raw glyph text to avoid visual flicker.
*/

.material-symbols-outlined,
.material-symbols-rounded{
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

/* Ensure justification propagates nicely inside rich-text blocks */
/* Ensure justification propagates nicely inside rich-text blocks */

/* Text justification helper (used in page teasers and longer blocks) */
.gs-justify{
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

/* Ensure justification propagates nicely inside rich-text blocks */
.gs-justify p,
.gs-justify li,
.gs-justify div{
  text-align: justify !important;
  text-justify: inter-word;
}

/* -------------------------------------------------------------------------- */
/* Typography helpers (replacement for Tailwind Typography plugin)
   Many pages use `prose` classes for readable long-form copy.
   In the pre-audit versions this was provided by the Tailwind Typography plugin
   loaded via CDN. After switching to compiled Tailwind, those classes no longer
   carried any styles, which made sections look like a plain document.

   The rules below restore a clean, “book-like” typographic rhythm without
   changing layout or Tailwind utility usage elsewhere.
*/

.prose{
  color: #0f172a; /* slate-900 */
  max-width: none;
  line-height: 1.75;
  font-size: 1rem;
}

.prose p{ margin: 1.05em 0; }
.prose ul, .prose ol{ margin: 1.05em 0; padding-left: 1.25em; }
.prose li{ margin: .35em 0; }

.prose h1,
.prose h2,
.prose h3,
.prose h4{
  color: #0b1220;
  font-weight: 800;
  line-height: 1.25;
  margin: 1.4em 0 .6em;
}

.prose h2{ font-size: 1.35em; }
.prose h3{ font-size: 1.18em; }
.prose h4{ font-size: 1.05em; }

.prose strong{ font-weight: 800; }
.prose em{ font-style: italic; }

.prose a{
  color: #007a9e; /* secondary */
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose blockquote{
  border-left: 3px solid rgba(148,163,184,.6);
  padding-left: 1em;
  margin: 1.2em 0;
  color: rgba(15,23,42,.9);
}

.prose hr{
  border: 0;
  border-top: 1px solid rgba(148,163,184,.35);
  margin: 1.6em 0;
}

/* “Slate” flavor used across the site (kept for compatibility with markup). */
.prose.prose-slate{ color: #0f172a; }

/* Inverted variant for dark background sections */
.prose.prose-invert,
.dark .prose,
.dark .prose.prose-slate{
  color: rgba(226,232,240,0.92); /* slate-200 */
}

.prose.prose-invert h1,
.prose.prose-invert h2,
.prose.prose-invert h3,
.prose.prose-invert h4,
.dark .prose h1,
.dark .prose h2,
.dark .prose h3,
.dark .prose h4{
  color: #f1f5f9; /* slate-100 */
}

.prose.prose-invert a,
.dark .prose a{ color: #7dd3fc; text-decoration-color: rgba(125,211,252,.75); }

.prose.prose-invert blockquote,
.dark .prose blockquote{
  border-left-color: rgba(148,163,184,.45);
  color: rgba(226,232,240,0.92);
}

/* I18n fallback: if an EN (or PL) counterpart is missing, keep the available copy visible. */
body[data-lang="en"] .lang-pl.gs-fallback { display: block !important; }
body[data-lang="pl"] .lang-en.gs-fallback { display: block !important; }

/* -------------------------------------------------------------------------- */
/* Forms: improve field visibility on light theme
   Forms use Tailwind utilities, but many inputs have no explicit light
   background, which can make them hard to notice. We scope to `.js-form`
   (site forms) so the chat UI remains unchanged.
*/

html:not(.dark) .js-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
html:not(.dark) .js-form select,
html:not(.dark) .js-form textarea{
  background-color: rgba(255, 255, 255, 0.92);
  border-width: 1px;
  border-style: solid;
  border-color: rgba(148, 163, 184, 0.85); /* slate-400-ish */
  padding: 0.75rem 0.9rem;
  color: #0f172a; /* slate-900 */
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

html:not(.dark) .js-form input::placeholder,
html:not(.dark) .js-form textarea::placeholder{
  color: rgba(100, 116, 139, 0.9); /* slate-500 */
}

html:not(.dark) .js-form input:focus,
html:not(.dark) .js-form select:focus,
html:not(.dark) .js-form textarea:focus{
  outline: none;
  border-color: rgba(15, 23, 42, 0.75); /* slate-900 */
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.14);
  background-color: rgba(255, 255, 255, 0.98);
}

/* -------------------------------------------------------------------------- */
/* Offline-safe icon rendering
   We keep the existing Material Symbols markup, but render inline SVG icons
   via assets/app.js so the UI works even without Google Fonts.
   To avoid flashing raw icon names (e.g. "verified"), we hide the text.
*/

.material-symbols-outlined,
.material-symbols-rounded{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  line-height: 1;
  /* Hide raw icon names when font isn't available */
  font-size: 1.25rem;
}

.material-symbols-outlined svg,
.material-symbols-rounded svg{
  width: 1.2em;
  height: 1.2em;
  display: block;
}

/* Floating UI offset (cookie banner vs. chat button) */
:root{ --gs-floating-bottom: 24px; }
.gs-floating{ bottom: var(--gs-floating-bottom) !important; }


/* Shared padding for pages with fixed navbar (used by addon subpages) */
.section-pad{
  padding-top: 7.5rem; /* ~120px for fixed nav + breathing room */
  padding-bottom: 4rem;
}

@media (min-width: 640px){
  .section-pad{ padding-top: 8rem; padding-bottom: 5rem; }
}


/* Legal document list styling (independent of Tailwind CDN) */
.legal-ol{list-style:decimal;padding-left:1.5rem;margin:0.75rem 0;}
.legal-ol>li{margin:0.25rem 0;}
.legal-ul{list-style:disc;padding-left:1.5rem;margin:0.75rem 0;}
.legal-ul>li{margin:0.25rem 0;}