/* ===================================================================== design-fixes.css — desktop layout corrections Loaded AFTER styles.css. Nothing in styles.css is modified; every rule here overrides a specific earlier declaration and is commented with the line it corrects, so this file can be folded back in or dropped later. ===================================================================== */ /* --------------------------------------------------------------------- FIX 1 — "Address" label collapsing to one letter per line --------------------------------------------------------------------- styles.css:163 .contact-lines strong { width:240px; white-space:nowrap } styles.css:1066 each row is grid-template-columns: minmax(0,1fr) auto The label track can shrink to zero and the value track resolves toward max-content, so the long address took the whole row and squeezed "Address" down to one character wide. NOTE ON SPECIFICITY — this is why the first attempt at this fix failed. The rule being overridden is .homepage:not(.arabic-page) .contact-lines a which scores (0,3,1). A plain .contact-lines > a scores (0,1,1) and loses even with !important, because !important only breaks ties at equal specificity. Every selector below therefore matches the original's specificity or beats it. Label track now has a floor and hugs its text; the value takes the rest and may wrap. Phone numbers still never break. --------------------------------------------------------------------- */ .contact-lines.contact-lines > a, .contact-lines.contact-lines > div, .homepage:not(.arabic-page) .contact-lines > a, .homepage:not(.arabic-page) .contact-lines > div, .product-guide:not(.arabic-page) .contact-lines > a, .product-guide:not(.arabic-page) .contact-lines > div, .arabic-page .contact-lines > a, .arabic-page .contact-lines > div{ display: grid !important; grid-template-columns: minmax(6em, auto) minmax(0, 1fr) !important; align-items: start !important; gap: 10px 20px !important; } /* Labels stay on one line and never collapse. */ .contact-lines.contact-lines > a > span, .contact-lines.contact-lines > div > span, .homepage:not(.arabic-page) .contact-lines > a > span, .homepage:not(.arabic-page) .contact-lines > div > span, .product-guide:not(.arabic-page) .contact-lines > a > span, .product-guide:not(.arabic-page) .contact-lines > div > span{ white-space: nowrap !important; overflow-wrap: normal !important; word-break: keep-all !important; line-height: 1.35; } /* Values wrap, right-aligned to a common edge. */ .contact-lines.contact-lines strong, .homepage:not(.arabic-page) .contact-lines strong, .product-guide:not(.arabic-page) .contact-lines strong{ white-space: normal !important; overflow-wrap: break-word !important; justify-self: end !important; text-align: end !important; line-height: 1.4 !important; max-width: 100% !important; } /* Phone numbers must never break mid-number. */ .contact-lines.contact-lines a[href^="tel:"] strong, .homepage:not(.arabic-page) .contact-lines a[href^="tel:"] strong, .product-guide:not(.arabic-page) .contact-lines a[href^="tel:"] strong{ white-space: nowrap !important; } /* Arabic: Latin values stay upright, the address reads right-to-left. */ .arabic-page .contact-lines strong{ white-space: normal !important; text-align: end !important; direction: ltr; unicode-bidi: isolate; } .arabic-page .contact-lines .addr strong{ direction: rtl; } /* Narrow screens: stack the label above the value rather than squeezing. */ @media (max-width: 560px){ .contact-lines.contact-lines > a, .contact-lines.contact-lines > div, .homepage:not(.arabic-page) .contact-lines > a, .homepage:not(.arabic-page) .contact-lines > div, .product-guide:not(.arabic-page) .contact-lines > a, .product-guide:not(.arabic-page) .contact-lines > div{ grid-template-columns: 1fr !important; gap: 4px !important; } .contact-lines.contact-lines strong, .homepage:not(.arabic-page) .contact-lines strong, .product-guide:not(.arabic-page) .contact-lines strong{ justify-self: start !important; text-align: start !important; } } /* --------------------------------------------------------------------- FIX 2 — "Contact" sitting higher than the other navigation items --------------------------------------------------------------------- The dropdown items are