/* ==========================================================================
   FlagsExpo redesign V1 — generic static content page template
   Used by pages that render raw HTML from Content/*.txt via GetContent.ascx
   (Terms, Privacy, FAQ, Free Shipping, Guarantee, Flag Etiquette, etc.)
   ========================================================================== */

.v2-content-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 64px 80px 96px;
  box-sizing: border-box;
  font-family: var(--v2-font);
  color: var(--v2-text);
}

/* Content/*.txt is legacy hand-authored HTML full of inline style="font-family:arial...;
   color:#ff0000" on headings and body text. Inline styles beat an external stylesheet,
   so the design system is enforced here with !important rather than editing 17 content files. */
.v2-content-page, .v2-content-page * { font-family: var(--v2-font) !important; }

.v2-content-page div, .v2-content-page p, .v2-content-page span, .v2-content-page li {
  font-size: 16px !important; line-height: 1.7 !important;
}
.v2-content-page div { margin: 0 0 20px; }
.v2-content-page p { margin: 0 0 20px; }
/* Legacy authors used inline color:#ff0000 for "warning" emphasis on random body
   spans/paragraphs — flatten it to the standard body color so pages read consistently,
   then win back link/bold colors below (same specificity, so order here matters). */
.v2-content-page div, .v2-content-page div *,
.v2-content-page p, .v2-content-page p *,
.v2-content-page li, .v2-content-page li * { color: rgba(0,0,0,0.75) !important; }

.v2-content-page h1, .v2-content-page h1 * {
  font-family: var(--v2-font-display) !important; font-weight: 300 !important; font-size: 48px !important; line-height: 1.05 !important;
  color: #021433 !important; margin: 0 0 32px;
}
.v2-content-page h2, .v2-content-page h2 * {
  font-family: var(--v2-font-display) !important; font-weight: 500 !important; font-size: 28px !important; line-height: 1.2 !important;
  color: #021433 !important; margin: 40px 0 16px;
}
.v2-content-page h3, .v2-content-page h3 * {
  font-family: var(--v2-font-display) !important; font-weight: 500 !important; font-size: 22px !important; line-height: 1.25 !important;
  color: #021433 !important; margin: 32px 0 14px;
}
.v2-content-page a, .v2-content-page a * { color: var(--v2-red) !important; text-decoration: underline; }
.v2-content-page a:hover, .v2-content-page a:hover * { color: var(--v2-red-dark) !important; }
.v2-content-page strong, .v2-content-page b { color: #021433 !important; }
.v2-content-page ul, .v2-content-page ol { margin: 0 0 20px; padding-left: 24px; }
.v2-content-page li { color: rgba(0,0,0,0.75); margin-bottom: 8px; }
.v2-content-page blockquote {
  margin: 24px 0; padding: 16px 24px; border-left: 2px solid var(--v2-red);
  font-style: italic; color: rgba(0,0,0,0.75);
}
/* Content/*.txt tables are legacy layout scaffolding (image+text columns, nav rows),
   not real data tables — keep them borderless so they read as plain flowing content. */
.v2-content-page table { width: 100% !important; max-width: 100%; border-collapse: collapse; margin: 0 0 24px; }
.v2-content-page table th, .v2-content-page table td { padding: 6px 0; text-align: left; vertical-align: top; }
.v2-content-page table th { color: #021433; font-weight: 600; }
.v2-content-page img { max-width: 100%; height: auto; }
/* Image+text rows (e.g. Flag Information): the legacy 90x60 thumbnails were being squeezed by the
   auto-width table, so give them a fixed, larger size that the cell has to honor. */
.v2-content-page table td > img[src*="/content/image/"] { display: block; width: 150px; max-width: none; height: auto; }
/* Vertically center each thumbnail against its text block (the inline padding/valign in the source is top-aligned). */
.v2-content-page table tr:has(> td > img[src*="/content/image/"]) > td { vertical-align: middle !important; padding: 10px 24px 10px 0 !important; }
.v2-content-page table tr:has(> td > img[src*="/content/image/"]) > td > h2:first-child { margin-top: 0; }
.v2-content-page table tr:has(> td > img[src*="/content/image/"]) > td > p:last-child, .v2-content-page table tr:has(> td > img[src*="/content/image/"]) > td > h2:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .v2-content-page table td > img[src*="/content/image/"] { width: 96px; }
}
.v2-content-page hr { border: none; border-top: 1px solid var(--v2-border); margin: 32px 0; }

@media (max-width: 1023px) {
  .v2-content-page { padding: 48px 40px 72px; }
  .v2-content-page h1 { font-size: 36px; }
  .v2-content-page h2 { font-size: 24px; }
}

@media (max-width: 640px) {
  .v2-content-page { padding: 32px 20px 56px; }
  .v2-content-page h1 { font-size: 30px; }
  .v2-content-page h2 { font-size: 21px; }
}