/* DJP Accessibility. Loaded after djp.css. */

/* Skip link: hidden until focused, then the first thing on the page. */
.djp-skip { position: absolute; left: 12px; top: -60px; z-index: 100000; padding: 10px 16px; border-radius: 10px;
  background: #f6a723; color: #08080d !important; font-weight: 700; text-decoration: none; transition: top .15s; }
.djp-skip:focus { top: 12px; outline: 3px solid #f6f3ec; outline-offset: 2px; }
#main:focus { outline: none; }

/* The payment modal title was an h5; keep its size now that it is an h2. */
.modal-header h2[data-djp-was="h5"] { font-size: 1.25rem; margin: 0; }

/* Contrast. --djp-dim (#6f6c82) measured 3.38 to 3.94:1 on the site's backgrounds; #8a879e is 4.93 to 5.75:1. */
:root { --djp-dim: #8a879e; }
.ms_copyright p, .ms_copyright .site-info p, ul.album_list_namevv li { color: #8a879e !important; }

/* Account forms sit on a light card (#f6f9fd). Theme blue #527bb2 measured 4.11:1 there; #4a4f66 is 7.64:1,
   and the dark amber link #8a5200 is 6.05:1. Scoped to the account forms, which are the light cards. */
form.woocommerce-form-login label, form.woocommerce-form-register label, form.lost_reset_password label,
form.woocommerce-form-login .screen-reader-text, form.woocommerce-form-register .screen-reader-text,
form.woocommerce-form-login .woocommerce-form__label, .woocommerce-ResetPassword label { color: #4a4f66 !important; }
.woocommerce-LostPassword a, .lost_password a { color: #8a5200 !important; }

/* Log in / Register buttons: white on #527bb2 measured 4.34:1; dark on gold is 9.96:1. */
.woocommerce-form-login__submit, .woocommerce-form-register__submit {
  background: var(--djp-gold, #f6a723) !important; color: #08080d !important; border-color: transparent !important; }

/* Visible focus for keyboard users on the theme's controls. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible { outline: 2px solid #ffc95e !important; outline-offset: 2px; }

/* Register form text sat in near-white on the light card (1.06:1). Same dark text and amber link as the login card. */
form.woocommerce-form-register p, form.woocommerce-form-register .woocommerce-privacy-policy-text,
form.woocommerce-form-register .woocommerce-privacy-policy-text p { color: #4a4f66 !important; }
form.woocommerce-form-register a, form.woocommerce-form-login a { color: #8a5200 !important; }

/* Song-list track numbers are spans now (were h4); same look as before. */
span.songslist_sn { display: block; font-family: var(--djp-ui); font-size: 13px; font-weight: 600; line-height: 15.6px; color: var(--djp-dim); margin: 0 0 10px; }

/* Policy pages: headings shifted up one level on output keep their old sizes (measured 2026-10-02). */
.entry-content .djp-was-h3, article .djp-was-h3 { font-family: var(--djp-ui) !important; font-size: 29.4px !important; font-weight: 700 !important; line-height: 35.28px !important; color: #1a202c !important; margin: 49.98px 0 14.7px !important; text-transform: none !important; letter-spacing: normal !important; }
.entry-content .djp-was-h4, article .djp-was-h4 { font-family: var(--djp-ui) !important; font-size: 25.2px !important; font-weight: 700 !important; line-height: 30.24px !important; color: #1a202c !important; margin: 42.84px 0 12.6px !important; text-transform: none !important; letter-spacing: normal !important; }

/* Policy pages: an old hand-made rule (WPCode snippet 191) lightens the body there, which showed as a white band
   under the page title, and its heading color made the sidebar "Links" title dark on a dark card (1.13:1). */
html body.privacy-policy, html body.page-id-3, html body.page-id-20, html body.page-id-21 { background: var(--djp-bg, #08080d) !important; }
html body .widget h2.widget-title, html body .widget .widget-title { color: var(--djp-text, #f6f3ec) !important; }

/* The theme's gold sign-in / register buttons turn their text gold on focus (measured rgb(213,144,30) on rgb(246,167,35)),
   so a keyboard user saw a blank button. Keep the dark label on focus. */
html body input#login_btn:focus, html body input#login_btn:focus-visible, html body input#register_btn:focus, html body input#register_btn:focus-visible { color: #140c00 !important; }