/* =====================================================================
   Text Tools Pro — responsive.css
   Full-range responsiveness: 320px → 3840px, all devices & browsers.
   Loaded LAST so it can fine-tune layout at every breakpoint.
   ===================================================================== */

/* ---------------------------------------------------------------
   0. Global safety: never allow horizontal scroll, size-correctly
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas, iframe, embed, object {
  max-width: 100%;
  height: auto;
}
iframe, video, embed, object { display: block; }
table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
pre, code { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.ttp-container, .ttp-cc-hero, .ttp-toolpage, .ttp-generators, .site-header, .site-footer { max-width: 100%; }

/* Fluid type tuning (keeps clamp() readable on tiny + huge screens) */
:root {
  --ttp-tap: 44px; /* minimum comfortable tap target */
}

/* Buttons & inputs are always tappable */
.ttp-btn, .ttp-iconbtn, button, input, select, textarea, a.ttp-tool-card {
  font-size: max(16px, 1em); /* iOS: 16px prevents zoom-on-focus */
}
.ttp-btn { min-height: var(--ttp-tap); }

/* ---------------------------------------------------------------
   1. Case-converter / tool button rows  (the home + text tools)
   Base layout is already a horizontal row (icon badge + label).
   Here we only tune how many columns show at each width, exactly
   like convertcase.net (1 col on phones, 2 on tablets, more on
   wide screens). The tag is hidden on narrow rows.
   --------------------------------------------------------------- */
@media (max-width: 600px) {
  .ttp-tools-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ttp-tool-card { padding: 10px 11px; gap: 9px; }
  .ttp-tool-card .ttp-tool-icon { width: 34px; height: 34px; font-size: 0.85rem; border-radius: 9px; }
  .ttp-tool-card .ttp-tool-name { font-size: 0.92rem; }
  .ttp-tool-card .ttp-tool-tag { display: none; }
  /* Homepage case buttons — also two columns (convertcase.net-style) */
  .ttp-cc-buttons { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
}
/* Very narrow phones (≤360px): single column so labels aren't cramped */
@media (max-width: 360px) {
  .ttp-tools-grid { grid-template-columns: 1fr; }
}

/* Small tablets: 2-up (convertcase.net default) */
@media (min-width: 601px) and (max-width: 1023px) {
  .ttp-tools-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ttp-tool-card .ttp-tool-tag { display: none; }
}
/* Tablets/laptops: 3-up */
@media (min-width: 1024px) and (max-width: 1365px) {
  .ttp-tools-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Desktop: 4-up */
@media (min-width: 1366px) and (max-width: 1919px) {
  .ttp-tools-grid { grid-template-columns: repeat(4, 1fr); }
}
/* Large / ultra-wide: 5–6 up so rows don't stretch huge */
@media (min-width: 1920px) and (max-width: 2559px) {
  .ttp-tools-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 2560px) {
  .ttp-tools-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ---------------------------------------------------------------
   2. Generator / code-data / word cards
   --------------------------------------------------------------- */
@media (max-width: 600px) {
  .ttp-generators { grid-template-columns: 1fr; gap: 0.75rem; }
  .ttp-gen-card { padding: 0.85rem 0.9rem; }
  .ttp-gen-controls { gap: 6px; }
  .ttp-gen-controls .ttp-btn { flex: 1 1 auto; }
  .ttp-gen-controls input[type=number],
  .ttp-gen-controls input[type=text] { flex: 1 1 120px; min-width: 0; }
}
@media (min-width: 1920px) {
  .ttp-generators { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
}

/* ---------------------------------------------------------------
   3. Hero (Convert Case headline + intro)
   --------------------------------------------------------------- */
.ttp-cc-hero { padding-left: var(--ttp-gutter); padding-right: var(--ttp-gutter); }
.ttp-cc-hero h1, .ttp-cc-title {
  font-size: clamp(1.9rem, 1.2rem + 5vw, 4rem);
  line-height: 1.08;
  word-break: break-word;
}
.ttp-cc-hero p, .ttp-cc-sub {
  font-size: clamp(0.98rem, 0.9rem + 1vw, 1.25rem);
  max-width: 60ch;
  margin-left: auto; margin-right: auto;
}
@media (max-width: 600px) {
  .ttp-cc-hero { padding-top: 1.4rem; padding-bottom: 0.5rem; }
}

/* ---------------------------------------------------------------
   4. Header — single tidy row on every width
   --------------------------------------------------------------- */
@media (max-width: 900px) {
  .ttp-headbar-inner { gap: 8px; padding: 6px var(--ttp-gutter); }
  .ttp-branding .site-title { font-size: clamp(0.95rem, 0.8rem + 2.5vw, 1.25rem); }
}
@media (max-width: 380px) {
  .ttp-headbar-actions { gap: 3px; }
  .ttp-iconbtn { height: 36px; min-width: 36px; padding: 0 5px; }
  .ttp-branding .site-title { font-size: 0.92rem; }
}

/* ---------------------------------------------------------------
   5. Workspace (textarea + counts + actions)
   --------------------------------------------------------------- */
@media (max-width: 600px) {
  .ttp-workspace { padding: 0.75rem; border-radius: 12px; }
  .ttp-workspace .ttp-textarea { min-height: 180px; }
  .ttp-workspace-bar { gap: 8px; }
  .ttp-counts { gap: 10px; font-size: 0.8rem; width: 100%; order: 2; }
  .ttp-workspace-actions { order: 1; }
}

/* ---------------------------------------------------------------
   6. Calculator suites
   --------------------------------------------------------------- */
@media (max-width: 600px) {
  .ttp-calc { max-width: 100%; }
  .ttp-calc-suite { overflow-x: hidden; }
  .ttp-suite-tabs { flex-wrap: wrap; gap: 6px; }
  .ttp-suite-tab { flex: 1 1 auto; text-align: center; }
  .ttp-calc-card { padding: 14px; }
  .ttp-calc-form { gap: 8px; }
  .ttp-calc-form label { width: 100%; }
  .ttp-calc-keys { gap: 6px; }
  /* Single column on the narrowest screens */
  .ttp-suite-panel.active { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   7. Footer
   --------------------------------------------------------------- */
@media (max-width: 600px) {
  .ttp-footer-grid { grid-template-columns: 1fr; gap: 1.5rem; text-align: left; }
  .site-footer { padding: 2rem 0 1.5rem; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .ttp-footer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------
   8. Age calculator page
   --------------------------------------------------------------- */
@media (max-width: 600px) {
  .ttp-agepage-head h1 { font-size: clamp(1.6rem, 1.2rem + 4vw, 2.2rem); }
  .ttp-agecalc-unit b { font-size: clamp(1.8rem, 1.4rem + 5vw, 2.6rem); }
}

/* ---------------------------------------------------------------
   9. Blog / article typography
   --------------------------------------------------------------- */
.ttp-prose { max-width: 72ch; }
.ttp-prose h2 { font-size: clamp(1.3rem, 1.1rem + 1.2vw, 1.8rem); }
.ttp-prose p, .ttp-prose li { font-size: clamp(1rem, 0.96rem + 0.3vw, 1.12rem); line-height: 1.7; }
@media (max-width: 600px) {
  .ttp-prose { font-size: 1rem; }
}

/* ---------------------------------------------------------------
   10. Language menu — fit small screens, never overflow
   --------------------------------------------------------------- */
@media (max-width: 600px) {
  .ttp-lang-menu {
    position: fixed;
    left: 50%;
    right: auto;
    top: 64px;
    transform: translateX(-50%) translateY(-6px);
    width: min(340px, calc(100vw - 24px));
    max-height: 70vh;
  }
  .ttp-langswitch.open .ttp-lang-menu {
    transform: translateX(-50%) translateY(0);
  }
  html[dir="rtl"] .ttp-lang-menu { left: 50%; right: auto; }
}

/* ---------------------------------------------------------------
   11. Ultra-wide screens: cap content, center nicely
   --------------------------------------------------------------- */
@media (min-width: 2560px) {
  :root { --ttp-container: 1600px; }
}
@media (min-width: 3840px) {
  :root { --ttp-container: 2200px; }
  body { font-size: 20px; }
}

/* ---------------------------------------------------------------
   12. Landscape phones: tighten vertical rhythm
   --------------------------------------------------------------- */
@media (max-height: 480px) and (orientation: landscape) {
  .ttp-cc-hero { padding-top: 1rem; padding-bottom: 0.5rem; }
  .ttp-workspace .ttp-textarea { min-height: 120px; }
}

/* ---------------------------------------------------------------
   13. Related-cards / map grids stay fluid
   --------------------------------------------------------------- */
@media (max-width: 480px) {
  .ttp-age-related-grid { grid-template-columns: repeat(2, 1fr); }
  .ttp-cat-grid, .ttp-explore-grid { grid-template-columns: 1fr !important; }
}

/* ---------------------------------------------------------------
   14. Safari / iOS specific niceties
   --------------------------------------------------------------- */
@supports (-webkit-touch-callout: none) {
  .ttp-textarea, .ttp-input, input, select, textarea { font-size: 16px; }
}

/* Respect notches on modern iPhonesAndroid */
@supports (padding: max(0px)) {
  .ttp-headbar-inner {
    padding-left: max(var(--ttp-gutter), env(safe-area-inset-left));
    padding-right: max(var(--ttp-gutter), env(safe-area-inset-right));
  }
  .site-footer { padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }
}