/* MDIX Bakery Elegan — audit fixes */

/* Menu photos had different natural widths and slid under the cake names and prices.
   Each photo now fills exactly the space reserved on the left of its card. */
.menu-section .menu-box img {
  height: 100%;
  object-fit: cover;
  max-width: none;
}
@media (min-width: 1367px) {
  .menu-section .menu-box { padding-left: 320px; }
  .menu-section .menu-box img { width: 300px; }
}
@media (min-width: 1200px) and (max-width: 1366px) {
  .menu-section .menu-box img { width: 270px; max-width: none; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .menu-section .menu-box img { width: 140px; max-width: none; }
}
@media (min-width: 480px) and (max-width: 767px) {
  .menu-section .menu-box img { width: 185px; max-width: none; }
}
@media (max-width: 479px) {
  .menu-section .menu-box img { width: 100px; max-width: none; }
}

/* Hero caption sits on a busy photo; a soft shadow keeps it readable. */
.photo-slider .carousel-caption p {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
}

/* ===== Design-QA 2026-10-12 ===== */
:root {
  --mdix-rose: #c2454d;        /* white text on it 5.0:1, on white 5.0:1 */
  --mdix-rose-large: #d95f68;  /* large script headings, 3.6:1 on white */
  --mdix-ink: #2a1b1d;
  --mdix-body: #666;
  --mdix-teal: #127a93;
}

/* Text that must not break inside (phone numbers, opening hours, "8–10 orang") */
.mdix-nowrap,
a[href^="tel:"] { white-space: nowrap; }
.menu-section .menu-box p span.mdix-nowrap {
  float: none; color: inherit; font-size: inherit; letter-spacing: inherit; margin: 0; display: inline;
}

/* --- Hero: every slide gets a soft dark layer so white captions stay readable
   on light photos (donut on white table, white shirt). --- */
.photo-slider .carousel-inner > .item::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.45) 100%);
}
.photo-slider .carousel-caption { z-index: 2; }

/* --- Contrast (WCAG AA): theme pink #f88c91 with white 12px text is 2.3:1. --- */
.header-main .cart > li > a,
.header-main.navbar-fixed-top .cart > li > a,
.photo-slider .carousel-caption a,
.welcome-section .welcome-content a.read-more,
.festival-section .festival-content a.read-more,
.order-section a.order-now,
.latest-blog a.all-post,
.menu-section-1 a.view-full,
.gallery-section a.view-more,
.comment-form input[type="submit"],
.contact-us-1 input[type="submit"],
.comment-section .media-heading a,
.widget-archives .calendar td a,
.top-header { background-color: var(--mdix-rose); border-color: var(--mdix-rose); }
.menu-section .menu-box a:hover,
.ow-pagination .pagination a:hover,
.order-section-1 a.free-delivery:hover,
.subscribe-section .btn-default:hover { background-color: var(--mdix-rose); border-color: var(--mdix-rose); color: #fff; }
.photo-slider .carousel-caption a:hover,
.welcome-section .welcome-content a.read-more:hover,
.festival-section .festival-content a.read-more:hover,
.order-section a.order-now:hover,
.latest-blog a.all-post:hover,
.menu-section-1 a.view-full:hover,
.gallery-section a.view-more:hover,
.comment-form input[type="submit"]:hover,
.contact-us-1 input[type="submit"]:hover { background-color: #fff; color: var(--mdix-rose); border-color: var(--mdix-rose); }
.menu-section .menu-box a { border-color: var(--mdix-rose); }
.top-header .language-dropdown.dropdown::after,
.top-header .contact li::after,
.top-header .social-icons li::after { background-color: rgba(255,255,255,.35); }
/* small pink text on light backgrounds */
.menu-section .menu-box h3 span,
.menu-section-1 .menu-box-1 h5,
.latest-blog a.read-more,
.latest-blog .entry-meta i,
.order-section .online-form p,
.order-section-1 p span,
.blog-section .tab-post .post-info p span,
.author-content span,
.comment-section .media-heading span,
.widget-text a,
.blog-post .tags a,
.testimonial-section .testimonial-content p span { color: var(--mdix-rose); }
.latest-blog a.read-more:hover::after { color: var(--mdix-rose); }
.order-section .online-form p a { color: var(--mdix-teal); }
/* large script headings keep a lighter rose (AA large text 3:1) */
.section-header h3,
.welcome-section .welcome-header span { color: var(--mdix-rose-large); }
.team-section .section-header h3 { color: #f88c91; } /* dark background: original pink is 6:1 */
/* grey body copy #777 is 4.1–4.5:1 on the light card backgrounds */
.section-header p,
.welcome-section p,
.festival-section .festival-content p,
.menu-section .menu-box p,
.latest-blog .entry-content p,
.latest-blog .entry-meta a,
.contact-us-1 .contact-info p,
.contact-us-1 .contact-info p a { color: var(--mdix-body); }
/* white title on the orange newsletter band was 1.7:1 */
.subscribe-section .subscribe-title { color: var(--mdix-ink); }
/* footer social icons were grey #6b6b6b on grey #4a4a4a */
.footer-main .footer-content .about-footer ul li a { color: #f2f2f2; }

/* --- Header: menu button 44px, CTA label never below 12px --- */
@media (max-width: 991px) {
  .ow-navigation .navbar-toggle { min-width: 44px; min-height: 44px; margin-top: 20px; margin-bottom: 20px; }
}
@media (max-width: 479px) {
  .header-main .cart > li > a { font-size: 12px; padding: 9px 10px; }
}
/* search button: 13px wide icon → 30px target (same spot) */
.menu-search .sb-search-submit,
.menu-search .sb-icon-search { min-width: 30px; }

/* --- Festival (cake category) tabs: on phones the 5th icon wrapped alone and
   hung below the orange band. Keep all five in one row. --- */
@media (max-width: 767px) {
  .festival-section .festival-details-tab .nav-tabs {
    display: flex; justify-content: center; width: 100%; margin-left: 0; margin-right: 0;
  }
  .festival-section .festival-details-tab .nav-tabs::before,
  .festival-section .festival-details-tab .nav-tabs::after { display: none; }
  .festival-section .festival-details-tab .nav > li { flex: 1 1 0; max-width: 120px; margin: 0; float: none; }
  .festival-section .festival-details-tab .nav > li > a {
    padding: 0 2px; font-size: 12px; line-height: 1.3; letter-spacing: 0; white-space: normal;
  }
  .festival-section .festival-details-tab .nav > li > a i {
    width: 58px; height: 58px; line-height: 50px; margin: 0 auto 10px; border-width: 3px;
  }
  .festival-section .festival-details-tab .nav > li > a i img { max-width: 28px; height: auto; vertical-align: middle; }
}

/* --- Menu grid --- */
/* ≥992: cards of different heights left holes (6 cards in a float grid). */
@media (min-width: 992px) {
  .menu-section { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; padding: 0 20px; }
  .menu-section > .section-padding,
  .menu-section > .container { grid-column: 1 / -1; }
  .menu-section > .col-md-6 { width: auto; float: none; display: flex; padding: 0; }
  .menu-section > .col-md-6 > .menu-box { flex: 1; }
}
/* 1920: cards ran edge to edge; keep them in a readable width */
@media (min-width: 1600px) {
  .menu-section { max-width: 1520px; margin-left: auto; margin-right: auto; }
}
/* 768–991: photo kept its natural width (≈370px) and covered names and prices */
@media (min-width: 768px) and (max-width: 991px) {
  .menu-section .menu-box { padding-left: 290px; }
  .menu-section .menu-box img { width: 260px; }
}

/* --- Team: one member (the second slide repeated the same photo) → no arrows --- */
.team-section .carousel-control { display: none; }
.team-section .team-contact-info li a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; font-size: 14px;
}
.team-section .team-contact-info li { margin-right: 4px; }

/* --- Blog + footer on tablets: 2 + 1 left the last card alone on the left --- */
@media (min-width: 640px) and (max-width: 991px) {
  .latest-blog article.type-post:last-of-type > .col-sm-6 { float: none; margin: 0 auto; clear: both; }
  .footer-main .footer-content > .col-sm-6:nth-child(3) { float: none; clear: both; margin: 30px auto 0; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .latest-blog article.type-post:last-of-type > .col-sm-6 { width: 50%; }
}

/* --- Bottom footer links wrapped with a stray "/" at the start of a line --- */
@media (max-width: 767px) {
  .bottom-footer .breadcrumb { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
  .bottom-footer .breadcrumb li,
  .bottom-footer .breadcrumb li:last-of-type { margin: 0; padding: 0; }
  .bottom-footer .breadcrumb > li + li::before { display: none; }
  .bottom-footer .breadcrumb li a { display: inline-block; padding: 6px 0; }
}

/* --- Contact maps: keyless embed fills the theme's map box --- */
.map-canvas iframe.mdix-map,
.map-canvas-1 iframe.mdix-map { display: block; width: 100%; height: 100%; border: 0; }
/* category labels sat white on the orange band (1.7:1) */
.festival-section .festival-details-tab .nav > li > a,
.festival-section .festival-details-tab .nav > li > a:hover,
.festival-section .festival-details-tab .nav > li > a:focus,
.festival-section .festival-details-tab .nav-tabs > li.active > a { color: var(--mdix-ink); }
@media (max-width: 767px) {
  .bottom-footer .breadcrumb > li.active { padding: 6px 0; }
}

/* --- Touch targets ≥24px for inline text links (padding + negative margin: layout unchanged) --- */
.latest-blog .entry-cover a,
.blog-section .entry-cover a { display: block; }
.team-section .team-contact-info p a,
.order-section .online-form p a,
.latest-blog .entry-meta a,
.latest-blog a.read-more { display: inline-block; padding: 4px 0; margin: -4px 0; }
.top-header .social-icons li a { display: inline-block; min-width: 28px; text-align: center; }
.top-header .contact li a { display: inline-block; padding: 6px 0; line-height: 18px; }
.widget-flicker a { display: inline-block; }
.widget-categories li a,
.widget-text a { display: inline-block; padding: 4px 0; margin: -4px 0; }
.widget-reviews .carousel-control { width: 28px; height: 28px; line-height: 28px; }
.widget-categories li a,
.widget-text a,
.contact-us-1 .contact-info p a,
.blog-post .tags a,
.author-content a,
.comment-section a.load-more,
.footer-main-1 .ftr-widget p a,
.footer-main-1 .ftr-widget li a,
.footer-main-1 .recent-widget > a { display: inline-block; padding: 5px 0; margin: -5px 0; }
.footer-main-1 .recent-widget > a { display: block; }
.footer-main-1 .contact-widget ul li a { display: inline-block; min-width: 28px; min-height: 28px; text-align: center; padding: 0; margin: 0; line-height: 28px; }
.comment-section .media-left a { display: block; }
.widget-archives .calendar td a { display: inline-block; min-width: 26px; min-height: 26px; }
.bottom-footer .breadcrumb li a { display: inline-block; padding: 5px 0; margin: -5px 0; }
@media (max-width: 767px) { .bottom-footer .breadcrumb li a { margin: 0; } }
/* phones: the welcome muffin photo was 550px tall */
@media (max-width: 767px) {
  .welcome-section img[src*="welcome"] { width: 100%; height: auto; max-height: 420px; object-fit: cover; }
}
/* 360px: the search icon touched the logo text; hide it on very narrow phones */
@media (max-width: 374px) {
  .header-main .menu-search { display: none; }
}

/* Verifikasi ulang akhir 2026-10-13: teks sidebar & kutipan blog #777 di latar putih/#fafafa = 4,29–4,48:1 → #666. */
.widget-area, .widget-area a, .widget-area p, .widget-area li, .widget-area span, blockquote, blockquote p { color: #5f5f5f !important; }
.widget-area caption, .widget-area caption span, .widget-area caption i { color: var(--mdix-rose) !important; }
.about-author p, .comment-section p, .comments-area p, .media-body p { color: #5f5f5f !important; }
/* index-2: teks putih di pita oranye #ffbb63 (callout & label "Baru") = 1,67:1 → teks gelap. */
.callout-bg-color .callout-content p, .callout-bg-color .callout-content span { color: var(--mdix-ink) !important; }
.menu-box-1 > span { color: var(--mdix-ink) !important; }