/* Import CSS partials here.
* Example: @import 'partials/footer.css';
*/
/* --------------------------------------------------------------------------
* Gold bullet: standard disc bullet in Sahliyeh gold.
* Used instead of brand mark images for simpler list items.
* -------------------------------------------------------------------------- */
.sahliyeh-gold-bullet {
padding-left: 24px;
position: relative;
}
.sahliyeh-gold-bullet::before {
content: "";
position: absolute;
left: 0;
top: 0.5em;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: var(--wp--preset--color--theme-04, #B7933E);
}
/* --------------------------------------------------------------------------
* Skip-to-content link (WCAG AA requirement)
* Visually hidden off-screen, becomes visible when focused via keyboard.
* -------------------------------------------------------------------------- */
.skip-to-content {
position: absolute;
left: -9999px;
top: 0;
z-index: 999;
padding: 12px 24px;
background: var(--wp--preset--color--theme-04);
color: var(--wp--preset--color--theme-02);
font-family: var(--wp--preset--font-family--montserrat);
font-size: 14px;
font-weight: 600;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.skip-to-content:focus {
left: 0;
outline: 2px solid var(--wp--preset--color--theme-04);
outline-offset: 2px;
}
/* --------------------------------------------------------------------------
* Header: Logo vertical alignment
* The logo sits in a flex row (vertically centered) but needs a 9px nudge
* downward to visually align with the nav text baseline.
* -------------------------------------------------------------------------- */
.wp-block-group.has-theme-02-background-color > .wp-block-image {
position: relative;
top: 9px; /* Logo optical alignment nudge -- visual center compensation */
}
/* --------------------------------------------------------------------------
* Header: Show caret but disable rotation animation on hover/open
* -------------------------------------------------------------------------- */
.wp-block-group.has-theme-02-background-color .wp-block-navigation__submenu-icon {
transform: none;
transition: none;
}
.wp-block-group.has-theme-02-background-color .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-icon,
.wp-block-group.has-theme-02-background-color .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-icon,
.wp-block-group.has-theme-02-background-color .wp-block-navigation-item.has-child[aria-expanded="true"] > .wp-block-navigation__submenu-icon {
transform: none;
}
/* --------------------------------------------------------------------------
* Header: Ensure sticky header sits above page content and dropdowns are visible
* -------------------------------------------------------------------------- */
.wp-block-group.has-theme-02-background-color[style*="position:sticky"],
.wp-block-group.has-theme-02-background-color[style*="position: sticky"] {
z-index: 100;
overflow: visible;
}
/* Ensure nav wrapper groups don't clip dropdown menus */
.wp-block-group.has-theme-02-background-color > .wp-block-group {
overflow: visible;
}
/* Dropdown submenu: position, colors, and z-index.
* Uses repeated class for specificity to override WP core inline transforms. */
.wp-block-group.has-theme-02-background-color .wp-block-navigation .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
background-color: var(--wp--preset--color--theme-02);
color: #ffffff;
border: none;
min-width: 200px;
z-index: 101;
padding: 8px 0;
left: 0;
top: 100%;
transform: none;
}
/* Show dropdown on hover — override WP core visibility/opacity/overflow */
.wp-block-group.has-theme-02-background-color .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container,
.wp-block-group.has-theme-02-background-color .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
display: flex;
flex-direction: column;
visibility: visible;
opacity: 1;
height: auto;
overflow: visible;
pointer-events: auto;
}
/* Dropdown link text color */
.wp-block-group.has-theme-02-background-color .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
color: #ffffff;
padding: 8px 20px;
white-space: nowrap;
}
.wp-block-group.has-theme-02-background-color .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
color: var(--wp--preset--color--theme-04);
}
/* --------------------------------------------------------------------------
* Green card gradient background
* Used in "Rooted in Legacy" and "White-Glove Service" sections.
* Pattern texture fades from visible (left) to solid green (right).
* -------------------------------------------------------------------------- */
.sahliyeh-green-card {
position: relative;
background-color: #103421;
overflow: hidden;
padding-bottom: var(--wp--preset--spacing--60);
}
/* Pattern texture at 7% opacity with gradient fade */
.sahliyeh-green-card::before {
content: "";
position: absolute;
inset: 0;
background-image: url(/wp-content/uploads/2026/03/green-card-texture.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
opacity: 0.07;
z-index: 0;
}
/* Gradient fade from transparent (left) to solid green (right) */
.sahliyeh-green-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(16, 52, 33, 0) 0%, #103421 51.45%);
z-index: 1;
}
/* Ensure content sits above pseudo-elements */
.sahliyeh-green-card > * {
position: relative;
z-index: 2;
}
/* Brand Mark card: vertical gradient (pattern at bottom, solid green at top) */
.sahliyeh-green-card--brand-mark {
width: 1200px;
max-width: 100%;
margin-inline: auto;
}
.sahliyeh-green-card--brand-mark::before {
background-position: center;
background-size: cover;
}
.sahliyeh-green-card--brand-mark::after {
background: linear-gradient(0deg, rgba(16, 52, 33, 0) -6.02%, #103421 24.44%);
}
/* --------------------------------------------------------------------------
* Partner photo: LinkedIn icon positioned at bottom-left of photo
* The photo container uses position:relative so the LinkedIn icon
* (last child image) can be absolutely positioned over the photo.
* -------------------------------------------------------------------------- */
.sahliyeh-partner-photo {
position: relative;
}
.sahliyeh-partner-photo > .wp-block-image:last-child {
position: absolute;
bottom: 5px;
left: 5px;
z-index: 2;
}
/* Brand Mark: center logo vertically and horizontally between text columns */
.sahliyeh-brand-mark-logo {
align-self: center;
justify-content: center;
align-items: center;
min-height: 100%;
}
/* Rooted in Legacy: 1196x449, padding 60px */
.sahliyeh-green-card--rooted {
width: 1196px;
max-width: 100%;
min-height: 449px;
padding: 60px;
margin-inline: auto;
}
/* White-Glove Service: 1197x472, padding 30px 50px */
.sahliyeh-green-card--whiteglove {
width: 1197px;
max-width: 100%;
min-height: 472px;
padding: 30px 50px;
margin-inline: auto;
}
/* --------------------------------------------------------------------------
* Footer: half-circle arch housing the logo mark
* A semicircular black shape protrudes above the footer top edge,
* containing the decorative gold logo mark.
* -------------------------------------------------------------------------- */
/* Footer container must allow arch to protrude above */
.sahliyeh-site-footer {
overflow: visible;
position: relative;
}
.sahliyeh-footer-logo {
position: relative;
padding-top: 25px;
z-index: 1;
isolation: isolate; /* Guarantee stacking context so ::before never paints over children */
}
/* Half-circle arch protruding above the footer */
.sahliyeh-footer-logo::before {
content: "";
position: absolute;
top: -70px; /* Footer arch overlap -- pulls arch up to overlap section boundary */
left: 50%;
transform: translateX(-50%);
width: 320px; /* Arch pseudo-element -- sized to contain 286px logo image with padding */
height: 155px;
background: #000;
border-radius: 320px 320px 0 0;
border: 1px solid rgba(183, 147, 62, 0.25);
border-bottom: none;
z-index: -1; /* Negative z-index within isolated stacking context keeps arch behind all content */
}
.sahliyeh-footer-logo > * {
position: relative;
z-index: 1;
}
/* Position the logo inside the arch -- z-index ensures it's above the ::before */
.sahliyeh-footer-logo > .wp-block-image:first-child {
margin-top: -55px;
position: relative;
z-index: 2;
}
/* Footer nav: no underlines on navigation links */
.sahliyeh-footer-nav a {
text-decoration: none;
}
/* --------------------------------------------------------------------------
* Footer CTA card: pattern texture with radial gold gradient
* Background layers: radial gold glow at bottom-right, dark overlay,
* then the Sahliyeh logo pattern tile.
* -------------------------------------------------------------------------- */
.sahliyeh-cta-card {
max-width: 900px;
height: 370px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-inline: auto;
position: relative;
overflow: hidden;
background: #000;
}
/* Texture pattern at 31% opacity */
.sahliyeh-cta-card::before {
content: "";
position: absolute;
inset: 0;
background: url(/wp-content/uploads/2026/03/cta-card-texture-figma.png) -2.51% -29.95% / 105.01% 144.49% no-repeat;
opacity: 0.31;
z-index: 0;
}
/* Gradient fade: black at top fading to transparent near the button area */
.sahliyeh-cta-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 1) 31.03%, rgba(0, 0, 0, 0) 100%);
z-index: 1;
}
/* Ensure content sits above pseudo-elements */
.sahliyeh-cta-card > * {
position: relative;
z-index: 2;
}
/* --------------------------------------------------------------------------
* Button: Outline-inverse hover — gold bg, black text
* Inline styles on the prevent theme.json hover from winning,
* so we enforce it here with higher specificity.
* -------------------------------------------------------------------------- */
/* Outline-inverse default: transparent bg. WP has no "transparent" color preset,
* so has-transparent-background-color doesn't generate a value — the default
* fill background (gold) bleeds through. Force transparent. */
.wp-block-button.is-style-button-outline-inverse .wp-block-button__link.has-transparent-background-color {
background-color: transparent !important;
}
/* Outline-inverse hover: gold bg, black text */
.wp-block-button.is-style-button-outline-inverse .wp-block-button__link:hover,
.wp-block-button.is-style-button-outline-inverse .wp-block-button__link:focus {
background-color: var(--wp--preset--color--theme-04) !important;
color: var(--wp--preset--color--theme-02) !important;
border-color: var(--wp--preset--color--theme-04) !important;
}
/* --------------------------------------------------------------------------
* Button: Fill (gold CTA) hover — dark green bg, cream text
* -------------------------------------------------------------------------- */
/* Fill button hover: dark green (#1f5036) bg + cream text.
* !important is required because WP's has-theme-04-background-color generates
* an inline background-color that theme.json :hover cannot override.
* This is a known WP limitation with preset color classes. */
.wp-block-button:not([class*="is-style-button-"]) .wp-block-button__link:hover,
.wp-block-button:not([class*="is-style-button-"]) .wp-block-button__link:focus {
background-color: var(--wp--preset--color--theme-07) !important;
color: var(--wp--preset--color--theme-01) !important;
border-color: var(--wp--preset--color--theme-07) !important;
}
/* --------------------------------------------------------------------------
* Button: Section-3 (green bg) hover -- cream bg, black text
* Standard gold hover lacks sufficient contrast on dark green (#103421).
* Cream (#F2F2EA) on green = 10.7:1 contrast ratio (WCAG AA pass).
* !important needed to override inline background-color set by WP on .
* -------------------------------------------------------------------------- */
.is-style-section-3 .wp-block-button__link:hover,
.is-style-section-3 .wp-block-button__link:focus {
background-color: var(--wp--preset--color--theme-01) !important;
color: var(--wp--preset--color--theme-02) !important;
border-color: var(--wp--preset--color--theme-01) !important;
}
/* --------------------------------------------------------------------------
* Patterns: Remove gaps between reusable block patterns and sections
* -------------------------------------------------------------------------- */
.entry-content > .wp-block-block,
.wp-block-post-content > .wp-block-block {
margin-top: 0;
margin-bottom: 0;
}
.wp-block-kindling-section + .wp-block-kindling-section,
.wp-block-kindling-section + .wp-block-block,
.wp-block-block + .wp-block-kindling-section,
.wp-block-block + .wp-block-block {
margin-top: 0;
}
/* ==========================================================================
* TABLET BREAKPOINT: 768-1023px
* At this range, the 12-column grid is still active but viewport is too
* narrow for items spanning 5-6 columns with large padding. Force grid
* items to full width and reduce cover block padding.
* ========================================================================== */
@media (max-width: 1023px) {
/* All !important in this block override WordPress-generated inline
* style="" attributes on blocks. Inline styles have specificity 1000
* which cannot be beaten by CSS selectors alone. */
/* ----------------------------------------------------------------
* Header: reduce horizontal padding at tablet.
* 80px each side leaves only 608px for nav + logo at 768px,
* which causes 3px overflow. Reduce to 24px.
* !important overrides inline style.
* ---------------------------------------------------------------- */
.wp-block-group.has-theme-02-background-color[style*="padding-left:80px"],
.wp-block-group.has-theme-02-background-color[style*="padding-right:80px"] {
padding-left: 24px !important;
padding-right: 24px !important;
gap: 20px !important;
}
/* Header nav: reduce font size and link gaps at tablet to prevent overflow */
.wp-block-group.has-theme-02-background-color .wp-block-navigation .wp-block-navigation-item__content {
font-size: 13px !important;
}
/* ----------------------------------------------------------------
* CRITICAL 1: Grid items overflow at tablet
* Items with columnSpan:5 or columnSpan:6 on a 12-col grid
* render at fixed widths that overflow the viewport at 768px.
* Force all grid items to span the full grid width.
* ---------------------------------------------------------------- */
.is-style-kindling-grid-system.is-layout-grid {
grid-template-columns: 1fr !important;
}
.wp-block-kindling-grid-item {
grid-column: 1 / -1 !important;
min-width: 0 !important;
max-width: 100% !important;
}
/* ----------------------------------------------------------------
* CRITICAL 1 + MAJOR 6: Cover block padding too large at tablet
* 96-120px padding compresses content in narrow viewports.
* Reduce to 40-60px range.
* ---------------------------------------------------------------- */
.wp-block-cover[style*="padding-left:120px"],
.wp-block-cover[style*="padding-left:96px"],
.wp-block-cover[style*="padding-left:100px"] {
padding-left: 40px !important;
padding-right: 40px !important;
padding-top: 60px !important;
padding-bottom: 60px !important;
}
/* Section-2 hero cover: reduce padding */
.is-style-section-2 > .wp-block-cover[style*="padding-left:120px"] {
padding-left: 40px !important;
padding-right: 40px !important;
padding-top: 80px !important;
padding-bottom: 80px !important;
}
/* Cover blocks with spacing--70 padding: reduce at tablet */
.wp-block-cover[style*="padding-left:var(--wp--preset--spacing--70)"] {
padding-left: var(--wp--preset--spacing--40) !important;
padding-right: var(--wp--preset--spacing--40) !important;
}
/* ----------------------------------------------------------------
* CRITICAL 2: Flex containers with fixed selfStretch widths
* Groups with min-width:559px or similar fixed sizes collapse
* or overflow at tablet. Force wrapping and full-width children.
* ---------------------------------------------------------------- */
.wp-block-cover__inner-container > .wp-block-group > .wp-block-group.is-layout-flex {
flex-wrap: wrap !important;
}
.wp-block-cover__inner-container .wp-block-group.is-layout-flex > .wp-block-group[style*="min-width"] {
min-width: 100% !important;
flex: 1 1 100% !important;
}
/* Fade carousel fixed-width container */
.sahliyeh-fade-carousel {
min-width: 100% !important;
flex: 1 1 100% !important;
}
/* Fill-stretch text columns */
.wp-block-cover__inner-container .wp-block-group.is-layout-flex > .wp-block-group:not([style*="min-width"]) {
flex: 1 1 100% !important;
}
/* Fixed-width cover blocks (559px image columns) */
.wp-block-cover[style*="width:559px"] {
width: 100% !important;
}
/* Fixed min-width groups */
.wp-block-group[style*="min-width:559px"] {
min-width: 100% !important;
}
/* ----------------------------------------------------------------
* MAJOR 4: Touch targets -- WCAG AA 44x44px minimum
* ---------------------------------------------------------------- */
/* Hamburger/menu toggle button */
.wp-block-navigation__responsive-container-open {
min-width: 44px !important;
min-height: 44px !important;
padding: 10px !important;
}
/* Submenu toggle buttons */
.wp-block-navigation__submenu-icon {
min-width: 44px !important;
min-height: 44px !important;
padding: 10px !important;
}
/* Footer nav links */
.sahliyeh-footer-nav a {
display: inline-block;
min-height: 44px;
line-height: 44px;
padding-inline: 8px;
}
/* Footer social icon links */
.sahliyeh-site-footer .wp-block-social-links .wp-social-link a {
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
/* ----------------------------------------------------------------
* MAJOR 5: Footer horizontal padding too large
* 80px leaves only ~215px usable width at mobile/tablet.
* Reduce to spacing--30.
* ---------------------------------------------------------------- */
.sahliyeh-site-footer .wp-block-cover[style*="padding-left"],
.sahliyeh-site-footer .wp-block-cover[style*="padding-right"] {
padding-left: var(--wp--preset--spacing--30) !important;
padding-right: var(--wp--preset--spacing--30) !important;
}
/* Footer CTA card: flexible height at tablet */
.sahliyeh-cta-card {
height: auto;
min-height: 280px;
padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
}
/* Green cards: flexible dimensions at tablet */
.sahliyeh-green-card--rooted,
.sahliyeh-green-card--whiteglove {
width: 100%;
height: auto;
padding: var(--wp--preset--spacing--40);
}
.sahliyeh-green-card--brand-mark {
width: 100%;
height: auto;
}
/* ----------------------------------------------------------------
* Header: reduce padding and fix overflow at tablet
* Inline style has 80px padding which overflows at 768px.
* ---------------------------------------------------------------- */
.sahliyeh-site-footer + .wp-block-group[style*="padding-right:80px"],
.wp-block-group.alignfull[style*="padding-left:80px"] {
padding-left: 24px !important;
padding-right: 24px !important;
}
/* ----------------------------------------------------------------
* Footer nav: wrap links + social icons at tablet/mobile.
* Desktop uses nowrap with 48px gap; at smaller viewports
* force wrap with reduced gap so items stack.
* ---------------------------------------------------------------- */
.sahliyeh-footer-nav {
flex-wrap: wrap !important;
gap: 24px 32px !important;
}
/* Footer: reduce horizontal padding */
.sahliyeh-site-footer.alignfull {
padding-left: var(--wp--preset--spacing--30) !important;
padding-right: var(--wp--preset--spacing--30) !important;
}
/* Cover min-heights: cap at tablet to prevent empty space */
.wp-block-cover[style*="min-height:950px"] {
min-height: 500px !important;
}
.wp-block-cover[style*="min-height:621px"],
.wp-block-cover[style*="min-height:612px"],
.wp-block-cover[style*="min-height:530px"] {
min-height: 400px !important;
}
/* Contact info flex row: force wrap at tablet */
.wp-block-kindling-section.is-style-section-2 > .wp-block-group > .wp-block-group.is-layout-flex {
flex-wrap: wrap !important;
}
.wp-block-kindling-section.is-style-section-2 > .wp-block-group > .wp-block-group.is-layout-flex > .wp-block-group[style*="flex-basis"] {
flex-basis: 100% !important;
min-width: 100% !important;
}
/* ----------------------------------------------------------------
* MAJOR 7: Contact form green box max-width
* The 512px max-width works at desktop but squeezes form fields
* at tablet. Make responsive.
* ---------------------------------------------------------------- */
.is-style-section-3 .wp-block-group[style*="max-width:512px"],
.wp-block-group[style*="max-width:512px"] {
max-width: 100% !important;
}
/* ----------------------------------------------------------------
* CRITICAL 3: Contact heading "CONNECT WITH US" breaks mid-word
* Reduce heading font size inside constrained form containers
* ---------------------------------------------------------------- */
.is-style-section-3 .has-display-font-size,
.is-style-section-3 .is-style-type-style-headline-large {
font-size: clamp(1.75rem, 5vw, 2.75rem) !important;
overflow-wrap: break-word;
word-break: break-word;
}
/* Large flex gaps: reduce at tablet */
.wp-block-group.is-layout-flex[style*="gap: 93px"],
.wp-block-group.is-layout-flex[style*="gap:93px"] {
gap: var(--wp--preset--spacing--40) !important;
}
/* Reduce 200px bottom padding on cover blocks */
.wp-block-cover[style*="padding-bottom:200px"] {
padding-bottom: 80px !important;
}
.wp-block-cover[style*="padding-top:127px"] {
padding-top: 60px !important;
padding-bottom: 60px !important;
padding-left: 40px !important;
padding-right: 40px !important;
}
/* Contact: two-column flex (image + form) must wrap at tablet too.
* At 768px with 72px gap, each column only gets ~320px which
* is too narrow for the form. Force wrap to stack. */
.wp-block-cover__inner-container > .wp-block-group.is-nowrap.is-layout-flex {
flex-wrap: wrap !important;
gap: var(--wp--preset--spacing--40) !important;
}
.wp-block-cover__inner-container > .wp-block-group.is-nowrap.is-layout-flex > .wp-block-group {
flex-basis: 100% !important;
min-width: 100% !important;
}
}
/* --------------------------------------------------------------------------
* Green card: Responsive overrides for mobile
* Fixed dimensions and padding must adapt at narrow viewports.
* -------------------------------------------------------------------------- */
@media (max-width: 767px) {
/* No !important used in this block -- green card mobile overrides use
* class selectors only since there are no competing inline styles. */
.sahliyeh-green-card--rooted,
.sahliyeh-green-card--whiteglove {
width: 100%;
height: auto;
padding: var(--wp--preset--spacing--40);
}
.sahliyeh-green-card--brand-mark {
width: 100%;
height: auto;
padding: var(--wp--preset--spacing--40);
}
/* Constrain inner content to prevent overflow */
.sahliyeh-green-card > .wp-block-group {
max-width: 100%;
overflow-wrap: break-word;
}
}
/* --------------------------------------------------------------------------
* Partner logos: full-width row, 20% default opacity, full on hover
* Targets the flex row containing horizontal logos in the Partners section.
* -------------------------------------------------------------------------- */
.is-style-section-2 .is-content-justification-space-between .wp-block-image img[src*="horiz-logo"] {
opacity: 0.2;
transition: opacity 0.3s ease;
}
.is-style-section-2 .is-content-justification-space-between .wp-block-image:hover img[src*="horiz-logo"] {
opacity: 1;
}
/* Break the logo row out of the constrained parent to span full width.
* The parent constrained layout sets max-width on children, so we
* override it here to allow the full-viewport breakout.
* Uses 100% of the viewport without causing horizontal scroll. */
.is-style-section-2 .is-content-justification-space-between:has(img[src*="horiz-logo"]) {
width: calc(100vw - var(--wp--style--root--padding-right, 0px) - var(--wp--style--root--padding-left, 0px));
max-width: none;
margin-left: calc(50% - 50vw);
padding-inline: var(--wp--preset--spacing--70);
}
/* --------------------------------------------------------------------------
* Grid: vertically center grid items in split content sections
* Sections with side-by-side heading + text should align items to center
* so shorter columns sit middle-aligned with taller ones.
* Applied globally to all kindling grid systems -- not just those inside
* cover blocks -- so intro patterns without a cover wrapper also center.
* -------------------------------------------------------------------------- */
.is-style-kindling-grid-system.is-layout-grid {
align-items: center;
}
/* --------------------------------------------------------------------------
* Carousel: nav-top variant -- arrows + dots above slides
* Used on Testimonials pattern. Moves Splide navigation from bottom
* to a centered row above the slide track: < * o o o >
* -------------------------------------------------------------------------- */
/* Remove default bottom padding, add top space for controls.
* The PHP render_block filter swaps kindling-carousel-container
* to kindling-carousel-manual for this variant. */
.sahliyeh-carousel-nav-top .kindling-carousel-manual {
padding-bottom: 0;
padding-top: 56px;
min-height: 200px;
overflow: hidden;
position: relative;
}
/* Navigation arrows: centered row at top. Arrows flank the dots which
* are moved into this container by JS after Splide mounts, so arrows
* always stay on the outside regardless of dot count. */
.sahliyeh-carousel-nav-top .kindling-carousel-manual .navigation-arrows {
position: absolute;
top: 8px;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
z-index: 10;
pointer-events: none;
}
.sahliyeh-carousel-nav-top .kindling-carousel-manual .navigation-arrows > * {
pointer-events: auto;
}
/* Dots re-parented into the arrows row: reset Splide's absolute positioning */
.sahliyeh-carousel-nav-top .kindling-carousel-manual .navigation-arrows .splide__pagination {
position: static;
transform: none;
display: flex;
gap: 8px;
align-items: center;
width: auto;
padding: 0;
margin: 0;
}
/* Fallback: hide Splide's original pagination position if JS hasn't moved it yet */
.sahliyeh-carousel-nav-top .kindling-carousel-manual > .splide__pagination {
top: 16px;
bottom: auto;
z-index: 11;
}
/* Arrow button styling */
.sahliyeh-carousel-nav-top .kindling-carousel-manual .navigation-arrows .splide-arrow {
background: transparent;
border: none;
color: var(--wp--preset--color--theme-01);
cursor: pointer;
min-height: 44px;
min-width: 44px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
flex-shrink: 0;
}
.sahliyeh-carousel-nav-top .kindling-carousel-manual .navigation-arrows .splide-arrow svg {
height: 16px;
width: 16px;
}
/* Pagination dots: fixed to 10x10 and overridden from the global 44px rule to prevent excessive spacing/wrapping */
.sahliyeh-carousel-nav-top .kindling-carousel-manual .splide__pagination li {
min-width: 0 !important;
min-height: 0 !important;
}
.sahliyeh-carousel-nav-top .kindling-carousel-manual .splide__pagination__page {
background: transparent;
border: 2px solid var(--wp--preset--color--theme-01);
border-radius: 50%;
height: 10px;
width: 10px;
min-width: 10px !important;
min-height: 10px !important;
margin: 0;
opacity: 1;
padding: 0;
}
.sahliyeh-carousel-nav-top .kindling-carousel-manual .splide__pagination__page.is-active {
background: var(--wp--preset--color--theme-01);
transform: none;
}
/* --------------------------------------------------------------------------
* Carousel FOUC prevention: hide slides before JS initializes
* Splide adds .is-initialized when mounted. Before that, all slides
* are visible as plain HTML causing a flash of unstyled content.
* -------------------------------------------------------------------------- */
.kindling-carousel-manual:not(.is-initialized) .carousel-slide:not(:first-child),
.kindling-carousel-container:not(.is-initialized) .carousel-slide:not(:first-child) {
display: none;
}
/* --------------------------------------------------------------------------
* Hero heading: responsive font-size for mobile
* The display font-size preset clamp(3.75rem, 3rem + 3.125vw, 5.625rem)
* resolves to ~60px at 375px, which causes uppercase headings like
* "EXPERIENCES THAT MOVE PEOPLE" to break into single-character lines.
* Capped to clamp(2rem, 8vw, 3.75rem) at mobile so words stay intact.
* !important required to override the has-display-font-size preset class
* specificity set by WordPress core.
* -------------------------------------------------------------------------- */
@media (max-width: 767px) {
/* All !important in this block override WordPress-generated inline
* style="" attributes on blocks (padding, min-height, width, flex
* properties) and WP preset classes (font-size, grid-template-columns).
* Inline styles have specificity 1000 which cannot be beaten by CSS
* selectors alone. */
.has-display-font-size {
font-size: clamp(2rem, 8vw, 3.75rem) !important;
}
.is-style-type-style-headline-large {
font-size: clamp(2rem, 8vw, 3.125rem) !important;
}
/* Display style used in green card mission statements */
.is-style-type-style-display {
font-size: clamp(2rem, 8vw, 3.125rem) !important;
}
/* Hero cover: reduce inline padding from 120px to 20px at mobile.
* The pattern sets 120px padding inline, which leaves only 135px
* of content width at 375px -- not enough for heading text.
* !important overrides the inline style attribute. */
.is-style-section-2 > .wp-block-cover[style*="padding-left:120px"] {
padding-left: var(--wp--preset--spacing--30) !important;
padding-right: var(--wp--preset--spacing--30) !important;
padding-top: 80px !important;
padding-bottom: 80px !important;
}
/* ----------------------------------------------------------------
* ISSUE 1: Careers - Vision & Values two-column flex must stack
* The flex row has a 518px fixed-width image column + text column
* with flexWrap:nowrap. On mobile, force wrap so columns stack.
* Also reduce the image column's fixed size and minWidth.
* ---------------------------------------------------------------- */
/* Force all top-level nowrap flex rows inside cover blocks to wrap.
* These are used for two-column layouts (image + text) across
* Careers, Meetings, and Our Causes pages. */
.wp-block-cover__inner-container > .wp-block-group > .wp-block-group.is-layout-flex {
flex-wrap: wrap !important;
gap: var(--wp--preset--spacing--40) !important;
}
/* Remove fixed flex-basis and min-width on image columns so they
* flow to full-width when stacked. Targets groups with inline
* selfStretch:fixed that set 518px or 559px widths. */
.wp-block-cover__inner-container .wp-block-group.is-layout-flex > .wp-block-group[style*="min-width"] {
min-width: 100% !important;
flex: 1 1 100% !important;
}
/* The fade carousel container also has flex-shrink:0 and needs
* to go full-width on mobile */
.sahliyeh-fade-carousel {
min-width: 100% !important;
flex: 1 1 100% !important;
}
/* Fill-stretch text columns should also go full-width */
.wp-block-cover__inner-container .wp-block-group.is-layout-flex > .wp-block-group:not([style*="min-width"]) {
flex: 1 1 100% !important;
}
/* Careers Core Values: icon + label rows use flexWrap:nowrap.
* 22px uppercase text with 1.76px letter-spacing overflows at 375px.
* Reduce font size and allow wrapping. */
.wp-block-cover__inner-container .wp-block-group.is-layout-flex .wp-block-group.is-layout-flex > .has-montserrat-font-family[style*="font-size:22px"] {
font-size: 16px !important;
letter-spacing: 0.08em !important;
}
/* Careers green card cover: reduce inline padding at mobile.
* 120px side padding leaves only 135px content width. */
.wp-block-cover[style*="padding-left:120px"],
.wp-block-cover[style*="padding-left:96px"],
.wp-block-cover[style*="padding-left:100px"] {
padding-left: var(--wp--preset--spacing--30) !important;
padding-right: var(--wp--preset--spacing--30) !important;
padding-top: 60px !important;
padding-bottom: 60px !important;
}
/* ----------------------------------------------------------------
* ISSUE 2: Meetings - cover blocks with large minHeight
* Cover blocks with min-height: 612px or 950px create massive
* empty space on mobile. Cap the min-height.
* ---------------------------------------------------------------- */
.wp-block-cover[style*="min-height:612px"],
.wp-block-cover[style*="min-height:530px"] {
min-height: 400px !important;
}
.wp-block-cover[style*="min-height:950px"] {
min-height: 450px !important;
}
/* Rewards Recognition (pattern 503): 484px cover is too tall on mobile.
* !important overrides the inline style attribute. */
.wp-block-cover[style*="min-height:484px"] {
min-height: 300px !important;
}
/* Our Causes Thank You (pattern 514): 600px cover is too tall on mobile.
* !important overrides the inline style attribute. */
.wp-block-cover[style*="min-height:600px"] {
min-height: 350px !important;
}
/* Gallery carousel: fixed image widths (232px/180px x 498px)
* overflow the viewport. Convert to a 3-column grid on mobile
* so images tile compactly instead of stacking one per row.
* justify-content must be unset to allow grid to fill width. */
.sahliyeh-gallery-carousel__track.is-layout-flex {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
justify-content: unset !important;
width: 100% !important;
}
.sahliyeh-gallery-carousel__track .wp-block-image.is-resized {
width: 100% !important;
height: auto !important;
}
.sahliyeh-gallery-carousel__track .wp-block-image.is-resized img {
width: 100% !important;
height: 250px !important;
object-fit: cover !important;
}
/* Reduce gallery section vertical padding on mobile */
.sahliyeh-gallery-carousel {
padding-top: var(--wp--preset--spacing--40) !important;
padding-bottom: var(--wp--preset--spacing--40) !important;
}
/* Partner logos: reduce excessive side padding from cover blocks */
.sahliyeh-partner-logos {
padding-left: var(--wp--preset--spacing--20) !important;
padding-right: var(--wp--preset--spacing--20) !important;
}
/* ----------------------------------------------------------------
* ISSUE 3: Contact info grid - cards must stack on mobile
* The flex row has three fixed-width columns (339px, 282px, 353px)
* with flexWrap:nowrap. Force wrap to stack vertically.
* ---------------------------------------------------------------- */
.wp-block-kindling-section.is-style-section-2 > .wp-block-group > .wp-block-group.is-layout-flex {
flex-wrap: wrap !important;
}
/* Remove fixed flex-basis on contact info card columns */
.wp-block-kindling-section.is-style-section-2 > .wp-block-group > .wp-block-group.is-layout-flex > .wp-block-group[style*="flex-basis"] {
flex-basis: 100% !important;
min-width: 100% !important;
}
/* ----------------------------------------------------------------
* ISSUE 4: About page - green cards with fixed heights
* Already handled above (lines 360-379) but cover blocks with
* large padding also contribute. The cover padding overrides above
* cover this. Also handle the CTA card fixed height.
* ---------------------------------------------------------------- */
.sahliyeh-cta-card {
height: auto;
min-height: 280px;
padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
}
/* ----------------------------------------------------------------
* ISSUE 5: Our Causes - body text readability
* Ensure minimum readable font size on mobile.
* WordPress small font-size preset may be too small on mobile.
* ---------------------------------------------------------------- */
.has-small-font-size {
font-size: clamp(0.875rem, 4vw, 1rem) !important;
}
/* Separator fixed widths (350px in Careers) overflow at 375px */
.wp-block-separator[style*="width:350px"] {
width: 100% !important;
}
/* Headline medium: also reduce for mobile readability */
.is-style-type-style-headline-medium {
font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
}
/* Our Causes: cover image with fixed width of 559px overflows */
.wp-block-cover[style*="width:559px"] {
width: 100% !important;
}
/* Our Causes: statistics numbers reduce from 50px */
.has-collier-font-family[style*="font-size:50px"] {
font-size: 36px !important;
}
/* Grid items: force proper sizing on mobile.
* WP grid generates 0px-wide columns causing items to overflow
* from intrinsic content width. Force items to fill parent. */
.is-style-kindling-grid-system.is-layout-grid {
grid-template-columns: 1fr !important;
}
.wp-block-kindling-grid-item {
min-width: 0 !important;
max-width: 100% !important;
grid-column: 1 / -1 !important;
}
.wp-block-kindling-grid-item > * {
max-width: 100% !important;
overflow-wrap: break-word;
word-break: break-word;
}
/* Headlines: allow wrapping at word boundaries */
.is-style-type-style-headline-large {
overflow-wrap: break-word;
word-break: break-word;
}
/* ----------------------------------------------------------------
* About page: reduce excessive 200px bottom padding on
* Our Proven Process cover block. !important needed to override
* the inline style attribute.
* ---------------------------------------------------------------- */
.wp-block-cover[style*="padding-bottom:200px"] {
padding-bottom: 60px !important;
}
/* About page: reduce 127px padding on Standouts-style covers */
.wp-block-cover[style*="padding-top:127px"] {
padding-top: 60px !important;
padding-bottom: 60px !important;
padding-left: var(--wp--preset--spacing--30) !important;
padding-right: var(--wp--preset--spacing--30) !important;
}
/* Cap cover block min-heights broadly at mobile to prevent
* empty space. Covers with content taller than 400px will
* naturally expand past this. */
.wp-block-cover[style*="min-height:621px"] {
min-height: 350px !important;
}
.wp-block-cover[style*="min-height:430px"] {
min-height: 300px !important;
}
/* Careers: constrain the vision image aspect ratio on mobile
* to prevent excessive height when it stacks full-width.
* 518/776 = very tall portrait; crop to 4/3 on mobile. */
.wp-block-cover__inner-container img[style*="aspect-ratio:518"] {
aspect-ratio: 4 / 3 !important;
max-height: 280px !important;
}
/* Reduce spacing--70 side padding on cover blocks at mobile.
* clamp resolves to ~40px which is fine, but the section
* padding combined with cover padding doubles up. */
.wp-block-cover[style*="padding-left:var(--wp--preset--spacing--70)"] {
padding-left: var(--wp--preset--spacing--30) !important;
padding-right: var(--wp--preset--spacing--30) !important;
}
/* Our Causes: statistics flex row with fixed 559px min-width column */
.wp-block-group[style*="min-width:559px"] {
min-width: 100% !important;
}
/* Our Causes: statistics flex row with fixed 110px min-width */
.wp-block-group[style*="min-width:110px"] {
min-width: 80px !important;
}
/* Green card whiteglove: reduce inner padding at mobile */
.sahliyeh-green-card--whiteglove {
padding: var(--wp--preset--spacing--40) !important;
}
/* ----------------------------------------------------------------
* Careers mission green card: heading text wraps to one word
* per line because container is only ~231px wide.
* Remove inner constrained group padding and reduce card padding
* to give text more horizontal room.
* ---------------------------------------------------------------- */
.sahliyeh-green-card--rooted {
padding: 16px !important;
}
.sahliyeh-green-card--rooted > .wp-block-group {
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 100% !important;
}
/* Reduce headline-large further inside green cards where the
* container is narrow */
.sahliyeh-green-card .is-style-type-style-headline-large {
font-size: clamp(1.5rem, 6.5vw, 2.25rem) !important;
line-height: 1.3 !important;
}
/* ----------------------------------------------------------------
* About page: reduce tall stacked images on mobile.
* Two-column layouts with portrait images (aspect-ratio 518/776,
* 562/832, etc.) become very tall when stacked full-width.
* Cap image height in stacked layouts.
* ---------------------------------------------------------------- */
.wp-block-cover__inner-container .wp-block-image img[style*="aspect-ratio"] {
max-height: 300px !important;
width: 100% !important;
object-fit: cover !important;
}
/* About page: reduce the 93px gap in flex rows to tighten
* spacing when content stacks */
.wp-block-group.is-layout-flex[style*="gap: 93px"],
.wp-block-group.is-layout-flex[style*="gap:93px"] {
gap: var(--wp--preset--spacing--30) !important;
}
/* About brand mark green card: reduce vertical space */
.sahliyeh-green-card--brand-mark {
padding: var(--wp--preset--spacing--30) !important;
}
.sahliyeh-brand-mark-logo {
min-height: auto !important;
}
.sahliyeh-brand-mark-logo img {
max-height: 120px !important;
}
/* Partner photos: constrain height on mobile */
.sahliyeh-partner-photo img {
max-height: 350px !important;
object-fit: cover !important;
}
/* ----------------------------------------------------------------
* Contact: "CONNECT WITH US" heading breaks mid-word at 375px
* The heading sits inside a narrow green form container (~250px).
* Reduce font size aggressively and allow word breaks.
* ---------------------------------------------------------------- */
.is-style-section-3 .has-display-font-size,
.is-style-section-3 .is-style-type-style-headline-large,
.is-style-section-3 .is-style-type-style-headline-medium {
font-size: clamp(1.125rem, 5.5vw, 1.5rem) !important;
overflow-wrap: break-word;
word-break: break-word;
letter-spacing: 0 !important;
}
/* Contact: green form box max-width must be fully responsive.
* Match with and without spaces in inline style. */
.is-style-section-3 .wp-block-group[style*="max-width:512px"],
.is-style-section-3 .wp-block-group[style*="max-width: 512px"],
.wp-block-group[style*="max-width:512px"],
.wp-block-group[style*="max-width: 512px"],
.is-style-section-3 .wp-block-group[style*="max-width"],
.has-theme-03-background-color[style*="max-width"] {
max-width: 100% !important;
width: 100% !important;
}
/* Contact: increase green box padding for breathing room */
.has-theme-03-background-color[style*="max-width:512px"] {
padding: 32px 24px 40px !important;
}
/* Contact: ensure form inputs are not truncated inside narrow box */
.is-style-section-3 .gform_wrapper input,
.is-style-section-3 .gform_wrapper textarea,
.has-theme-03-background-color .gform_wrapper input,
.has-theme-03-background-color .gform_wrapper textarea {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Contact: green section inner padding -- reduce to give form more room */
.is-style-section-3 .wp-block-cover[style*="padding"],
.has-theme-03-background-color[style*="padding"] {
padding-left: var(--wp--preset--spacing--20) !important;
padding-right: var(--wp--preset--spacing--20) !important;
}
/* Footer: reduce padding at mobile for more usable width */
.sahliyeh-site-footer .wp-block-cover[style*="padding-left"],
.sahliyeh-site-footer .wp-block-cover[style*="padding-right"] {
padding-left: var(--wp--preset--spacing--20) !important;
padding-right: var(--wp--preset--spacing--20) !important;
}
/* ----------------------------------------------------------------
* Contact: two-column flex (image + form) must wrap at mobile
* The flex row is a direct child of cover__inner-container with
* is-nowrap. Force wrap so image and form stack vertically.
* Also reduce the 72px gap.
* ---------------------------------------------------------------- */
.wp-block-cover__inner-container > .wp-block-group.is-nowrap.is-layout-flex {
flex-wrap: wrap !important;
gap: var(--wp--preset--spacing--40) !important;
}
/* Force both children to full width when stacked */
.wp-block-cover__inner-container > .wp-block-group.is-nowrap.is-layout-flex > .wp-block-group {
flex-basis: 100% !important;
min-width: 100% !important;
}
}
/* --------------------------------------------------------------------------
* Gravity Forms: dark section styling
* White labels, transparent inputs with bottom borders, gold submit
* -------------------------------------------------------------------------- */
.is-style-section-2 .gform_wrapper .gfield_label,
.is-style-section-2 .gform_wrapper .gfield_consent_label,
.is-style-section-2 .gform_wrapper .gfield_description,
.is-style-section-2 .gform_wrapper legend.gfield_label {
color: var(--wp--preset--color--theme-01);
}
/* Footer: remove underlines from all contact/legal links */
.sahliyeh-site-footer a[href*="privacy"],
.sahliyeh-site-footer a[href*="terms"],
.sahliyeh-site-footer a[href*="mailto"],
.sahliyeh-site-footer a[href*="maps.google"],
.sahliyeh-site-footer a[href*="tel:"] {
text-decoration: none;
color: var(--wp--preset--color--theme-01);
}
/* Footer: gold hover on privacy/terms/contact links */
.sahliyeh-site-footer a[href*="privacy"]:hover,
.sahliyeh-site-footer a[href*="terms"]:hover,
.sahliyeh-site-footer a[href*="mailto"]:hover,
.sahliyeh-site-footer a[href*="maps.google"]:hover,
.sahliyeh-site-footer a[href*="tel:"]:hover {
color: var(--wp--preset--color--theme-04);
}
.is-style-section-2 .gform-theme--foundation .gfield textarea.large {
min-block-size: 9rem;
}
.is-style-section-2 .gform-theme--framework .gfield_label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.is-style-section-2 .gform_wrapper input[type="text"],
.is-style-section-2 .gform_wrapper input[type="email"],
.is-style-section-2 .gform_wrapper input[type="tel"],
.is-style-section-2 .gform_wrapper input[type="url"],
.is-style-section-2 .gform_wrapper input[type="number"],
.is-style-section-2 .gform_wrapper select,
.is-style-section-2 .gform_wrapper textarea {
background: transparent;
border: none;
border-bottom: 2px solid var(--wp--preset--color--theme-01);
border-radius: 0;
color: var(--wp--preset--color--theme-01);
font-family: var(--wp--preset--font-family--montserrat);
font-size: 16px;
padding: 12px 4px;
}
/* !important overrides Gravity Forms theme framework styles which inject
* their own high-specificity rules via CSS custom properties. */
.is-style-section-2 .gform-theme--framework input::placeholder,
.is-style-section-2 .gform-theme--framework textarea::placeholder {
color: #fff !important;
opacity: 1 !important;
}
.is-style-section-2 .gform_wrapper input:focus,
.is-style-section-2 .gform_wrapper textarea:focus {
outline: none;
border-bottom-color: var(--wp--preset--color--theme-04);
}
/* Override Gravity Forms theme framework on dark sections.
* GF 2.5+ orbital theme uses deeply scoped selectors with CSS custom properties.
* !important required to override the plugin's framework styles -- specificity
* alone is insufficient because the GF theme injects its own high-specificity rules. */
.is-style-section-2 .gform-theme--framework input:not([type="hidden"]),
.is-style-section-2 .gform-theme--framework select,
.is-style-section-2 .gform-theme--framework textarea {
background: transparent !important;
border: none !important;
border-bottom: 2px solid var(--wp--preset--color--theme-01) !important;
border-radius: 0 !important;
color: var(--wp--preset--color--theme-01) !important;
box-shadow: none !important;
}
.is-style-section-2 .gform-theme--framework input:focus,
.is-style-section-2 .gform-theme--framework textarea:focus {
border-bottom-color: var(--wp--preset--color--theme-04) !important;
outline: none !important;
}
/* Submit button: filled gold CTA style.
* !important overrides Gravity Forms theme framework styles which inject
* their own high-specificity rules via CSS custom properties. */
.is-style-section-2 .gform-theme--framework .gform_button.button {
background: var(--wp--preset--color--theme-04) !important;
color: var(--wp--preset--color--theme-02) !important;
border: none !important;
border-bottom: none !important;
border-radius: 0 !important;
padding: 16px 32px !important;
font-weight: 700 !important;
letter-spacing: 1.6px;
text-transform: uppercase;
cursor: pointer;
transition: background-color 0.2s ease;
box-shadow: none !important;
}
.is-style-section-2 .gform-theme--framework .gform_button.button:hover {
background: var(--wp--preset--color--theme-06) !important;
color: var(--wp--preset--color--theme-02) !important;
}
/* --------------------------------------------------------------------------
* WCAG AA Touch Targets: 44x44px minimum for all interactive elements
* -------------------------------------------------------------------------- */
/* Hamburger menu button: increase tap area from 24x24 to 44x44.
* The SVG icon stays visually the same size; padding creates the target. */
button.wp-block-navigation__responsive-container-open {
min-width: 44px;
min-height: 44px;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
}
/* Footer nav links: increase tap area to 44px minimum height.
* Links inside paragraphs are inline, so we make them inline-block
* with enough padding to meet the 44px touch target. */
.sahliyeh-footer-nav p a {
display: inline-block;
min-height: 44px;
line-height: 44px;
}
/* Footer social icons: increase tap area around icon links to 44px
* without changing the visual icon size (24x24). */
.sahliyeh-footer-nav .wp-block-image a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: 10px;
}
/* --------------------------------------------------------------------------
* Tablet (768px): Navigation touch target fixes
* -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
/* Submenu dropdown toggle buttons: increase from 9x9 to 44x44 */
button.wp-block-navigation__submenu-icon {
min-width: 44px;
min-height: 44px;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
}
button.wp-block-navigation__submenu-icon svg {
width: 16px;
height: 16px;
}
/* Nav link heights: increase tap area to 44px */
a.wp-block-navigation-item__content {
min-height: 44px;
display: inline-flex;
align-items: center;
padding-top: 10px;
padding-bottom: 10px;
}
}
/* --------------------------------------------------------------------------
* Footer: reduce excessive horizontal padding at mobile
* spacing--70 resolves to ~80px which consumes too much width at 375px.
* Reduce to spacing--30 (~24px) on mobile.
* !important overrides WP inline styles on footer group block padding
* and flex layout (flex-wrap, gap, justify-content).
* -------------------------------------------------------------------------- */
@media (max-width: 767px) {
.sahliyeh-site-footer.alignfull {
padding-left: var(--wp--preset--spacing--30) !important;
padding-right: var(--wp--preset--spacing--30) !important;
}
/* Footer nav: wrap items and reduce gap at mobile.
* The block has is-nowrap which sets flex-wrap:nowrap inline.
* !important overrides that to prevent horizontal overflow
* (scrollWidth 561 > clientWidth 327 at 375px). */
/* Footer: force column stacking on entire footer.
* The footer's is-layout-constrained generates contentSize max-width
* on children. Override to allow full width at mobile. */
.sahliyeh-site-footer {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 24px !important;
}
/* Footer children: ensure each section takes full width and contains its content */
.sahliyeh-site-footer > * {
width: 100% !important;
max-width: 100% !important;
}
/* !important: overrides WP-generated is-nowrap (flex-wrap:nowrap) and is-layout-flex
* display properties on footer nav and child groups — cannot beat WP class specificity. */
/* Footer nav: 2-column centered grid */
.sahliyeh-footer-nav {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px 16px !important;
justify-items: center;
text-align: center;
width: 100%;
}
/* Social icons in footer nav: span full row and center at mobile */
.sahliyeh-footer-nav > .wp-block-group {
grid-column: 1 / -1 !important;
justify-content: center;
}
/* Footer separator — full width */
.sahliyeh-site-footer .wp-block-separator {
width: 100%;
}
/* !important: overrides WP-generated is-layout-flex (flex-direction:row, gap) on footer flex rows. */
/* Footer: all flex rows stack vertically */
.sahliyeh-site-footer > .is-content-justification-center.is-layout-flex {
flex-direction: column !important;
align-items: center !important;
gap: 6px !important;
text-align: center;
width: 100%;
}
/* Hide pipe "|" separators at mobile */
.sahliyeh-site-footer > .is-layout-flex > p:nth-child(even) {
display: none;
}
/* !important: overrides WP inline style="" on footer-logo group — padding-bottom. */
/* Footer logo: adjust spacing rhythm at mobile */
.sahliyeh-footer-logo {
padding-top: var(--wp--preset--spacing--50) !important;
padding-bottom: var(--wp--preset--spacing--30) !important;
}
/* !important: overrides WP inline style="" on group blocks — border-bottom-color. */
/* Process step rows: add subtle separator between items */
.wp-block-group[style*="border-bottom-color"] {
border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
/* Our Causes: breathing room between body text paragraphs on dark sections */
.is-style-section-2 .wp-block-cover__inner-container p + p {
margin-top: var(--wp--preset--spacing--30);
}
/* !important: overrides WP-generated is-content-justification-space-between (justify-content)
* and is-layout-flex (flex-wrap, gap) on partner logo row, plus WP inline style="" on resized images. */
/* Partner logos: wrap and scale at mobile */
.is-style-section-2 .is-content-justification-space-between:has(img[src*="horiz-logo"]) {
padding-inline: var(--wp--preset--spacing--30) !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 24px !important;
}
.is-style-section-2 .is-content-justification-space-between .wp-block-image img[src*="horiz-logo"] {
max-width: 120px !important;
height: auto !important;
}
}
/* ==========================================================================
* MOBILE HEADER: Navigation overlay and hamburger fixes
* The header has TWO wp:navigation blocks (left + right of logo).
* At mobile, each gets its own hamburger button. We hide the second
* hamburger and style the overlay menu so links are readable.
* ========================================================================== */
@media (max-width: 767px) {
/* !important overrides WP inline styles on the header group block
* (padding, min-height, display, flex, width) and navigation block
* (display, flex properties). WordPress generates these as style=""
* attributes which have specificity 1000. */
/* ----------------------------------------------------------------
* Reduce header horizontal padding from 80px to spacing--30.
* 80px leaves only 215px for logo + hamburger at 375px.
* ---------------------------------------------------------------- */
.wp-block-group.has-theme-02-background-color[style*="padding-left:80px"],
.wp-block-group.has-theme-02-background-color[style*="padding-right:80px"] {
padding-left: var(--wp--preset--spacing--30) !important;
padding-right: var(--wp--preset--spacing--30) !important;
}
/* ----------------------------------------------------------------
* Hide the right-side nav group in the HEADER at mobile.
* Scoped to header via min-height:126px inline style to avoid
* matching the footer (which also has theme-02-background-color).
* ---------------------------------------------------------------- */
.wp-block-group.has-theme-02-background-color[style*="min-height"] > .wp-block-group:last-child {
display: none !important;
}
/* ----------------------------------------------------------------
* Mobile header layout: logo centered, hamburger right.
* The header is a flex row: [left-nav] [logo] [right-nav].
* At mobile, hide right-nav (above), reorder so logo centers
* and the hamburger (inside left-nav) sits at the far right.
* ---------------------------------------------------------------- */
.wp-block-group.has-theme-02-background-color[style*="min-height:126px"] {
min-height: 60px !important;
justify-content: center !important;
position: relative;
}
/* Logo: centered, reduced size */
.wp-block-group.has-theme-02-background-color > .wp-block-image {
order: 0;
flex: none;
top: 0;
}
.wp-block-group.has-theme-02-background-color > .wp-block-image img {
width: 160px !important;
height: auto !important;
}
/* Footer: hide arch at mobile -- it's problematic on small screens */
.sahliyeh-footer-logo::before {
display: none;
}
.sahliyeh-footer-logo > .wp-block-image:first-child {
margin-top: 0;
}
.sahliyeh-footer-logo > .wp-block-image img {
width: 160px !important;
height: auto !important;
}
/* Left nav group: position absolute to the right so it doesn't
* affect the centered logo flow. Only the hamburger shows.
* Scoped to header via min-height inline style to avoid matching footer. */
.wp-block-group.has-theme-02-background-color[style*="min-height"] > .wp-block-group:nth-child(2) {
position: absolute !important;
right: var(--wp--preset--spacing--30);
top: 0;
bottom: 0;
display: flex !important;
align-items: center;
transform: none;
flex: none !important;
width: auto !important;
}
}
/* --------------------------------------------------------------------------
* Mobile nav overlay: full-screen menu styling
* WordPress adds .is-menu-open to the responsive container when the
* hamburger is clicked. Style the overlay for readability.
*
* !important overrides WP navigation block inline styles (colors,
* positioning, visibility, display, padding, width, height, opacity).
* WordPress generates extensive inline styles on navigation elements
* that cannot be overridden via specificity.
* -------------------------------------------------------------------------- */
/* Overlay: ensure full-screen dark background.
* WP sets overlayBackgroundColor but the text color inherits from
* the nav block which may be set to black for the link color scheme.
* Force cream text inside the open overlay. */
.wp-block-navigation__responsive-container.is-menu-open {
padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) !important;
}
/* Close button: visible cream color, 44px minimum tap target.
* Default close button is 24px with black fill -- invisible on black bg. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
color: var(--wp--preset--color--theme-01) !important;
min-width: 44px;
min-height: 44px;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 16px;
right: 16px;
z-index: 2;
}
/* Close button SVG icon: cream stroke/fill */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
fill: var(--wp--preset--color--theme-01);
stroke: var(--wp--preset--color--theme-01);
width: 24px;
height: 24px;
}
/* !important: overrides WP core navigation CSS on responsive-container-content — display, flex-direction,
* align-items, justify-content, gap. WP core uses deeply scoped selectors that match specificity. */
/* Menu content wrapper: center items vertically and horizontally */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
padding-top: 60px;
}
/* Top-level nav links: cream text, larger font, generous spacing.
* WP sets the color to black via inline styles from the nav block.
* !important is needed to override those inline styles. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
color: var(--wp--preset--color--theme-01) !important;
font-family: var(--wp--preset--font-family--be-vietnam-pro);
font-size: 1.125rem !important;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 12px 0;
display: block;
text-align: center;
text-decoration: none;
}
/* Hover/focus: gold accent */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
color: var(--wp--preset--color--theme-04) !important;
}
/* !important: overrides WP core navigation CSS and WP-generated has-background/has-theme-02-background-color
* on submenu container — background, position, width, min-width, display, flex, padding, gap, border,
* visibility, opacity, height, overflow. WP core hides submenus by default and positions them absolutely. */
/* Submenu container in overlay: indented, with left gold border */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
background: transparent !important;
position: static !important;
width: auto !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
padding: 8px 0 16px !important;
gap: 0 !important;
border: none !important;
border-left: 2px solid var(--wp--preset--color--theme-04) !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
overflow: visible !important;
margin-top: 4px;
}
/* Submenu items: smaller, gold text to distinguish from top-level */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
font-size: 0.875rem !important;
color: var(--wp--preset--color--theme-04) !important;
opacity: 0.9;
padding: 8px 20px !important;
letter-spacing: 0.06em;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
color: var(--wp--preset--color--theme-01) !important;
opacity: 1;
}
/* Hide submenu chevron icons in overlay -- submenus are always visible */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
display: none !important;
}
/* !important: overrides WP core navigation CSS on nav items — display, flex-direction, align-items, width.
* WP core sets nav items as inline/row layout; overlay needs vertical column stacking. */
/* Nav items: center-aligned column */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
}
/* --------------------------------------------------------------------------
* Smooth nav overlay animation
* Adds a fade transition when the mobile nav overlay opens/closes.
* -------------------------------------------------------------------------- */
.wp-block-navigation__responsive-container {
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.wp-block-navigation__responsive-container.is-menu-open {
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* --------------------------------------------------------------------------
* Gravity Forms: field spacing tighter
* Reduce vertical gap between form fields for a more compact layout.
* !important overrides GF framework default margins.
* -------------------------------------------------------------------------- */
.is-style-section-2 .gform-theme--framework .gfield {
margin-bottom: 16px !important;
}
/* --------------------------------------------------------------------------
* Smooth scroll behavior
* Ensures smooth scrolling for anchor links site-wide.
* -------------------------------------------------------------------------- */
html {
scroll-behavior: smooth;
}
/* --------------------------------------------------------------------------
* Testimonials carousel: mobile swipe indicator
* At mobile (xs), enlarge pagination dots and add bottom margin so they
* sit further from the arrows, making them more prominent as a visual
* cue that more slides exist. Also add a partial-slide peek via
* negative overflow visibility.
* -------------------------------------------------------------------------- */
@media (max-width: 767px) {
.sahliyeh-carousel-nav-top .kindling-carousel-manual .splide__pagination__page {
height: 12px;
width: 12px;
}
.sahliyeh-carousel-nav-top .kindling-carousel-manual .navigation-arrows .splide__pagination {
gap: 10px;
}
}
/* --------------------------------------------------------------------------
* Our Causes: mobile paragraph spacing
* At mobile, dense consecutive paragraphs in cover blocks on dark
* sections need additional vertical breathing room.
* -------------------------------------------------------------------------- */
@media (max-width: 767px) {
.is-style-section-2 .wp-block-cover__inner-container .wp-block-group > p + p {
margin-top: var(--wp--preset--spacing--30);
}
}
/* --------------------------------------------------------------------------
* Our Causes statistics: justify body text for clean alignment.
* Targets the description paragraphs next to gold stat numbers.
* -------------------------------------------------------------------------- */
.is-style-section-2 .wp-block-cover__inner-container .is-layout-flex > p.has-collier-font-family + p.has-small-font-size {
text-align: justify;
}
/* --------------------------------------------------------------------------
* Our Causes statistics: prevent gold stat numbers from wrapping.
* The stat values (25M, 1 OF 6, 50-90%, etc.) must stay on one line.
* -------------------------------------------------------------------------- */
.is-style-section-2 .wp-block-cover__inner-container .is-layout-flex > .has-collier-font-family.has-theme-04-color {
white-space: nowrap;
}
/* ==========================================================================
* MOBILE 10/10 FIXES: Tap targets, form inputs, carousel dots, logo opacity
* ========================================================================== */
/* --------------------------------------------------------------------------
* Fix 1: Footer text link tap targets (19px -> 44px)
* Email, address, phone, privacy policy, terms links inside footer paragraphs.
* -------------------------------------------------------------------------- */
.sahliyeh-site-footer p a {
display: inline-block;
min-height: 44px;
line-height: 44px;
}
/* --------------------------------------------------------------------------
* Fix 2: Contact form inputs -- 44px minimum height
* Gravity Forms inputs on dark sections are 38px by default.
* !important overrides GF framework deeply-scoped CSS custom properties.
* -------------------------------------------------------------------------- */
.is-style-section-2 .gform-theme--framework input:not([type="hidden"]),
.is-style-section-2 .gform-theme--framework textarea {
min-height: 44px !important;
}
/* --------------------------------------------------------------------------
* Fix 3: Gravity Forms labels -- 14px minimum
* GF framework renders labels at 12-13px which fails readability checks.
* !important overrides GF theme framework high-specificity rules.
* -------------------------------------------------------------------------- */
.is-style-section-2 .gform-theme--framework .gfield_label,
.is-style-section-2 .gform-theme--framework label {
font-size: 14px !important;
}
/* --------------------------------------------------------------------------
* Fix 4: Carousel pagination dots -- 44px hit areas
* Dots stay visually small but padding creates the 44px touch target.
* !important overrides Splide's inline styles on pagination buttons.
* -------------------------------------------------------------------------- */
.splide__pagination__page {
min-width: 44px !important;
min-height: 44px !important;
padding: 0 !important;
margin: 0 -8px;
box-sizing: border-box !important;
}
/* --------------------------------------------------------------------------
* Fix 5: Footer social icon links -- 44px tap area
* Extends existing rule on .sahliyeh-footer-nav to also cover
* .sahliyeh-site-footer scope for icons outside the nav group.
* -------------------------------------------------------------------------- */
.sahliyeh-site-footer .wp-block-image a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
/* --------------------------------------------------------------------------
* Fix 7: In-content text links on Our Cause (19px -> 44px)
* Body text links inside cover blocks on dark sections.
* -------------------------------------------------------------------------- */
.is-style-section-2 .wp-block-cover__inner-container p a {
display: inline-block;
min-height: 44px;
line-height: 44px;
}
/* --------------------------------------------------------------------------
* Fix 6 & 8: Mobile-only -- header logo link height, partner logo opacity
* -------------------------------------------------------------------------- */
@media (max-width: 767px) {
/* Fix 6: Header logo link height (24px -> 44px) */
.wp-block-group.has-theme-02-background-color > .wp-block-image a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
/* Fix 8: Partner logos -- increase base opacity at mobile.
* Touch devices don't hover, so 20% opacity makes logos invisible.
* 80% provides adequate visibility without hover interaction. */
.sahliyeh-logo-carousel__track .wp-block-image {
opacity: 0.8;
}
/* Also target the inline-style opacity logos in the partner row */
.is-style-section-2 .is-content-justification-space-between .wp-block-image img[src*="horiz-logo"] {
opacity: 0.8;
}
}
/* --------------------------------------------------------------------------
* Fix 9: About page social icon links -- 44px tap area
* Social icons in content area (not just footer) need 44px touch targets.
* Uses :has() to target links wrapping social icon images.
* -------------------------------------------------------------------------- */
.wp-block-image a:has(img[src*="icon-instagram"]),
.wp-block-image a:has(img[src*="icon-linkedin"]),
.wp-block-image a:has(img[src*="icon-x"]),
.wp-block-image a:has(img[src*="icon-facebook"]) {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
/* --------------------------------------------------------------------------
* Fix 10: Carousel arrows -- 44px minimum tap area
* Splide arrow buttons default to 40px. Increase for WCAG AA compliance.
* Targets both .splide__arrow (Splide default) and .splide-arrow (custom).
* -------------------------------------------------------------------------- */
.splide__arrow,
.splide-arrow {
min-width: 44px;
min-height: 44px;
}
/* --------------------------------------------------------------------------
* Fix 11: Contact page mailto/tel links -- 44px tap area
* Email and phone links in content areas need touch-target compliance.
* Covers grid items, flex groups, and any content container.
* -------------------------------------------------------------------------- */
.wp-block-kindling-grid-item p a[href*="mailto"],
.wp-block-kindling-grid-item p a[href*="tel"],
.wp-block-group p a[href*="mailto"],
.wp-block-group p a[href*="tel"] {
display: inline-block;
min-height: 44px;
line-height: 44px;
}
/* --------------------------------------------------------------------------
* Fix 12: Gravity Forms "(Required)" label text -- 14px minimum
* GF framework renders required indicators at 12px which is too small.
* !important overrides GF theme framework high-specificity rules.
* -------------------------------------------------------------------------- */
.gform-theme--framework .gfield_required,
.gform-theme--framework .gfield_required_text {
font-size: 14px !important;
}
/* --------------------------------------------------------------------------
* Fix 13: Splide pagination dots -- 44px hit area on list items
* The dot buttons have 44px via Fix 4, but the wrapping elements
* also need minimum dimensions so the tap area is not clipped.
* -------------------------------------------------------------------------- */
.splide__pagination li {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}