/* Matches the legacy site's font stack (linguarudoDefault20250619.css / linguarudoHome20250612.css
   both set this on html/body) - without it every page renders in the browser's generic system
   font instead of Linguarudo's actual look. */
/* overflow-x:clip here (not on each full-bleed element) because every 100vw banner on this
   site (.grammar-header/.grammar-banner/.section-banner/.grammar-subitem-bar) overflows the
   real viewport by the vertical scrollbar's own width - 100vw is measured against the initial
   containing block, which doesn't subtract the scrollbar. The overflow is off-canvas and
   invisible either way; this just stops it from adding a horizontal scrollbar too.
   MUST be "clip", not "hidden": per the CSS Overflow spec, setting one axis to hidden/auto/scroll
   while the other stays "visible" forces the other to compute as "auto" too - that silently made
   html/body their own scroll containers, which broke position:sticky (.grid-panel-header) site-
   wide (Vocabulário/Diálogos/Conjugações/Notícias/TVs/Rádios headers stopped pinning while
   scrolling - regression found and fixed same day). "clip" is exempt from that pairing rule. */
html, body {
  font-family: 'Inter', 'Segoe UI', sans-serif;
  overflow-x: clip;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

/* Sticky footer: on short pages (Contato, Termos...) the footer stays pinned to the bottom
   of the viewport instead of floating right under the sparse content. */
body {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-main {
  flex: 1 0 auto;
}

.linguarudo-footer {
  flex-shrink: 0;
}

/* Linguarudo brand colors, taken from the legacy site's own stylesheets. */
:root {
  --linguarudo-navy: #1E2A47;
  --linguarudo-blue: #3498db;
}

.linguarudo-navbar {
  background-color: var(--linguarudo-navy);
}

.linguarudo-navbar .navbar-brand span {
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Matches the legacy site's black .panelFootContact footer: two columns (links left,
   links right), white text on black, links bold with a hover lift - not the plain navy
   bar this used to be. */
.linguarudo-footer {
  background-color: var(--linguarudo-navy);
  color: #ffffff;
  padding: 1.5rem 0;
  margin-top: 2rem;
  border-top: 1px solid #ffffff;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

/* Grammar page only (via ViewData["TightFooterGap"]), when the last thing above the footer is
   the "Referências" link - closes the usual .linguarudo-footer top margin plus <main class=
   "pb-3">'s own bottom padding, which together left a gap the link shouldn't have. */
.linguarudo-footer-tight {
  margin-top: 0;
}

/* !important because Bootstrap's own .pb-3 utility (on <main>) is itself !important. */
.page-main:has(+ .linguarudo-footer-tight) > main {
  padding-bottom: 0 !important;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  text-align: left;
  width: 100%;
  padding: 0 1rem;
  box-sizing: border-box;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-col-right {
  align-items: flex-end;
  text-align: right;
}

.linguarudo-footer a,
.footer-copy {
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.linguarudo-footer a:hover {
  opacity: 0.8;
  transform: translateY(-1px);
}

/* Matches the legacy site's .btnLogin/.LinkAddUser: yellow pill button, black border,
   hover lift - used for every primary call-to-action (Entrar, Criar Minha Conta,
   Cadastrar) instead of Bootstrap's default rectangular blue button. */
.btn-linguarudo {
  display: inline-block;
  background-color: #fbec5d;
  border: 2px solid #000000;
  border-radius: 1.75rem;
  color: #000000;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 0.6rem 1.5rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-linguarudo:hover {
  background-color: #ffff00;
  color: #000000;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.btn-linguarudo-outline {
  display: inline-block;
  background-color: #ffffff;
  border: 2px solid #000000;
  border-radius: 1.75rem;
  color: #000000;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 0.6rem 1.5rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-linguarudo-outline:hover {
  background-color: #f1f1f1;
  color: #000000;
  transform: translateY(-2px);
}

/* Matches the legacy site's .dropVocabLanguage/.dropVocabClassLanguage: bold text,
   black border, rounded corners, blue focus glow - replaces Bootstrap's plain
   .form-select look on every language/category dropdown in the dashboard. */
.form-select {
  font-weight: 700;
  color: #333333;
  padding: 0.75rem 1rem;
  border: 2px solid #000000;
  border-radius: 0.5rem;
  background-color: #ffffff;
}

.form-select:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

/* Notícias/TVs/Rádios dropdowns - larger than the default 300px cap used elsewhere. */
.form-select-lg {
  max-width: 480px;
  font-size: 1.15rem;
  padding: 0.9rem 1.2rem;
}

.btn-primary {
  background-color: var(--linguarudo-blue);
  border-color: var(--linguarudo-blue);
}

.btn-primary:hover {
  background-color: #2b80c2;
  border-color: #2b80c2;
}

.btn-success {
  background-color: var(--linguarudo-navy);
  border-color: var(--linguarudo-navy);
}

.btn-success:hover {
  background-color: #14203a;
  border-color: #14203a;
}

.linguarudo-navbar-light {
  background-color: #ffffff;
  border-bottom: 1px solid #e9ecef;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.linguarudo-navbar-light .navbar-brand {
  color: var(--linguarudo-navy);
}

.linguarudo-navbar-light .navbar-brand span {
  font-weight: 700;
}

.linguarudo-navbar-light .navbar-brand small {
  font-weight: 400;
  color: #6c757d;
}

.linguarudo-logout-link {
  color: #212529;
  font-weight: 600;
  text-decoration: none;
}

.linguarudo-logout-link:hover {
  color: var(--linguarudo-blue);
}

/* Full-bleed: breaks out of the Bootstrap .container (which caps at 960/1140/1320px) so an
   element spans the entire viewport edge-to-edge, matching the legacy site's width=100%
   headers/banners. Shared by every full-width bar on the Grammar page plus .section-banner -
   grouped in one rule instead of repeating these 6 properties per class. */
.section-banner,
.grammar-header,
.grammar-subitem-bar,
.grammar-banner,
.grammar-references-link {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.section-banner {
  background-color: var(--linguarudo-navy);
  color: #ffffff;
  text-align: center;
  font-weight: 700;
  font-size: 1.875rem;
  padding: 1.5rem 1rem;
  margin-bottom: 1.5rem;
}

.section-banner-spaced {
  margin-top: 3rem;
}

.single-column {
  max-width: 480px;
  margin: 0 auto 2rem;
  text-align: center;
}

/* Livros: a single-column list of rows (no "Livros" header bar - the language dropdown
   above it already says which language's books these are), cover thumbnail plus a large
   bold title rather than the old grid-of-covers layout. */
/* One book per "row", but each row is its own stacked card: the cover as large as the
   column allows, the title centered underneath - not a compact side-by-side list item. */
.book-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  max-width: 480px;
  margin: 0 auto 2rem;
}

.book-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.book-row-cover {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 3 / 5;
  object-fit: cover;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
}

.book-row-title {
  font-size: 1.25rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.book-row:hover .book-row-title {
  color: var(--linguarudo-blue);
}

/* Replicates the legacy site's .myGridStyle (gridNoticias/gridVocab/gridDialogue/...) almost
   exactly: dark header bar with "Idioma - Categoria", 500px max-width on desktop (90% below
   992px, same breakpoint as the legacy CSS), alternating row background, everything bold.
   Used by every "list of rows" section: Notícias, Vocabulário, Diálogos, Conjugações, Livros,
   TVs do mundo, Rádios do mundo. */
.grid-panel {
  max-width: 500px;
  margin: 0 auto 1rem;
  border: 1px solid #333333;
}

@media (max-width: 991px) {
  .grid-panel {
    max-width: none;
    width: 90%;
  }
}

/* Conjugações: one tense panel per row on phones/tablets, two side by side on desktop. */
@media (min-width: 992px) {
  .conjugation-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 1040px;
    margin: 0 auto;
  }

  /* Grid's default align-items:stretch makes every panel in a row match the tallest one -
     Imperativo (often just 1 form) was stretching to match a 6-row neighbor like Presente do
     Indicativo, leaving a big empty gap below its single row but still inside its border.
     Fixed with align-self on just the short panel (.grid-panel-compact, added server-side to
     whichever tense has fewer forms than the tallest one that day/language) instead of
     align-items:start on the whole grid container - that container-wide version was tried first
     and caused a real regression: position:sticky (.grid-panel-header) stopped pinning for EVERY
     panel in this grid while scrolling, not just the short one. Per-item align-self doesn't have
     that side effect. */
  .conjugation-grid .grid-panel-compact {
    align-self: start;
  }

  .conjugation-grid .grid-panel {
    max-width: none;
    width: 100%;
    margin: 0;
  }
}

/* Matches the legacy .myGridStyle th: the header stays pinned to the top of the viewport
   while its gridview scrolls by, instead of scrolling away with the first row. */
.grid-panel-header {
  padding: 12px 16px;
  color: #ffffff;
  background-color: #333333;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 1;
}

.grid-row {
  padding: 12px 16px;
  color: #333333;
  border: 1px solid #000000;
  font-weight: bold;
  font-size: 1.05rem;
}

/* A panel with a single row (e.g. Conjugações' "Imperative" tense, which has no per-pronoun
   forms) doubles up the row's own border against the panel's border right under the header -
   drop it so a one-row panel doesn't look over-boxed. :only-of-type won't do it here since
   the header is also a <div> (same type as .grid-row), so it's never "the only div"; instead
   target the row that is both right after the header (2nd child) and the last one. */
.grid-panel .grid-row:nth-child(2):last-child {
  border-top: none;
}

.grid-row:nth-child(odd) {
  background-color: #d3d3d3;
}

.grid-row:nth-child(even) {
  background-color: #ffffff;
}

.grid-row:hover {
  background-color: #f1f1f1;
}

.news-headline {
  display: block;
  color: inherit;
  text-decoration: none;
}

.news-headline:hover {
  color: var(--linguarudo-blue);
}

.news-related {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

.news-related li {
  margin-bottom: 0.25rem;
}

.news-related a {
  color: inherit;
  text-decoration: underline;
}

.news-related a:hover {
  color: var(--linguarudo-blue);
}

/* TVs/Rádios rows have a link (or plain text) plus nothing else - a simpler single-line row. */
.grid-row-link {
  color: inherit;
  text-decoration: none;
}

.grid-row-link:hover {
  color: var(--linguarudo-blue);
  text-decoration: underline;
}

.subscribe-panel {
  max-width: 480px;
  margin: 0 auto 2rem;
  text-align: center;
}

.subscribe-panel > p {
  font-size: 1.5rem;
  font-weight: 700;
}

@media (max-width: 480px) {
  .section-banner {
    font-size: 1.4rem;
  }

  .subscribe-panel > p {
    font-size: 1.15rem;
  }
}

.subscribe-card {
  max-width: 480px;
  border: 2px solid #000000;
  border-radius: 0.75rem;
  padding: 1.5rem 1.25rem;
}

/* Matches the legacy .lblPacote/.lblVantagem: this package-description text is set in
   Verdana, not the site-wide Inter - the price itself (.lblPreco) stays Inter. */
.subscribe-card > p:not(.subscribe-price) {
  font-family: Verdana, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
}

.subscribe-price {
  font-size: 3rem;
  font-weight: 700;
  color: var(--linguarudo-navy);
  margin-bottom: 1rem;
}

.subscribe-price small {
  font-size: 1rem;
  font-weight: 400;
}

/* Vocabulário/Diálogos comparison table: wider than .single-column so up to 7 language
   columns fit on desktop, with a horizontal scrollbar as a safety net on narrow desktops.
   Styled to match .grid-panel/.grid-row (.myGridStyle): dark header row, alternating
   row background, bold text, black cell borders. */
/* Bounded height + overflow-y:auto makes this a genuine internal scroll container, which is
   what position:sticky needs to actually pin the <th> - with overflow-x:auto alone (no bounded
   height) the wrap never scrolls internally, so it becomes sticky's containing block without
   ever engaging it, and the header just scrolls away with the rest of the table. */
/* No overflow here on purpose - overflow:auto on this wrapper is what breaks the <th>'s
   position:sticky (it becomes sticky's containing block without ever actually scrolling
   internally, so the header never engages and just scrolls away with the page instead of
   pinning to the viewport like the other gridviews' .grid-panel-header does). */
.lang-compare-wrap {
  margin: 0 auto 2rem;
  border: 1px solid #333333;
}

.lang-compare-table {
  width: 100%;
  margin-bottom: 0;
}

/* Examples table only: its header just labels "Exemplos" / "Português", so it reads better
   centered - the Vocabulário/Diálogos comparison table (same .lang-compare-table base) keeps
   its left-aligned language-name headers. */
.grammar-examples-table th {
  text-align: center;
}

.grammar-examples-spaced {
  margin-top: 2rem;
}

.lang-compare-table th {
  background-color: #333333;
  color: #ffffff;
  white-space: nowrap;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.15rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid #4d4d4d;
  position: sticky;
  top: 0;
  z-index: 1;
}

.lang-compare-table td {
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid #e0e0e0;
}

.lang-compare-table tbody tr:nth-child(odd) {
  background-color: #d3d3d3;
}

.lang-compare-table tbody tr:nth-child(even) {
  background-color: #ffffff;
}

.lang-compare-table tbody tr:hover {
  background-color: #f1f1f1;
}

/* On phones, only the first two columns matter: the studied language (or Português, if
   Português itself is being studied) and its Português reference translation - the rest
   are hidden rather than squeezed or horizontally scrolled. */
@media (max-width: 767px) {
  .lang-compare-table th:nth-child(n+3),
  .lang-compare-table td:nth-child(n+3) {
    display: none;
  }
}

.flashcard-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.flashcard-arrow {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--linguarudo-navy);
  text-decoration: none;
  padding: 0.5rem;
}

.flashcard-arrow:hover {
  color: var(--linguarudo-blue);
}

.flashcard-image {
  width: 350px;
  height: 350px;
  max-width: 100%;
  object-fit: cover;
  border: 1px solid #212529;
  border-radius: 0.25rem;
}

.flashcard-word {
  font-weight: 700;
  font-size: 1.1rem;
}

.flashcard-word a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.flashcard-word a:hover {
  color: var(--linguarudo-blue);
}

.speak-trigger {
  cursor: pointer;
}

.speak-trigger:hover {
  color: var(--linguarudo-blue);
  text-decoration: underline;
}

.lang-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}

/* Centers a lone leftover card in the last row (e.g. 7 languages in a 3-column grid
   leaves Português by itself) instead of it sticking to the left edge. Only kicks in
   when the last card actually starts a new row alone - a row-filling count is untouched. */
.lang-grid > .lang-card:last-child:nth-child(3n+1) {
  grid-column: 2;
}

@media (max-width: 767px) {
  .lang-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .lang-grid > .lang-card:last-child:nth-child(2n+1) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 0.625rem);
  }
}

@media (max-width: 480px) {
  .lang-grid {
    grid-template-columns: 1fr;
  }

  .lang-grid > .lang-card:last-child {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }
}

.lang-card {
  position: relative;
  display: block;
  border-radius: 0.75rem;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  text-decoration: none;
}

.lang-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}

.lang-card:hover img {
  transform: scale(1.04);
}

/* Artigos: same card mechanics as .lang-grid/.lang-card (grid, aspect-ratio, rounded corners,
   hover zoom), but its own class - article counts vary (not a fixed set of 7 like languages),
   so the language grid's leftover-centering hack doesn't apply here. The title itself lives
   baked into the cover image (generated server-side), not as HTML text over the card. */
.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}

@media (max-width: 767px) {
  .article-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .article-grid {
    grid-template-columns: 1fr;
  }
}

.article-card {
  position: relative;
  display: block;
  border-radius: 0.75rem;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  text-decoration: none;
}

.article-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}

.article-card:hover img {
  transform: scale(1.04);
}

/* Fallback for the rare article without a generated cover - navy background matching the
   site's other banners, title as plain wrapped text instead of baked into an image. */
.article-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: var(--linguarudo-navy);
  color: #ffffff;
  font-weight: 700;
  text-align: center;
}

.article-detail {
  max-width: 760px;
  margin: 0 auto 2rem;
}

.article-detail-cover {
  width: 100%;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
}

.article-detail-meta {
  color: #6c757d;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.article-detail-content {
  font-family: 'Montserrat', 'Inter', 'Segoe UI', sans-serif;
  font-size: 1.25rem;
  line-height: 1.75;
}

.article-detail-content img {
  max-width: 100%;
  border-radius: 0.5rem;
}

.article-detail-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 1rem;
}

.article-detail-content th,
.article-detail-content td {
  border: 1px solid #d0d0d0;
  padding: 0.6rem 0.9rem;
  text-align: left;
}

.article-detail-content th {
  background-color: var(--linguarudo-navy);
  color: #ffffff;
  font-weight: 700;
}

.article-detail-content tbody tr:nth-child(odd) {
  background-color: #f5f5f5;
}


/* Login/register card, styled after the legacy Default.aspx form fields (.txtHello2/
   .txtDefault): bold black-border inputs, rounded corners, blue focus glow. */
/* Contato/Trabalhe Conosco get their own header (ViewData["HideNav"] suppresses _Layout's
   navbar) - just the centered wordmark, no nav links, and taller than the normal 32px-logo
   navbar since this page has nothing else competing for attention above the form. */
.contact-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  border-bottom: 1px solid #e9ecef;
}

.contact-header-logo {
  height: 90px;
  width: auto;
}

/* Contato/Trabalhe Conosco: a short, centered form page - the sticky footer (see body/
   .page-main above) keeps the footer pinned to the bottom of the viewport on desktop even
   though this content alone doesn't fill the screen. */
.contact-page {
  max-width: 480px;
  margin: 3rem auto 0;
  text-align: center;
}

/* Diploma/Verify: the certificate image is landscape (1200x800) - the default 480px content
   width would shrink its text too small to read comfortably. */
.contact-page-wide {
  max-width: 700px;
}

.diploma-image {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}

.contact-title {
  margin-bottom: 2rem;
}

.contact-form {
  text-align: left;
}

/* Nome/E-mail center label+box like the login/register cards - Mensagem stays as the base
   .contact-form left-aligned/full-width, since a centered narrow textarea would leave too
   little room to type. */
.contact-field-centered {
  text-align: center;
}

.contact-field-centered .form-control {
  max-width: 300px;
  margin: 0 auto;
}

/* The reCAPTCHA widget is a fixed-size block (Google sizes the iframe itself, ~304px), so
   text-align:center on its parent wouldn't center its own box - display:table shrinks it to
   that intrinsic width so margin:auto can center it like a block box normally would. */
.contact-recaptcha {
  display: table;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.auth-card {
  max-width: 380px;
  margin: 0 auto 2rem;
}

/* Esqueci Minha Senha (the only page combining .contact-header with .auth-card) had the "Esqueci
   minha senha" heading sitting flush against the header's bottom border - no gap at all. */
.contact-header + .auth-card {
  margin-top: 2rem;
}

/* The Default.aspx login page has no navbar above it - just the wordmark logo, sized like
   the legacy .fotoLogoInitial hero treatment (not the small .fotoLogo used inline elsewhere). */
.auth-logo {
  width: 240px;
  max-width: 80%;
  height: auto;
  margin: 3rem auto 2.5rem;
}

/* Matches the legacy .lblIdiomas: a plain bold heading, not the navy .section-banner bar -
   Default.aspx never wraps "Línguas Para Estudar" in a header bar. */
.plain-section-title {
  font-size: 2rem;
  font-weight: 700;
  color: #333333;
  text-align: center;
  margin: 2.5rem 0 1.5rem;
}

.plain-section-title-spaced {
  margin-top: 4rem;
  margin-bottom: 2.5rem;
}

/* Matches the legacy site's lblCopy03/Image7 pair on Default.aspx: a short headline
   right under the language grid, then the "alunos" photo, then the benefit list. */
.auth-copy-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: #333333;
  text-align: center;
  max-width: 480px;
  margin: 0 auto 1.5rem;
}

.auth-card .form-label {
  display: block;
  text-align: center;
  font-weight: 700;
}

.auth-forgot-link {
  color: #000000;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

.auth-terms-link {
  color: #000000;
  font-weight: 700;
  text-decoration: none;
}

.auth-card .form-control,
.register-card .form-control {
  font-weight: 700;
  border: 2px solid #000000;
  border-radius: 0.5rem;
}

.auth-card .form-control {
  max-width: 300px;
  margin: 0 auto;
  text-align: center;
}

/* "Entrar"/"Criar Minha Conta" used .w-100 (100% of .auth-card's own 380px), so they came out
   wider than the 300px-capped text boxes above them - cap them the same way instead so both
   line up at the same width. display:block is required here too: .btn-linguarudo is
   display:inline-block, and auto margins never center an inline-level box, only a block one. */
.auth-card .btn-linguarudo.w-100,
.auth-card .btn-linguarudo-outline.w-100 {
  display: block;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.auth-card .form-control:focus,
.register-card .form-control:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

/* The legacy Default.aspx register view puts the logo centered between an empty left
   spacer and a "Voltar" link on the right - not a "Já tenho uma conta" link at the
   bottom of the card. */
.register-top-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: 600px;
  margin: 2.5rem auto 1.5rem;
  padding: 0 1rem;
}

.register-logo {
  width: 90px;
  height: auto;
}

.register-back-link {
  justify-self: end;
  color: #000000;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
}

.register-card {
  max-width: 460px;
  margin: 0 auto 1rem;
  text-align: left;
  border: 2px solid #000000;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
}

/* Matches the legacy .tableHeader: solid black bar, white bold uppercase title. */
.register-card-header {
  background-color: #000000;
  color: #ffffff;
  text-align: center;
  font-weight: 700;
  font-size: 1.4rem;
  text-transform: uppercase;
  padding: 1.1rem;
}

.register-card-body {
  padding: 1.5rem;
}

.register-package-line {
  font-weight: 700;
  font-size: 1.35rem;
  text-align: center;
}

/* Matches the legacy .lblVantagem lines: bold, dash-prefixed, left-aligned. */
.register-benefits {
  list-style: none;
  padding-left: 0;
  font-weight: 700;
  font-size: 1.2rem;
}

.register-benefits li {
  margin-bottom: 0.4rem;
}

.register-benefits li::before {
  content: "- ";
}

.register-card .form-label {
  font-weight: 700;
  font-size: 1.1rem;
}

.register-cta-heading {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  margin: 1.5rem 0;
}

/* Matches the legacy site's TableApps: the "App do Linguarudo" promo at the very bottom
   of home.aspx, linking to the Play Store listing. */
.app-section {
  max-width: 480px;
  margin: 0 auto 2rem;
  text-align: center;
}

.app-headline {
  font-size: 1.25rem;
  font-weight: 700;
  color: #000000;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}

.app-icon-link {
  display: inline-block;
}

.app-icon {
  width: 150px;
  height: 150px;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
}

.app-link {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: #000000;
  text-decoration: none;
}

.app-link:hover {
  color: var(--linguarudo-blue);
}

/* Grammar page. */
.grammar-page {
  font-family: 'Montserrat', sans-serif;
  max-width: 960px;
  margin: 0 auto;
}

/* Grammar has its own full header (logo + quick-nav) instead of the shared site navbar -
   ViewData["HideNav"] suppresses _Layout's header, matching the site mãe's grammar.aspx,
   which never shared home.aspx's header either. Full-bleed like .section-banner. */
.grammar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 0.5rem;
}

.grammar-logo-link {
  display: inline-block;
}

.grammar-logo {
  height: 56px;
}

/* The quick-nav select: languages / adult-child content / home / logout, all in one
   dropdown, styled as plain text with a chevron (not a bordered .form-select box) to match
   the site mãe's compact "Inglês ⌄" header menu. */
.grammar-menu-select {
  border: none;
  background-color: transparent;
  font-weight: 700;
  font-size: 1.15rem;
  color: #333333;
  width: auto;
  max-width: none;
  padding: 0.25rem 0;
  cursor: pointer;
}

.grammar-menu-select:focus {
  outline: none;
  box-shadow: none;
}

/* The subitem dropdown spans the full width of the screen (not just .grammar-page's 960px),
   same full-bleed trick as .section-banner/.grammar-header - and sits close under the header,
   not the .grammar-page's usual top spacing. */
.grammar-subitem-bar {
  margin-bottom: 0;
}

.grammar-subitem-select {
  max-width: none;
  width: 100%;
  border-radius: 0;
}

/* Matches the legacy site's HeaderHome bar used around lblHome/lkPrev/lkNext: a navy banner
   with the prev/next arrows pinned to the far edges of the bar, title centered between them. */
.grammar-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background-color: var(--linguarudo-navy);
  color: #ffffff;
  padding: 1.5rem 1.5rem;
  margin-bottom: 1.5rem;
}

.grammar-banner-title {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
}

.grammar-nav-arrow {
  color: #ffffff;
  font-size: 1.75rem;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
}

.grammar-nav-arrow:hover {
  color: var(--linguarudo-blue);
}

.grammar-nav-arrow-disabled {
  color: rgba(255, 255, 255, 0.3);
}

.grammar-explanation {
  font-size: 1.2rem;
  font-weight: 700;
}

.grammar-figures {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.grammar-figure {
  max-height: 360px;
  border: 1px solid #212529;
  border-radius: 0.5rem;
}

/* flex (not grid) on purpose: grid keeps a short last row left-aligned under its own columns,
   while flex-wrap + justify-content:center centers a leftover row that doesn't fill 3 videos. */
.grammar-videos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.grammar-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

@media (min-width: 992px) {
  .grammar-video {
    width: calc(33.333% - 0.667rem);
  }
}

.grammar-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #212529;
  border-radius: 0.5rem;
}

.grammar-exercises {
  font-size: 1.15rem;
  font-weight: 700;
}

.grammar-exercise-item {
  margin-bottom: 2.5rem;
}

/* "Referências" toggle: after "Meus Pontos", right before the footer. Full-bleed (like the
   page's other bars) so "bem à esquerda" means the true edge of the screen, not just the left
   edge of the centered 960px .grammar-page column - then padding-left pulls it in only 5px
   from that real edge. */
.grammar-references-link {
  text-align: left;
  padding-left: 5px;
  margin-top: 1.5rem;
  margin-bottom: 0;
}

.grammar-references-link a {
  font-size: 0.85rem;
  color: #000000;
}

/* Much wider than the other .grid-panel sections (which cap at 500px) - matches the site
   mãe's own wide points grid. */
.grammar-points-panel {
  max-width: 100%;
}

.grammar-points-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

/* #0000ee, not --linguarudo-blue (#3498db) - grammar.aspx's own stylesheet
   (linguarudoGrammar20250424.css) only ever sets `a { text-decoration: none; }`, no color, so
   the site mãe's points-grid links are just the plain UA default unvisited-link blue. */
.grammar-points-row span:first-child {
  color: #0000ee;
}

.grammar-points-row span:last-child {
  color: #000000;
}

.grammar-points-row:hover span:first-child {
  text-decoration: underline;
}