/* What every photocal.ai page shares: the footer, the language picker, and the adjustments each
   locale's script needs. The pages differ in stylesheet, font and palette, so these set their own and
   are specific enough to win over each page's element-level rules. */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ─── Scripts ───
   The pages' tight tracking and line heights were drawn for Latin text. Arabic letters must join, so
   they can't be spaced apart, and Indic, Thai, Arabic and other scripts carry marks above and below
   the line that a line height of 1 clips. */
html[data-script="other"] body * {
    letter-spacing: normal !important;
}

html[data-script="other"] :is(h1, h2, h3) {
    line-height: 1.3 !important;
}

/* A word longer than the screen is wide (a long compound in German, Finnish, Malay or Kyrgyz, at a large
   text size) breaks rather than pushing the page sideways. `anywhere`, not `break-word`, so grid and flex
   layouts can also shrink below the longest word. Inherited by everything; it only ever breaks a word
   that would not otherwise fit. */
body {
    overflow-wrap: anywhere;
}

/* ─── Header actions ───
   The pill pages put beside the language picker. */
.header-actions,
.home-actions,
.topbar-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 0.6rem;
}

/* ─── Language picker ───
   A pill like the header's other pills, opening a panel of every locale in its own name. It is always
   the last header action, so the panel, aligned to its inline end, opens toward the page. */
.language-picker {
    --picker-color: rgba(0, 0, 0, 0.6);
    --picker-border: rgba(0, 0, 0, 0.6);
    --picker-background: transparent;
    --picker-accent: #0F766E;
    --picker-panel: #ffffff;
    --picker-panel-border: rgba(0, 0, 0, 0.08);
    --picker-text: #1a1a1a;
    --picker-hover: rgba(15, 118, 110, 0.1);
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
    .language-picker {
        --picker-color: rgba(255, 255, 255, 0.6);
        --picker-border: rgba(255, 255, 255, 0.6);
        --picker-accent: #5EEAD4;
        --picker-panel: #1c1f20;
        --picker-panel-border: rgba(255, 255, 255, 0.1);
        --picker-text: #f0f0f0;
        --picker-hover: rgba(94, 234, 212, 0.12);
    }
}

/* The press page is dark in both appearances, and its header buttons are filled. */
.press-page .language-picker {
    --picker-color: #ffffff;
    --picker-border: rgba(255, 255, 255, 0.14);
    --picker-background: rgba(255, 255, 255, 0.07);
    --picker-accent: #5eead4;
    --picker-panel: #0c1f1b;
    --picker-panel-border: rgba(255, 255, 255, 0.12);
    --picker-text: #f2fbf8;
    --picker-hover: rgba(94, 234, 212, 0.12);
}

.language-picker > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--picker-border);
    border-radius: 999px;
    background: var(--picker-background);
    color: var(--picker-color);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: normal;
    list-style: none;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.language-picker > summary::-webkit-details-marker {
    display: none;
}

.press-page .language-picker > summary {
    min-height: 2.8rem;
    padding: 0.8rem 1.15rem;
    font-weight: 700;
}

.language-picker > summary:hover,
.language-picker > summary:focus-visible,
.language-picker[open] > summary {
    color: var(--picker-accent);
    border-color: var(--picker-accent);
}

/* Sized to the text, so the pill is exactly as tall as the header's other pills. */
.language-picker-globe {
    flex: none;
    width: 1.05em;
    height: 1.05em;
}

.language-picker-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    inset-inline-end: 0;
    z-index: 50;
    width: min(40rem, calc(100vw - 2rem));
    max-height: min(70vh, 36rem);
    overflow-y: auto;
    padding: 1rem;
    border: 1px solid var(--picker-panel-border);
    border-radius: 20px;
    background: var(--picker-panel);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
    color: var(--picker-text);
    text-align: start;
}

.language-picker-title {
    margin: 0 0 0.6rem;
    padding-inline: 0.7rem;
    color: var(--picker-accent);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.language-picker-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr));
    gap: 0.1rem 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.language-picker-link {
    display: block;
    padding: 0.45rem 0.7rem;
    border-radius: 10px;
    color: var(--picker-text);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
}

.language-picker-link:hover,
.language-picker-link:focus-visible {
    background: var(--picker-hover);
    color: var(--picker-accent);
}

.language-picker-link[aria-current="true"] {
    background: var(--picker-hover);
    color: var(--picker-accent);
    font-weight: 700;
}

/* ─── Footer ─── */
.site-footer {
    padding: 2.5rem 1.5rem 3rem;
    background: #0a0f0e;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
    font-size: 0.85rem;
    line-height: 1.6;
    text-align: center;
    -webkit-font-smoothing: antialiased;
}

.site-footer .site-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 2rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.site-footer .site-footer-links a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s;
}

.site-footer .site-footer-links a:hover,
.site-footer .site-footer-links a:focus-visible {
    color: #14B8A6;
}

.site-footer .site-footer-languages {
    max-width: 60rem;
    margin: 1.5rem auto 1.25rem;
}

.site-footer .site-footer-languages-heading {
    margin: 0 0 0.6rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.6;
    text-transform: uppercase;
}

.site-footer .site-footer-languages ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer .site-footer-language {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    text-decoration: none;
    transition: color 0.2s;
}

.site-footer .site-footer-language:hover,
.site-footer .site-footer-language:focus-visible {
    color: #14B8A6;
}

.site-footer .site-footer-language[aria-current="true"] {
    color: #ffffff;
    font-weight: 600;
}

.site-footer .site-footer-note {
    margin: 0.35rem 0 0;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

@media (prefers-color-scheme: dark) {
    .site-footer { background: #0a0a0b; }
}

@media print {
    .site-footer,
    .language-picker { display: none; }
}