/* =============================================================================
   Dynamic Tech World - Word Counter | THEME.CSS  (FINAL · mobile-perfect)
   -----------------------------------------------------------------------------
   Three guarantees for EVERY phone/browser:
     1) NO horizontal scroll and NO clipped text  (overflow locked)
     2) Comfortable, consistent side spacing       (readable gutters)
     3) Dark/Light theme toggle (default dark)
   Loaded as  theme.css  after the hub styles. Default theme = dark.
   ============================================================================= */

/* =========================================================================
   1) BOX MODEL  — every size includes padding + border (no surprise overflow)
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

/* =========================================================================
   2) NO HORIZONTAL SCROLL / NO CLIPPED TEXT  (works on every device)
   ========================================================================= */
html { -webkit-text-size-adjust: 100%; }          /* stop iOS rotating font-size */
html, body { max-width: 100%; }
body { overflow-x: hidden; }                        /* kill the horizontal scrollbar */

/* media + ad iframes can never be wider than their column.
   (The 728x90 is a desktop format — it is hidden on mobile below; we never
   resize the creative, which would break it and breach the network's rules.) */
img, svg, video, iframe, canvas, embed, object, pre, table { max-width: 100%; height: auto; }
.ad-728-slot { max-width: 100%; overflow: hidden; }
.ad-728-slot iframe { max-width: 100%; }
@media (max-width: 767px) {
  #ad-banner { display: none; }          /* no 728x90 on phones */
}

/* every layout box can shrink so nothing is ever forced wider than the screen.
   (form controls are deliberately excluded so inputs/buttons keep their size) */
main, header, footer, section, article, nav, aside, div, ul, ol, li, p, blockquote,
figure, figcaption, details, summary, h1, h2, h3, h4, h5, h6, span, a, label, dl, dd, dt {
  min-width: 0;
}

/* text always wraps instead of poking out of the edge */
body, p, li, h1, h2, h3, h4, h5, h6, span, a, td, th,
.prose, .prose *, .stat-value, .kw-word, .preset-name, .related-card small, .draft-note {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* =========================================================================
   3) MOBILE HEADER SAFETY  — the toggle added width; keep it inside the screen
   ========================================================================= */
.header-inner { min-width: 0; flex-wrap: nowrap; }
.brand { min-width: 0; }
.brand-text { min-width: 0; overflow: hidden; }

@media (max-width: 480px) {
  .header-inner { gap: 10px; }
  .brand-sub { display: none; }          /* free ~120px on small phones */
  .theme-toggle { width: 38px; height: 38px; font-size: 1.05rem; }
  .nav-toggle { width: 40px; height: 40px; padding: 9px; }
}
@media (max-width: 360px) {
  .brand-name { font-size: 1rem; }       /* a touch smaller on the tiniest phones */
}

/* =========================================================================
   4) THEME TOGGLE BUTTON
   ========================================================================= */
.theme-toggle {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  font-size: 1.2rem; line-height: 1;
  background: transparent;
  border: 1px solid var(--dtw-border);
  border-radius: 11px;
  color: var(--dtw-text);
  cursor: pointer;
  flex: 0 0 auto;
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease),
              transform var(--speed) var(--ease);
}
.theme-toggle:hover { border-color: var(--dtw-gold); transform: translateY(-1px); }
.theme-toggle[aria-pressed="true"] { background: rgba(255, 184, 0, 0.12); border-color: rgba(255, 184, 0, 0.45); }
.theme-toggle:focus-visible { outline: 2px solid var(--dtw-gold); outline-offset: 2px; }

/* =========================================================================
   5) LIGHT THEME  (applied via <html data-theme="light">; default stays dark)
   ========================================================================= */
html[data-theme="light"] {
  --dtw-red:        #e10202;
  --dtw-red-hover:  #e7131a;
  --dtw-red-dark:   #a30000;
  --dtw-gold:       #b87900;
  --dtw-dark:       #eef0f4;            /* page background */
  --dtw-dark-2:     #ffffff;
  --dtw-surface:    #ffffff;            /* cards / panels */
  --dtw-surface-2:  #f1f3f7;            /* inputs */
  --dtw-border:     rgba(0, 0, 0, 0.12);
  --dtw-border-soft:rgba(0, 0, 0, 0.07);
  --dtw-text:       #15161c;
  --dtw-text-muted: #565b67;
  --shadow-card:    0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-glow:    0 0 0 1px rgba(225, 2, 2, 0.30), 0 8px 24px rgba(225, 2, 2, 0.12);
}
html[data-theme="light"] body {
  background-color: #eef0f4;
  background-image:
    radial-gradient(1100px 520px at 85% -10%, rgba(225, 2, 2, 0.07), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(255, 184, 0, 0.12), transparent 55%);
  background-attachment: fixed;
}

/* header glass + nav contrast fixes (the hub hardcodes dark values here) */
html[data-theme="light"] .site-header { background: rgba(255, 255, 255, 0.85); }
html[data-theme="light"] .nav-list a:hover { color: var(--dtw-text); background: rgba(0, 0, 0, 0.06); }
html[data-theme="light"] .nav-list a.is-active { color: #fff; background: var(--dtw-red); }
html[data-theme="light"] .nav-toggle { border-color: rgba(0, 0, 0, 0.15); }
html[data-theme="light"] .nav-toggle-bar { background: var(--dtw-text); }

/* light-mode text fixes so nothing is ever invisible on a light background */
html[data-theme="light"] .ad-728-label { color: rgba(0, 0, 0, 0.4); }
html[data-theme="light"] .breadcrumb a { color: var(--dtw-text-muted); }
html[data-theme="light"] .breadcrumb li[aria-current="page"] { color: var(--dtw-text); }
html[data-theme="light"] .sponsored-cta { color: #fff; }   /* white stays — its bg is red */

::selection { background: var(--dtw-red); color: #fff; }

/* =========================================================================
   6) EXTRA SIDE PADDING FOR SEO READING TEXT
   Adds comfortable left/right breathing room to the guide, FAQ, steps and
   intro so long text reads easily on every screen. The tool UI (textarea,
   toolbar, stats) is untouched. Padding uses box-sizing:border-box, so it
   never causes overflow.
   ========================================================================= */
.prose,
.faq,
ol.steps,
.hero-sub {
  padding-left: clamp(10px, 4vw, 22px);
  padding-right: clamp(10px, 4vw, 22px);
}