/* --- fonts --- */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/noto-sans-v42-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/noto-sans-v42-latin-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Sans Oriya';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/noto-sans-v35-oriya-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Sans Oriya';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/noto-sans-v35-oriya-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Sans Devanagari';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/noto-sans-v30-devanagari-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Sans Devanagari';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/noto-sans-v30-devanagari-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Sans Bengali';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/noto-sans-v33-bengali-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Sans Bengali';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/noto-sans-v33-bengali-700.woff2') format('woff2');
}


/* --- variables --- */
:root {
    --text-base:    #0b0c0c;
    --text-meta:    #484949;
    --text-link:    #1a65a6;
    --text-visited: #54319f;
    --text-hover:   #0f385c;
    --text-active:  #0b0c0c;
    --text-brand:   #1d70b8;
    --text-error:   #ca3535;
    --text-success: #0f7a52;
    --text-focus:   #0b0c0c;


    --border-base:  #cecece;
    --border-meta:  #8eb8dc;
    --border-input: #0b0c0c;

    --bg-canvas: #f4f8fb;
    --bg-sheet:  #ffffff;
    --bg-focus:  #ffdd00;
    --bg-input:  #f3f3f3;
    --bg-hover:  #cecece;

    --line-height: 2;

    font-size: clamp(0.9rem, 0.6rem + 0.5svw, 1.5rem);
}

/* --- base reset --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
}

body {
    font-family: "Noto Sans", sans-serif;
    font-size: 1rem;
    background-color: var(--bg-sheet);
    color: var(--text-base);
    line-height: var(--line-height);
}

main, header, footer, form, h1, section {
    margin: 1rem 0;
}

h1 {
    font-size: 1.5rem;
}

a {
    font-weight: bold;
    text-decoration-offset: 0.1em;
    text-decoration-thickness: 1px;
}

a:link {
    color: var(--text-link);
}
a:visited {
    color: var(--text-visited);
}
a:hover {
    color: var(--text-hover);
    text-decoration-thickness: 3px;
}
a:active {
    color: var(--text-active);
}
a:focus {
    outline: 3px solid transparent;
    color: var(--text-focus);
    background-color: var(--bg-focus);
    box-shadow: 0 -2px var(--bg-focus), 0 4px var(--text-focus);
    text-decoration: none;
}

[lang="ory"] {
    font-family: "Noto Sans Oriya", sans-serif;
}

[lang="hin"] {
    font-family: "Noto Sans Devanagari", sans-serif;
}

[lang="ben"] {
    font-family: "Noto Sans Bengali", sans-serif;
}


.disabled-link {
    pointer-events: none;
}

.container {
    max-width: 90%;
    width: 640px;
    margin: 1rem auto;
}

.container-fluid {
    width: 100%;
}

.verse {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    margin: 1rem 0;
}

.verse-data {
    flex-grow: 1;
    min-width: 0;
}

.verse-number {
    display: inline-block;
    font-weight: 700;
    width: 2rem;
    flex-shrink: 0;
    flex-basis: 3ch;
    text-align: right;
}

.pagination {
    display: flex;
    justify-content: space-between;
}

.bible-search {
    display: grid;
    grid-template-columns: 8ch minmax(0, 1fr);
}

.bible-search > label,
.bible-search > select,
.bible-search > input {
    font-size: inherit;
    cursor: pointer;
}

.bible-search > select,
.bible-search > input {
    background-color: var(--bg-sheet);
    border: 2px solid var(--border-input);
    padding: 0.5rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.bible-search > select:hover,
.bible-search > input:hover {
    background-color: var(--bg-hover);
}

.bible-search > select:focus,
.bible-search > input:focus {
    color: var(--text-focus);
    background-color: var(--bg-focus);
    font-weight: 700;
    outline: 0;
}

.bible-search > input[type=submit] {
    grid-column: 2;
}