/* Light or dark on anachef.sa (TC-70, Website S368). The switch, and the
   dark rules made by hand, loaded after assets/css/theme-dark.css (which
   tools/build-dark.js builds from style.css and cook-sheet.css). The
   logic is shared/theme.js, the same file as pro, admin and my, copied
   to assets/js/theme.js by tools/sync-shared.js. Every dark rule is
   screen only: a print is always light. */

/* The switch «تلقائي / فاتح / داكن». It sits at the end of the header's
   links: in the row on a wide screen, at the foot of the menu on a phone. */
.theme-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; flex: none; }
.theme-switch:empty { display: none; }
.theme-switch button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .8rem; line-height: 1; padding: 6px 10px; cursor: pointer; }
.theme-switch button:hover { color: var(--coffee); }
.theme-switch button[aria-pressed="true"] { background: var(--olive); color: #FFFFFF; }
.theme-switch button:focus-visible { outline: 2px solid var(--olive); outline-offset: -2px; }
/* The row has room for the five links, the switch and the language link
   (and "Get the app" on the staple pages) with the links a little closer. */
@media (min-width: 701px) {
  .header-v2 .site-nav { gap: 1.1rem; }
  .site-nav .theme-switch { margin-inline-start: .25rem; }
  .site-nav .theme-switch button { padding: 6px 8px; }
}
@media (min-width: 701px) and (max-width: 1000px) {
  .header-v2 .site-nav { gap: .8rem; }
  .site-nav a { font-size: .9rem; }
  .site-nav .theme-switch button { padding: 5px 6px; font-size: .72rem; }
}
@media (min-width: 701px) and (max-width: 880px) {
  .header-v2 .site-nav { gap: .6rem; }
  .site-nav a { font-size: .85rem; }
}
@media (max-width: 700px) {
  .site-nav .theme-switch { align-self: center; margin: .75rem 0 0; }
  .theme-switch button { padding: 8px 14px; font-size: .85rem; }
}
/* The cook sheet's header carries the logo alone, the switch at its far edge. */
.cook-header .theme-switch { margin-inline-start: auto; }
@media print { .theme-switch { display: none !important; } }

@media screen {
  /* The pressed choice: olive lifted for the dark page, white text. */
  html[data-theme="dark"] .theme-switch button[aria-pressed="true"] { background: #4F9A45; color: #FFFFFF; }
}
@media screen { .cook-header { display: flex; align-items: center; gap: 1rem; } }