/*
 * eatAspen network: accessibility additions (Oct 2026).
 * Loaded after app.css / style.css by includes/header.php.
 * Nothing here changes colours or layout except focus rings and link underlines.
 */

/* Skip link: hidden until a keyboard user tabs to it. */
.ea-skip {
    position: absolute;
    left: 8px;
    top: -60px;
    z-index: 10000;
    padding: 10px 16px;
    background: #fff;
    color: #002b5c;
    font-weight: bold;
    border: 2px solid #002b5c;
    border-radius: 4px;
    text-decoration: none;
}
.ea-skip:focus {
    top: 8px;
}
#mainpagecontent:focus {
    outline: none;
}

/* Visible keyboard focus. Only shows for keyboard use (not mouse clicks).
   Dark ring plus a thin white inner ring so it shows on white, orange and photo backgrounds. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.slick-slider:focus-visible {
    outline: 3px solid #002b5c !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #fff !important;
}
#footer a:focus-visible,
.top-bar a:focus-visible,
.top-bar button:focus-visible,
.top-bar input:focus-visible,
.top-bar select:focus-visible,
.tab-bar a:focus-visible,
.off-canvas-list a:focus-visible {
    outline-color: #fff !important;
    outline-offset: -3px !important;
    box-shadow: none !important;
}

/* Links inside sentences (descriptions, page text) are underlined, so they
   don't rely on colour alone (WCAG 1.4.1). Stand-alone links, such as the
   restaurant list, keep their old look and underline only on hover/focus. */
#mainpagecontent p a:not(.button),
#mainpagecontent .infopanel a:not(.button),
.reveal-modal p a:not(.button) {
    text-decoration: underline;
}
#mainpagecontent p.nofeature a,
#mainpagecontent p.ea-standalone a {
    text-decoration: none;
}
#mainpagecontent p.nofeature a:hover,
#mainpagecontent p.nofeature a:focus,
#mainpagecontent p.ea-standalone a:hover,
#mainpagecontent p.ea-standalone a:focus {
    text-decoration: underline;
}

/* Headings whose level was corrected keep their previous look. */
h2.ea-h3 {
    font-size: 1.375rem;
    line-height: 1.4;
    margin-top: .2rem;
    margin-bottom: .5rem;
}
@media only screen and (min-width: 40.063em) {
    h2.ea-h3 { font-size: 1.6875rem; }
}
.ea-h5 {
    font-size: 1.125rem;
    line-height: 1.4;
    margin-top: .2rem;
    margin-bottom: .5rem;
}
.headerTab .ea-h5 {
    font-size: .95rem;
    color: #1A1A1A; /* was #333: 3.3:1 on the orange tab; #1A1A1A gives 4.5:1 (WCAG AA) */
}
.headerTab h5 { color: #1A1A1A; }

h3.ea-h4 {
    font-size: 1.125rem;
    line-height: 1.4;
    margin-top: .2rem;
    margin-bottom: 5px;
}
@media only screen and (min-width: 40.063em) {
    h3.ea-h4 { font-size: 1.4375rem; }
}

/* Text for screen readers only. */
.ea-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* Page titles in the orange tab: now <h2> (the site name is the page's <h1>), same look as before. */
.headerTab .ea-h1 {
    font-size: 1.5rem;
    line-height: 1.4;
    color: #fff;
    margin: 0;
}
.headerStrip .ea-h1 {
    font-size: 1.5rem;
    line-height: 1.4;
    color: #fff;
    margin: 0;
    font-weight: lighter;
}
.headerStrip .ea-h1 > span {
    font-size: .95rem;
    color: #fff;
    margin: 0;
}

/* Photo-gallery arrows: the icons are 20x20px, too small to tap reliably on a
   phone. An invisible area around each arrow makes the tap target 44x44px
   without changing how the arrows look. */
.slick-prev::after,
.slick-next::after {
    content: "";
    position: absolute;
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
}
.slick-prev,
.slick-next {
    z-index: 2;
}

/* The restaurant list caps images at 75px tall on smaller screens (meant for
   logos). Ads in the list must show at full size so they stay readable. */
.allrests img.ea-ad {
    max-height: none;
}

/* Search results: restaurants found inside a PDF menu say which menu (Oct 2026). */
.ea-menuhit {
    font-size: .85rem;
    font-style: italic;
    color: #555;
}
.ea-menuhit-head {
    margin: 1.25rem 0 .5rem;
    padding-top: .75rem;
    border-top: 1px solid #ddd;
}

/* Footer TikTok and X icons (Oct 2026). Foundation Icons has neither glyph, so they
   come from Font Awesome 6's brand font (only that font file is loaded; the
   site's Font Awesome 4 classes are untouched). */
@font-face {
    font-family: "EA FA Brands";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-brands-400.woff2") format("woff2"),
         url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-brands-400.ttf") format("truetype");
}
.ea-icon-tiktok,
.ea-icon-x {
    display: inline-block;
    font-family: "EA FA Brands";
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    position: relative;
    top: 8px; /* line up with the Foundation icons beside them */
}
.ea-icon-tiktok::before {
    content: "\e07b";
}
.ea-icon-x::before {
    content: "\e61b";
}

/* "see more" links on the Specials pages: the brand orange (#DC582A) is 3.8:1 on white,
   so this slightly deeper orange is used for that small text (4.9:1, WCAG AA). */
/* Same for links inside the specials cards (style.css sets #DC582A with a longer selector). */
a.ea-seemore,
.pricing-table.feature .bullet-item a:not(.button),
.pricing-table.featspecial .description a:not(.button) { color: #C24A1F; }
a.ea-seemore:hover, a.ea-seemore:focus,
.pricing-table.feature .bullet-item a:not(.button):hover,
.pricing-table.featspecial .description a:not(.button):hover { color: #9E3B17; }
/* Restaurant names on the grey bar of the specials cards: #DC582A on #DDD was 2.8:1.
   #A33E18 is the same orange family at 4.7:1. */
.pricing-table.feature .title a:link,
.pricing-table.feature .title a:visited { color: #A33E18; }
/* Default link blue (#0076A8 in app.css) is 4.35:1 on the light-grey #EEE sections of
   restaurant pages (phone numbers). #006D9C looks the same and passes on grey and white. */
a { color: #006D9C; }

/* Premier card without a logo: the restaurant's name in a grey box (the old placeholder
   image service, placehold.it, no longer exists, so these showed as broken images). */
.ea-nologo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    max-width: 100%;
    height: 100px;
    margin: 0 auto;
    background: #ddd;
    color: #A33E18;
    font-weight: bold;
    text-align: center;
    padding: 0 10px;
}

/* Featured special heading on a restaurant page (white on the orange bar, 19px): bold makes it
   "large text" under WCAG, where 3.8:1 passes. Keeps the white-on-orange look. */
.pricing-table.featspecial .title { font-weight: bold; }