/* Site-wide layout and utilities. Loaded on the site and in the editor; everything
   else lives in theme.json or in a block's own stylesheet. */

/* No image grows wider than the block around it, wherever it sits */
img { max-width: 100%; height: auto; }

/* Page editor: a centred text column with room at the sides; on the site the article
   text starts 10% in from the banner (the layout the editor takes its alignment from) */
.editor-styles-wrapper .is-root-container.wp-block-post-content { padding-left: 1.5em; padding-right: 1.5em; }
.editor-styles-wrapper .is-root-container.wp-block-post-content.is-layout-constrained > :not(.alignwide):not(.alignfull) { margin-left: auto !important; margin-right: auto !important; }

/* The Rails page: 5% white space either side, at most 1260px wide, centred */
.wp-site-blocks { width: 90%; max-width: 1260px; margin: 0 auto; }
@media (max-width: 975px) { .wp-site-blocks { width: 100%; } }
/* Header, content, audience strip and footer follow each other without the block gap;
   each carries its own spacing, as in Rails */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* Article text starts a tenth of the way in from the banner edge (Rails article section) */
.hdyo-article-body { padding-left: 10%; }
@media (max-width: 975px) { .hdyo-article-body { padding-left: 0; } }

/* Pieces for large screens or phones only; the Rails layout switches at 975px */
@media (max-width: 975px) { .hdyo-desktop-only { display: none !important; } }
@media (min-width: 976px) { .hdyo-mobile-only { display: none !important; } }
.hdyo-print-only { display: none; }
@media print { .hdyo-print-only { display: block; } }

/* Header: logo, main menu and Donate on one row with a soft shadow below */
.hdyo-toptools { padding: 0 1rem; }
.hdyo-header__main { padding: 0.9rem 0.5rem 0.9rem 1.5rem; box-shadow: 0 2px 2px -1px #afafaf; }
/* Room under the header so its shadow shows above the grey homepage content (a bottom
   margin on the last block would be dropped by the flow layout) */
.hdyo-header { padding-bottom: 0.5rem; }
.hdyo-header__main .hdyo-logo, .hdyo-header__main .wp-block-hdyo-menu-button { margin: 0; flex-shrink: 0; }
/* Main menu: items close together; a long item wraps onto two lines of its own
   instead of the menu wrapping (Rails nav#main) */
.hdyo-main-nav { flex: 1 1 auto; margin: 0 0.5rem; }
.hdyo-main-nav .wp-block-navigation__container { flex-wrap: nowrap; justify-content: space-around; width: 100%; }
.hdyo-main-nav .wp-block-navigation-item { flex: 0 1 auto; }
@media (max-width: 975px) {
  .hdyo-header__main { box-shadow: none; padding: 0.5rem; }
  .hdyo-header__main .hdyo-header__search, .hdyo-header__main .hdyo-side-nav { flex: 1; }
  .hdyo-header__main .hdyo-side-nav { justify-content: flex-end; }
  .hdyo-header__main .hdyo-logo img { width: auto !important; max-height: 70px; }
}
/* Phones: the magnifier alone, in the Rails grey, flipped and enlarged */
.hdyo-header__search .wp-block-search__button { background: none; color: #ddd; padding: 0; }
.hdyo-header__search .wp-block-search__button svg { width: 44px; height: 44px; fill: currentColor; transform: scaleX(-1); }

/* Homepage: the Rails 260px menu column beside the grey content area; its first
   button lines up with the search box */
.hdyo-home > .hdyo-desktop-only { flex: 0 0 260px; padding-top: 0.5rem; margin-right: 0.5rem; }

/* Article banner title and the news title box */
.hdyo-banner .wp-block-post-title { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); padding: 0; }
.hdyo-news-title .wp-block-post-title { padding: 0; }

/* Footer: logo and social links, menu, sponsors and award always share one row;
   the menu gives way, from three columns down to one (Rails .footer-nav). Phones stack. */
.hdyo-footer__nav { flex-wrap: nowrap !important; }
.hdyo-footer__nav > * { flex-shrink: 0; }
.hdyo-footer__nav > .hdyo-footer__menu { flex: 1 1 9rem; min-width: 9rem; max-width: 30rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)) !important; }
.hdyo-footer__menu .wp-block-hdyo-menu-button { justify-content: center; }
@media (max-width: 700px) {
  .hdyo-footer__nav { flex-direction: column; }
  .hdyo-footer__nav > .hdyo-footer__menu { flex-basis: auto; width: 100%; }
}
.hdyo-copyright p { margin: 0; }

/* Download prints the article as a document: no site chrome, the banner title in black */
@media print {
  .hdyo-header, .hdyo-footer__nav, .hdyo-copyright, .hdyo-audience-band, .hdyo-sidebar, .wp-block-hdyo-side-menu { display: none !important; }
  .hdyo-banner { min-height: 0 !important; padding: 0 !important; }
  .hdyo-banner img, .hdyo-banner .wp-block-cover__background { display: none !important; }
  .hdyo-banner .wp-block-post-title { color: #000 !important; text-shadow: none; }
  .wp-site-blocks { max-width: 100%; }
  img, figure, .wp-block-image, .wp-block-embed { break-inside: avoid; page-break-inside: avoid; }
}