/* ============================================================================
Shree Jalaram Travels — Material Symbols icon layer
----------------------------------------------------------------------------
Loaded AFTER theme.css, which is byte-identical to the WordPress theme.
Every rule here either styles the new .mi icon spans or overrides one of the
typographic glyphs the theme used to fake an icon. Deleting this file and the
Material Symbols returns the site to the 03-Static-Site rendering.
Font: Material Symbols Outlined (variable) — sharp, low-contrast strokes that
sit well beside Manrope and the theme's gold-on-near-black editorial layer.
========================================================================== */
/* ---------- 1. Base icon class ------------------------------------------- */
/* The theme sets text-transform:uppercase and letter-spacing on buttons, nav
links, .text-link, .crumb and small caps labels. Both break Material Symbols
ligatures, so they are reset here rather than relying on inheritance. */
/* The four ligature-critical properties are !important on purpose. Theme rules
such as `.rate-disclaimer span` and `.trustbar span` are specificity (0,1,1)
and would otherwise beat `.mi` (0,1,0), reapplying uppercase / letter-spacing
and making the symbol render as the literal word "info". */
.mi {
font-family: "Material Symbols Outlined" !important;
text-transform: none !important;
letter-spacing: normal !important;
font-variant-ligatures: normal !important;
font-weight: normal;
font-style: normal;
font-size: 22px;
line-height: 1;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
display: inline-grid;
place-items: center;
flex: 0 0 auto;
font-feature-settings: "liga";
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
user-select: none;
-webkit-user-select: none;
}
.mi--xs { font-size: 15px; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20; }
.mi--sm { font-size: 18px; font-variation-settings: "FILL" 0, "wght" 350, "GRAD" 0, "opsz" 20; }
.mi--md { font-size: 24px; }
.mi--lg { font-size: 28px; font-variation-settings: "FILL" 0, "wght" 250, "GRAD" 0, "opsz" 40; }
.mi--xl { font-size: 32px; font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 40; }
.mi--fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
/* Inline icon sitting beside text inside a link that is not already a flex box. */
.has-icon { display: inline-flex; align-items: center; gap: 7px; }
/* .has-icon sets `display`, which would otherwise resurrect elements the theme
deliberately hides at a breakpoint. Restore the theme's own behaviour: it
hides the header "Call us" link below 1020px, where the mobile menu and the
floating WhatsApp button take over. */
@media (max-width: 1020px) {
.header__call.has-icon { display: none; }
}
/* ---------- 2. Header, topline, mobile menu ------------------------------ */
.topline a.has-icon { gap: 6px; }
/* .text-link draws a border-bottom; inline-flex keeps the rule under both the
icon and the label instead of only the text. */
.text-link.has-icon { gap: 6px; padding-bottom: 3px; }
/* Trailing arrow on links that leave the site (WhatsApp enquiries). */
.text-link .mi--xs { margin-left: 1px; }
/* Hamburger: swap the theme's two bars for menu / close symbols so the
header matches the rest of the icon set. The bars stay in the markup. */
@media (max-width: 1020px) {
.menu-toggle { display: grid; place-items: center; padding: 0; }
.menu-toggle span { display: none; }
.menu-toggle::before {
content: "menu";
font-family: "Material Symbols Outlined";
font-size: 26px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
font-feature-settings: "liga";
font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
color: #fff;
}
.menu-toggle[aria-expanded="true"]::before { content: "close"; }
}
/* ---------- 3. Sticky contact buttons ------------------------------------ */
/* The theme rendered the floating button as the letters "WA", then as a "↗"
pseudo-element. Both are replaced by a chat symbol. */
.whatsapp-float::after { content: none; }
.whatsapp-float { font-size: 0; }
.whatsapp-float .mi { font-size: 27px; font-variation-settings: "FILL" 0, "wght" 350, "GRAD" 0, "opsz" 24; }
/* ---------- 4. Trust bars ------------------------------------------------ */
/* Homepage used 01–04; the car rental page used ✓ ◎ ↗ ₹ at body font size
inside a 42px box. Both now carry a properly sized symbol.
The box never actually centred its contents: the theme declares
`.trustbar__icon { display: grid; place-items: center }` (0,1,0) but then
`.trustbar span { display: block }` (0,1,1) later in the same file wins, so
the box computed to `display: block` and the glyph sat at the top. Both
selectors below are specific enough to take the declaration back. */
.trustbar .trustbar__icon {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid rgba(216, 183, 121, .34);
background: rgba(216, 183, 121, .07);
color: #d8b779;
}
.trustbar__icon .mi {
display: grid;
place-items: center;
font-size: 24px;
font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}
/* Re-assert the theme's own breakpoint: it hides these icons below 720px, and
the rule above (0,2,0) would otherwise outrank its (0,1,0) and bring them
back on phones, where the two-up trust bar has no room for them. */
@media (max-width: 720px) {
.trustbar .trustbar__icon { display: none; }
}
/* ---------- 5. Homepage hero choices ------------------------------------- */
.journey-choice__icon .mi { font-size: 21px; }
.journey-choice__arrow .mi { font-size: 17px; }
/* ---------- 6. Services switcher ----------------------------------------- */
.service-row i .mi { font-size: 20px; }
.services-visual__controls button .mi { font-size: 20px; }
/* ---------- 7. Service cards, promises, fleet rail ----------------------- */
.service-card__icon .mi { font-size: 26px; font-variation-settings: "FILL" 0, "wght" 250, "GRAD" 0, "opsz" 40; }
.promise span .mi { font-size: 19px; }
.fleet-home__card > small.has-icon { display: flex; }
/* ---------- 8. Star ratings ---------------------------------------------- */
/* Replaces the ★ characters; letter-spacing is reset by .mi, so the row is
spaced here instead. */
.quote-card__stars { display: flex; gap: 3px; }
.quote-card__stars .mi { font-size: 18px; }
/* ---------- 9. Breadcrumbs ----------------------------------------------- */
.crumb { display: flex; align-items: center; gap: 4px; }
.crumb .mi { font-size: 14px; opacity: .65; }
/* ---------- 10. FAQ accordions ------------------------------------------- */
/* Theme used "+" and "–" text. */
.faq summary::after {
content: "add";
font-family: "Material Symbols Outlined";
font-size: 22px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
font-feature-settings: "liga";
font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
top: 50%;
transform: translateY(-50%);
color: #9a7031;
}
.faq details[open] summary::after { content: "remove"; }
/* ---------- 11. Car rental rate notes ------------------------------------ */
/* Theme used a "✓" pseudo-element on each rate-extras item. */
.rate-extras span::before {
content: "check";
font-family: "Material Symbols Outlined";
font-size: 14px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
font-feature-settings: "liga";
font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
vertical-align: -2px;
}
/* These labels wrap to two lines, so the icon aligns to the first line rather
than floating at the vertical centre of the block. */
.rate-disclaimer span.has-icon,
.luxury-note span.has-icon { display: inline-flex; gap: 8px; align-items: flex-start; }
.rate-disclaimer .mi,
.luxury-note .mi { font-size: 17px; margin-top: -1px; }
/* ---------- 12. Contact page + footer ------------------------------------ */
.contact-card small.has-icon { display: flex; }
.contact-card .mi { font-size: 16px; }
/* NOT an icon change — a pre-existing theme bug, present in the WordPress theme
and in 03-Static-Site. The theme gives .site-footer a `display:block` but not
.contact-card a, so the two phone numbers render inline and read as one
20-digit string: "91733450009428794714". Remove this rule to reproduce. */
.contact-card a { display: block; width: fit-content; }
.site-footer a.has-icon,
.site-footer p.has-icon { display: flex; align-items: flex-start; gap: 9px; }
.site-footer .mi { font-size: 16px; color: #d8b779; margin-top: 2px; }