/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Blog show: on md+ escape the layout's max-w-7xl container so the article
 * takes 80% of the viewport width. `left: 50%` + `translateX(-50%)` centers
 * the element on the viewport regardless of the parent's width or padding,
 * because the parent is itself centered via mx-auto. Mobile keeps the natural
 * flow inside the layout's padding. */
.blog-show-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 48rem; /* matches Tailwind max-w-3xl */
}

@media (min-width: 768px) {
  .blog-show-container {
    width: 54vw;
    max-width: none;
  }
}

/* Collapsible SEO help block — custom rotating caret next to the summary so
 * admins can see at a glance which sections are expanded. */
.seo-help > summary {
  list-style: none;
}
.seo-help > summary::-webkit-details-marker {
  display: none;
}
.seo-help > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.5rem;
  color: oklch(60.6% 0.15 74.99); /* amber-600 */
  transition: transform 0.2s ease;
}
.seo-help[open] > summary::before {
  transform: rotate(90deg);
}

/* Extra fonts for blog sections. Standard web-safe fonts rely on OS
 * availability; Google Fonts are loaded via the <link> in application layout. */

/* Standard system fonts. */
.font-arial     { font-family: Arial, Helvetica, sans-serif; }
.font-helvetica { font-family: Helvetica, Arial, sans-serif; }
.font-times     { font-family: "Times New Roman", Times, serif; }
.font-georgia   { font-family: Georgia, "Times New Roman", serif; }
.font-courier   { font-family: "Courier New", Courier, monospace; }
.font-verdana   { font-family: Verdana, Geneva, sans-serif; }
.font-tahoma    { font-family: Tahoma, Geneva, sans-serif; }
.font-trebuchet { font-family: "Trebuchet MS", Helvetica, sans-serif; }
.font-comic     { font-family: "Comic Sans MS", "Comic Sans", cursive; }
.font-impact    { font-family: Impact, "Arial Black", sans-serif; }

/* Google Fonts (loaded via the layout <link>). */
.font-playfair    { font-family: "Playfair Display", Georgia, serif; }
.font-lora        { font-family: "Lora", Georgia, serif; }
.font-merriweather { font-family: "Merriweather", Georgia, serif; }
.font-poppins     { font-family: "Poppins", "Inter", system-ui, sans-serif; }
.font-montserrat  { font-family: "Montserrat", "Inter", system-ui, sans-serif; }
.font-caveat      { font-family: "Caveat", cursive; }

/* Custom between-tier size not provided by Tailwind (sits between
 * text-base 1rem and text-lg 1.125rem). */
.text-md { font-size: 1.0625rem; line-height: 1.65rem; }

/* Blog image box: fixed-height viewport for carousel + single_image so
 * different-sized images don't reflow the page, and the box grows on wider
 * screens to match the wider article container. Plain CSS rather than Tailwind
 * utilities so nothing in the build chain can drop the rules. */
.blog-image-box {
  height: 320px;
}

@media (min-width: 768px) {
  .blog-image-box {
    height: 520px;
  }
}

@media (min-width: 1024px) {
  .blog-image-box {
    height: 640px;
  }
}