/** * Goshen Breadcrumbs Widget – Styles * * Fully responsive · RTL-ready · Accessible * Follows CSS logical properties so direction is inherited from * the document (supports both LTR and RTL automatically). */ /* ── Reset / Base ──────────────────────────────────────────────────────── */ .goshen-breadcrumbs { box-sizing: border-box; width: 100%; } .goshen-breadcrumbs *, .goshen-breadcrumbs *::before, .goshen-breadcrumbs *::after { box-sizing: inherit; } /* ── List ──────────────────────────────────────────────────────────────── */ .goshen-breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; gap: 6px; /* overridden by Elementor responsive control */ } /* ── Items ─────────────────────────────────────────────────────────────── */ .goshen-breadcrumbs__item { display: inline-flex; align-items: center; gap: 6px; /* Prevent line-breaks inside a single crumb on small screens */ white-space: nowrap; max-width: 100%; } /* On very small viewports allow the item text to truncate gracefully */ @media (max-width: 480px) { .goshen-breadcrumbs__item:not(.goshen-breadcrumbs__item--current) { max-width: 120px; } .goshen-breadcrumbs__item--current { max-width: 160px; } } /* ── Links ─────────────────────────────────────────────────────────────── */ .goshen-breadcrumbs__link { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; /* Prominent focus ring for keyboard / screen reader users */ border-radius: 2px; outline-offset: 2px; transition: color 0.2s ease; } .goshen-breadcrumbs__link:focus-visible { outline: 2px solid currentColor; } /* Hide home text visually on mobile when an icon is present */ @media (max-width: 480px) { .goshen-breadcrumbs__link .goshen-breadcrumbs__home-text { /* Keep in DOM for screen readers but hide visually */ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } } /* ── Icon alignment ────────────────────────────────────────────────────── */ .goshen-breadcrumbs__link i, .goshen-breadcrumbs__link svg { flex-shrink: 0; line-height: 1; /* Vertically centre icons regardless of font-size */ position: relative; top: -0.05em; } /* ── Current page item ─────────────────────────────────────────────────── */ .goshen-breadcrumbs__current { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Separator ─────────────────────────────────────────────────────────── */ .goshen-breadcrumbs__separator { flex-shrink: 0; user-select: none; line-height: 1; opacity: 0.6; } /* * RTL direction awareness: * In RTL contexts WordPress adds `dir="rtl"` to . * The separator character (›) automatically mirrors visually when the * browser renders it inside a RTL block — no extra transforms needed. * If a custom icon-based separator is ever used, the rule below flips it. */ [dir="rtl"] .goshen-breadcrumbs__separator--icon { transform: scaleX(-1); } /* ── Elementor editor placeholder ─────────────────────────────────────── */ .elementor-editor-active .goshen-breadcrumbs { min-height: 28px; }