/*
Theme Name: BlankSlate
Theme URI: https://opencollective.com/blankslate
Author: Web Guy
Author URI: https://opencollective.com/blankslate#section-contributors
Description: Donate: https://opencollective.com/blankslate. Learn: https://blankslate.me/. BlankSlate is the definitive WordPress boilerplate starter theme. I've carefully constructed the most clean and minimalist theme possible for designers and developers to use as a base to build websites for clients or to build completely custom themes from scratch. Clean, simple, unstyled, semi-minified, unformatted, and valid code, SEO-friendly, jQuery-enabled, no programmer comments, standardized and as white label as possible, and most importantly, the CSS is reset for cross-browser-compatability, with no intrusive visual CSS styles added whatsoever. A perfect skeleton theme. For support and suggestions, go to: https://github.com/webguyio/blankslate/issues. Thank you.
Tags: accessibility-ready, one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Version: 2026
Requires at least: 5.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: blankslate

BlankSlate WordPress Theme 2011-2026
BlankSlate is distributed under the terms of the GNU GPL
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{appearance:none;border-radius:0}input[type="search"]{appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}


/* ==============================
   HEADER
============================== */

.textro-header {
  padding: 10px 20px 10px;
  border-bottom: 1px solid #e5e7eb;
}

.textro-header-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.textro-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.textro-search-bar {
  position: relative;
  margin-top: 24px;
}

.textro-search-bar input {
  width: 100%;
  padding: 18px 56px 18px 20px;
  font-size: 18px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.18);
  outline: 1px solid rgba(0,0,0,0.18);
  outline-offset: 0;
  background: #ffffff;
  transition:
    outline-offset 300ms cubic-bezier(0.19,1,0.22,1),
    outline-color 300ms cubic-bezier(0.19,1,0.22,1);
}

.textro-search-bar input:focus {
  outline-offset: 8px;
  outline-color: rgba(0,0,0,0);
}

.textro-search-bar button {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

/* DARK MODE */
@media (prefers-color-scheme: dark) {
  .textro-search-bar input {
    background: #111827;
    border-color: rgba(255,255,255,0.25);
    color: #e5e7eb;
  }
}

@media (max-width: 768px) {
	
  .textro-header {
    flex-wrap: wrap;
  }

  .textro-header-inner {
    display: flex;
    flex-direction: column;
  }

  .textro-header-top {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }


  .textro-controls {
    justify-content: center;
    align-items: center;
    width: 100%;
  }

}

  .textro-search-bar {
    margin-top: 12px;
  }

  .textro-search-bar input {
    font-size: 16px;
    padding: 16px 52px 16px 18px;
  }

}


/* =========================
   LANGUAGE SELECTOR
========================= */

.lang-wrap select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding: 12px 42px 12px 16px;
  font-size: 14px;
  font-weight: 500;

  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.18);
  background: #ffffff;
  color: #111827;

  cursor: pointer;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23111827'%3E%3Cpath d='M5 7l5 5 5-5H5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;

  transition:
    outline-offset 300ms cubic-bezier(0.19,1,0.22,1),
    outline-color 300ms cubic-bezier(0.19,1,0.22,1);
}

.lang-wrap select:focus {
  outline: 0px solid rgba(0,0,0,0.18);
  outline-offset: 6px;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .lang-wrap select {
    background: #111827;
    color: #e5e7eb;
    border-color: rgba(255,255,255,0.25);

    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23e5e7eb'%3E%3Cpath d='M5 7l5 5 5-5H5z'/%3E%3C/svg%3E");
  }
}


/* BRAND */

.brand {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.brand-name {
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: #111827;
}

.divider {
  width: 1px;
  height: 64px;
  background-color: #e5e7eb;
}

.brand-tagline {
  max-width: 325px;
  font-size: 16px;
  line-height: 1.4;
  justify-content: center;
  white-space: normal;
  word-break: normal;
  color: #4b5563;
  display: flex;
  flex-direction: column;
}



.brand-name a,
.brand-name a:visited,
.brand-name a:hover,
.brand-name a:active,
.brand-name a:focus {
  color: inherit;
  text-decoration: none;
  outline: none;
}


/* SEARCH */

.textro-search {
  margin-top: 26px;
}

.textro-search input {
  width: 100%;
  max-width: 680px;
  padding: 16px 18px;
  font-size: 16px;
  border-radius: 14px;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
  outline: none;
}

.textro-search input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* ==============================
   MOBILE
============================== */

@media (max-width: 640px) {

  .brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .divider {
    display: none;
  }

  .brand-name {
    font-size: 40px;
  }

  .brand-tagline {
    font-size: 15px;
  }

  .textro-search input {
    max-width: 100%;
  }
}

/* ===== SINGLE TOOL LAYOUT ===== */

.textro-single {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 30px;
  color: #111827;
}

/* INTRO */
.textro-intro {
  max-width: 100%;
  margin-bottom: 20px;
}

.textro-title {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 14px;
}

.textro-essay {
  font-size: 18px;
  line-height: 1.75;
  color: #374151;
  max-width: 100%;
}

/* TOOL AREA */
.textro-tool {
  margin-top: 10px;
}

/* INPUT / OUTPUT */
.textro-io {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.textro-io textarea {
  width: 100%;
  min-height: 260px;
  padding: 22px;
  font-size: 17px;
  line-height: 1.6;
  resize: vertical;
  box-sizing: border-box;

  /* lighter background with horizontal lines only */
  background:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    #fafcff;

  background-size: 100% 24px;

  color: #111;

  border: 2px solid #aeb6c2;
  border-radius: 14px;

  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.7),
    inset 0 0 18px rgba(0,0,0,0.05),
    0 4px 10px rgba(0,0,0,0.05);

  position: relative;
}

/* MOBILE */
@media (max-width:768px){
  .textro-io{
    grid-template-columns:1fr;
  }
}

/* ===== PRIMARY TOOL ACTION BUTTON ===== */

.textro-actions {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}


.textro-btn {
  margin: 0 8px;
  background: #ffffff;
  color: #111827;
  font-size: 18px;
  font-weight: 600;
  padding: 16px 40px;

  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.18);

  outline: 1px solid rgba(0, 0, 0, 0.18);
  outline-offset: 0px;

  cursor: pointer;
  transition:
    outline-offset 450ms cubic-bezier(0.19, 1, 0.22, 1),
    outline-color 450ms cubic-bezier(0.19, 1, 0.22, 1);
}

.textro-btn:hover {
  outline-offset: 8px;
  outline-color: rgba(0, 0, 0, 0);
  background-color: #ffffff; /* same as default */
}

.textro-btn:active {
  outline-offset: 2px; /* subtle press effect without shrinking text */
}


.textro-input {
  font-size: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.18);
  outline: 1px solid rgba(0,0,0,0.18);
  outline-offset: 0;
  background: #ffffff;
  transition:
    outline-offset 300ms cubic-bezier(0.19,1,0.22,1),
    outline-color 300ms cubic-bezier(0.19,1,0.22,1);
}

.textro-input:focus {
  outline-offset: 6px;
  outline-color: rgba(0,0,0,0);
}



/* =========================
   OPTION CONTROLS (RADIO / CHECKBOX)
========================= */

.textro-options {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.textro-option {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;

  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #ffffff;

  font-size: 15px;
  cursor: pointer;
  user-select: none;

  transition:
    background-color 200ms ease,
    border-color 200ms ease;
}

/* Native inputs */
.textro-option input[type="checkbox"],
.textro-option input[type="radio"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #111827;
}

/* Hover */
.textro-option:hover {
  background-color: #f9fafb;
}

/* =========================
   DARK MODE SUPPORT
========================= */

@media (prefers-color-scheme: dark) {
  .textro-option {
    background: #111827;
    border-color: rgba(255, 255, 255, 0.25);
    color: #e5e7eb;
  }

  .textro-option:hover {
    background: #1f2937;
  }

  .textro-option input[type="checkbox"],
  .textro-option input[type="radio"] {
    accent-color: #e5e7eb;
  }
}



/* AD */
.textro-ad-space {
  margin: 40px 0;
  min-height: 90px;
  background: #ffffff;
  border-radius: 12px;
}

/* SHARE */


.share-btn {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  border: none;
  cursor: pointer;
}

.share-btn.twitter { background:#1da1f2; color:#fff; }
.share-btn.facebook { background:#1877f2; color:#fff; }
.share-btn.reddit { background:#ff4500; color:#fff; }
.share-btn.copy { background:#374151; color:#fff; }

.textro-share {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}


/* MOBILE */
@media (max-width: 768px) {
  .textro-io {
    grid-template-columns: 1fr;
  }
}



/* ==============================
   FOOTER
============================== */



.textro-footer {
  margin-top: 0px;
  background: #f9fafb;
  padding: 25px 20px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

.textro-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}


/* TOOLS */

.textro-list-tools {
  margin: 40px auto;
  padding: 0 20px;
}

.textro-list-tools h2 {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 24px;
  text-align: center;
}

.textro-list-tool-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.textro-list-tool-links a {
  display: block;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  color: #1f2937;
  text-decoration: none;
  transition: all .2s ease;
}

.textro-list-tool-links a:hover {
  border-color: #2563eb;
  transform: translateY(-2px);
}

/* DARK MODE */

.dark-mode .textro-list-tool-links a,
.dark .textro-list-tool-links a {
  color: #fff;
  border-color: #374151;
}

/* DIVIDER */

.textro-list-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 40px 0;
}

/* LEGAL */

.textro-footer-legal {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.textro-footer-links {
  margin-bottom: 10px;
}

.textro-footer-links a {
  margin: 0 10px;
  font-size: 14px;
  color: #374151;
  text-decoration: none;
}

.textro-footer-links a:hover {
  text-decoration: underline;
}

.textro-footer-copy {
  font-size: 13px;
  color: #6b7280;
}


/* =========================
   TOOL ACTION RESPONSIVENESS
   LOCKED
========================= */

.textro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Inputs, selects, buttons */
.textro-actions input,
.textro-actions select,
.textro-actions button {
  max-width: 100%;
}

/* Text inputs stretch nicely */
.textro-actions input[type="text"],
.textro-actions input:not([type]) {
  flex: 1 1 180px;
}

/* Buttons stay tappable */
.textro-actions .textro-btn {
  flex: 0 0 auto;
}

/* Radios & checkboxes don't squish */
.textro-actions label {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* =========================
   CASE CONVERTER FIX
========================= */

.case-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* =========================
   404 PAGE – FIXED DARK MODE
========================= */

body.error404 .textro-404 {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 50px;
  text-align: center;
  color: #111827;
}

body.error404 .textro-404 h1 {
  font-size: 96px;
  font-weight: 800;
  margin-bottom: 12px;
}

body.error404 .textro-404 h2 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 14px;
}

body.error404 .textro-404 p {
  font-size: 16px;
  margin-bottom: 50px;
  color: #4b5563;
}

/* 🔥 REAL DARK MODE (toggle-based) */
body.dark.error404 .textro-404 {
  color: #e5e7eb;
}

body.dark.error404 .textro-404 p {
  color: #9ca3af;
}

/* ==============================
   PAGE CONTENT (About, Privacy, Terms)
============================== */

.textro-page {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 20px 30px;
  color: #111827;
  line-height: 1.6;
}

/* DARK MODE */
body.dark .textro-page {
  color: #e5e7eb;
}


.textro-page a {
  color: #2563eb;
}

body.dark .textro-page a {
  color: #93c5fd;
}

body.dark .textro-page h1,
body.dark .textro-page h2,
body.dark .textro-page p {
  color: #f9fafb;
}

/* ==============================
   SEARCH PAGE
============================== */

.textro-search-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 20px 30px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

.textro-search-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #111827;
}

.textro-search-item {
  display: block;
  text-decoration: none;
  margin-bottom: 14px;
}

.textro-search-item h3 {
  margin: 0;
  font-size: 20px;
  color: #1d4ed8;
}

.textro-search-item p,
.textro-search-empty {
  margin: 4px 0 12px;
  color: #374151;
}

/* ==============================
   DARK MODE
============================== */

body.dark .textro-search-title,
body.dark .textro-share span,
body.dark .textro-search-page p {
  color: #e5e7eb;
}
body.dark .textro-search-item h3 {
  color: #60a5fa; /* brighter blue */
}


/* ==============================
   CATEGORY PAGE
============================== */

.textro-category-description {
  margin: 4px 0 20px;
  color: #374151;
}

/* ==============================
   DARK MODE
============================== */

body.dark .textro-category-description {
  color: #d1d5db;
}

body.dark .textro-search-item h3 {
  color: #60a5fa;
}

body.dark .textro-search-item:hover h3 {
  color: #93c5fd;
}

/* ==============================
   BREADCRUMBS
============================== */

.textro-breadcrumbs {
  margin-bottom: 20px;
}

.textro-breadcrumbs ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.textro-breadcrumbs li {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 20px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #4b5563;
  position: relative;
}

.textro-breadcrumbs li:not(:last-child) {
  margin-right: 40px;
}

.textro-breadcrumbs li a {
  text-decoration: none;
  color: #4b5563;
  position: relative;
  transition: color .2s ease;
}

/* Angled arrow */
.textro-breadcrumbs li:not(:last-child) a::after {
  content: '';
  width: 16px;
  height: 16px;
  border-color: currentColor;
  border-style: solid;
  border-width: 1px 1px 0 0;
  position: absolute;
  right: -25px;
  top: 2px;
  transform: rotate(45deg) skew(10deg, 10deg);
  transition: all .15s ease;
}

/* Hover animation */
.textro-breadcrumbs li:not(:last-child) a:hover::after {
  right: -20px;
  transform: rotate(45deg) skew(-10deg, -10deg);
}

.textro-breadcrumbs li a:hover {
  color: #1d4ed8;
}

/* Current page */
.textro-breadcrumbs li span {
  color: #111827;
  cursor: default;
}

/* ==============================
   DARK MODE
============================== */

body.dark .textro-breadcrumbs li,
body.dark .textro-breadcrumbs li a {
  color: #9ca3af;
}

body.dark .textro-breadcrumbs li a:hover {
  color: #60a5fa;
}

body.dark .textro-breadcrumbs li span {
  color: #f3f4f6;
}

@media (max-width: 768px) {

  /* Kill desktop arrow */
  .textro-breadcrumbs li:not(:last-child) a::after {
    display: none !important;
  }

  /* Remove desktop spacing */
  .textro-breadcrumbs li {
    margin-right: 0 !important;
  }

  .textro-breadcrumbs li a {
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  /* Mobile layout */
  .textro-breadcrumbs ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 10px 0;
    padding: 0;
  }

  .textro-breadcrumbs li {
    font-size: 12.5px;
    line-height: 1.4;
  }

  /* Mobile separator */
  .textro-breadcrumbs li + li::before {
    content: "›";
    margin: 0 6px;
    color: #9ca3af;
  }

}

.textro-section h2,
.textro-section h3,
.textro-section p {
  color: #374151 !important;
}

.home-intro p,
.home-seo p {
  color: #374151 !important;
}

.home-intro h2,
.home-seo h2 {
  color: #111827 !important;
}



/* CATEGORY SECTION */
/* grid */

.textro-category-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
margin-top:25px;
}

/* cards */

.textro-category-card{
display:block;
padding:22px;
border-radius:10px;
text-decoration:none;
transition:all .25s ease;
border:1px solid rgba(0,0,0,0.08);
background:#ffffff;
}

.textro-category-card:hover{
transform:translateY(-4px);
box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

.textro-category-card h3{
margin:10px 0 6px 0;
font-size:18px;
}

.textro-category-card p{
font-size:14px;
opacity:0.8;
line-height:1.5;
}

.cat-icon{
font-size:26px;
}

/* DARK MODE */

body.dark-mode .textro-category-card{
background:#1f1f1f;
border:1px solid rgba(255,255,255,0.08);
}

body.dark-mode .textro-category-card p{
opacity:0.85;
}

.textro-note{
margin-top:10px !important;
padding:14px 16px;
border-radius:8px;
background:#f9fafb;
border:1px solid #e5e7eb;
font-size:14px;
line-height:1.6;
}

/* =========================
   NOTE - DARK MODE
========================= */

body.dark .textro-note{
background:#1b2638;          /* same card tone as info boxes */
border:1px solid #2e3d55;    /* subtle blue border */
color:#d7deea;               /* readable text */
}

/* =========================
   HOW + USE CASES ROW
========================= */

.textro-info-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
margin-top:40px;
margin-bottom:40px;
}


/* =========================
   CARD STYLE
========================= */

.textro-how,
.textro-use-cases{
background:#fafafa;
border:1px solid #e8e8e8;
border-radius:12px;
padding:24px 26px;
box-shadow:0 2px 6px rgba(0,0,0,0.04);
line-height:1.7;
position:relative;
transition:all .25s ease;
}


/* subtle premium hover */

.textro-how:hover,
.textro-use-cases:hover{
box-shadow:0 8px 20px rgba(0,0,0,0.08);
transform:translateY(-2px);
}


/* =========================
   HEADINGS
========================= */

.textro-how h2,
.textro-use-cases h2,
.textro-faq h2{
font-size:24px;
font-weight:700;
margin-bottom:16px;
}


/* =========================
   PARAGRAPHS
========================= */

.textro-how p,
.textro-use-cases p,
.textro-faq p{
margin-bottom:14px;
line-height:1.7;
}


/* =========================
   LISTS
========================= */

.textro-use-cases ul,
.textro-how ul{
padding-left:20px;
margin-top:10px;
}

.textro-use-cases li,
.textro-how li{
margin-bottom:8px;
}


/* =========================
   CODE INPUT EXAMPLES
========================= */

.textro-how code{
background:#f3f3f3;
padding:4px 7px;
border-radius:6px;
font-family:monospace;
font-size:14px;
}


/* =========================
   FAQ SECTION
========================= */

.textro-faq{
margin-top:40px;
max-width:1150px;
}


.textro-faq h3{
font-size:18px;
font-weight:600;
margin-top:24px;
margin-bottom:6px;
}


/* FAQ divider lines */

.textro-faq h3{
padding-top:16px;
border-top:1px solid #eeeeee;
}

.textro-faq h3:first-of-type{
border-top:none;
padding-top:0;
}

/* =========================
   FAQ SECTION - DARK MODE FIX
========================= */

/* Make FAQ section text readable in dark mode */
body.dark .textro-faq,
body.dark .textro-faq-content {
    color: #ffffff !important; /* force white text for headings and content */
}

/* Headings inside FAQ */
body.dark .textro-faq h3 {
    color: #ffffff !important;
    border-top: 1px solid #555555; /* subtle divider visible in dark mode */
}

body.dark .textro-faq h3:first-of-type {
    border-top: none;
    padding-top: 0;
}

/* Paragraphs / answers inside FAQ */
body.dark .textro-faq p,
body.dark .textro-faq-content p {
    color: #dddddd !important; /* slightly lighter for readability */
}


/* =========================
   OPTIONAL PREMIUM TOUCHES
========================= */

/* highlight bullet lists */

.textro-use-cases li strong{
font-weight:600;
}


/* slightly nicer text rendering */

.textro-how,
.textro-use-cases,
.textro-faq{
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
color:#222;
}

.textro-how,
.textro-use-cases{
word-wrap:break-word;
overflow-wrap:break-word;
}

.textro-how code{
background:#f3f3f3;
padding:4px 7px;
border-radius:6px;
font-family:monospace;
font-size:14px;
white-space:nowrap;
}


.textro-how:hover,
.textro-use-cases:hover{
box-shadow:0 10px 24px rgba(0,0,0,0.08);
transform:translateY(-3px);
}

/* =========================
   HOW + USE CASES - DARK MODE
========================= */

body.dark .textro-how,
body.dark .textro-use-cases{
background:#1b2638;          /* dark blue card */
border:1px solid #2e3d55;    /* subtle blue border */
color:#e5eaf3;               /* readable light text */
}


/* headings */

body.dark .textro-how h2,
body.dark .textro-use-cases h2{
color:#ffffff;
}


/* paragraphs */

body.dark .textro-how p,
body.dark .textro-use-cases p{
color:#cfd7e6;
}


/* list items */

body.dark .textro-how li,
body.dark .textro-use-cases li{
color:#cfd7e6;
}


/* code examples */

body.dark .textro-how code{
background:#24324a;
color:#e8edf6;
border:1px solid #31425e;
}


/* hover effect stays subtle */

body.dark .textro-how:hover,
body.dark .textro-use-cases:hover{
box-shadow:0 10px 24px rgba(0,0,0,0.35);
}

/* =========================
   MOBILE
========================= */

@media (max-width:768px){

.textro-info-row{
grid-template-columns:1fr;
gap:20px;
}

.textro-how,
.textro-use-cases{
padding:20px 20px;
}

.textro-how h2,
.textro-use-cases h2,
.textro-faq h2{
font-size:22px;
}

}

ul{ list-style: disc !important; padding-left: 22px !important; }

/* INPUT - light yellow */
textarea#tool_input {
  width: 100%;
  min-height: 260px;
  padding: 22px;
  font-size: 17px;
  line-height: 1.6;
  resize: vertical;
  box-sizing: border-box;

  background:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    #fffbe6;

  background-size: 100% 24px;

  color: #111;
  border: 2px solid #e6d89b;
  border-radius: 14px;

  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.7),
    inset 0 0 18px rgba(0,0,0,0.05),
    0 4px 10px rgba(0,0,0,0.05);
}


/* OUTPUT - light cyan */
textarea#tool_output {
  width: 100%;
  min-height: 260px;
  padding: 22px;
  font-size: 17px;
  line-height: 1.6;
  resize: vertical;
  box-sizing: border-box;

  background:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    #ecfbff;

  background-size: 100% 24px;

  color: #111;
  border: 2px solid #a9dbe6;
  border-radius: 14px;

  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.7),
    inset 0 0 18px rgba(0,0,0,0.05),
    0 4px 10px rgba(0,0,0,0.05);
}

/* DARK MODE INPUT */
body.dark textarea#tool_input {
  background:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    #1e2433;

  background-size: 100% 24px;

  color: #e8ecf4;
  border: 2px solid #3a435c;

  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.03),
    inset 0 0 18px rgba(0,0,0,0.6);
}


/* DARK MODE OUTPUT */
body.dark textarea#tool_output {
  background:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    #1b2c38;

  background-size: 100% 24px;

  color: #e8ecf4;
  border: 2px solid #2f6f86;

  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.03),
    inset 0 0 18px rgba(0,0,0,0.6);
}


/* SECTION BACKGROUND */
.dark .textro-section{
  background:#0f172a !important;
  border:1px solid #1f2937 !important;
}

/* CARDS */
.dark .textro-section > div > div{
  background:#111827 !important;
  border:1px solid #1f2937 !important;
  box-shadow:0 4px 14px rgba(0,0,0,0.6) !important;
}

/* TITLES */
.dark .textro-section h2{
  color:#f9fafb !important;
}

.dark .textro-section h3{
  color:#f3f4f6 !important;
}

/* TEXT */
.dark .textro-section p{
  color:#9ca3af !important;
}

/* STEP NUMBER */
.dark .textro-section div[style*="font-size:30px"]{
  color:#60a5fa !important;
}

/* FEATURED CARD DARK MODE */
.dark .textro-featured-card{
  background:#111827 !important;
  border:1px solid #1f2937 !important;
}

/* TITLE */
.dark .textro-featured-card h3{
  color:#60a5fa !important;
}

/* DESCRIPTION */
.dark .textro-featured-card p{
  color:#9ca3af !important;
}

/* HOVER SHADOW */
.dark .textro-featured-card:hover{
  box-shadow:0 8px 20px rgba(0,0,0,.6) !important;
}

/* CATEGORY GRID DARK MODE */

.dark .textro-category-card{
  background:#111827 !important;
  border:1px solid #1f2937 !important;
  color:#f9fafb !important;
}

/* TITLE */
.dark .textro-category-card h3{
  color:#60a5fa !important;
}

/* DESCRIPTION */
.dark .textro-category-card p{
  color:#9ca3af !important;
}

/* ICON */
.dark .textro-category-card .cat-icon{
  color:#f3f4f6 !important;
}

/* HOVER */
.dark .textro-category-card:hover{
  background:#0f172a !important;
  border-color:#334155 !important;
  box-shadow:0 8px 24px rgba(0,0,0,.6) !important;
}



/* RELATED TOOLS */
.textro-related-tools{
  margin-top:48px;
  padding-top:8px;
}

.textro-related-tools h2{
  margin-bottom:20px;
  font-size:28px;
  font-weight:800;
  line-height:1.2;
  color:#111827;
}

/* GRID */
.textro-related-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:18px;
}

/* CARD */
.textro-related-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:150px;
  padding:22px;
  border-radius:18px;
  background:#fff;
  border:1px solid #e5e7eb;
  text-decoration:none;
  transition:all .25s ease;
  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 8px 24px rgba(0,0,0,.05);
}

.textro-related-card:hover{
  transform:translateY(-4px);
  border-color:#d1d5db;
  box-shadow:
    0 10px 30px rgba(0,0,0,.08),
    0 20px 40px rgba(0,0,0,.06);
}

.textro-related-title{
  font-size:16px;
  font-weight:700;
  line-height:1.4;
  color:#111827;
  margin-bottom:12px;
}

.textro-related-desc{
  font-size:14px;
  line-height:1.6;
  color:#6b7280;
}

.textro-related-card::after{
  content:"→";
  margin-top:18px;
  font-size:18px;
  font-weight:700;
  color:#9ca3af;
  align-self:flex-end;
  transition:.25s;
}

.textro-related-card:hover::after{
  transform:translateX(4px);
  color:#111827;
}

/* LARGE TABLET */
@media (max-width:1200px){
  .textro-related-grid{
    grid-template-columns:repeat(4,1fr);
  }
}

/* TABLET */
@media (max-width:900px){
  .textro-related-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .textro-related-tools h2{
    font-size:24px;
  }
}

/* MOBILE */
@media (max-width:600px){
  .textro-related-grid{
    grid-template-columns:1fr;
  }

  .textro-related-card{
    min-height:auto;
  }
}

body.dark .textro-related-tools h2{
  color:#ffffff;
}

body.dark .textro-related-card{
  background:#1c2d42;
  border-color:rgba(255,255,255,0.08);
  box-shadow:
    0 1px 2px rgba(0,0,0,.25),
    0 8px 24px rgba(0,0,0,.30);
}

body.dark .textro-related-card:hover{
  border-color:rgba(255,255,255,0.15);
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    0 20px 40px rgba(0,0,0,.25);
}

body.dark .textro-related-title{
  color:#ffffff;
}

body.dark .textro-related-desc{
  color:rgba(255,255,255,0.75);
}

body.dark .textro-related-card::after{
  color:rgba(255,255,255,0.6);
}

body.dark .textro-related-card:hover::after{
  color:#ffffff;
}


/* Visually hidden but accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}