/* ============================================ SIPO live-data styling — Indian Moments Scoped to API-rendered blocks only so the existing Elementor design is untouched. ============================================ */ /* ---- Footer opening hours (maroon footer, centred) ---- */ ul.sipo-hours { list-style: none; margin: 0; padding: 0; text-align: center; font-family: "Roboto", sans-serif; color: #fff; } ul.sipo-hours li { display: flex; justify-content: center; align-items: baseline; gap: .6em; padding: 5px 0; line-height: 1.5; } ul.sipo-hours li .day { min-width: 3.4em; text-align: right; color: #ff6600; font-weight: 500; } ul.sipo-hours li .time { text-align: left; } ul.sipo-hours li.today .day, ul.sipo-hours li.today .time { font-weight: 700; } ul.sipo-hours .closed-day { opacity: .75; font-style: italic; } /* ---- Contact-page hours table ---- */ .sipo-hours-table { font-family: "Roboto", sans-serif; } .sipo-hours-table .hours-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding: 9px 0; border-bottom: 1px solid rgba(0, 0, 0, .08); } .sipo-hours-table .hours-row:last-child { border-bottom: 0; } .sipo-hours-table .day { font-weight: 600; } .sipo-hours-table .time { text-align: right; } .sipo-hours-table .hours-row.today { color: #b8121b; font-weight: 700; } .sipo-hours-table .closed-day { opacity: .7; font-style: italic; } /* ---- API menu page ---- */ .api-menu-wrap { max-width: 1200px; margin: 0 auto; padding: 40px 20px 70px; } #api-menu-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 34px; } #api-menu-tabs .menu-tab { background: #fff; border: 1.5px solid #d8d8d8; color: #4a1219; padding: 9px 18px; border-radius: 30px; cursor: pointer; font-family: "Roboto", sans-serif; font-size: .9rem; transition: all .18s ease; } #api-menu-tabs .menu-tab:hover { border-color: #ff6600; color: #ff6600; } #api-menu-tabs .menu-tab.active { background: #5c0d18; border-color: #5c0d18; color: #fff; } #api-menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; } #api-menu-grid .menu-card { background: #fff; border: 1px solid #ececec; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 2px 10px rgba(0, 0, 0, .05); } #api-menu-grid .menu-card-img { height: 165px; overflow: hidden; } #api-menu-grid .menu-card-img img { width: 100%; height: 100%; object-fit: cover; } #api-menu-grid .menu-card-body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; } #api-menu-grid .menu-card-body h3 { font-size: 1.05rem; margin: 0 0 6px; color: #4a1219; } #api-menu-grid .menu-card-body p { font-size: .87rem; color: #666; margin: 0 0 14px; flex: 1; } #api-menu-grid .menu-card-footer { display: flex; justify-content: space-between; align-items: center; } #api-menu-grid .price { font-weight: 700; color: #b8121b; font-size: 1.05rem; } #api-menu-grid .order-link { background: #ff6600; color: #fff; padding: 7px 15px; border-radius: 6px; text-decoration: none; font-size: .84rem; } #api-menu-grid .order-link:hover { background: #e25500; color: #fff; } #menu-loading { text-align: center; padding: 50px 0; color: #777; } @media (max-width: 600px) { .sipo-hours-table .hours-row { flex-direction: column; gap: 2px; } .sipo-hours-table .time { text-align: left; } } /* ============================================ 1. Sticky header, docked under the status strip ============================================ */ :root { --strip-height: 38px; } body.has-status-strip { padding-top: calc(var(--strip-height) + var(--header-height, 0px)); } /* Astra sets body{overflow-x:hidden}, which makes a scroll container and disables position:sticky. position:fixed is unaffected by ancestor overflow, so the header docks under the strip without touching the theme's CSS. */ body.has-status-strip #masthead { position: fixed; top: var(--strip-height); left: 0; right: 0; z-index: 999; } /* Elementor header templates need the inner section to carry the backdrop */ body.has-status-strip .elementor-location-header > .elementor { background: inherit; } /* An ancestor with overflow/transform would break position:sticky */ .status-strip { padding: 9px 14px; line-height: 1.35; } .status-strip-inner { flex-wrap: wrap; } /* ============================================ 2. Footer opening hours — kill Elementor's negative margin so rows clear the divider ============================================ */ .elementor-element-03a8eef > .elementor-widget-container { margin: 0 !important; padding: 4px 0 0 !important; } ul.sipo-hours li { display: grid; grid-template-columns: 3.2em 1fr; gap: 0 .75em; align-items: start; justify-content: center; max-width: 300px; margin: 0 auto; padding: 7px 0; text-align: left; } ul.sipo-hours li .day { text-align: right; min-width: 0; } ul.sipo-hours li .time { text-align: left; white-space: normal; } /* ============================================ 3. Mobile optimisation ============================================ */ html { -webkit-text-size-adjust: 100%; } /* Astra sets body{overflow-x:hidden}, which makes a scroll container and kills position:sticky on the header. Clip on contains overflow instead. */ img, iframe, video, table { max-width: 100%; } iframe { border: 0; } @media (max-width: 1024px) { /* Elementor map embeds keep a fixed height that overflows on tablets */ .elementor-custom-embed iframe { width: 100% !important; height: 340px !important; } } @media (max-width: 768px) { :root { --strip-height: 44px; } .status-strip { font-size: .78rem; padding: 8px 12px; } .elementor-custom-embed iframe { height: 280px !important; } ul.sipo-hours li { grid-template-columns: 3em 1fr; max-width: 260px; padding: 6px 0; font-size: .95rem; } #api-menu-grid { grid-template-columns: 1fr; gap: 16px; } #api-menu-tabs { gap: 8px; } #api-menu-tabs .menu-tab { font-size: .8rem; padding: 7px 13px; } .api-menu-wrap { padding: 26px 14px 50px; } /* Long words / URLs must not force a horizontal scrollbar */ h1, h2, h3, h4, p, li, a { overflow-wrap: break-word; word-wrap: break-word; } } @media (max-width: 480px) { :root { --strip-height: 52px; } .status-strip { font-size: .74rem; } .elementor-custom-embed iframe { height: 230px !important; } ul.sipo-hours li { grid-template-columns: 2.8em 1fr; max-width: 240px; font-size: .9rem; } .sipo-hours-table .hours-row { padding: 8px 0; } } /* ============================================ 4. Header layout fix + compact "normal" sizing ============================================ Root cause of the "boxy" header: the HFE nav-menu widget's own base CSS sets its outer wrapper to flex-direction:column, and the widget's own "layout-horizontal" override never re-targets that wrapper (a class-name mismatch: it applies to ".hfe-nav-menu__layout-horizontal", but the wrapper is only ".hfe-layout-horizontal" — one underscore short). The nav column shrinks to ~240px and every menu item wraps onto its own row. Restoring row layout here is a scoped, surgical fix to that one defect — nothing else in the theme is touched. ============================================ */ .hfe-nav-menu.hfe-layout-horizontal { flex-direction: row !important; width: 100% !important; align-items: center; } .hfe-nav-menu.hfe-layout-horizontal > nav { width: 100%; } .hfe-nav-menu.hfe-layout-horizontal ul.hfe-nav-menu { width: auto !important; flex-wrap: nowrap; } @media (max-width: 1024px) { /* Below the theme's own mobile-menu breakpoint this reverts to its normal toggle/drawer behaviour - the fix only applies to desktop nav. */ .hfe-nav-menu.hfe-layout-horizontal { flex-direction: column !important; width: auto !important; } .hfe-nav-menu.hfe-layout-horizontal ul.hfe-nav-menu { flex-wrap: wrap; } } /* The link padding (50px top+bottom, from the original Elementor build) was sized for a much taller hero-style header. Trimmed to a normal nav size. */ .elementor-element-d3f2a86 .menu-item a.hfe-menu-item, .elementor-element-a6c028a .menu-item a.hfe-menu-item { padding-top: 14px !important; padding-bottom: 14px !important; } /* Logo: was a flat 28%-of-column width with no ceiling, ballooning on wide screens. Capped to a normal header-logo size, still responsive. */ .elementor-element-95ace5d img { width: auto !important; max-width: 100%; height: auto; max-height: 56px; } @media (max-width: 768px) { .elementor-element-95ace5d img { max-height: 42px; } } /* Tidy vertical rhythm now that the row no longer stacks */ .ast-site-identity { padding: 0.6em 0 !important; } /* Footer & contact hours - tighter, single-line rows */ .sipo-hours-table .hours-row { padding: 6px 0; } ul.sipo-hours li { padding: 5px 0; }