/* Kids' Directory Charlotte - additions on top of the live site's foundation.css + app.css.
   Everything here either replaces what the live site did with jQuery/Foundation JS
   (menu toggle, slider), or styles pages the live site did not have (Kids Eat Free,
   online reader, Goods & Services filter). Colors come from the live app.css. */

/* ---------- accessibility helpers ---------- */
.skip-link.show-on-focus:focus { position: absolute; z-index: 100; top: .5rem; left: .5rem; padding: .5rem 1rem; background: #fff; color: #074080; border-radius: .3rem; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid #F36F22; outline-offset: 2px; }

/* ---------- navigation (live used Foundation's responsive-toggle JS) ---------- */
.menu-icon-mobile { cursor: pointer; color: #000; line-height: 1; }
.top-bar .menu-item a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; }
@media print, screen and (min-width: 40em) {
  .navigation .title-bar { display: none; }
}
@media screen and (max-width: 39.9375em) {
  .navigation #responsive-menu { display: none; }
  .navigation #responsive-menu.is-open { display: flex; }
}
/* logo + banner ad + menu held at the top while scrolling (Kathy 10/28). kd.js keeps --kd-top-h = its real height,
   so links to a spot on a page and the Kids Eat Free day bar land just below it instead of under it.
   Only on screens tall enough to spare the room; phones scroll it away as before. */
@media screen and (min-width: 40em) and (min-height: 560px) {
  .kd-top { position: sticky; top: 0; z-index: 60; transition: box-shadow .2s; }
  .kd-top.is-stuck { box-shadow: 0 4px 14px rgba(0, 0, 0, .22); }
  html { scroll-padding-top: calc(var(--kd-top-h, 220px) + .5rem); }
  html .kef-days { top: var(--kd-top-h, 220px); }   /* "html" outranks the plain .kef-days rule further down */
  /* the page's scroll-padding already clears the header; this only clears the chip bar (its real height, from kd.js),
     so a clicked section's title lands right under the chips (Kathy 10/28: "still showing a little of the one above") */
  html .kef-group { scroll-margin-top: calc(var(--kef-days-h, 4rem) + .4rem); }
}
/* drop-downs (Kathy 10/28): related pages under one tab. No JS - hover or keyboard focus opens it on desktop;
   the parent tab is a real page, so a tap on a tablet still goes somewhere useful. Phones list them open. */
.top-bar .kd-has-sub { position: relative; }
.kd-caret { display: inline-block; margin-left: .35em; vertical-align: .15em; border: .3em solid transparent; border-top-color: currentColor; border-bottom: 0; }
.top-bar .kd-sub { list-style: none; margin: 0; padding: 0; }
.top-bar .kd-sub a { display: block; color: #074080; }
@media print, screen and (min-width: 40em) {
  .top-bar .kd-sub { display: none; position: absolute; top: 100%; left: 0; z-index: 50; min-width: 15rem; padding: .35rem 0;
    background: #fff; border-top: 4px solid #F36F22; border-radius: 0 0 .4rem .4rem; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
  .top-bar .kd-has-sub:hover > .kd-sub, .top-bar .kd-has-sub:focus-within > .kd-sub { display: block; }
  .top-bar .kd-sub a { padding: .5rem 1rem; font-size: 1rem; white-space: nowrap; }
  .top-bar .kd-sub a:hover, .top-bar .kd-sub a:focus { background: #FFF1E8; }
}
@media screen and (max-width: 39.9375em) {
  .kd-caret { display: none; }
  .top-bar .kd-sub { margin: 0 0 .3rem 1.2rem; }
  .top-bar .kd-sub a { padding: .4rem 1rem; font-size: .95rem; }
}
/* one line of tabs (Kathy 10/28 "anyway to make the tabs at the top only one line"): 11 tabs at 17.6px with 16px
   side padding needed 1,378px of the 1,140px the menu has; 16px text with 8px padding needs 1,104px. Labels never
   break inside themselves; on a narrower screen the row wraps whole tabs as before. */
@media print, screen and (min-width: 40em) {
  .top-bar .top-bar-left > ul > li > a { font-size: 1rem; padding-left: .5rem; padding-right: .5rem; white-space: nowrap; }
}
/* sidebar Goods & Services search: compact (Kathy 10/28 "the search box is big, can that be reduced some and pull up
   the current edition") - 199px tall before, so the latest-issue cover sat lower than it needs to */
.search-box { padding: .6rem .9rem .7rem; margin-bottom: .7rem; }
.search-box input, .search-box .button { margin-bottom: .5rem; }
.search-box select { margin-bottom: 0; }
/* coupons (Kathy 10/28 "make them printable and put Kids Directory Charlotte on there someplace on each coupon in
   small print"): every coupon carries the small Kids' Directory line (here in CSS, so a new coupon gets it too), and
   kd.js adds a "Print this coupon" button that prints that one coupon alone, inside a dashed cut-out border. */
.coupon-container::after { content: "Coupon from Kids' Directory Charlotte \00B7  KidsDirectoryCharlotte.com"; display: block;
  margin-top: .6rem; padding-top: .4rem; border-top: 1px solid #e3e3e3; font-size: .75rem; color: #555; text-align: right; }
.kd-coupon-print { margin: .6rem 0 0; font-size: .9rem; padding: .55em 1em; }
@media print { .kd-coupon-print { display: none !important; } }
/* "Advertise" stands out as a button - it is how businesses reach me */
.top-bar .kd-nav-cta > a { background: #F36F22; color: #fff; border-radius: .4rem; margin-left: .3rem; }
.top-bar .kd-nav-cta > a:hover, .top-bar .kd-nav-cta > a:focus { background: #D7044D; color: #fff; }

/* ---------- header banner never wider than its column ---------- */

/* ---------- home slider (same classes and look as Foundation Orbit, no jQuery) ---------- */
.kd-orbit .orbit-container { height: auto; display: grid; }
.kd-orbit .orbit-slide { position: relative; grid-area: 1 / 1; visibility: hidden; transform: translateX(100%); }
.kd-orbit .orbit-slide.is-active { visibility: visible; transform: none; }
.kd-orbit .orbit-slide.is-animating { visibility: visible; transition: transform 500ms linear; }
.kd-orbit .orbit-slide.no-transition { transition: none !important; }
.kd-orbit .orbit-image { display: block; }
.kd-orbit .orbit-previous, .kd-orbit .orbit-next { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .kd-orbit .orbit-slide.is-animating { transition: none; }
}

/* ---------- home tiles: whole tile clickable (live added this inline on 2026-10-14) ---------- */
.home-tiles > .cell > div { position: relative; cursor: pointer; transition: filter .15s; }
.home-tiles > .cell > div > div > a:first-child::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.home-tiles > .cell > div:hover { filter: brightness(1.06); }

/* ---------- Goods & Services filter bar (live had search only in the sidebar, hidden on phones) ---------- */
.gs-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; padding: .8rem; background: #00488C; border-radius: .5rem; }
.gs-filter input, .gs-filter select { margin: 0; height: 2.6rem; border: solid 1px #fff; }
.gs-filter input { flex: 2 1 14rem; }
.gs-filter select { flex: 1 1 12rem; }
.gs-filter .button { margin: 0; height: 2.6rem; padding: 0 1.2rem; }
.gs-status { font-weight: 600; margin-bottom: .6rem; }
.advertiser-container[hidden] { display: none; }
.advertiser-container .cell.text-center img { max-height: 9rem; object-fit: contain; }
/* a listing's several locations, each with its address (Kathy 10/28) */
.kd-locations { text-align: left; margin-bottom: 1rem; }
.kd-locations-title { font-weight: bold; color: #074080; margin-bottom: .4rem; }
.kd-location { font-size: .92rem; line-height: 1.35rem; padding: .45rem 0; border-top: 1px solid #e3e3e3; }
/* a little smaller (Kathy 10/28 "that page can use a little bit smaller fonts"): names were 1.7rem (27px) */
.gs-name { font-size: 1.3rem; line-height: 1.6rem; font-weight: bold; margin-bottom: .3rem; }
#gs-list .advertiser-contact, #gs-list .advertiser-details { font-size: .92rem; line-height: 1.4rem; }

/* ---------- Kids Eat Free ---------- */
.kef-intro, .kef-outro { margin-bottom: 1.2rem; }
.kef-group-title { font-size: 1.5rem; line-height: 1.8rem; font-weight: bold; color: #fff; background: #00488C; border-radius: .5rem; padding: .4rem 1rem; margin-bottom: .8rem; }
.kef-grid > .cell { display: flex; }
.kef-card { flex: 1; display: flex; flex-direction: column; background: #fff; border-radius: .5rem; border-top: 6px solid #F36F22; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.kef-card h3 { color: #074080; margin-bottom: .4rem; }
.kef-deal { font-size: 1.05rem; font-weight: 600; }
.kef-loc, .kef-confirmed { font-size: .9rem; color: #333; }
.kef-loc i, .kef-confirmed i { color: #38A850; width: 1.1em; }
.kef-confirmed { color: #555; }


/* ---------- online reader (flipbook) inside the live design ---------- */
.reader-box p { margin-bottom: .8rem; }
.fb-stage { display: flex; justify-content: center; margin: 12px 0; padding: 28px 20px 34px;
  background: linear-gradient(#ece8e1, #d9d3c9); border: 1px solid #c9c2b6; border-radius: .5rem;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .12); overflow: hidden; }
@media (max-width: 768px) { .fb-stage { padding: 14px 8px 18px; } }
/* side arrows (Kathy 10/30): they ride along in the middle of the screen while you scroll down the page */
.fb-stage { position: relative; }
.fb-side { position: absolute; top: 0; bottom: 0; width: 64px; z-index: 5; pointer-events: none; }
.fb-side-left { left: 0; } .fb-side-right { right: 0; }
.fb-side-btn { position: sticky; top: calc(50vh - 26px); margin-top: 30vh; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  pointer-events: auto; background: #F36F22; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; margin-left: 6px; }
.fb-side-btn:hover { background: #d85c12; }
.fb-side-btn svg { width: 30px; height: 30px; fill: currentColor; }
@media (max-width: 768px) { .fb-side { width: 44px; } .fb-side-btn { width: 40px; height: 40px; margin-left: 2px; } .fb-side-btn svg { width: 24px; height: 24px; } }
#flipbook .fb-page { background: #fff; overflow: hidden; outline: 1px solid rgba(0, 0, 0, .28);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .38); }
#flipbook .fb-page::after { content: ""; position: absolute; top: 0; bottom: 0; width: 7%; pointer-events: none; }
#flipbook .fb-page.--left::after { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0)); }
#flipbook .fb-page.--right::after { left: 0; background: linear-gradient(to right, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0)); }
#flipbook .fb-page img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fb-hotspot { position: absolute; display: block; }
.fb-hotspot:hover { outline: 2px solid rgba(243, 111, 34, .7); border-radius: 4px; }
.fb-bar { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 10px 0; }
.fb-bar .button { margin: 0; font-size: 1.2rem; padding: .5em 1em; }
#fb-label { font-weight: 600; min-width: 8rem; text-align: center; }
#fb-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0; }
#fb-thumbs img { height: 84px; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; flex: 0 0 auto; }
#fb-thumbs img:hover { border-color: #F36F22; }
.back-issues img { border: 1px solid #ccc; margin-bottom: .5rem; }

/* ---------- small fixes ---------- */
.content-box img, .blog-container img, .coupon-container img, .testimonials-container img { height: auto; }
.content-box, .advertiser-details, .advertiser-contact, .blog-content { overflow-wrap: anywhere; }

/* Kids Eat Free map (Kathy 10/28) */
.kef-map-box { margin-bottom: 1.2rem; }
.kef-map-title { font-size: 1.4rem; color: #074080; margin-bottom: .6rem; }
.kef-map-days { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.kef-mday { border: 1px solid #F36F22; color: #F36F22; background: #fff; border-radius: 2rem; padding: .3rem .8rem; font-weight: 600; cursor: pointer; }
.kef-mday.is-on, .kef-mday:hover { background: #F36F22; color: #fff; }
/* "kef-mapbox", not "kef-map": the "Map" buttons on every card already use .kef-map (10/28 they all grew 420px tall) */
.kef-mapbox { height: 420px; border-radius: .4rem; border: 1px solid #ddd; z-index: 1; }
@media screen and (max-width: 39.9375em) { .kef-mapbox { height: 340px; } }
.kef-map-note { font-size: .85rem; color: #555; margin: .5rem 0 0; }
.kef-pop-day { color: #38A850; font-weight: 600; }
/* Kids Eat Free: chains list every store */
.kef-card h3 a { color: #074080; }
.kef-card h3 a:hover { text-decoration: underline; }
.kef-loc-head { margin-bottom: .2rem; }
.kef-loc-list { font-size: .85rem; margin: 0 0 .6rem .4rem; padding-left: 1.3rem; list-style: disc; max-height: 12rem; overflow-y: auto; }
.kef-loc-list li { margin-bottom: .2rem; }
.kef-actions { margin-top: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.kef-actions .button { margin: 0; }
.kef-actions .button.hollow { background: #fff; border: 1px solid #F36F22; color: #F36F22; }
.kef-actions .button.hollow:hover, .kef-actions .button.hollow:focus { background: #F36F22; color: #fff; }

/* ---------- icons: inline SVG (Font Awesome Free shapes) sized like the live icon font ---------- */
.kd-icon { display: inline-block; height: 1em; width: auto; vertical-align: -.125em; fill: currentColor; overflow: visible; }
.kd-icon-xl { height: 1.5em; margin: -.3em 0; vertical-align: -.125em; }  /* negative margins: like the icon font, do not grow the line */
.kd-icon-2xl { height: 2em; margin: -.5em 0; vertical-align: -.375em; }
.home-tiles .kd-icon-2xl { color: #fff; }
.home-tiles a { font-weight: 700; }
.home-tiles .home-tile-dark, .home-tiles .home-tile-dark a, .home-tiles .home-tile-dark .kd-icon-2xl { color: #074080; }


/* ---------- card layout (Advertising page; site colors from app.css) ---------- */
.kd-page.page-advertising > .content-box, .kd-section, .kd-cta-box { margin-bottom: 1.5rem; }
.adv-lead { font-size: 1.1rem; line-height: 1.6rem; }
.kd-cta { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0 .2rem; }
.kd-cta .button { margin: 0; font-size: 1rem; padding: .8em 1.3em; }
.button.hollow, .button.hollow:hover, .button.hollow:focus { background: #fff; color: #F36F22; border: 2px solid #F36F22; }
.button.hollow:hover, .button.hollow:focus { background: #F36F22; color: #fff; }
.kd-section-title { font-size: 1.5rem; line-height: 1.9rem; font-weight: bold; color: #fff; background: #00488C;
  border-radius: .5rem; padding: .45rem 1rem; margin-bottom: .9rem; }
.kd-cards { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media print, screen and (min-width: 40em) { .kd-cards { grid-template-columns: repeat(2, 1fr); } }
@media print, screen and (min-width: 64em) { .kd-cards { grid-template-columns: repeat(3, 1fr); } }
.kd-card { background: #fff; border-radius: .5rem; border-top: 6px solid #F36F22; padding: 1rem 1.1rem 1.1rem; margin: 0; }
.kd-card h3 { font-size: 1.15rem; line-height: 1.4rem; color: #074080; margin-bottom: .4rem; }
.kd-card p { margin: 0; line-height: 1.45rem; }
.kd-card.c-green { border-top-color: #38A850; } .kd-card.c-yellow { border-top-color: #F5BE1C; }
.kd-card.c-red { border-top-color: #D81227; } .kd-card.c-blue { border-top-color: #0495D7; }
.kd-card.c-orange { border-top-color: #F36F22; } .kd-card.c-navy { border-top-color: #00488C; }
.kd-tips { counter-reset: tip; }
.kd-tips > .kd-card { counter-increment: tip; position: relative; padding-top: 1.1rem; }
.kd-tips > .kd-card h3::before { content: counter(tip); display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; margin-right: .55rem; border-radius: 50%; background: #00488C; color: #fff;
  font-size: 1rem; vertical-align: .05em; }
.kd-tips > .c-green h3::before { background: #38A850; } .kd-tips > .c-yellow h3::before { background: #F5BE1C; color: #000; }
.kd-tips > .c-red h3::before { background: #D81227; } .kd-tips > .c-blue h3::before { background: #0495D7; }
.kd-tips > .c-orange h3::before { background: #F36F22; }
.kd-cta-box { background: #fff; border-radius: .5rem; border: 2px dashed #F36F22; padding: 1.1rem 1.2rem; text-align: center; }
.kd-cta-box .kd-cta { justify-content: center; }
.kd-cta-note { margin: .6rem 0 0; }
.kd-stats { columns: 2 18rem; column-gap: 2rem; margin-bottom: .6rem; }
.kd-stats li { break-inside: avoid; margin-bottom: .2rem; }
.kd-source { font-size: .8rem; color: #555; margin: 0; }

/* ---------- About: signature in the site font, not a small italic ---------- */
.kd-signature { font-family: "Quicksand", serif; font-size: 1.35rem; line-height: 1.8rem; font-weight: 600; color: #00488C; }
.kd-sign { margin-top: 1.2rem; }

/* ---------- Coupons: 2 columns on tablet/desktop, image on top, equal heights ---------- */
@media print, screen and (min-width: 40em) {
  .page-coupons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; align-items: stretch; }
  .page-coupons > h1 { grid-column: 1 / -1; }
  .page-coupons .coupon-container { margin: 0; }
}
.page-coupons .coupon-container > .grid-x { flex-direction: column-reverse; flex-wrap: nowrap; height: 100%; }
.page-coupons .coupon-container > .grid-x > .cell { width: 100%; flex: 0 0 auto; }
.page-coupons .coupon-container > .grid-x > .cell:first-child { flex: 1 1 auto; display: flex; flex-direction: column; }
.page-coupons .coupon-container .coupon-contact { margin-top: auto; padding-top: .5rem; }
.page-coupons .coupon-container img { display: block; margin: 0 auto .8rem; max-height: 11rem; width: auto; max-width: 100%; object-fit: contain; }
/* Kathy 10/30: QR codes / barcodes from the advertiser's ad go on the coupon so families can scan them. */
.page-coupons .coupon-container img.coupon-qr { max-height: 7.5rem; margin-bottom: .2rem; }
.coupon-qr-note { text-align: center; font-size: .8rem; margin: 0 0 .6rem; }
.page-coupons .coupon-container h2 { font-size: 1.35rem !important; line-height: 1.7rem; margin-bottom: .3rem; }
.page-coupons .coupon-container strong { font-size: 1.1rem !important; }

/* ---------- Kids Eat Free: sticky day picker + back to top ---------- */
.kef-days { position: sticky; top: 0; z-index: 30; display: flex; gap: .4rem; overflow-x: auto; flex-wrap: nowrap;
  background: #00488C; padding: .55rem .6rem; border-radius: .5rem; margin: 0 0 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .15); scrollbar-width: thin; }
@media print, screen and (min-width: 40em) { .kef-days { flex-wrap: wrap; justify-content: center; } }
.kef-day { flex: 0 0 auto; display: inline-block; padding: .35rem .85rem; border-radius: 1rem; background: #FCCA2E; color: #000;
  font-weight: 600; font-size: .95rem; white-space: nowrap; }
/* only the section you are on is orange (Kathy 10/28: a clicked chip used to stay orange too, because of :focus) */
.kef-day.is-current { background: #F36F22; color: #fff; }
/* hover is only a light ring, so it never looks like a second selected chip (Kathy 10/28 "hover over the button") */
.kef-day:hover:not(.is-current) { background: #FFE27A; box-shadow: inset 0 0 0 2px #F36F22; }
.kef-group { margin-bottom: 1rem; scroll-margin-top: 4.5rem; }   /* land below the sticky day bar */
@media screen and (max-width: 39.9375em) { .kef-group { scroll-margin-top: 4rem; } }
.kd-to-top { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; background: #00488C; color: #fff; border-radius: 2rem;
  padding: .55rem 1rem; font-weight: 600; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.kd-to-top:hover, .kd-to-top:focus { background: #F36F22; color: #fff; }
.kd-to-top[hidden] { display: none; }

/* ---------- Blog: normal article heading sizes and a readable line length ---------- */
.blog-index-title { font-size: 1.4rem; line-height: 1.8rem; font-weight: bold; margin-bottom: .5rem; }
.blog-index-title a { color: #074080; }
@media print, screen and (min-width: 64em) { .blog-index-title { font-size: 1.5rem; line-height: 1.95rem; } }
.kd-article h1 { font-size: 1.7rem; line-height: 2.1rem; }
.kd-article h2 { font-size: 1.3rem; line-height: 1.7rem; font-weight: bold; color: #00488C; margin-top: 1.4rem; margin-bottom: .5rem; }
.kd-article h3 { font-size: 1.15rem; line-height: 1.5rem; margin-top: 1.1rem; }
@media print, screen and (min-width: 40em) {
  .kd-article h1 { font-size: 2.125rem; line-height: 2.6rem; }
  .kd-article h2 { font-size: 1.5rem; line-height: 1.95rem; }
  .kd-article h3 { font-size: 1.2rem; }
}
.kd-article > p, .kd-article > ul, .kd-article > ol, .kd-article > h2, .kd-article > h3 { max-width: 44rem; }
.kd-article > p, .kd-article li { line-height: 1.65rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.kd-tips > .kd-card h3 { display: flex; align-items: flex-start; gap: .55rem; }
.kd-tips > .kd-card h3::before { flex: 0 0 1.9rem; margin: -.2rem 0 0; }

/* ---------- Advertising: "My Readers" stats strip ---------- */
.kd-statstrip { display: grid; grid-template-columns: 1fr; gap: .8rem; list-style: none; margin: .4rem 0 .8rem; }
@media print, screen and (min-width: 40em) { .kd-statstrip { grid-template-columns: repeat(2, 1fr); } }
@media print, screen and (min-width: 64em) { .kd-statstrip { grid-template-columns: repeat(3, 1fr); } }
.kd-statstrip li { background: #F4F8FB; border-radius: .5rem; border-left: 6px solid #F36F22; padding: .8rem 1rem; line-height: 1.4rem; margin: 0; }
.kd-statstrip .kd-big { display: block; font-size: 2.1rem; line-height: 2.4rem; font-weight: 700; color: #00488C; }
.kd-statstrip .c-green { border-left-color: #38A850; } .kd-statstrip .c-yellow { border-left-color: #F5BE1C; }
.kd-statstrip .c-red { border-left-color: #D81227; } .kd-statstrip .c-blue { border-left-color: #0495D7; }
.kd-statstrip .c-orange { border-left-color: #F36F22; } .kd-statstrip .c-navy { border-left-color: #00488C; }

/* ---------- Testimonials: families below the businesses, lighter ---------- */
.testimonials-family-title { font-size: 1.5rem; line-height: 1.9rem; font-weight: bold; color: #00488C; margin: 2rem 0 .8rem;
  border-bottom: solid 1px #00488C; padding-bottom: .3rem; }
.testimonials-container.testimonials-family { background: rgba(255, 255, 255, .55); border: 0; border-left: 4px solid #0495D7; }
.testimonials-family .testimonial-quote { font-style: italic; }

/* ---------- Featured Business (cover sponsor) ---------- */
.featured-advertiser-box .featured-logo { display: block; margin: 0 auto .8rem; max-height: 7rem; width: auto; max-width: 100%; }
.featured-advertiser-box .featured-blurb { margin: 0; font-size: .9rem; line-height: 1.3rem; }

/* ---------- top banner ad on phones (hidden in the header there) ---------- */
.kd-phone-banner { padding: .5rem 10px 0; }


/* ---------- rotating top banner ads (src/_data/banners.json) ---------- */
.kd-banners { display: grid; max-width: 728px; }
.kd-banner { grid-area: 1 / 1; display: flex; align-items: center; opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s; }
.kd-banner.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.kd-banner img { display: block; max-width: 100%; max-height: 100px; width: auto; height: auto; border: solid 1px #fff; }
.kd-phone-banner .kd-banners { max-width: none; }
.kd-phone-banner .kd-banner { justify-content: center; }
.kd-phone-banner .kd-banner img { width: 100%; max-height: none; }
@media (prefers-reduced-motion: reduce) { .kd-banner, .kd-banner.is-active { transition: none; } }

/* Email sign-up box above the footer on every page (partials/signup.njk) */
.kd-signup { background: #FFF4EC; color: #222; border-top: 6px solid #F36F22; padding: 1.6rem 0; }
.kd-signup-form { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding: 0 1rem; }
.kd-signup-text { flex: 1 1 22rem; }
.kd-signup-text h2 { color: #074080; font-size: 1.5rem; line-height: 1.9rem; margin: 0 0 .3rem; }
.kd-signup-text p { margin: 0; }
.kd-signup-fields { flex: 1 1 22rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.kd-signup-fields input { flex: 1 1 10rem; margin: 0; height: 2.6rem; border-radius: .3rem; border: 1px solid #c9c2b6; }
.kd-signup-fields .button { margin: 0; height: 2.6rem; background: #F36F22; border-radius: .3rem; font-weight: bold; }
.kd-signup-fields .button:hover, .kd-signup-fields .button:focus { background: #d85d14; }
.kd-signup-msg { flex: 1 1 100%; margin: 0; font-weight: bold; color: #074080; }
.kd-signup-msg:empty { display: none; }
.kd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Holiday Lights page (holiday-lights-santa.njk) - reuses the Kids Eat Free cards */
.hol-filter { margin: .6rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.hol-filter label { font-weight: bold; color: #074080; margin: 0; }
.hol-filter select { width: auto; min-width: 14rem; margin: 0; }
.hol-when, .hol-price { margin-bottom: .4rem; }
.hol-cell[hidden] { display: none; }

/* How to Choose index cards (how-to-choose-index.njk) - whole card is the link, bold navy title */
.htc-grid { margin-top: 1rem; }
.htc-card { display: block; height: calc(100% - 1rem); margin-bottom: 1rem; color: #222; text-decoration: none; }
.htc-card h3 { font-weight: bold; font-size: 1.25rem; color: #074080; }
.htc-card p { margin-bottom: .5rem; }
.htc-card .htc-read { font-weight: bold; color: #F36F22; }
.htc-card:hover h3, .htc-card:focus h3 { text-decoration: underline; }
.kd-article .htc-more a { font-weight: bold; color: #074080; }

/* Shared guide pages (partials/venue-guide.njk): my advertisers get a badge and a "See their ad" button */
.vg-adv { border-top-color: #38A850; }
.vg-badge { display: inline-block; margin: 0 0 .4rem; padding: .1rem .6rem; border-radius: 1rem; background: #38A850; color: #fff; font-size: .8rem; font-weight: bold; }
.hol-area-group[hidden] { display: none; }
.vg-table { width: 100%; margin: .5rem 0 0; }
.vg-table th, .vg-table td { text-align: left; vertical-align: top; padding: .4rem .5rem; }
.vg-caladd { display: inline-block; margin-top: .3rem; font-size: .85rem; font-weight: 600; white-space: nowrap; }

/* How to Choose: advertiser list by part of town (how-to-choose.njk) */
.htc-local[hidden] { display: none; }
.htc-area-title { font-size: 1.05rem; font-weight: bold; color: #fff; background: #00488C; border-radius: .4rem; padding: .25rem .8rem; margin: 1rem 0 .4rem; }
.kd-article .htc-local a { color: #074080; }

/* Kathy 10/30: Goods & Services ads open larger (kd.js kd-zoom). */
a.kd-zoom { display: block; cursor: zoom-in; }
.kd-zoom-hint { font-size: .85rem; color: #555; margin: .3rem 0 1rem; }
.kd-zoom-hint svg { width: .9em; height: .9em; vertical-align: -.1em; }
.kd-zoom-box { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.85); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; }
.kd-zoom-box[hidden] { display: none; }
.kd-zoom-frame { flex: 1 1 auto; width: 100%; display: flex; align-items: center; justify-content: center; overflow: auto; min-height: 0; }
.kd-zoom-frame img { width: min(100%, 1400px); height: auto; max-height: calc(100vh - 5rem); object-fit: contain; cursor: zoom-in; background: #fff; }
.kd-zoom-box.is-full .kd-zoom-frame { display: block; }
.kd-zoom-box.is-full .kd-zoom-frame img { max-width: none; max-height: none; width: auto; height: auto; cursor: zoom-out; }
.kd-zoom-close { position: absolute; top: .5rem; right: 1rem; font-size: 2.6rem; line-height: 1; color: #fff; background: none; border: 0; cursor: pointer; }
.kd-zoom-tip { color: #fff; font-size: .9rem; margin: .5rem 0 0; }
.page-coupons .coupon-container img.coupon-barcodes { max-height: 11rem; }
/* About page photo (Kathy 2026-10-30: "the picture from google accounts") - beside the story on wide screens, on top on phones */
.kd-about::after { content: ""; display: table; clear: both; }
.kd-about-photo { display: block; width: 100%; max-width: 280px; height: auto; margin: .25rem auto 1rem; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
@media screen and (min-width: 40em) { .kd-about-photo { float: right; margin: .25rem 0 1rem 1.5rem; } }
/* Testimonials (Kathy 2026-10-30): logos alternate left, right, left... down the page */
.kd-tlogo { max-width: 180px; height: auto; margin: 0 0 .5rem; }
.kd-tlogo-left { float: left; margin-right: 1rem; }
.kd-tlogo-right { float: right; margin-left: 1rem; }
.testimonial-quote::after { content: ""; display: table; clear: both; }
@media screen and (max-width: 39.9375em) { .kd-tlogo { max-width: 120px; } }
/* Links inside the text, site-wide (Kathy 2026-10-30, tried on the thank-you page: "Perfect. Can you make links throughout
   the whole website like that"): the navy was too close to the black text. Softer bright blue, medium-bold, thin
   underline. Buttons, menus, card titles and the footer keep their own look. */
#main p a:not(.button):not(.kd-zoom), #main li a:not(.button), #main td a:not(.button), #main dd a:not(.button) {
  color: #1a5fa8; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
#main p a:not(.button):hover, #main li a:not(.button):hover, #main td a:not(.button):hover, #main dd a:not(.button):hover,
#main p a:not(.button):focus, #main li a:not(.button):focus, #main td a:not(.button):focus, #main dd a:not(.button):focus { color: #003d8a; }