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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    line-height: 1.6;
    margin: 0; 
    padding: 0;
    display: flex;
    flex-direction: column; 
    align-items: center; 
    min-height: 100vh; 
    background: #ffffff;
}

.search-container {
    text-align: center;
    padding: 20px;
    /* The hero owns the whole first screen and centres its content in it, so the
       search field sits near the middle of the window instead of hanging off a
       fixed top padding. `min-height: 0` lets it give the space back rather than
       grow the screen past one viewport on a short window. */
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 900px;
}

.search-container h1 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 20px;
}

/* L, A and D. Their own size, larger than the rest of the title, used to be an
   inline `font-size: 45px` on each span — which set the line box of the whole
   title and so ignored every responsive step below. Kept as a class, in ems of the
   title, so scaling the title scales them with it. */
.search-container .lad-initial {
    color: #e74c3c;
    font-size: 1.12em;
}

.search-field {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    display: flex; 
    box-shadow: none;
    border: none;
    overflow: visible;
    height: 50px; 
    align-items: center;
}

.search-field input {
    flex: 1; 
    height: 100%; 
    padding: 0 15px; 
    font-size: 1rem;
    border: 1px solid #ccc;
    border-right: none; 
    border-radius: 5px 0 0 5px; 
    background-color: #fff;
    transition: all 0.3s;
    box-sizing: border-box; 
}

.search-field button {
    height: 100%; 
    background-color: #2c3e50;
    color: white;
    border: 1px solid #2c3e50; 
    border-left: none; 
    border-radius: 0 5px 5px 0; 
    padding: 0 15px;
    cursor: pointer;
    transition: all 0.3s; 
    font-size: 1rem; 
    box-sizing: border-box;
}

.search-field input:focus {
    border-color: #2c3e50;
    box-shadow: 0 0 0 1px #2c3e50;
    outline: none;
}

.search-field input:focus + button {
    border-color: #2c3e50;
    box-shadow: 0 0 0 1px #2c3e50;
}

.search-field button:hover {
    background-color: #3e5771;
}

@media (max-width: 768px) {
    .search-container h1 {
        font-size: 2rem;
    }

    .search-field input {
        padding: 10px;
    }

    .search-field button {
        padding: 0 15px;
    }
}
.additional-links {
    margin-top: 20px;
    font-size: 16px;
    display: flex;
    justify-content: space-around;
    color: #2962ab;
}

.additional-links a {
    text-decoration: none;
    color: #2962ab;
    font-weight: bold;
    transition: color 0.3s ease;
}

.additional-links a:hover {
    color: #003366;
}
/* The old `footer { position: fixed; bottom: 0 }` block (plus unscoped
   .footer-content/.footer-section/.footer-bottom copies of the shared footer)
   lived here as dead code — index.html had no footer, and index.css is loaded
   by index.html alone. It is gone: `position: fixed` pinned the new footer over
   the hero instead of letting it sit at the end of the page. The home footer is
   defined under .home-footer at the bottom of this file. */

.login-button {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: transparent;
    color: #2c3e50; 
    border: 1px solid #2c3e50;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
    z-index: 10;
}

.login-button:hover {
    background-color: #2c3e50; 
    color: white; 
}



.search-form-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.search-help-container {
  position: relative;
  display: inline-block;

  /* Add this line */
  flex-shrink: 0; /* Prevents the container from being shrunk or stretched by the search bar */

  /* Your other styles below are fine */
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

.help-icon {
    border: none !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
    font-style: italic;
    font-weight: bold !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.2s !important;
    /* Ensure no inheritance from form/search field styles */
    font-family: inherit;
    box-sizing: border-box !important;
}

.help-icon:hover {
    background: #357abd;
}

.wildcard-info {
    position: absolute;
    top: 50%;
    right: calc(100% + 10px);
    transform: translateY(calc(-35% - 10px));
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 16px;
    width: 340px;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
    display: none;
    font-size: 13px;
    line-height: 1.4;
    overscroll-behavior: contain;
}

/* Custom scrollbar for the info box */
.wildcard-info::-webkit-scrollbar {
    width: 6px;
}

.wildcard-info::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.wildcard-info::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.wildcard-info::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

.wildcard-info::before {
    content: '';
    position: absolute;
    top: 35%;
    left: 100%; /* Place it on the right edge of the info box */
    transform: translateY(-50%);
    
    /* The triangle shape */
    border-width: 9px;
    border-style: solid;
    border-color: transparent transparent transparent #ddd; /* The border color */
}

/* 2. This creates the white fill of the triangle on top of the border */
.wildcard-info::after {
    content: '';
    position: absolute;
    top: 35%;
    left: 100%; /* Place it on the right edge of the info box */
    transform: translateY(-50%);

    /* The triangle shape */
    border-width: 8px; /* Slightly smaller to fit inside the border */
    border-style: solid;
    border-color: transparent transparent transparent white; /* The fill color */
}

.wildcard-info h3 {
    margin: 16px 0 8px 0;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 6px;
}

.wildcard-info h3:first-of-type {
    margin-top: 0;
}

.wildcard-examples {
    margin: 0 0 8px 0;
    padding: 0;
}

.wildcard-examples li {
    list-style: none;
    margin: 4px 0;
    padding: 5px 8px;
    background: #f8f9fa;
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.wildcard-examples .pattern {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #d63384;
    font-size: 12px;
    flex-shrink: 0;
}

.wildcard-examples .description {
    color: #555;
    font-size: 12px;
    flex: 1;
}

.close-help {
    position: absolute !important;
    top: 8px !important;
    right: 12px !important;
    background: none !important;
    border: none !important;
    font-size: 18px !important;
    cursor: pointer !important;
    color: #999 !important;
    padding: 0 !important;
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.close-help:hover {
    color: #666;
}
        
/* Special Characters Dropdown Styles */
.special-chars-dropdown {
    font-family: inherit;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    z-index: 1001; /* Higher than main autocomplete */
    max-height: 150px;
    overflow-y: auto;
}

.special-char-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease;
}

.special-char-item:last-child {
    border-bottom: none;
}

.special-char-item:hover,
.special-char-item.selected {
    background-color: #f8f9fa;
}

.special-char-item.selected {
    background-color: #e3f2fd;
    border-left: 3px solid #2196f3;
}

.special-char {
    font-size: 16px;
    font-weight: bold;
    color: #2196f3;
    min-width: 20px;
}

.base-char {
    font-size: 12px;
    color: #666;
    font-style: italic;
}



/* Responsive adjustments */
@media (max-width: 768px) {
    .special-chars-dropdown {
        min-width: 150px;
        font-size: 13px;
    }
    
    .special-char-item {
        padding: 6px 10px;
    }
    
    .special-char {
        font-size: 15px;
    }
    
    .base-char {
        font-size: 11px;
    }
}

/* Animation for smooth appearance */
.special-chars-dropdown {
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* === FIRST SCREEN ===
   Exactly one viewport: the three links at the top, the hero in the middle, the
   funders closing it off at the bottom. Only the copyright line is under the fold.
   The hero is the only part that flexes — the other two are their natural height
   and it takes the rest — so this is exact at any window height and for either
   language of the notice, with no hand-tuned constant to drift out of date. */
.home-screen {
    width: 100%;
    min-height: 100vh;
    /* Mobile browsers: the small-viewport unit, so the hero is one screen of the
       room the browser actually leaves. Ignored where dvh is unsupported. */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* === FUNDERS ===
   The logos beside the notice, the pair centred, closing the first screen. The
   notice is held to a column narrow enough to run to five or six lines rather than
   one long ribbon. */
.home-funding {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;         /* so the dividers run the full height of the row */
    --funder-gap: 40px;
    gap: var(--funder-gap);
    padding: 0 20px 26px;
}
.home-funding .funder-logos,
.home-funding .funder-logos-funders {
    flex: 0 0 auto;
    gap: 14px;
}
/* The same two-row arrangement and the same 1.5:1 height as the shared band, a
   step smaller because the home page has to fit this under the hero on one
   screen: the Academy's mark renders 56px tall, the two funder marks 37px each. */
.home-funding .funder-logo--saw     { width: 168px; }
.home-funding .funder-logo--sachsen { width: 25px; }
.home-funding .funder-logo--au      { width: 78px; }
.home-funding .funder-links {
    flex: 0 0 auto;
}
.home-funding .funder-text {
    flex: 0 1 560px;
    text-align: left;
}
.home-funding .funder-note {
    font-size: 0.74rem;
    line-height: 1.55;
}

/* === BELOW THE FOLD ===
   The copyright line, on its own, under the same fading separator the band uses. */
.home-footer {
    width: 100%;
    padding: 18px 20px;
    background-color: #fff;
    background-image: linear-gradient(to right, rgba(236, 240, 241, 0) 0%, var(--antiflash-white) 18%, var(--antiflash-white) 82%, rgba(236, 240, 241, 0) 100%);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 1px;
}

.home-footer-bottom {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    font-size: 0.8rem;
    color: #666;
}

/* Short windows. The first screen now carries the links and the funders as well
   as the hero, so there is less room to play with than when the hero had it to
   itself: about 640px of content on a wide window. The hero gives up its own slack
   first, and below roughly 760px of viewport height these steps take air out of it
   in stages, the 8.2em under the search field first — on a short window that gap
   alone is a fifth of the screen.

   The selectors carry `.search-container`, `.stats-container` or `.home-funding`
   even where a bare class would read better: statistics.css, search-buttons.css
   and funder-band.css are linked after this file, so a same-specificity rule here
   would lose to the base rule there and the step would silently do nothing. */
@media (min-width: 769px) and (max-height: 820px) {
    .search-container h1 {
        margin-bottom: 12px;
    }
    .stats-container .stats-layout {
        margin-top: 5em;
    }
}

@media (min-width: 769px) and (max-height: 740px) {
    .search-container h1 {
        font-size: 2.1rem;
    }
    .search-container .diacritic-toolbar {
        padding: 2px;
    }
    .stats-container .stats-layout {
        margin-top: 3em;
    }
    .stats-container .divider {
        height: 62px;
    }
    .home-funding {
        padding-bottom: 18px;
    }
}

@media (min-width: 769px) and (max-height: 660px) {
    .search-container {
        padding: 10px 20px;
    }
    .search-container h1 {
        font-size: 1.9rem;
        margin-bottom: 8px;
    }
    .stats-container .stats-layout {
        margin-top: 1.6em;
    }
    .stats-container .entries-number,
    .stats-container .attestations-number {
        font-size: 2rem;
    }
    .stats-container .status-number {
        font-size: 1.25rem;
    }
    .stats-container .divider {
        height: 52px;
    }
    .home-funding {
        --funder-gap: 28px;
        padding-bottom: 12px;
    }
    .home-funding .funder-note {
        font-size: 0.7rem;
        line-height: 1.45;
    }
    .home-funding .funder-lang {
        margin-bottom: 4px;
    }
    .home-funding .funder-logo--saw     { width: 140px; }
    .home-funding .funder-logo--sachsen { width: 21px; }
    .home-funding .funder-logo--au      { width: 65px; }
}

@media (min-width: 769px) and (max-height: 580px) {
    .search-container h1 {
        font-size: 1.7rem;
    }
    .stats-container .stats-layout {
        margin-top: 0.8em;
    }
    .stats-container .status-grid {
        gap: 6px 25px;
        margin-bottom: 4px;
    }
    .stats-container .divider {
        height: 44px;
    }
    .home-funding .funder-text {
        flex-basis: 640px;
    }
}

/* Between 769px and 900px the statistics strip is the widest thing on the page:
   the five statuses in one row are wider than the layout asks for, and flex items
   don't shrink under their own content, so close the strip's own spacing rather
   than let the page scroll sideways. */
@media (min-width: 769px) and (max-width: 900px) {
    .stats-container .divider {
        margin: 0 14px;
    }
    .stats-container .status-grid {
        gap: 15px 12px;
    }
}

/* Not enough width for the logos beside the notice: stack them, both centred, the
   same shape the shared band takes at this width. */
@media (max-width: 768px) {
    .home-funding {
        flex-direction: column;
        --funder-gap: 22px;
    }
    .home-funding .funder-text::before,
    .home-funding .funder-links::before {
        content: none;
    }
    .home-funding .funder-text {
        flex: 0 1 auto;
        max-width: 640px;
        text-align: center;
    }
    .home-funding .funder-lang {
        justify-content: center;
        margin-left: 0;
    }
    .home-funding .funder-logos {
        align-items: center;
    }
    .home-funding .funder-links {
        flex-direction: row;      /* two words side by side cost a line less here */
        gap: 22px;
    }
}

/* Phone widths: the Login button is the only thing in the top corner now that the
   link strip has moved into the funder band, so it just moves in a little. */
@media (max-width: 560px) {
    .login-button {
        top: 12px;
        right: 14px;
    }
}

/* === THREE BUTTONS UNDER THE SEARCH FIELD ===
   I'm feeling lucky and What's new (index.html .home-actions): made
   like the special-character buttons above the field (.diacritic-btn,
   search-buttons.css) - charcoal text on nothing, the dictionary's font, a vermilion
   patch and a slight lift on hover - so the hero has one button language. Centred
   under the field with some air between; they wrap on a phone. */
.home-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    margin-top: 34px;
}
.home-action {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    margin: 0;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--charcoal, #2c3e50);
    font-family: var(--dictionary-font-family);
    font-size: 1.05rem;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    outline: none;
    transition: color 0.2s ease, transform 0.1s ease;
}
.home-action:hover {
    background-color: #f38361;      /* the diacritic buttons' vermilion */
    color: var(--charcoal, #2c3e50);
    transform: scale(1.05);
}
.home-action:active {
    transform: scale(0.98);
}
.home-action:focus-visible {
    box-shadow: 0 0 0 2px #e74c3c;
    color: #e74c3c;
}
.home-action[disabled] {
    cursor: progress;
    opacity: 0.6;
}

/* === LUCKY BUTTON (resources/scripts/search/homeActions.js) ===
   "I'm feeling lucky" turns into a small slot machine in place: its label becomes
   "LAD" and six digit reels in the button's own font and colour, each a window one
   digit high (--lucky-h) over a strip that loops 0-9 while spinning and runs out on
   the chosen digit. From the click to the end it keeps the vermilion patch the hover
   gave it (no flash back to white); won, it pulses once. The headword goes into the
   search field, not the button. */
.home-action.is-rolling {
    --lucky-h: 1.4em;
    gap: 1px;
    font-variant-numeric: tabular-nums;
    cursor: default;
}
/* keeps the hover's look - the patch and the slight zoom - for the whole roll, so the
   button neither flashes back nor shrinks under the pointer; its size is held by the
   script (inline width/height), the reels centred in it */
.home-action.is-rolling,
.home-action.is-rolling:hover {
    background-color: #f38361;
    transform: scale(1.05);
    justify-content: center;
    box-sizing: border-box;
    white-space: nowrap;
}
.lucky-prefix {
    margin-right: 3px;
}
.lucky-reel {
    display: inline-block;
    height: var(--lucky-h);
    overflow: hidden;
    vertical-align: top;
}
.lucky-strip {
    display: block;
    will-change: transform;
}
.lucky-strip > span {
    display: block;
    height: var(--lucky-h);
    line-height: var(--lucky-h);
    text-align: center;
}
.lucky-strip.is-spinning {
    animation: lucky-spin 0.3s linear infinite;
    filter: blur(0.6px);
}
@keyframes lucky-spin {
    from { transform: translateY(0); }
    to   { transform: translateY(calc(-10 * var(--lucky-h))); }
}
.home-action.is-won,
.home-action.is-won:hover {
    background-color: #f38361;
    animation: lucky-won 0.5s ease-out;
    cursor: pointer;
}
@keyframes lucky-won {
    0%   { transform: scale(1.05); }
    40%  { transform: scale(1.12); }
    100% { transform: scale(1.05); }
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
    .lucky-strip.is-spinning, .home-action.is-won { animation: none; filter: none; }
}

/* === THE "!" ON WHAT'S NEW (homeActions.js newsBadge) ===
   A vermilion disc with a white "!" at the upper right of the button while the newest
   post is recent. Drawn as an SVG (bar and dot on the circle's axis): a typed "!" is
   never centred in a circle, its glyph has uneven side bearings. It sits in the
   button's right padding just after "new", outside the text, so the button keeps its
   width and the row does not move. */
.home-action.has-news {
    position: relative;
}
.news-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;     /* a white ring: the gap between button and badge */
    color: #e74c3c;                 /* the red of the title's L, A and D */
    line-height: 0;
    pointer-events: none;
    animation: news-badge-in 0.35s ease-out;
}
.news-badge svg {
    display: block;
}
@keyframes news-badge-in {
    from { transform: scale(0); }
    70%  { transform: scale(1.2); }
    to   { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .news-badge { animation: none; }
}