/*
   Styles Made By Text Generator
   IMPROVED with accessibility, performance, and modern CSS—without removing features.
   - Keeps all existing classes/IDs intact.
   - Adds better focus states, reduced-motion support, print tweaks, and small utilities.
*/

/* ==========================================================================
   1) CSS Variables (Palette, spacing, motion)
   ========================================================================== */
:root {
  --color-text: #333333;
  --color-background: #F5F5F5;
  --color-dark-background: #111111;
  --color-light-gray: #EEEEEE;
  --color-border: #DDDDDD;
  --color-white: #FFFFFF;
  --color-footer-text: #AAAAAA;

  /* ↓ Darker brand tones for accessible white text */
  --color-green-primary: #2E7D32; /* AA with #fff */
  --color-green-hover:   #1B5E20; /* darker on hover */
  --color-blue-primary:  #1565C0; /* AA with #fff */
  --color-blue-hover:    #0D47A1; /* darker on hover */

  /* New, non-breaking tokens */
  --radius: 4px;
  --radius-lg: 8px;
  --focus: #6aa5ff;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --space: 10px;
  --space-lg: 20px;
  --maxw: 1200px;

  /* Motion */
  --motion-duration: 30s;
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root { --motion-duration: 0s; }
}

/* ==========================================================================
   2) Keyframes
   ========================================================================== */
@keyframes hero-scroll {
  0%   { background-position: 50% 0; }
  100% { background-position: 50% 750px; }
}
@-webkit-keyframes hero-scroll {
  0%   { background-position: 50% 0; }
  100% { background-position: 50% 750px; }
}
@-moz-keyframes hero-scroll {
  0%   { background-position: 50% 0; }
  100% { background-position: 50% 750px; }
}

/* ==========================================================================
   3) Defaults & Base
   ========================================================================== */
*, *:before, *:after {
  position: relative;
  font: inherit;
  line-height: inherit;
  color: inherit;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
*:focus { outline: 0; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius);
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body, div, h1, h2, p { display: block; }
a, b, span, input, button, textarea { display: inline-block; }
html, body { height: 100%; }
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 24px;
  color: var(--color-text);
  word-break: break-word;
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

div {
  width: initial;
  overflow: hidden;
}
h1, h2, h3 {
  font-weight: bold;
  text-transform: capitalize;
}
h1 { font-size: 42px; line-height: 52px; }
h2 { font-size: 30px; line-height: 40px; }
h3 { font-size: 20px; line-height: 30px; }

p:first-letter { text-transform: uppercase; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
b, button { font-weight: bold; }

input, button, textarea {
  width: 100%;
  padding: var(--space);
  border: none;
  border-radius: var(--radius);
}
input, textarea {
  background: var(--color-light-gray);
  border: 1px solid var(--color-border);
}
input:focus, textarea:focus {
  background: #E8E8E8;
}
button {
  text-transform: capitalize;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}
button:active {
  transform: translateY(0.5px);
}

/* Helpful utilities (non-breaking) */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
::selection {
  background: rgba(3,169,244,.18);
}

/* ==========================================================================
   4) Layout Helpers
   ========================================================================== */
.row {
  padding: 0;
  margin: -1%;
}
.row, .row:after {
  clear: both;
  zoom: 1;
}
.row:before,
.row:after {
  content: '';
  display: table;
}
.row > div {
  float: left;
  padding: 1%;
}
.row > .col1  { width: 8.33%; }
.row > .col2  { width: 16.66666%; }
.row > .col3  { width: 24.99%; }
.row > .col4  { width: 33.33%; }
.row > .col5  { width: 33.33%; } /* left as-is to avoid layout change */
.row > .col6  { width: 50%; }
.row > .col7  { width: 58.333%; }
.row > .col8  { width: 66.66666664%; }
.row > .col9  { width: 74.999997%; }
.row > .col10 { width: 83.33%; }
.row > .col11 { width: 91.666663%; }
.row > .col12 { width: 100%; }

.container {
  width: 80%;
  max-width: var(--maxw);
  margin: 0 auto;
}

/* Buttons (use darker brand colors above) */
.green-btn,
.blue-btn {
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}
.green-btn { background: var(--color-green-primary); }
.green-btn:hover { background: var(--color-green-hover); }
.blue-btn { background: var(--color-blue-primary); }
.blue-btn:hover { background: var(--color-blue-hover); }

/* ==========================================================================
   5) Header & Hero
   ========================================================================== */
#header,
#hero {
  background: var(--color-dark-background);
}
#header:before,
#hero:before,
#hero:after {
  content: '';
  display: block;
  position: absolute;
}

/* Baseline (no animation by default) */
#header:before,
#hero:before {
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.25;
  background-repeat: repeat;
  background-position: top left;
  background-attachment: fixed; /* smooth on desktop */
}

/* Enable animation only after JS adds .anim-ok (post-idle) */
.anim-ok #header:before,
.anim-ok #hero:before {
  animation: hero-scroll var(--motion-duration) linear infinite;
  -webkit-animation: hero-scroll var(--motion-duration) linear infinite;
  -moz-animation: hero-scroll var(--motion-duration) linear infinite;
}

/* Respect user motion + small screens: never animate there */
@media (prefers-reduced-motion: reduce) {
  #header:before,
  #hero:before {
    animation: none !important;
    -webkit-animation: none !important;
    -moz-animation: none !important;
    background-attachment: scroll;
  }
}
@media (max-width: 769px) {
  #header:before,
  #hero:before {
    background-attachment: scroll;
  }
  .anim-ok #header:before,
  .anim-ok #hero:before {
    animation: none !important;
  }
}

/* *** Mobile perf win: drop the heavy PNG background entirely on small screens *** */
@media (max-width: 600px){
  #header:before,
  #hero:before {
    background-image: none !important;
  }
}

#hero:after {
  bottom: 0; left: 0;
  width: 100%;
  height: 80px;
  background-image: url('../img/hero.svg');
  background-position: bottom left;
  background-size: 100% 100%;
}

#header {
  padding: 20px 0;
}
#hero {
  padding: 100px 0 180px 0;
  overflow: hidden;         /* ensure pseudo-elements never extend layout */
}

#hero > .container > div > * {
  color: var(--color-white);
  text-align: center;
}
/* ↑ Increase contrast of hero tagline */
#hero > .container > div > p {
  margin: 10px 0 0 0;
  font-size: 20px;
  line-height: 30px;
  opacity: 0.65;
}

/* Background image hook (kept) */
#hero .hero-background-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
#hero > .container {
  z-index: 1;
  position: relative;
}

/* ==========================================================================
   6) Main Content
   ========================================================================== */
#main > div {
  padding: 60px 0;
  border-bottom: 1px solid var(--color-border);
}
#main > div:last-of-type {
  border: none;
}

/* Statistics block */
#main > #statistics > div > div > * {
  text-align: center;
}
#main > #statistics > div > div > span {
  display: block;
  text-transform: capitalize;
  font-weight: bold;
  font-size: 24px;
  line-height: 34px;
}
#main > #statistics > div > div > p {
  margin: 10px 0 0 0;
  font-size: 18px;
  line-height: 28px;
}
#main > #statistics > div > div > span > b {
  color: var(--color-green-primary);
}

/* Generator list cards */
#main > #character-sets > div > div > a {
  display: block;
  padding: 20px 10px;
  text-decoration: none;
  background: var(--color-light-gray);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .08s ease, box-shadow .12s ease;
}
#main > #character-sets > div > div > a:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
#main > #character-sets > div > div > a > span {
  display: block;
  text-transform: capitalize;
  font-weight: bold;
  font-size: 20px;
  line-height: 30px;
}
#main > #character-sets > div > div > a > p {
  margin: 10px 0 0 0;
}
#main > #character-sets > div > div > a:hover > span {
  color: var(--color-green-primary);
}
#main > #character-sets > div > div > a > * {
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* Generator textareas */
#main > #generation-form > div > div > textarea {
  min-width: 100%;
  max-width: 100%;
  min-height: 240px;
  max-height: 240px;
}
#text-output[readonly] {
  cursor: text;
}

/* ==========================================================================
   7) Footer
   ========================================================================== */
#footer {
  background: var(--color-dark-background);
}
#footer > div:nth-of-type(1) {
  padding: 60px 0;
}
#footer > div:nth-of-type(2) {
  padding: 20px 0;
  background: rgba(0, 0, 0, 0.2);
  text-align: center;
}
#footer h3 {
  color: var(--color-white);
  text-transform: capitalize;
}
#footer a,
#footer p {
  color: var(--color-footer-text);
  text-transform: capitalize;
}
/* ↑ Ensure the legal line does NOT get low-opacity */
#footer > div:nth-of-type(2) > div > div > p {
  opacity: 1 !important;
  color: #CCCCCC !important; /* strong contrast on #111 */
}

#footer > div:nth-of-type(1) > div > div > div > * {
  display: block;
  float: left;
  clear: left;
  margin: 10px 0;
}
#footer > div:nth-of-type(1) > div > div > div > *:first-child {
  margin-top: 20px;
}
#footer > div:nth-of-type(1) > div > div > div > *:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   8) Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .container { width: 88%; }
}
@media (max-width: 800px) {
  #footer > div:nth-of-type(2) {
    display: none;
  }

  #header > div > div,
  #statistics > div > div,
  #character-sets > div > div,
  #generation-form > div > div,
  #footer > div:first-of-type > div > div {
    width: 100%;
  }

  #header > div > div:first-of-type,
  #main > #character-sets > div > div.col12,
  #footer > div:first-of-type {
    text-align: center;
  }

  #statistics > div > div,
  #footer > div:first-of-type,
  #footer > div:first-of-type > div > div {
    margin: 30px 0;
  }

  #footer > div:first-of-type > div > div > div > * {
    float: none;
    clear: none;
  }
}

/* ==========================================================================
   9) Print (clean output)
   ========================================================================== */
@media print {
  #header:before,
  #hero:before,
  #hero:after {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  a {
    text-decoration: none;
    color: #000;
  }
}

/* =========================
   FAQ section (page bottom)
   ========================= */
#page-faq {
  padding: 60px 0;
}

/* Center the whole FAQ block */
#page-faq .col12 {
  float: none;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

#page-faq h2 {
  text-align: center;
  margin-bottom: 20px;
}

#page-faq .faq-list {
  text-align: left;
}

/* Card-like Q/A items */
#page-faq .faq-item {
  border: 1px solid var(--color-border);
  background: var(--color-white);
  border-radius: 6px;
  padding: 12px 16px;
  margin: 10px 0;
}

/* Optional: improve summary hit area and caret look */
#page-faq .faq-item > summary {
  cursor: pointer;
  list-style: none;
}
#page-faq .faq-item > summary::-webkit-details-marker {
  display: none;
}
#page-faq .faq-item > summary:before {
  content: "▸";
  display: inline-block;
  width: 1em;
  transition: transform .15s ease;
  margin-right: .25em;
}
#page-faq .faq-item[open] > summary:before {
  transform: rotate(90deg);
}

/* Responsive: let it stretch on small screens */
@media (max-width: 800px) {
  #page-faq .col12 {
    max-width: 100%;
    padding: 0 10px;
  }
}

/* remove default marker for a cleaner look (optional) */
#page-faq summary::-webkit-details-marker {
  display: none;
}
#page-faq summary {
  cursor: pointer;
  font-weight: bold;
}

/* =========================
   Generator action buttons
   ========================= */
#generation-form .btn-row {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:16px auto 0;
}

/* override the global `button { width:100% }` */
#generation-form .btn-row .btn,
#generation-form .btn-row button {
  width:auto;
  min-width:160px;
  padding:12px 22px;
  border-radius:6px;
  font-weight:700;
  color:#fff;
  text-align:center;
}

/* colors (use accessible variables) */
#generation-form .btn--generate { background:var(--color-green-primary); }
#generation-form .btn--generate:hover { background:var(--color-green-hover); }

#generation-form .btn--clear { background:var(--color-blue-primary); }
#generation-form .btn--clear:hover { background:var(--color-blue-hover); }

/* purple for Copy */
#generation-form .btn--copy,
#generation-form .copy-btn { background:#7b3fe4; }
#generation-form .btn--copy:hover,
#generation-form .copy-btn:hover { background:#5E35B1; } /* darker for contrast */

/* stack nicely on small screens */
@media (max-width: 640px){
  #generation-form .btn-row .btn {
    flex:1 1 100%;
  }
}

/* Toast (copy feedback) */
#tg-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(10px);
  background: rgba(0,0,0,.9);
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 9999;
}
#tg-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Description above generator form */
#generation-form .style-h2 {
  text-align:center;
  margin: 18px auto 6px;
  font-size:28px;
  line-height:1.3;
}
#generation-form .form-desc {
  text-align:center;
  max-width:960px;
  margin: 0 auto 22px;
  font-size:16px;
  line-height:26px;
  color:#2B2B2B;
  opacity:1;
}

/* Small override kept */
.row>.col6 { width:50%; }

/* generator action row helper */
.btn-row {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.copy-status {
  flex-basis:100%;
  text-align:center;
  margin-top:6px;
  min-height:1em;
  font-size:13px;
  opacity:.85;
}

/* Consent */
#contact-form .captcha-consent .consent {
  top:16px;
  left:45px;
  position:relative;
  padding-right:46px;
}

/* SEO-long content */
#seo-long {
  margin:24px 0 12px;
}
#seo-long p,
#seo-long li {
  font-size:.95rem;
  line-height:1.6;
}
#seo-long h3 {
  font-size:1.125rem;
  margin:12px 0 8px;
}
#seo-long h4 {
  font-size:1rem;
  margin:10px 0 6px;
}
/* Link */
#seo-long p a {
  color:#0322ec;
  font-size:16px;
  padding-left:1px;
  display:inline-block;
}

/* ==========================================================================
   Performance helpers
   ========================================================================== */
/* Virtualize below-the-fold sections to reduce initial rendering cost */
#character-sets,
#page-faq,
#seo-long {
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}

/* ==========================================================================
   AdSense slots – CLS-safe reserved space
   ========================================================================== */

/* Ad slot wrapper - MUST be full width for responsive ads */
.tg-ad-container {
  padding: 0 !important;
  border: none !important;
}
.tg-ad-slot {
  width: 100%;                   /* Full viewport width */
  max-width: 100%;               /* No restrictions */
  margin: 20px auto;             /* Center horizontally with auto margins */
  padding: 0;                    /* No padding that reduces width */
  text-align: center;            /* Center inline/ad content */
}

/* Ensure AdSense <ins> elements have measurable width and are centered */
ins.adsbygoogle {
  display: block !important;
  width: 100% !important;
  margin: 0 auto !important;     /* Center the ad unit */
  text-align: center !important; /* Center ad content */
}

.tg-ad-slot .tg-ad {
  width: 100%;
  min-height: 280px;   /* Reserve space to prevent layout shift */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.tg-ad-slot .tg-ad ins.adsbygoogle {
  min-height: 280px;   /* Match parent min-height */
}

@media (min-width: 768px) {
  .tg-ad-slot .tg-ad {
    min-height: 320px; /* Desktop: larger ads */
  }
  .tg-ad-slot .tg-ad ins.adsbygoogle {
    min-height: 320px;
  }
}

/* Extra spacing for bottom multiplex */
.tg-ad-slot--bottom .tg-ad {
  margin-top: 40px;
  margin-bottom: 20px;
  /* Multiplex ads need block display and NO min-height */
  display: block;
  min-height: 0;
}

/* Multiplex ad ins element also needs NO min-height */
.tg-ad-slot--bottom .tg-ad ins.adsbygoogle {
  min-height: 0;
}

/* Prevent CLS by containing ad layout changes */
.tg-ad-slot .adsbygoogle,
.ad-slot--banner .adsbygoogle {
  will-change: contents;
}

/* Banner at bottom of page (home + tools) */
.ad-slot--banner .adsbygoogle {
  display: block;
  width: 100%;
  min-height: 320px;
}

@media (min-width: 768px) {
  .ad-slot--banner,
  .ad-slot--banner .adsbygoogle {
    min-height: 336px;        /* 250–300px works well for desktop banners */
  }
}

/* Responsive banner container hook at bottom */
#responsive-banner-container .adsbygoogle {
  display: block;
  width: 100%;
  min-height: 320px;
}

@media (min-width: 768px) {
  #responsive-banner-container .adsbygoogle {
    min-height: 336px;
  }
}