/* Global rule - italicize all cite elements */

cite {
    font-style: italic;
}

section.intro p {
  font-style: italic;
	}
	
/* More specific rule - override for cites and manually-applied italics within intro paragraphs */
section.intro p em,
section.intro p cite {
    font-style: normal;
}

#order-history-item-973876 {
	display: none;
	visibility: hidden;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Modern Poetry Layout CSS with Fluid Typography and Container Queries */

/* 
TESTING TOGGLE: 
- Change this to 'fallback-mode' to test fallback behavior
- Change back to 'modern-mode' to test modern features
*/
:root {
    --test-mode: modern-mode; /* Switch between 'modern-mode' and 'fallback-mode' */
    --poetry-font-min: 14px;
    --poetry-font-base: 18px;
    --poetry-font-max: 19px;
    --poetry-padding-min: 8px;
    --poetry-padding-base: 24px;
    --poetry-padding-max: 48px;
    --message-bg: #f8f9fa;
    --message-border: #dee2e6;
    --message-text: #495057;
  }
  
  /* Hide the sticky article tools for poetry articles */
  .contain-poetry .article-tools-sticky {
      display: none !important;
  }
  
  /* Expand the article body width for poetry articles */
  .contain-poetry .article-body {
      /* Break out of the grid system entirely */
      grid-column: 1 / -1;
      width: 100%;
      max-width: none;
  }
  
  /* Expand the poem lines within the article body */
  .contain-poetry pre,
  .contain-poetry .poem-line {
      grid-column-start: 1;
      grid-column-end: -1;
  }
  
  /* Fallback: Traditional responsive approach */
  .content-body.contain-poetry {
      padding: 0 var(--poetry-padding-base);
  }
  
  /* Fallback: Breakpoint-based font scaling for long lines */
  @media (max-width: 768px) {
      .content-body.contain-poetry {
          padding: 0 12px;
      }
      
      .contain-poetry pre.long-lines,
      .contain-poetry .poem-line.long-lines {
          font-size: var(--poetry-font-min) !important;
      }
  }
  
  /* Galaxy Fold and similar mid-width devices */
  @media (max-width: 680px) {
      .content-body.contain-poetry {
          padding: 0 var(--poetry-padding-min);
      }
      
      .contain-poetry pre.long-lines,
      .contain-poetry .poem-line.long-lines {
          font-size: var(--poetry-font-min) !important;
      }
  }
  
  @media (max-width: 576px) {
      .content-body.contain-poetry {
          padding: 0 var(--poetry-padding-min);
      }
  }
  
  /* Modern Enhancement: Fluid Typography and Spacing */
  /* Toggle: Comment out this entire block to test fallbacks */
  @supports (font-size: clamp(1rem, 1vw, 2rem)) {
      html:not(.fallback-test) .content-body.contain-poetry {
          padding: 0 clamp(var(--poetry-padding-min), 4vw, var(--poetry-padding-base));
      }
      
      html:not(.fallback-test) .contain-poetry pre.long-lines,
      html:not(.fallback-test) .contain-poetry .poem-line.long-lines {
          font-size: clamp(var(--poetry-font-min), 3.5vw, var(--poetry-font-base)) !important;
      }
  }
  
  /* Container Query Enhancement */
  /* Toggle: Comment out this entire block to test fallbacks */
  @supports (container-type: inline-size) {
      html:not(.fallback-test) .content-body.contain-poetry {
          container-type: inline-size;
          container-name: poetry-container;
      }
      
      /* More precise control based on actual container width */
      @container poetry-container (max-width: 60ch) {
          html:not(.fallback-test) .contain-poetry pre.long-lines,
          html:not(.fallback-test) .contain-poetry .poem-line.long-lines {
              font-size: var(--poetry-font-min) !important;
          }
      }
      
      @container poetry-container (min-width: 61ch) and (max-width: 85ch) {
          html:not(.fallback-test) .contain-poetry pre.long-lines,
          html:not(.fallback-test) .contain-poetry .poem-line.long-lines {
              font-size: clamp(var(--poetry-font-min), 2vw, var(--poetry-font-base)) !important;
          }
      }
      
      @container poetry-container (min-width: 86ch) {
          html:not(.fallback-test) .contain-poetry pre.long-lines,
          html:not(.fallback-test) .contain-poetry .poem-line.long-lines {
              font-size: var(--poetry-font-base) !important;
          }
      }
  }
  
  /* FALLBACK TESTING: Add class="fallback-test" to <html> tag to disable modern features */
  
  /* Rotation Message Styles - Works in both modern and fallback modes */
  .contain-poetry pre.long-lines::before {
      content: "For the best reading experience, try rotating your device to landscape mode.";
      display: none;
      background-color: var(--message-bg);
      border: 1px solid var(--message-border);
      border-radius: 4px;
      padding: 12px 16px 12px 48px;
      margin-bottom: 20px;
      font-size: 14px;
      font-family: futura-pt, sans-serif;
      color: var(--message-text);
      text-align: center;
      font-weight: 500;
      position: relative;
      background-image: url('https://thesunmagazine.org/ext/resources/Website/landscape-mode.svg');
      background-size: 24px 24px;
      background-repeat: no-repeat;
      background-position: 16px center;
  }
  
  /* Fallback: Show rotation message on small portrait screens */
  @media (max-width: 480px) and (min-height: 600px) {
      .contain-poetry pre.long-lines::before {
          display: block !important;
      }
  }
  
  /* Hide message on landscape orientation */
  @media (max-height: 480px) and (min-width: 600px) {
      .contain-poetry pre.long-lines::before {
          display: none !important;
      }
  }
  
  /* Modern Enhancement: More precise orientation detection (only for modern browsers) */
  html:not(.fallback-test) @supports (orientation: portrait) {
      @media (max-width: 480px) and (orientation: portrait) {
          .contain-poetry pre.long-lines::before {
              display: block !important;
          }
      }
      
      @media (orientation: landscape) and (max-height: 480px) {
          .contain-poetry pre.long-lines::before {
              display: none !important;
          }
      }
  }
  
  /* Mobile responsiveness */
  @media (max-width: 1023px) {
      .contain-poetry .article-body {
          grid-column-start: 1;
          grid-column-end: 13;
      }
      
      .contain-poetry pre,
      .contain-poetry .poem-line {
          grid-column-start: 1;
          grid-column-end: -1;
      }
  }
  
  /* Ultra-wide screen optimization */
  @media (min-width: 1440px) {
      .content-body.contain-poetry {
          padding: 0 clamp(var(--poetry-padding-base), 6vw, var(--poetry-padding-max));
      }
  }