/* Royal Indian Masala - theme repairs, 2026-10-06 (details: fixes/theme-repairs-log.md in the project folder)
   1. Keyboard focus ring - the one intended visible change, shown to keyboard users only.
   2. Menu page - show the first menu panel before the page scripts run (layout shift).
   3. Header/footer images - keep their sizes as they were now that they carry width/height attributes (layout shift).
   4. Stand-in fonts with the same widths and line heights as the brush fonts (layout shift while fonts download).
   UNDO: delete this file and its <link> in header.php, and restore style.css + rim-mobile.css from the backup (font stacks). */

/* 1. Keyboard focus ring: brand orange with a thin cream inner ring, so it shows on cream, teal and dark backgrounds.
      :focus-visible is applied by browsers for keyboard focus only (text fields also get it when clicked, because they
      will be typed in). The theme's own rules remove all focus outlines; these win on specificity. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #f39200 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px #fff6e8 !important;
}

/* 2. Menu page: the menu panels are kept at height 0 until the page scripts mark one of them "active" after all scripts
      have loaded. Until then the page is a whole panel too short and the footer sits in the first screen - the biggest
      layout shift on /menu/. Show the first panel in place meanwhile; as soon as any panel is active this rule steps back. */
.menus:not(:has(.menu.active)) .menu:not(.menu ~ .menu) {
  height: fit-content;
  transform: none;
}

/* 3. The header and footer images now carry their real width/height attributes, so the browser can reserve their space
      before they load (layout shift). The attributes must only set the proportions - the sizes below stay as they were. */
footer img.footer-border,
footer img.right-image,
.main-footer__logo img {
  height: auto;
}
.side-scrolling-footer img,
.main-footer__socials img {
  width: auto;
  height: auto;
}

/* 4. Stand-in fonts, measured against the real fonts in Chrome on 2026-10-06. They are only seen while the real fonts are
      still downloading (the headline font is a 2 MB file); once loaded, the page looks exactly as before. size-adjust is
      tuned for the capital-letter headlines and navigation this site uses. */
@font-face {
  font-family: "Atomic-Marker-fallback";
  src: local("Arial"), local("Roboto"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 76%;
  ascent-override: 148.7%;
  descent-override: 56.6%;
  line-gap-override: 3.9%;
  /* only the characters the brush font itself has; anything else keeps falling back to plain sans-serif, as before */
  unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-201D, U+2022, U+2026, U+20AC;
}
@font-face {
  font-family: "The-Hand-fallback";
  src: local("Arial"), local("Roboto"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 44%;
  ascent-override: 211.4%;
  descent-override: 43.2%;
  line-gap-override: 0%;
  /* The Hand has no ^ ~ bullet or ellipsis glyphs: those keep falling back to plain sans-serif, as before */
  unicode-range: U+0020-005D, U+005F-007D, U+00A0-00FF, U+2013-2014, U+2018-201D, U+20AC;
}