/*
Theme Name: Base
Theme URI:
Author:
Description: A plain, readable starting theme. Four pages that share one skeleton - left aligned, generous spacing, and colours you change in the editor rather than in code.
Version: 1.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: base
*/

/* ==========================================================================
   Almost everything lives in theme.json, on purpose - that is what puts the
   colours in the editor's colour picker so the owner can change them by
   clicking rather than by editing a file.

   What is left here is the handful of things theme.json has no opinion about.
   ========================================================================== */

/* Left aligned, NEVER justified. Justified text stretches the word spaces to
   force a straight right edge, and those gaps line up into vertical "rivers"
   that pull the eye down the page instead of along the line. It is the single
   worst thing you can do to a reader who finds reading hard - and it is one
   click away in the editor, so it is pinned here. */
body, .wp-block-post-content { text-align: left; }

/* Focus must be VISIBLE. Removing the outline makes a site unusable by
   keyboard, and it is removed constantly because the default ring is ugly.
   This one is deliberate rather than absent. */
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--wp--preset--color--teal);
  outline-offset: 2px;
}

/* The guidance boxes: what belongs in each spot, and why. Obviously unfinished
   on purpose - if one ever reaches a live site it should look wrong at a
   glance rather than blend in. */
.guide {
  border: 2px dashed var(--wp--preset--color--teal);
  background: rgba(11, 106, 91, .06);
  color: var(--wp--preset--color--teal-dark);
  padding: .9rem 1.1rem;
  border-radius: 4px;
  font-size: .95rem;
}

/* The warm band behind the banner, and the line that closes the page. */
.banner-band { background: var(--wp--preset--color--mango); border-bottom: 3px solid var(--wp--preset--color--mango-line); }
.site-footer { background: var(--wp--preset--color--paper-sunk); border-top: 3px solid var(--wp--preset--color--mango-line); }

/* The current page, marked TWO ways - weight and a line - because colour alone
   is invisible to a lot of people. */
.wp-block-navigation .current-menu-item > a {
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--wp--preset--color--mango-line);
}

img { max-width: 100%; height: auto; }

/* Some people turn animation off at the system level because it makes them
   ill. Honour that rather than overriding it. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* A printed page should not waste ink on menus that cannot be clicked. */
@media print {
  .wp-block-navigation, .banner-band { display: none; }
  body { background: #fff; color: #000; }
}