/* InDemand Tools brand theme (colour + icon refresh, Nov 2026).
   Loaded after main.css and tools.css. Colours only; no layout or type changes.
   Utility blue #1F5C99 · Dark ink #183340 · Warm white #F5F6F2 · White #FFFFFF
   Muted slate #53636A · Blue tint #EAF1F8 · Quiet border #D8DEDD · Control border #748892 */

:root {
  --bg: #F5F6F2;
  --surface: #FFFFFF;
  --surface-2: #EDF1EE;
  --surface-3: #E4E9E6;
  --text: #183340;
  --text-2: #53636A;
  --text-3: #53636A;
  --text-muted: #53636A;
  --accent: #1F5C99;
  --accent-2: #1F5C99;
  --accent-bright: #1F5C99;
  --accent-hover: #184A7C;
  --accent-dim: #EAF1F8;
  --border: #D8DEDD;
  --border-hover: #B9C3C3;
  --border-focus: #1F5C99;
  --idt-control: #748892;
  --green: #1E7A4C;
  --red: #B42318;
  --amber: #8A5A00;
  --error: #B42318;
  --error-bg: #FBEDEC;
  --error-border: rgba(180, 35, 24, .35);

  /* Names used by tool pages that were never defined before */
  --c-text: #183340;
  --c-text-1: #183340;
  --c-text-2: #53636A;
  --c-text-3: #53636A;
  --c-border: #D8DEDD;
  --c-surface: #FFFFFF;
  --c-surface-2: #EDF1EE;
  --c-accent: #1F5C99;
  --c-error: #B42318;
  --tc-accent: #1F5C99;
  --tc-muted: #53636A;
  --tc-success: #1E7A4C;
  --tc-warn: #8A5A00;
  --tc-danger: #B42318;
  --tc-surface2: #EDF1EE;
}

html { color-scheme: light; }
::selection { background: #CFE0F1; color: #183340; }
:focus-visible { outline: 2px solid #1F5C99; outline-offset: 2px; }

/* Icons: Lucide line icons in utility blue (or inherit text colour) */
.idt-icon { width: 1em; height: 1em; flex-shrink: 0; display: inline-block; vertical-align: -0.125em; }
.idt-icon[width] { width: auto; height: auto; }
.idt-plate {
  display: inline-flex; align-items: center; justify-content: center;
  background: #EAF1F8; color: #1F5C99; border-radius: 10px;
}
.idt-ico-inline { color: #1F5C99; margin-right: .4em; }

/* Buttons: one solid blue, no glow */
.btn-primary,
.tc-btn-primary {
  background: #1F5C99 !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
.btn-primary:hover,
.tc-btn-primary:hover:not(:disabled) {
  background: #184A7C !important;
  filter: none !important;
  box-shadow: none !important;
}
.btn-ghost, .tc-btn-ghost {
  background: #FFFFFF;
  color: #183340;
  border: 1px solid #748892;
}
.btn-ghost:hover, .tc-btn-ghost:hover { background: #EAF1F8; color: #1F5C99; border-color: #1F5C99; }

/* Form controls: white with a 3:1 control boundary */
input[type="text"], input[type="email"], input[type="password"], input[type="url"],
input[type="search"], input[type="number"], input[type="tel"], input[type="datetime-local"],
input[type="date"], input[type="time"], select, textarea,
.tc-input, .tc-textarea, .tc-select {
  background-color: #FFFFFF;
  color: #183340;
  border-color: #748892;
}
input::placeholder, textarea::placeholder { color: #6B7A80; opacity: 1; }
input:focus, select:focus, textarea:focus,
.tc-input:focus, .tc-textarea:focus, .tc-select:focus {
  border-color: #1F5C99;
  box-shadow: 0 0 0 3px rgba(31, 92, 153, .15);
  outline: none;
}
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: #1F5C99; }

/* Text that used a purple gradient clip is now solid blue */
.gradient-text, .gradient-text-cta { background: none !important; -webkit-text-fill-color: #1F5C99 !important; color: #1F5C99 !important; }

/* Cards and code blocks on a light surface */
pre, code { color: #183340; }
code { color: #184A7C; background: #EDF1EE; border-color: #D8DEDD; }
pre code { color: inherit; background: none; }

/* ── Layout fixes from the Nov 2026 SEO audit ─────────────────────────────── */
/* Five footer columns only where there is room; main.css stacks them below 1024px */
@media (min-width: 1025px) {
  .footer-grid--5 { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.5fr; }
}
.footer-social { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin-top: .75rem; }
.footer-social a { color: var(--text-2); font-size: .875rem; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.footer-social a:hover { color: var(--text); text-decoration: underline; }

/* Decorative shapes must never widen the page (clip keeps position:sticky working) */
html, body { overflow-x: clip; }
.footer-grid > * { min-width: 0; }

/* Tap targets at least 44px on touch screens */
@media (max-width: 768px) {
  .navbar { padding: 0; }
  .nav-inner { gap: .75rem; }
  .nav-logo { min-height: 44px; }
  .nav-actions .btn { min-height: 44px; }
  .nav-hamburger { width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center; }
  .footer-links { gap: 0; }
  .footer-link { min-height: 44px; }
  .bp-breadcrumb a, .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
  #cookie-banner button { min-height: 44px; }
}
@media (max-width: 380px) {
  .nav-logo-text { font-size: 1.05rem; }
  .nav-actions .btn { padding-left: .9rem; padding-right: .9rem; }
}

/* Example blocks and tables in editorial copy (tool pages, hubs, blog posts) */
.tool-page-content code, .prose code, .bp-content code { overflow-wrap: anywhere; }
.tool-page-content pre, .prose pre { background: #EDF1EE; border: 1px solid #D8DEDD; border-radius: 10px; padding: 1rem 1.15rem; margin: 0 0 1rem; overflow-x: auto; line-height: 1.6; }
.tool-page-content pre code, .prose pre code, .bp-content pre code {
  display: block; background: none; border: 0; border-radius: 0; padding: 0;
  white-space: pre; overflow-wrap: normal; font-size: .82rem; color: #183340;
}
.tool-page-content table, .prose table, .bp-content table { width: 100%; border-collapse: collapse; margin: .25rem 0 1.5rem; font-size: .9rem; background: #fff; border: 1px solid #D8DEDD; }
.tool-page-content th, .tool-page-content td, .prose th, .prose td, .bp-content th, .bp-content td { text-align: left; vertical-align: top; padding: .6rem .8rem; border-bottom: 1px solid #D8DEDD; line-height: 1.5; }
.tool-page-content th, .prose th, .bp-content th { background: #EDF1EE; color: #183340; font-weight: 600; }
.tool-page-content tr:last-child td, .prose tr:last-child td, .bp-content tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) {
  .tool-page-content table, .prose table, .bp-content table { display: block; overflow-x: auto; }
}
.tool-page-content ul { list-style: disc; }
.tool-page-content ol { list-style: decimal; }
.tool-page-content li::marker { color: #748892; }

/* Tool pages on phones: no empty band under the hero, formatter buttons two per row */
.tool-hero > .tool-page-wrap { padding-bottom: 0; }
@media (max-width: 640px) {
  .tool-content-wrap .tc-toolbar > .tc-btn,
  .tool-content-wrap .tc-toolbar > .tc-btn-ghost { width: auto; flex: 1 1 calc(50% - .25rem); }
  .tool-content-wrap .tc-toolbar > div { margin-left: 0 !important; width: 100%; }
}
@media (max-width: 768px) {
  .tool-content-wrap .tc-tab { min-height: 44px; }
  /* Small buttons beside a panel label ("Try Example", "Clear") keep their own width;
     the full-width phone rule in tools.css squeezed the label onto two lines */
  .tool-content-wrap div[style*="space-between"] > .tc-btn-ghost { width: auto; flex: 0 0 auto; min-height: 44px; }
}

/* Home "Browse by Category": five hubs since Nov 2026. One row on wide screens; on the
   two-column phone layout the odd last card spans the row instead of sitting alone. */
@media (min-width: 1100px) {
  .cat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .cat-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Badges (tool category, post category): 12px minimum so the label stays readable on phones */
.badge{font-size:max(12px,.75rem)}

/* Responsive audit, Nov 2026 ------------------------------------------------ */
/* A button that shares a row with an input (e.g. OG Checker "Check") keeps its own
   width on phones; the full-width phone rule in tools.css squeezed the input to ~30px */
@media (max-width: 768px) {
  .tool-content-wrap div[style*="display:flex"]:has(> .tc-input) > .tc-btn { width: auto; flex: 0 0 auto; }
}
/* Two-column tool forms (AI writers, Lorem Ipsum) stack on small phones so the
   dropdowns show their full option text */
@media (max-width: 480px) {
  .tool-content-wrap div[style*="grid-template-columns:1fr 1fr"]:has(> .tc-field) { grid-template-columns: minmax(0, 1fr) !important; }
  .tool-content-wrap #rt-flags { max-width: 72px !important; }
}
/* Finger-sized secondary controls on phones and any touch screen such as tablets
   (Copy, Clear, Try Example, category filters) */
@media (max-width: 640px), (pointer: coarse) {
  .tool-content-wrap .tc-btn-ghost,
  .tool-content-wrap .tc-copy-btn { min-height: 44px; }
  .cat-filter-btn, #tools-search { min-height: 44px; }
  .tool-content-wrap .cj-mode-btn,
  .tool-content-wrap .rt-flag-btn,
  .tool-content-wrap .pnf-country-pill,
  .tool-content-wrap .cg-preset-btn,
  .tool-content-wrap .pnf-tab,
  .tool-content-wrap .rtg-remove-btn { min-height: 44px; }
  .tool-content-wrap input[type="checkbox"],
  .tool-content-wrap input[type="radio"] { width: 18px; height: 18px; }
  /* Sign in / sign up / password pages */
  .form-input, .auth-submit { min-height: 44px; }
  button.pw-toggle { width: 44px; height: 44px; right: 0; align-items: center; justify-content: center; }
}
/* Six stat boxes (Word Counter) as 3 + 3 instead of 5 + a lone 1 on wider screens */
@media (min-width: 769px) {
  .tool-content-wrap .tc-stats-grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Signed-in header on phones: avatar only, so the menu button keeps its gutter */
@media (max-width: 640px) {
  .nav-user .nav-user-name { display: none; }
  .nav-user .nav-user-btn { min-height: 44px; padding: .4rem .6rem; }
}
@media (max-width: 360px) {
  .container.nav-inner { gap: .75rem; }
}