/* phrase-or-clause-checker.css
   FULL CSS (updated)
   - Keeps your existing layout + card styling
   - Works with <textarea class="vc-input"> (same styling as input)
   - Result states for this tool:
       vc-clause   (complete clause)
       vc-phrase   (phrase / not a clause)
       vc-error    (same)
   - Keeps the stacked results header + “pill” styling
*/

@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap");

/* Prevent page width "jump" when scrollbar appears/disappears */
html {
  scrollbar-gutter: stable;
}

/* Footer full width */
.footer {
  width: 100%;
}

/* Base styles */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  width: 100%;
  font-family: "Poppins", sans-serif;
}

/* Layout grid */
.parent-vowel {
  display: grid;
  grid-template-columns: 1fr 8fr 1fr 300px;
  grid-template-rows: 1fr;
  grid-column-gap: 2px;
  grid-row-gap: 2px;
}

.div1-vowel { grid-area: 1 / 1 / 2 / 2; }
.div2-vowel { grid-area: 1 / 3 / 2 / 4; }

.div3-vowel {
  grid-area: 1 / 2 / 2 / 3;
  padding: 0 12px;
  box-sizing: border-box;
}

.sidebar { grid-area: 1 / 4 / 2 / 5; }

.text {
  padding: 18px 16px;
  box-sizing: border-box;
  overflow-wrap: anywhere;

  /* align content width with checker box */
  max-width: 620px;
  width: 100%;
  margin: 0 auto;
}

.parent-vowel p {
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 300;
}

.parent-vowel p a { color: #1a73e8; }

.parent-vowel h2,
.parent-vowel h3 { margin-bottom: 20px; }

/* Constrain main column on large screens */
@media (min-width: 1200px) {
  .div3-vowel { max-width: 900px; }
}

/* 1200px: 2 columns (content + sidebar) */
@media (max-width: 1200px) {
  .parent-vowel {
    grid-template-columns: 1fr 300px;
    grid-template-rows: 1fr;
    grid-column-gap: 2px;
    grid-row-gap: 2px;
  }

  .div1-vowel,
  .div2-vowel { display: none; }

  .div3-vowel {
    grid-area: 1 / 1 / 2 / 2;
    padding: 0 12px;
  }

  .sidebar { grid-area: 1 / 2 / 2 / 3; }
}

/* 992px: stack */
@media (max-width: 992px) {
  .parent-vowel {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0;
    grid-row-gap: 0;
  }

  .div3-vowel {
    grid-area: 1 / 1 / 2 / 2;
    padding: 0 12px;
  }

  .sidebar { grid-area: auto; }
}

/* ----------------------------------------------------------
   Checker wrapper
---------------------------------------------------------- */
.vc-container {
  width: 100%;
  padding: 15px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #ffffff;
}

.vc-title {
  font-size: 32px;
  color: #333;
  margin: 0;
  text-align: center;
  padding: 10px 0;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .vc-container { padding: 15px; }
  .vc-title { font-size: 30px; }
}

@media (max-width: 400px) {
  .vc-container { padding: 10px; }
  .text { padding: 16px 14px; }
}

/* ----------------------------------------------------------
   Phrase or Clause Checker - Modern CSS
   (keeps existing .vowel-checker class for compatibility)
---------------------------------------------------------- */
.vowel-checker {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;

  width: 620px;
  max-width: 100%;
  margin: 0 auto;

  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #ffffff;
  box-shadow: 0 18px 50px rgba(2, 6, 23, 0.1);

  box-sizing: border-box;
  overflow-x: clip;
  contain: layout paint;
}

/* Ensure all children don’t exceed the card */
.vowel-checker,
.vowel-checker * {
  box-sizing: border-box;
  max-width: 100%;
}

/* Label: at least as big as lorem ipsum */
.vowel-checker label {
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 700;
  color: rgba(30, 41, 59, 0.9);
}

/* Input/textarea: typed text at least as big as lorem ipsum */
.vowel-checker .vc-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 18px;
  line-height: 1.35;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  background: rgba(248, 250, 252, 1);
  color: rgba(2, 6, 23, 0.9);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;

  /* textarea friendliness */
  resize: vertical;
}

.vowel-checker .vc-input::placeholder {
  color: rgba(30, 41, 59, 0.45);
  font-size: 18px;
}

.vowel-checker .vc-input:focus {
  background: #ffffff;
  border-color: rgba(37, 99, 235, 0.55);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
}

/* Buttons row (Check + Reset) */
.vowel-checker .vc-actions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  width: 100%;
}

.vowel-checker .vc-actions .vc-btn {
  margin-top: 0;
  flex: 1;
}

/* Button (primary) */
.vowel-checker .vc-btn {
  padding: 11px 14px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  color: #fff;

  background: linear-gradient(135deg, #2563eb, #7c3aed);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.2);

  transition: transform 160ms ease, filter 180ms ease, box-shadow 200ms ease;
  transform: scale(1);
}

.vowel-checker .vc-btn:hover {
  transform: scale(1.03);
  filter: brightness(1.07) saturate(1.08);
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.26);
}

.vowel-checker .vc-btn:active {
  transform: scale(0.99);
  filter: brightness(1.02);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.2);
}

.vowel-checker .vc-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.22),
    0 18px 40px rgba(37, 99, 235, 0.26);
}

/* Secondary Reset button */
.vowel-checker .vc-btn.vc-btn-secondary {
  background: rgba(2, 6, 23, 0.08);
  color: rgba(2, 6, 23, 0.9);
  box-shadow: none;
  border: 1px solid rgba(15, 23, 42, 0.14);
}

.vowel-checker .vc-btn.vc-btn-secondary:hover {
  transform: scale(1.03);
  filter: brightness(1.02);
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.10);
}

.vowel-checker .vc-btn.vc-btn-secondary:active {
  transform: scale(0.99);
}

/* Result box (18px like lorem ipsum) */
.vowel-checker .vc-result {
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(248, 250, 252, 1);
  color: rgba(2, 6, 23, 0.9);

  font-size: 18px;
  line-height: 1.6;

  width: 100%;
  min-width: 0;

  overflow-wrap: anywhere;
  word-break: break-word;
  overflow-x: clip;
}

.vowel-checker .vc-result div {
  min-width: 0;
  max-width: 100%;
}

/* Badge base style */
.vowel-checker .vc-result .vc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 10px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;

  border: 1px solid rgba(15, 23, 42, 0.14);
  background: #ffffff;
}

/* Code chips */
.vowel-checker .vc-result code {
  display: inline;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;

  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(226, 232, 240, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.35);
  font-size: 0.95em;
}

/* State tints (updated for Phrase/Clause) */
.vowel-checker .vc-result.vc-clause {
  border-color: rgba(34, 197, 94, 0.22);
  background: rgba(240, 253, 244, 0.9);
}

.vowel-checker .vc-result.vc-phrase {
  border-color: rgba(245, 158, 11, 0.22);
  background: rgba(255, 251, 235, 0.92);
}

.vowel-checker .vc-result.vc-error {
  border-color: rgba(239, 68, 68, 0.22);
  background: rgba(254, 242, 242, 0.92);
}

/* Optional hint */
.vowel-checker .vc-hint {
  margin-top: 10px;
  font-size: 13px;
  color: rgba(30, 41, 59, 0.72);
}

/* ==========================================================
   RESULTS HEADER LAYOUT (STACKED) + TEXT PILL
========================================================== */
/* JS typically injects inline flex; we override to stack like a list */
.vowel-checker .vc-result > div:first-child {
  display: block !important;
}

.vowel-checker .vc-result > div:first-child > div {
  display: block !important;
}

/* Bigger oval + space below it */
.vowel-checker .vc-result > div:first-child .vc-badge {
  font-size: 18px;
  padding: 12px 16px;
  margin-bottom: 12px;
}

/* Pill/border around: "Text typed: <text>" */
.vowel-checker .vc-result > div:first-child > div > div:first-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  border: 1px solid rgba(15, 23, 42, 0.22);
  background: rgba(255, 255, 255, 0.65);
  padding: 6px 12px;
  border-radius: 12px;
}

/* Space under the pill */
.vowel-checker .vc-result > div:first-child > div > div:first-child {
  margin-bottom: 10px;
}

/* Bigger emphasized text ONLY (inside the pill) */
.vowel-checker .vc-result > div:first-child > div > div:first-child strong {
  font-size: 24px;
  line-height: 1.1;
  margin: 0; /* keep tight inside pill */
}

/* Keep "Rule:" label normal size */
.vowel-checker .vc-result > div:first-child > div > div:nth-child(2) strong {
  font-size: inherit;
  line-height: inherit;
}

/* Keep other strong labels normal size */
.vowel-checker .vc-result > div:not(:first-child) strong {
  font-size: inherit;
  line-height: inherit;
}

/* ✅ Breakpoint moved from 520px to 640px */
@media (max-width: 640px) {
  .vowel-checker {
    padding: 16px;
    border-radius: 14px;
    width: 100%;
  }

  /* optional: stack buttons if desired */
  /* .vowel-checker .vc-actions { flex-direction: column; } */
}

/* ----------------------------------------------------------
   Menu background fix (put LAST so it wins)
---------------------------------------------------------- */
#header .list-link,
#menu .list-link {
  background: transparent !important;
}

#menu.activated .list-link {
  background: transparent !important;
}

#header .list-link:hover,
#menu .list-link:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  border-radius: 8px;
}