/* Freeform Document full view (node--freeform-document--full.html.twig).
   Attached only from that template, and every rule is scoped under
   body.node--type-freeform-document as a second guard. Page look follows
   the Forms and Documents pattern (author.css "Forms and Documents page"):
   light blue-gray page (#d6dee4, set apart from the brand blue banner),
   centered white panel around the document only
   (.freeform-doc__panel in the node template). The banner, stripe, editor
   tabs and messages stay full width outside it, as on County Document;
   #main-wrapper gets no panel styling. */

body.node--type-freeform-document #page {
  background: #d6dee4;
}

/* The panel's ancestors #main-wrapper (colors.css) and main.main-content
   (author.css) are white sitewide, which hides the page background and the
   panel's margins: the panel then reads as full width with no gap. Clear
   them so the page background shows around the panel. Screen only; print keeps
   the white page. */
@media screen {
  body.node--type-freeform-document #main-wrapper,
  body.node--type-freeform-document .main-content {
    background: transparent;
  }
}

/* White panel: the page elements and the hub link. Its ancestors up to
   #main are full width (author.css forces #main to 100%), so the panel is
   the full viewport width up to 1280px. 40px inner padding, 16px on
   phones (narrow-viewport rule below). */
body.node--type-freeform-document .freeform-doc__panel {
  box-sizing: border-box;
  width: 1280px;
  max-width: 100%;
  margin: 50px auto;
  padding: 40px;
  background: #fff;
  border-radius: 5px;
}

/* Local tasks (editor tabs) and the sitewide eAlert render in the
   featured_top region, between the header and the panel. Give that strip a
   white background so they read as they do on other pages, not on blue. */
body.node--type-freeform-document .featured-top {
  background: #fff;
}

/* Status messages render at the top of the content region, above the
   banner (same place as on County Document), and the moderation state form
   sits between the stripe and the panel. Both get a white strip so they
   read as they do on a white page. The moderation strip's text lines up
   with the panel's content. Screen only: in print they keep County
   Document's behavior. */
@media screen {
  body.node--type-freeform-document [data-drupal-messages] {
    background: #fff;
  }

  body.node--type-freeform-document .freeform-doc__moderation {
    padding: 16px calc(max(0px, (100% - 1280px) / 2) + 40px) 0;
    background: #fff;
  }
}

/* Banner: same dark blue as County Document's full view (the shared
   .county-document-banner default is teal). Screen only, so it can't
   outrank the shared print title (document-print-base.css), which drops
   the fill. */
@media screen {
  body.node--type-freeform-document .county-document-banner {
    background-color: #15354E;
  }
}

/* Long unbroken tokens (URLs, serial numbers) in a title or page element
   would otherwise push the page wider than the viewport. The title breaks
   only when a word can't fit its line. */
body.node--type-freeform-document .county-document-banner h1 {
  overflow-wrap: break-word;
}

body.node--type-freeform-document .freeform-doc__content {
  overflow-wrap: anywhere;
}

body.node--type-freeform-document .freeform-doc__content img,
body.node--type-freeform-document .freeform-doc__content iframe,
body.node--type-freeform-document .freeform-doc__content video {
  max-width: 100%;
}

/* Documents Hub link after the content. Link look comes from the shared
   .county-doc__back rule. */
body.node--type-freeform-document .freeform-doc__back-wrapper {
  margin: 40px 0 0;
}

/* Visible focus inside the panel: dark outline plus a white ring, so it
   shows on white and on dark paragraph backgrounds alike. Needed because
   Bootstrap 5.1 sets outline: 0 on buttons, form controls and accordion
   buttons and leaves only a 25%-opacity blue glow, which is faint on
   white. */
body.node--type-freeform-document .freeform-doc__panel a:focus-visible,
body.node--type-freeform-document .freeform-doc__panel button:focus-visible,
body.node--type-freeform-document .freeform-doc__panel input:focus-visible,
body.node--type-freeform-document .freeform-doc__panel select:focus-visible,
body.node--type-freeform-document .freeform-doc__panel textarea:focus-visible,
body.node--type-freeform-document .freeform-doc__panel summary:focus-visible,
body.node--type-freeform-document .freeform-doc__panel [tabindex]:focus-visible {
  outline: 3px solid #15354E;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}

/* ---------------------------------------------------------------------
   Viewport-sized paragraph styles, re-sized to the panel.

   The panel is the container: paragraphs keep their own styles, and only
   rules sized against the viewport are overridden here. Two kinds:

   1. vw units become % of the parent (or aspect-ratio for a vw height),
      same numbers.
   2. Viewport breakpoints are converted to the panel's content width W, so
      a rule fires when the panel is as narrow as the page the rule was
      written for. W, from the .freeform-doc__panel rules above and below:
        viewport <= 767px:  W = viewport - 32px  (16px panel padding)
        viewport >= 768px:  W = min(viewport, 1280px) - 80px  (40px padding)
      So W <= 1200px always, and:
        W <= 768px  ->  (max-width: 848px)  (every phone width, and
                                            768-848px)
        W <= 616px  ->  (max-width: 648px)  (W jumps from 735px at 767px
                                            to 688px at 768px, both over
                                            616px)
      If the panel width, padding or 767px switch changes, redo these.

   Every rule here is screen only. In print the panel is the whole
   printable page, so vw and viewport breakpoints already measure the
   content width: paragraphs print with the site's own print behavior, as
   on any other page, and these panel conversions would only distort it.
   ------------------------------------------------------------------ */

@media screen {
  /* Layout padding classes (department.css "pad-half" family). The class is
     on the layout section and the padding on its region (> div), so % is of
     the section, i.e. the panel's content width. Same order as
     department.css so combined classes cascade the same way. */
  body.node--type-freeform-document .freeform-doc__content .pad-half > div {
    padding: 10px 25%;
  }

  body.node--type-freeform-document .freeform-doc__content .pad-quarter > div {
    padding: 10px 12.45%;
  }

  body.node--type-freeform-document .freeform-doc__content .layout-pad-gap > div {
    padding: 25px 6%;
  }

  body.node--type-freeform-document .freeform-doc__content .side-padding > div {
    padding: 2% 2% 4%;
  }

  body.node--type-freeform-document .freeform-doc__content .big-side-only-padding > div {
    padding: 0 6%;
  }

  body.node--type-freeform-document .freeform-doc__content .bottom-pad > div {
    padding-bottom: 4%;
  }

  body.node--type-freeform-document .freeform-doc__content .top-pad > div {
    padding-top: 4%;
  }

  body.node--type-freeform-document .freeform-doc__content .bottom-pad-less > div {
    padding-bottom: 1.5%;
  }

  body.node--type-freeform-document .freeform-doc__content .top-pad-less > div {
    padding-top: 1.5%;
  }

  /* department.css (max-width: 1200px). W is never over 1200px, so these
     always apply in the panel, in place of the base .pad-third (25px
     16.515vw), .giant-padding (4vw 8vw) and .big-side-padding (2vw 8vw
     4vw). */
  body.node--type-freeform-document .freeform-doc__content .giant-padding > div {
    padding: 4% 4%;
  }

  body.node--type-freeform-document .freeform-doc__content .big-side-padding > div {
    padding: 2% 4%;
  }

  body.node--type-freeform-document .freeform-doc__content .pad-third > div {
    padding: 3vh 10%;
  }
}

/* department.css (max-width: 768px). */
@media screen and (max-width: 848px) {
  body.node--type-freeform-document .freeform-doc__content .pad-quarter > div {
    padding: 0;
  }
}

/* department.css (max-width: 616px). */
@media screen and (max-width: 648px) {
  body.node--type-freeform-document .freeform-doc__content .giant-padding > div {
    padding: 4% 2%;
  }

  body.node--type-freeform-document .freeform-doc__content .big-side-padding > div {
    padding: 5%;
  }

  body.node--type-freeform-document .freeform-doc__content .pad-third > div {
    padding: 10px;
  }
}

/* Sidecar (components/sidecar/sidecar.css). Its image is 100vw wide (the
   100vh height matches its 100vh sticky wrapper and is left alone), and the
   phone media band is 56vw tall. */
@media screen {
  body.node--type-freeform-document .freeform-doc__content .sidecar-media-item img {
    width: 100%;
  }
}

@media screen and (max-width: 959px) {
  body.node--type-freeform-document .freeform-doc__content .sidecar-media-column {
    height: auto;
    aspect-ratio: 100 / 56;
  }
}

/* Narrow viewports: reduced panel padding. The panel is already full
   width here (max-width: 100%). The banner is outside the panel and keeps
   County Document's mobile padding. */
@media screen and (max-width: 767px) {
  body.node--type-freeform-document .freeform-doc__panel {
    padding: 16px;
    border-radius: 0;
  }

  body.node--type-freeform-document .freeform-doc__moderation {
    padding: 16px 16px 0;
  }

  body.node--type-freeform-document .freeform-doc__back-wrapper {
    margin-top: 24px;
  }
}

/* Print: the panel is the full printable page, on white: no page background, no
   width cap, margins, padding, border or background. Site chrome, the
   banner print title, the stripe, messages, the hub link and the print
   button are handled by the shared document print base
   (document-print-base.css), as for County Document. */
@media print {
  body.node--type-freeform-document #page {
    background: none;
  }

  body.node--type-freeform-document .freeform-doc__panel {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }
}