/* Sunrise Academy -- rebuilt site stylesheet. Clean, no Bootstrap/jQuery dependency. */

:root {
    --sun-orange: #FF9A56;
    --sun-coral: #FF6F91;
    --sun-purple: #8E6FD9;
    --ink: #3A2A1A;
    --ink-soft: #8A7260;
    --ink-faint: #B9ACC9;
    --bg: #FFF8F3;
    --card-bg: #ffffff;
    --card-border: #F0E4D8;
    --radius: 16px;
    --shadow: 0 4px 20px rgba(58, 42, 26, 0.08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Cairo', Tahoma, Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.7;
}

html[dir="ltr"] body { font-family: 'Cairo', 'Poppins', Arial, sans-serif; }

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

.container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }

/* ===== Header ===== */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: #fff;
    box-shadow: 0 2px 10px rgba(58, 42, 26, 0.06);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; }
.brand img { width: 46px; height: 46px; border-radius: 12px; }
.main-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.main-nav a { font-weight: 600; font-size: 15px; color: var(--ink); padding: 6px 2px; border-bottom: 2px solid transparent; transition: border-color .2s; }
.main-nav a:hover, .main-nav a.active { border-color: var(--sun-coral); color: var(--sun-coral); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.lang-btn {
    border: 1px solid var(--card-border); background: var(--bg); color: var(--ink);
    padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: 13px; cursor: pointer;
}
.btn-register-header {
    background: linear-gradient(135deg, var(--sun-orange), var(--sun-coral));
    color: #fff; padding: 9px 18px; border-radius: 999px; font-weight: 700; font-size: 14px;
    white-space: nowrap;
}
.nav-toggle { display: none; background: none; border: none; font-size: 24px; cursor: pointer; color: var(--ink); }

@media (max-width: 900px) {
    .main-nav { display: none; position: absolute; top: 100%; inset-inline: 0; background: #fff; flex-direction: column; padding: 16px 20px; box-shadow: 0 8px 16px rgba(0,0,0,.08); gap: 14px; }
    .main-nav.open { display: flex; }
    .nav-toggle { display: block; }
}

/* ===== App download buttons ===== */
.app-buttons { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.app-btn {
    display: flex; align-items: center; gap: 8px;
    background: #000; color: #fff; padding: 9px 16px; border-radius: 10px;
}
.app-btn.play { background: linear-gradient(135deg, #2BA8FF, #1565C0); }
.app-btn .icon { font-size: 18px; }
.app-btn .label { line-height: 1.2; }
.app-btn .label .sub { display: block; font-size: 9px; opacity: .8; }
.app-btn .label .main { display: block; font-size: 14px; font-weight: 700; }

/* Official store badges (real artwork, not emoji/custom-drawn).
   2026-10-09 real fix: matching only the *height* (48px) left the two badges visually mismatched --
   Apple's SVG is a tight crop (ratio 3.375:1) while Google's PNG has more internal padding around its
   pill even after the earlier trim (ratio 3.21:1), so at equal height they ended up different widths
   AND looked different "weights". Giving both the same fixed BOX (width + height) and letting each
   image scale to fit inside via object-fit: contain removes that -- both now occupy an identical
   footprint regardless of their native proportions, with no stretching of either one. */
.store-badge-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 160px; height: 48px; line-height: 0; transition: opacity .15s;
}
.store-badge-link:hover { opacity: .85; }
.store-badge { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 480px) {
    .store-badge-link { width: 132px; height: 40px; }
}

/* Store QR block -- badge + scannable QR code per store, main "Download the Parent App" section only */
.store-qr-row { display: flex; justify-content: center; align-items: flex-start; gap: 36px; flex-wrap: wrap; margin-top: 8px; }
.store-qr-block { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.store-qr {
    width: 130px; height: 130px; max-width: 100%; object-fit: contain;
    background: #fff; padding: 8px; border-radius: 12px; box-shadow: var(--shadow);
}
.store-qr-hint { margin: 0; font-size: 12px; color: #fff; opacity: .85; text-align: center; }
@media (max-width: 600px) {
    .store-qr-row { gap: 18px; }
    .store-qr, .store-qr-hint { display: none; }
}

/* ===== Hero ===== */
.hero { color: #fff; }

/* Full-bleed photo background hero (2026-10-09, explicit user request: the real photo fills the whole
   section edge-to-edge, text overlaid directly on it -- not in a separate card). The photo's own content
   is fixed (child positioned right-of-center, ~65-78% across), so the text column is pinned to the
   physical left side with `justify-content: left` (a physical, not logical, value -- unaffected by
   RTL/LTR) in both languages, since that's the open part of the image; only the Arabic/English TEXT
   alignment inside that column follows the page's own direction normally. */
.hero-bg { position: relative; overflow: hidden; padding: 0; background: none; }
.hero-bg-media { position: absolute; inset: 0; z-index: 0; }
.hero-bg-media img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 15%; display: block; }
.hero-bg-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(24,14,28,.72) 0%, rgba(24,14,28,.42) 42%, rgba(24,14,28,0) 66%);
}
.hero-bg-inner {
    position: relative; z-index: 1; display: flex; align-items: center; justify-content: left;
    min-height: clamp(420px, 42vw, 580px); padding: 70px 0;
}
.hero-bg-text { max-width: 560px; text-align: start; }
.hero-bg-text h1 { font-size: 38px; margin: 0 0 14px; text-wrap: balance; }
.hero-bg-text p { font-size: 17px; margin: 0 0 28px; opacity: .97; }
.hero-bg-text .cta-row { display: flex; gap: 12px; justify-content: flex-start; flex-wrap: wrap; }
@media (max-width: 800px) {
    .hero-bg { background: linear-gradient(135deg, var(--sun-orange) 0%, var(--sun-coral) 55%, var(--sun-purple) 100%); }
    .hero-bg-media { position: relative; inset: auto; height: 58vw; max-height: 380px; min-height: 230px; }
    .hero-bg-media img { object-position: 66% 12%; }
    .hero-bg-overlay { display: none; }
    .hero-bg-inner { position: static; min-height: auto; display: block; padding: 28px 0 44px; }
    .hero-bg-text { max-width: none; text-align: center; }
    .hero-bg-text .cta-row { justify-content: center; }
}
.btn-light {
    background: #fff; color: var(--sun-coral); font-weight: 700; padding: 13px 26px; border-radius: 999px;
}
.btn-outline-light {
    border: 2px solid #fff; color: #fff; font-weight: 700; padding: 11px 24px; border-radius: 999px;
}

/* ===== Sections ===== */
section { padding: 64px 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.section-head h2 { font-size: 30px; margin: 0 0 10px; text-wrap: balance; }
.section-head p { color: var(--ink-soft); font-size: 16px; margin: 0; }

.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.values-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.value-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 24px 16px; text-align: center; }
.value-card .emoji { font-size: 32px; margin-bottom: 10px; }
.value-card p { margin: 0; font-weight: 600; font-size: 14px; }

.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* Used where card count varies after content removal (e.g. 5 cards) -- avoids a half-empty grid row */
.services-grid-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.service-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.service-card .chip { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 19px; margin-bottom: 12px; }
.service-card h3 { margin: 0 0 6px; font-size: 17px; }
.service-card p { margin: 0; color: var(--ink-soft); font-size: 14px; }

.app-promo {
    background: linear-gradient(135deg, var(--sun-purple), var(--sun-coral));
    border-radius: 24px; color: #fff; padding: 48px 32px; text-align: center; margin-top: 20px;
}
.app-promo h3 { font-size: 26px; margin: 0 0 10px; }
.app-promo p { opacity: .95; margin: 0 0 24px; max-width: 540px; margin-inline: auto; }
.app-promo .app-buttons { justify-content: center; }

/* Real app icon badge (2026-10-09, explicit user request -- replaces the old feature-graphic banner) */
.app-icon-badge {
    width: 92px; height: 92px; margin: 0 auto 20px; padding: 10px; border-radius: 24px;
    background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.22); display: flex; align-items: center; justify-content: center;
}
.app-icon-badge img { width: 100%; height: 100%; object-fit: contain; border-radius: 14px; display: block; }

/* App feature cards with real icons (Font Awesome, already loaded site-wide -- no new icon library) */
.app-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0; }
.app-feature-card {
    display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius);
    padding: 22px 14px; transition: transform .18s ease, background-color .18s ease;
}
.app-feature-card .icon {
    width: 46px; height: 46px; border-radius: 13px; background: rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center; font-size: 19px; color: #fff;
}
.app-feature-card p { margin: 0; color: #fff; font-weight: 600; font-size: 14px; }
@media (hover: hover) and (pointer: fine) {
    .app-feature-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.2); }
}
@media (max-width: 800px) {
    .app-feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 340px) {
    .app-feature-grid { grid-template-columns: 1fr; }
}

.cta-band {
    background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 24px;
    padding: 48px 32px; text-align: center;
}
.cta-band h2 { font-size: 26px; margin: 0 0 8px; }
.cta-band p { color: var(--ink-soft); margin: 0 0 22px; }
.cta-band .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-primary-grad {
    background: linear-gradient(135deg, var(--sun-orange), var(--sun-coral)); color: #fff;
    font-weight: 700; padding: 13px 28px; border-radius: 999px;
}

/* ===== Footer ===== */
.site-footer { background: #2A1F3D; color: #E8DEF5; padding: 48px 0 24px; margin-top: 60px; }
.footer-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 32px; margin-bottom: 28px; }
.footer-grid h4 { color: #fff; font-size: 16px; margin: 0 0 14px; }
.footer-grid p, .footer-grid a { font-size: 14px; color: #C9BBE0; display: block; margin-bottom: 8px; }
.footer-social { display: flex; gap: 12px; margin-top: 10px; }
.footer-social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.footer-bottom { text-align: center; border-top: 1px solid rgba(255,255,255,.1); padding-top: 18px; font-size: 13px; color: #9E8FB8; }

@media (max-width: 800px) {
    .values-grid { grid-template-columns: repeat(2, 1fr); }
    .values-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .services-grid { grid-template-columns: 1fr; }
    .services-grid-flow { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .hero-bg-text h1 { font-size: 28px; }
}
/* 2026-10-09 (explicit user request): phone-width cards were stacking one-per-row with a lot of empty
   vertical space. Two columns at phone width (390px and up) keeps the grid compact; a narrower
   .value-card/.service-card gets smaller padding and a smaller emoji/chip so the icon stays a helper
   element, not the dominant part of the card. Falls back to one column only on genuinely tiny screens. */
@media (max-width: 480px) {
    .values-grid-3 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .services-grid-flow { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .values-grid-3 .value-card { padding: 14px 8px; }
    .values-grid-3 .value-card .emoji { font-size: 22px; margin-bottom: 6px; }
    .values-grid-3 .value-card p { font-size: 13px; }
    .services-grid-flow .service-card { padding: 14px 10px; }
    .services-grid-flow .service-card .chip { width: 32px; height: 32px; font-size: 15px; margin-bottom: 8px; }
    .services-grid-flow .service-card h3 { font-size: 14px; }
    .services-grid-flow .service-card p { font-size: 12.5px; }
}
@media (max-width: 340px) {
    .values-grid-3, .services-grid-flow { grid-template-columns: 1fr; }
}

/* ===== Generic page header (sub-pages) ===== */
.page-hero {
    background: linear-gradient(135deg, var(--sun-orange) 0%, var(--sun-coral) 55%, var(--sun-purple) 100%);
    color: #fff; text-align: center; padding: 48px 20px;
}
.page-hero h1 { margin: 0; font-size: 30px; }

.card-block { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }

/* ===== Forms ===== */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-row.full { grid-template-columns: 1fr; }
.form-group label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.form-group input, .form-group textarea {
    width: 100%; padding: 11px 14px; border: 1px solid var(--card-border); border-radius: 10px;
    font-family: inherit; font-size: 14px;
}
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--sun-coral); }
/* 2026-10-08 real bug caught in testing: an extreme negative `left` offset (the common honeypot trick)
   expanded the page's own scrollable width to reach it, breaking layout/full-page screenshots. This
   "visually hidden" pattern (1x1px, clipped, no overflow) hides it from real visitors just as
   effectively without moving it outside the document's normal bounds at all. */
.honeypot-field { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 700px) {
    .form-row { grid-template-columns: 1fr; }
}

/* ===== 2026-10-09 Content Expansion: new visual primitives ===== */

/* Alternating image/text split section */
.alt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.alt-row.reverse { direction: ltr; }
/* 2026-10-09 real bug fixed: `direction: initial` here unconditionally forced every direct child
   (.alt-text, .alt-visual) to ltr text direction -- regardless of page language -- because `initial`
   resets to the CSS spec default (ltr), not "inherit from this row". The row's own direction correctly
   flips back to rtl on Arabic pages via the rule below, but its children never picked that up, so the
   Contact section's text stayed left-aligned on every Arabic page view, at every screen width. `inherit`
   only affects text direction/alignment inside each child -- it does not change the grid item order the
   "reverse" trick relies on, since that's controlled solely by the row's own direction. */
.alt-row.reverse > * { direction: inherit; }
html[dir="rtl"] .alt-row.reverse { direction: rtl; }
.alt-visual {
    aspect-ratio: 4/3; border-radius: 20px;
    background: linear-gradient(135deg, var(--sun-orange), var(--sun-coral), var(--sun-purple));
    display: flex; align-items: center; justify-content: center; font-size: 56px; color: #fff;
}
/* real bug fixed: <picture> has no resolvable height of its own, so `height:100%` on the <img> was
   silently failing (percentage heights need a defined parent height) and falling back to the image's
   intrinsic aspect ratio instead of filling the box -- visible as a gap/background sliver at the
   top+bottom of both .alt-visual photos. Picture itself now gets width/height:100% so the img's own
   100% has something real to resolve against. */
.alt-visual picture { display: block; width: 100%; height: 100%; }
.alt-visual img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.alt-text h2 { font-size: 26px; margin: 0 0 14px; }
.alt-text p { color: var(--ink-soft); font-size: 15px; margin: 0 0 10px; }
@media (max-width: 800px) {
    /* 2026-10-09 real bug fixed: this previously used `direction: initial`, which resets to the CSS
       spec default (ltr) rather than inheriting the page's actual direction -- it silently forced the
       non-reverse .alt-row (e.g. the "Our Educational Approach" section) to render left-aligned on
       mobile even on Arabic pages, since nothing else had enough specificity to correct it back to rtl.
       `inherit` correctly pulls direction from the ancestor chain (html[dir]) in both languages. */
    .alt-row, .alt-row.reverse { grid-template-columns: 1fr; direction: inherit; }
}

/* Real activity photo strip (2026-10-09, explicit user request) */
.photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.photo-strip figure { margin: 0; position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 3/4; box-shadow: var(--shadow); }
.photo-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-strip figcaption {
    position: absolute; bottom: 0; inset-inline: 0; padding: 10px 12px 8px;
    background: linear-gradient(to top, rgba(0,0,0,.6), transparent);
    color: #fff; font-size: 13px; font-weight: 700;
}
@media (max-width: 700px) {
    .photo-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 340px) {
    .photo-strip { grid-template-columns: 1fr; }
}

/* Academy Director */
.director-card {
    display: flex; align-items: center; gap: 36px;
    background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius);
    padding: 36px; box-shadow: var(--shadow);
}
.director-photo {
    width: 180px; height: 180px; flex: 0 0 180px; border-radius: 50%; object-fit: cover;
    border: 4px solid var(--bg); box-shadow: var(--shadow);
}
.director-name { font-size: 22px; margin: 0 0 4px; }
.director-role { color: var(--sun-coral); font-weight: 700; font-size: 14px; margin: 0 0 14px; }
.director-info p { color: var(--ink-soft); font-size: 15px; margin: 0 0 10px; }
.director-creds { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.director-creds li { font-size: 13.5px; color: var(--ink); background: var(--bg); border-radius: 8px; padding: 7px 12px; }
@media (max-width: 700px) {
    .director-card { flex-direction: column; text-align: center; padding: 28px 22px; }
    .director-creds li { text-align: start; }
}

/* Personal message from the director (2026-10-09) */
.director-message {
    margin-top: 24px; background: var(--bg); border: 1px solid var(--card-border); border-radius: var(--radius);
    padding: 32px 36px;
}
.director-message h3 { font-size: 19px; margin: 0 0 16px; }
.director-message p { color: var(--ink-soft); font-size: 15px; line-height: 1.85; margin: 0 0 14px; }
.director-message .director-signoff { margin-bottom: 2px; }
.director-message .director-signature { color: var(--ink); font-weight: 700; margin: 0; }
.director-message .director-signature .sig-role { display: block; font-weight: 600; color: var(--sun-coral); font-size: 13.5px; margin-top: 2px; }
@media (max-width: 700px) {
    .director-message { padding: 24px 20px; text-align: center; }
}

/* Numbered steps (Admissions) */
.steps-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: step; }
.step-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 24px 18px; position: relative; }
.step-num {
    width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--sun-orange), var(--sun-coral));
    color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; margin-bottom: 12px;
}
.step-card h3 { margin: 0 0 6px; font-size: 16px; }
.step-card p { margin: 0; color: var(--ink-soft); font-size: 13px; }
@media (max-width: 800px) { .steps-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .steps-row { grid-template-columns: 1fr; } }

/* Feature-grouped areas (Learning Areas groups, Child Development) */
.group-head { font-weight: 800; font-size: 15px; color: var(--sun-coral); margin: 0 0 14px; }
.group-block { margin-bottom: 36px; }
.group-block:last-child { margin-bottom: 0; }

/* App screenshot placeholder frames */
.phone-frame {
    width: 180px; height: 360px; border-radius: 28px; background: rgba(255,255,255,.15);
    border: 6px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: rgba(255,255,255,.85); text-align: center; padding: 16px; flex-shrink: 0;
}
.phone-row { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin: 28px 0; }

/* Gallery preview strip (homepage teaser) */
.gallery-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gallery-preview-tile { aspect-ratio: 1; border-radius: 14px; display: flex; align-items: flex-end; padding: 10px; color: #fff; font-size: 12px; font-weight: 700; }
@media (max-width: 700px) { .gallery-preview-grid { grid-template-columns: repeat(2, 1fr); } }

/* FAQ accordion */
.faq-item { border: 1px solid var(--card-border); border-radius: 14px; margin-bottom: 12px; overflow: hidden; background: var(--card-bg); }
.faq-question {
    width: 100%; text-align: inherit; background: none; border: none; cursor: pointer;
    padding: 18px 22px; font-weight: 700; font-size: 15px; color: var(--ink); font-family: inherit;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .25s ease; padding: 0 22px; color: var(--ink-soft); font-size: 14px; }
.faq-item.open .faq-answer { max-height: 300px; padding-bottom: 18px; }
.faq-icon { transition: transform .25s ease; flex-shrink: 0; }
.faq-item.open .faq-icon { transform: rotate(45deg); }

/* Reviews placeholder */
.reviews-placeholder { background: var(--card-bg); border: 1px dashed var(--card-border); border-radius: var(--radius); padding: 40px; text-align: center; color: var(--ink-soft); }

/* Opening hours table */
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table td { padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--card-border); }
.hours-table td:last-child { text-align: end; font-weight: 700; color: var(--ink); }
/* 2026-10-09: the footer sits on a dark background -- the default dark text/border (meant for the
   light card-style use on Contact Us) would be unreadable there, so the footer's own copy of this
   table gets light-on-dark colors instead. */
.site-footer .hours-table td { border-bottom-color: rgba(255,255,255,.12); }
.site-footer .hours-table td:last-child { color: #fff; }