/*
 * eg-design-system.css — OCS mu-plugin surface, re-skinned to the design system.
 *
 * The mu-plugins enqueue this EXACT filename from get_stylesheet_directory(). The old
 * child theme shipped it; this theme did not, so the surfaces it styles rendered with
 * no CSS at all.
 *
 * Mechanically transformed from the old file rather than re-authored: the layout works
 * and is matched to markup this theme does not own. Old brand colours mapped onto the
 * tokens in assets/css/00-tokens.css; every border-radius zeroed and every box-shadow
 * removed (§12). Semantic status colours (error red, success green) are kept.
 */

/* EG Design System (OCS) — namespaced utilities only. Does NOT override theme/GB global styles (.gbp-*). */
:root{ --eg-ink:var(--color-text); --eg-ink-soft:var(--color-muted); --eg-teal:var(--color-accent-600); --eg-teal-d:var(--color-accent-800); --eg-line:var(--color-divider); --eg-tint:var(--color-accent-100); }
/* container helpers */
.eg-fullwidth{width:100%}
.eg-inner{max-width:1180px;margin-left:auto;margin-right:auto;padding-left:22px;padding-right:22px}
/* contrast utilities (opt-in: only apply where these classes are added) */
.has-dark-bg{color:#fff}
.has-dark-bg h1,.has-dark-bg h2,.has-dark-bg h3,.has-dark-bg h4,.has-dark-bg h5,.has-dark-bg p,.has-dark-bg li,.has-dark-bg span,.has-dark-bg strong{color:#fff}
.has-dark-bg a:not(.eg-btn){color:#fff;text-decoration:underline;text-underline-offset:3px}
.has-dark-bg a:not(.eg-btn):hover{opacity:.82}
.has-light-bg{color:var(--eg-ink)}
.has-light-bg h1,.has-light-bg h2,.has-light-bg h3,.has-light-bg h4,.has-light-bg h5{color:var(--eg-ink)}
.has-light-bg p,.has-light-bg li{color:var(--eg-ink-soft)}
.has-light-bg a:not(.eg-btn){color:var(--eg-teal)}
.has-light-bg a:not(.eg-btn):hover{color:var(--eg-teal-d)}
/* namespaced button */
.eg-btn{display:inline-flex;align-items:center;gap:.5em;background:var(--eg-teal);color:#fff;border:0;border-radius:0;padding:.72em 1.6em;font-weight:700;text-decoration:none;cursor:pointer;transition:background .15s,transform .1s;line-height:1.2}
.eg-btn:hover{background:var(--eg-teal-d);color:#fff;transform:translateY(-1px)}
.eg-btn--ghost{background:transparent;border:1.5px solid currentColor}
.has-dark-bg .eg-btn--ghost{color:#fff}
/* namespaced cards */
.eg-card{background:#fff;border:1px solid var(--eg-line);border-radius:0;padding:24px;box-shadow:none;transition:transform .15s,box-shadow .15s;height:100%}
.eg-card:hover{transform:translateY(-3px);box-shadow:none}
.eg-card h3{color:var(--eg-ink);font-weight:700;margin:0 0 8px;font-size:1.15rem}
.eg-card p{color:var(--eg-ink-soft);line-height:1.55;margin:0}
/* grids */
.eg-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.eg-grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.eg-grid--4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
/* hero */
.eg-hero{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:48vh;padding:72px 22px;background-size:cover;background-position:center;color:#fff;overflow:hidden}
/* Hero scrim removed — client direction: nothing painted over a photograph. */
.eg-hero>*{position:relative;z-index:1}
.eg-hero h1{color:#fff;font-size:clamp(2rem,5vw,3.4rem);line-height:1.1;margin:0 0 14px;text-shadow:0 2px 18px var(--color-scrim)}
.eg-hero p{color:var(--color-accent-100);font-size:clamp(1rem,2.4vw,1.25rem);max-width:700px;margin:0 auto;text-shadow:0 1px 10px var(--color-scrim)}
.eg-hero .eg-btn{margin-top:22px}
@media (max-width:600px){.eg-hero{min-height:40vh;padding:54px 18px}}
/* inline + feature icons (emoji replacements) */
.eg-ico{display:inline-flex;align-items:center;justify-content:center;vertical-align:-0.15em;width:1.15em;height:1.15em;color:var(--eg-teal)}
.eg-ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.has-dark-bg .eg-ico{color:var(--color-accent-300)}
.eg-feature-ico{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:0;background:var(--eg-tint);color:var(--eg-teal);margin-bottom:12px;flex:0 0 auto}
.eg-feature-ico svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.eg-iconrow{display:flex;align-items:flex-start;gap:12px}
.eg-iconrow .eg-ico{margin-top:.2em}
.eg-vendor-greeting{margin:0 0 16px;line-height:1.2}

/* FAQ / GenerateBlocks Accordion (OCS fix): a 2-column accordion grid stretches every
   item in a row to match its tallest row-mate by default (CSS Grid default
   align-items:stretch). When one FAQ item opens and its row partner is still
   collapsed, the collapsed item's bordered card was stretching into a tall,
   empty-looking box. align-items:start makes each accordion card size to its
   own content instead of the shared grid row height, so a collapsed FAQ next
   to an open one no longer shows an empty stretched box. */
.gb-accordion{align-items:start}
/* FAQ / GenerateBlocks Accordion toggle icon (OCS fix): the chevron icon has no
   width/height set anywhere (no CSS, no SVG attributes), and some individual
   accordion block instances never had an icon size configured either. Without
   any constraint, a bare inline SVG with only a viewBox (no intrinsic size)
   is sized by the browser's replaced-element default: it fills the full width
   of its container and then follows its own aspect ratio for height. Since the
   icon's container is as wide as the whole FAQ card, this produced either an
   invisible 0x0 icon or a huge icon that could fill most of the card,
   depending on the instance. Giving the icon an explicit, fixed size fixes
   both symptoms consistently across every FAQ accordion on the site. */
.gb-accordion__toggle-icon svg{width:1.1rem;height:1.1rem;flex:0 0 auto}
/* FAQ section background photo (OCS fix): GenerateBlocks' generated CSS file for the
   homepage (style-2.css) is missing the rule for .gb-element-5e3cfbb8 -- the FAQ
   section's outer wrapper -- so the background photo, background color, and blend
   mode never rendered on production even though the block itself is correctly
   configured with this background. Pulled verbatim from the block's own saved CSS
   attribute so it matches staging exactly. */
.gb-element-5e3cfbb8{background-blend-mode:darken;background-color:var(--color-surface);background-image:url('https://elnidoguide.ph/wp-content/uploads/2025/04/image_2025-06-10_101102037.png');background-position:64% 72%;background-repeat:no-repeat;background-size:cover;padding-bottom:40px;padding-left:20px;padding-right:20px}