/* The frame of every page: the skip link, the masthead (logo, site menu with
   Media's list, hymn search), a section's own menu, and the footer with the
   quiet rope on its top edge. Loaded after tokens.css and ornaments.css by every
   page: the new ones (hymn_library/site_shell.php, before hymn_page.css) and the
   old ones (includes/html_header.ihtml, after Bootstrap and style.css, so it wins
   over Bootstrap's .dropdown-menu and link colours). */

.hp-skip { position: absolute; left: -9999px; top: 0; z-index: var(--ts-z-tooltip); padding: 8px 14px; background: var(--ts-white); font-family: var(--ts-font-sans); }
.hp-skip:focus { left: 8px; top: 8px; }


/* ---------- Site header (the masthead) ---------- */
/* The masthead: the original tasbeha.org gold header, lightened (header), the logo as
   it is, the menu in brown (header-text), ending in a plain sand hairline. */
.ts-masthead { background: var(--ts-header); color: var(--ts-header-text); position: relative; border-bottom: 1px solid var(--ts-border); }
.ts-masthead-in { display: flex; align-items: center; gap: 16px; padding: 0 20px; min-height: 60px; }
.ts-plaque { display: inline-flex; align-items: center; padding: 6px 12px; background: transparent; border-radius: var(--ts-radius-xs);
    box-shadow: 0 0 0 1px var(--ts-brown); }
.ts-plaque img { display: block; height: 36px; width: auto; }
.ts-wordmark { display: inline-flex; align-items: center; gap: 12px; color: var(--ts-ink); text-decoration: none; }
.ts-wordmark:hover { color: var(--ts-brown); }
.ts-wordmark-name { font-family: var(--ts-font-display); font-weight: 400; font-size: 24px; letter-spacing: .14em; line-height: 1; }
.ts-wordmark-sub { display: block; font-family: var(--ts-font-coptic); font-size: 14px; letter-spacing: .06em; color: var(--ts-ochre); margin-top: 4px; }
.ts-mast-nav { display: flex; height: 100%; align-items: stretch; align-self: stretch; margin-left: auto; list-style: none; padding: 0; margin-top: 0; margin-bottom: 0; }
.ts-mast-nav a { position: relative; display: flex; align-items: center; padding: 0 12px; white-space: nowrap; font-family: var(--ts-font-sans); font-weight: 600;
    font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ts-header-text); text-decoration: none; }
.ts-mast-nav a:hover { color: var(--ts-header-text); background: rgba(255,255,255,.55); }
.ts-mast-nav a[aria-current=page] { color: var(--ts-header-text); text-decoration: underline; text-decoration-color: var(--ts-bronze);
    text-decoration-thickness: 3px; text-underline-offset: 8px; }
.ts-mast-nav a:focus-visible, .ts-masthead a:focus-visible, .ts-masthead button:focus-visible { outline-color: var(--ts-focus); outline-offset: -3px; }
.ts-mast-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--ts-radius-pill);
    background: var(--ts-white); border: 1px solid var(--ts-bronze); color: var(--ts-text-muted); font-size: 15px; white-space: nowrap; flex: none; }
.ts-mast-search .fa { color: var(--ts-brown); }
.ts-mast-menu { display: none; border: 1px solid var(--ts-border-control); background: none; color: var(--ts-brown); width: 44px; height: 40px; border-radius: var(--ts-radius-xs); font-size: 18px; margin-left: auto; }
.ts-masthead--phone .ts-mast-nav, .ts-masthead--phone .ts-mast-search { display: none; }
.ts-masthead--phone .ts-mast-menu { display: inline-grid; place-items: center; }
.ts-masthead--phone .ts-masthead-in { min-height: 60px; padding: 0 16px; }
.ts-submenu { display: flex; align-items: stretch; gap: 0 8px; background: var(--ts-surface); border-bottom: 1px solid var(--ts-border); }
.ts-submenu a { display: flex; align-items: center; gap: 9px; min-height: 52px; padding: 0 14px; font-weight: 500; color: var(--ts-text-muted); text-decoration: none; border-bottom: 3px solid transparent; }
.ts-submenu a:hover { color: var(--ts-brown); border-bottom-color: var(--ts-bronze); }
.ts-submenu a[aria-current=page] { color: var(--ts-brown); font-weight: 600; border-bottom-color: var(--ts-gold); }
.ts-submenu .ts-ic { width: 28px; height: 28px; flex: none; filter: brightness(.88) contrast(1.15); }

/* ---------- Footer ---------- */
.ts-footer { background: var(--ts-surface-raised); color: var(--ts-text); font-size: 15.5px; }
/* The rope sits on the line where the white page meets the footer: the footer's top
   half-rope (6px) is painted white and the rope, on no ground, shows both colours. */
.ts-footer { background: linear-gradient(var(--ts-surface) 0 6px, var(--ts-surface-raised) 6px); }
.ts-footer > .ts-cord { margin: 0; background-color: transparent; }
.ts-footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; padding: 32px 28px 26px; }
.ts-footer h3 { font-family: var(--ts-font-sans); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ts-brown); margin-bottom: 10px; }
.ts-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ts-footer a { color: var(--ts-text); text-decoration: none; }
.ts-footer a:hover { color: var(--ts-brown); text-decoration: underline; }
.ts-footer-about p { color: var(--ts-text-muted); max-width: 34ch; margin: 8px 0 0; }
.ts-footer-base { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 14px 28px; background: var(--ts-surface); border-top: 1px solid var(--ts-border); color: var(--ts-text-muted); font-size: 14px; }
.ts-footer-base .ts-coptic { color: var(--ts-brown); font-size: 16px; letter-spacing: .04em; }
.ts-footer-base a { color: var(--ts-link); }


/* ---------- The site around the design ---------- */

/* The masthead: the logo, the site menu (Media opens a list), the hymn search; on a
   phone the menu and search fold behind a button (hymn_page.js). */
.ts-masthead-in { max-width: var(--ts-container); margin: 0 auto; padding: 0 var(--ts-gutter-desktop); }
.ts-mast-logo { display: inline-flex; flex: none; }
.ts-mast-logo img { display: block; height: 48px; width: auto; }
.ts-mast-navwrap { display: flex; align-items: center; gap: 16px; margin-left: auto; align-self: stretch; }
.ts-mast-nav { position: relative; }
.ts-mast-nav > li { position: relative; display: flex; }
.ts-mast-nav a .fa { margin-left: 4px; font-size: 13px; }
.ts-mast-nav .dropdown-menu { display: none; position: absolute; left: 0; top: 100%; z-index: var(--ts-z-overlay); min-width: 200px; margin: 0; padding: 6px 0;
    list-style: none; background: var(--ts-white); border: 1px solid var(--ts-border); border-radius: var(--ts-radius-xs); box-shadow: var(--ts-shadow-overlay); }
.ts-mast-nav .open > .dropdown-menu { display: block; }
/* Where there is a mouse, Media opens when the pointer is over it (and for keyboard focus); a click still opens it on a touch screen. */
@media (hover: hover) and (min-width: 768px) {
    .ts-mast-nav .dropdown:hover > .dropdown-menu, .ts-mast-nav .dropdown:focus-within > .dropdown-menu { display: block; }
}
.ts-mast-nav .dropdown-menu a { display: block; padding: 8px 16px; height: auto; font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ts-text); }
.ts-mast-nav .dropdown-menu a:hover { background: var(--ts-surface-raised); color: var(--ts-brown); }
.ts-mast-search { font-family: var(--ts-font-sans); }
.ts-mast-search input { border: 0; background: none; font: inherit; color: var(--ts-text); width: 150px; padding: 0; outline: none; }
.ts-mast-search:focus-within { outline: var(--ts-size-focus-ring) solid var(--ts-focus); outline-offset: 2px; }
.ts-mast-menu { cursor: pointer; }
.ts-submenu { font-family: var(--ts-font-sans); padding-right: var(--ts-gutter-desktop);
    padding-left: max(calc(var(--ts-gutter-desktop) - 14px), calc((100vw - var(--ts-container)) / 2 + var(--ts-gutter-desktop) - 14px)); }
.ts-submenu a { font-size: 15.5px; }

/* The footer: the quiet rope closes the page just above it. */
.ts-footer { margin-top: var(--ts-space-16); font-family: var(--ts-font-serif); }
.ts-footer > .ts-cord { margin: 0; }
.ts-footer-cols { max-width: var(--ts-container); margin: 0 auto; padding-left: var(--ts-gutter-desktop); padding-right: var(--ts-gutter-desktop); }
.ts-footer-base { padding-left: max(var(--ts-gutter-desktop), calc((100% - var(--ts-container)) / 2 + var(--ts-gutter-desktop)));
    padding-right: max(var(--ts-gutter-desktop), calc((100% - var(--ts-container)) / 2 + var(--ts-gutter-desktop))); }
.ts-footer-about img { height: 44px; width: auto; }
.ts-footer-base { border-top: 0; box-shadow: 0 -1px 0 var(--ts-border); }
.ts-footer-base .ts-coptic { font-family: var(--ts-font-coptic); }
.ts-footer-sponsor { margin-left: auto; }
.hp-body:has(#sync-player) .ts-footer { margin-top: var(--ts-space-10); }

/* The menu, the search and the footer's lists in Figtree, the menu in sentence case
   (after the masthead's own rules above, which it overrides). */
.ts-mast-nav a, .ts-mast-search, .ts-submenu a, .ts-footer ul, .ts-footer-base { font-family: var(--ts-font-sans); }
.ts-mast-nav a { font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; }

/* The header: a braided lapis-and-gold band above and below a plain gold-light field, and the icon of Christ
   in a gold ring, centred, hanging over the lower braid. The braid is images/header/braid.svg (drawn in code,
   tools/design-concepts/assets/make-braid.py); the icon is images/header/christ-icon.png; the inscriptions beside
   the head are live Coptic text. */
.ts-masthead { background: var(--ts-header); border: 0; }
.ts-masthead { border-bottom: 2px solid var(--ts-gold); }
.ts-masthead::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; background: url(/images/header/braid.svg?v=2) repeat-x 0 0 / auto 22px; pointer-events: none; }
.ts-masthead-in { position: relative; min-height: 176px; padding-top: 30px; padding-bottom: 22px; }
.ts-mast-icon { position: absolute; left: 50%; top: 2px; transform: translateX(-50%); display: block; width: 188px; height: 188px; margin: 0; z-index: 2; border-radius: 50%; }
.ts-mast-icon picture { display: block; width: 100%; height: 100%; }
.ts-mast-icon .face { display: block; width: 100%; height: 100%; }
/* The icon is a picture, not a link; clicks go to whatever is behind it. */
.ts-mast-icon { pointer-events: none; }
.ts-mast-logo img { height: 56px; }
.ts-mast-nav a { font-size: 15.5px; font-weight: 500; padding: 0 9px; }
.ts-mast-navwrap { flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; margin-left: auto; }
.ts-mast-nav { height: auto; align-self: auto; margin-left: 0; }
.ts-mast-nav a { min-height: 44px; }
.ts-mast-nav a:hover { background: none; box-shadow: inset 0 -3px 0 var(--ts-bronze); }
/* The masthead owns its type and link colours, so Bootstrap's body (16px) and its link colour on the older pages
   cannot move the menu or recolour the icon and logo. The selected page gets the hover bar, at the same height. */
.ts-masthead { font: 400 18px/1.55 var(--ts-font-serif); }
.ts-masthead a { text-decoration: none; }
.ts-masthead { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }   /* the new pages set it on the body, the older ones do not */
.ts-mast-icon, .ts-mast-logo { color: var(--ts-header-text); }
.ts-mast-search, .ts-mast-nav { margin-top: 0; margin-bottom: 0; }   /* the older pages' form margin (15px) pushed the menu up */
.ts-mast-nav a[aria-current=page] { text-decoration: none; box-shadow: inset 0 -3px 0 var(--ts-bronze); }
@media (min-width: 768px) and (max-width: 1180px) {
    .ts-mast-icon { display: none; }
    .ts-mast-logo img { height: 44px; }
}


.ts-submenu .short { display: none; }

/* The section row, centred under the icon of Christ, in the display serif */
@media (min-width: 768px) {
    .ts-submenu { justify-content: center; padding: 14px 0 0; gap: 0 8px; }
    .ts-submenu a { font-family: var(--ts-font-display); font-size: 18.5px; font-weight: 400; color: var(--ts-brown); min-height: 54px; }
    /* equal tabs, so with three the middle one sits exactly under the icon of Christ */
    .ts-submenu a { flex: 0 0 230px; justify-content: center; padding: 0 10px; }
    .ts-submenu a[aria-current=page] { font-weight: 400; }
    .ts-submenu .ts-ic { width: 32px; height: 32px; filter: brightness(.8) contrast(1.2); }
}

/* Phones */
@media (max-width: 767px) {
    .ts-masthead-in { padding: 0 var(--ts-gutter-phone); min-height: 60px; flex-wrap: wrap; }
    .ts-mast-logo img { height: 34px; }
    .ts-mast-menu { display: inline-grid; place-items: center; }
    .ts-mast-navwrap { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 8px; margin: 0; padding: 0 0 12px; }
    .ts-masthead.is-open .ts-mast-navwrap { display: flex; }
    .ts-mast-nav { flex-direction: column; height: auto; margin: 0; }
    .ts-mast-nav a { padding: 10px 4px; font-size: 16px; }
    .ts-mast-nav > li { display: block; }                            /* the Media list opens under the word, not beside it */
    .ts-mast-nav .dropdown-menu { position: static; float: none; box-shadow: none; border: 0; background: none; padding: 0 0 6px 14px; min-width: 0; }
    .ts-mast-nav .dropdown-menu a { color: var(--ts-header-text); font-size: 15px; padding: 7px 4px; min-height: 0; }
    .ts-mast-search { display: flex; }
    .ts-mast-search input { width: 100%; }
    .ts-masthead::before { display: none; }
    .ts-masthead-in { min-height: 64px; padding-top: 6px; padding-bottom: 6px; gap: 8px; flex-wrap: wrap; }
    .ts-mast-logo img { height: 34px; }
    .ts-mast-icon { position: relative; left: auto; top: auto; transform: none; order: -1; width: 48px; height: 48px; margin: 0; }
    .ts-mast-navwrap { align-items: stretch; }
    /* the five items share the width: icon over a short label, so the row looks the same on every page */
    .ts-submenu { padding: 0; gap: 0; overflow-x: auto; scrollbar-width: none; }
    .ts-submenu::-webkit-scrollbar { display: none; }
    .ts-submenu a { flex: 1 1 0; min-width: 58px; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 2px 4px; min-height: 58px; font-size: 12.5px; text-align: center; white-space: nowrap; }
    .ts-submenu .ts-ic { width: 26px; height: 26px; }
    .ts-submenu .long { display: none; }
    .ts-submenu .short { display: inline; }
    .ts-footer-cols { grid-template-columns: 1fr 1fr; padding: 24px var(--ts-gutter-phone); }
    .ts-footer-about { grid-column: 1 / -1; }
    .ts-footer-base { padding: 14px var(--ts-gutter-phone); }
    .ts-footer-sponsor { margin-left: 0; }
}

@media print {
    .ts-masthead, .ts-submenu, .ts-footer { display: none !important; }
}

@media (max-width: 359px) {
    .ts-masthead-in { gap: 6px; padding-left: 10px; padding-right: 10px; }
    .ts-mast-icon { width: 42px; height: 42px; }
    .ts-mast-logo img { height: 28px; }
    .ts-mast-menu { width: 38px; }
}