/* =========================================================

   BLOG / ARCHIVE / SEARCH — 2-column cards + keep sidebar default

   (No width/float overrides on #primary or #secondary)

   ======================================================= */

/* Make sure the sidebar doesn't drop under the grid */
.blog #secondary,
.archive #secondary,
.search #secondary,
.home.blog #secondary {
  clear: none !important;
  margin-top: 0 !important;
}

/* ---- 2-column grid inside the content area (#primary) ---- */
.blog #primary .site-main,
.archive #primary .site-main,
.search #primary .site-main,
.home.blog #primary .site-main {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 24px;
  min-width: 0; /* avoid overflow pushing the sidebar */
}

/* Each post as a clean card (no width/float changes) */
.blog #primary .site-main > article,
.archive #primary .site-main > article,
.search #primary .site-main > article,
.home.blog #primary .site-main > article {
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 10px;
  overflow: hidden;
  margin: 0 !important;
  padding: 0;
}

/* Title link is a block so the injected featured image sits above it */
.blog .entry-title a,
.archive .entry-title a,
.search .entry-title a,
.home.blog .entry-title a {
  display: block !important;
  padding: 12px 14px 16px;
  color: #222 !important;
  text-decoration: none;
}

/* Featured image injected by PHP snippet (above the title) */
.blog .entry-title a img.title-thumb,
.archive .entry-title a img.title-thumb,
.search .entry-title a img.title-thumb,
.home.blog .entry-title a img.title-thumb {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 0 10px 0 !important;
  border-bottom: 1px solid #eee;
}

/* Hide native loop thumbnails to avoid duplicates */
.blog article .post-thumbnail,
.archive article .post-thumbnail,
.search article .post-thumbnail,
.home.blog article .post-thumbnail,
.blog article .entry-thumbnail,
.archive article .entry-thumbnail,
.search article .entry-thumbnail,
.home.blog article .entry-thumbnail {
  display: none !important;
}

/* Keep the grid minimal: hide excerpts/meta/footers in the cards */
.blog article .entry-summary,
.archive article .entry-summary,
.search article .entry-summary,
.home.blog article .entry-summary,
.blog article .entry-content,
.archive article .entry-content,
.search article .entry-content,
.home.blog article .entry-content,
.blog article .entry-meta,
.archive article .entry-meta,
.search article .entry-meta,
.home.blog article .entry-meta,
.blog article .entry-footer,
.archive article .entry-footer,
.search article .entry-footer,
.home.blog article .entry-footer {
  display: none !important;
}

/* Hide "Read more" inside cards */
.blog article a.more-link,
.archive article a.more-link,
.search article a.more-link,
.home.blog article a.more-link {
  display: none !important;
}

/* Pagination spans full width below the grid */
.blog #primary .site-main .nav-links,
.archive #primary .site-main .nav-links,
.search #primary .site-main .nav-links,
.home.blog #primary .site-main .nav-links {
  grid-column: 1 / -1;
}

/* Mobile: stack to single column */
@media (max-width: 782px) {
  .blog #primary .site-main,
  .archive #primary .site-main,
  .search #primary .site-main,
  .home.blog #primary .site-main {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.navigation-main a:hover { color: #333 !important; }

.navigation-main li.color a { background: #23aae2 !important; color: #fff; }

.social-navigation a { color: #fff; }

.cd-main-content { text-align: center; }

.button-custom {
  margin: 20px 10px;
  background: #23aae2;
  color: #fff;
  padding: 10px 15px; display: inline-block;
}

button { background-color: #23aae2 !important; color: #fff; }

/* Close all submenus by default (place AFTER theme CSS) */
.navigation-main ul ul { display: none; }

/* Open only the direct child submenu of the hovered/focused item */
.navigation-main li:hover > ul,
.navigation-main li:focus-within > ul,
.navigation-main li > ul:hover { display: block; }

/* Anchor each li; position submenus */
.navigation-main ul li { position: relative; }
.navigation-main ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  width: max-content;
  min-width: 100%;
  max-width: none;
  white-space: nowrap;
  overflow: visible;
  box-sizing: border-box;
  z-index: 9999;
  margin: 0; padding: 0;
}

/* Third level: open to the side; slight overlap removes hover gap */
.navigation-main ul ul ul {
  top: 0;
  left: calc(100% - 1px);
}

/* Keep text left-aligned and unclipped */
.navigation-main ul ul,
.navigation-main ul ul a { text-align: left !important; }
.navigation-main ul ul li > a {
  display: block;
  white-space: nowrap;
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Prevent ancestor clipping/flex issues */
.site-header,
.navigation-main,
.navigation-main .menu,
.navigation-main .menu > li {
  overflow: visible;
  min-width: 0;
}

/* Small screens: cap width and allow horizontal scroll */
@media (max-width: 900px) {
  .navigation-main ul ul {
    max-width: 90vw;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* === ebollard.ae — Global helpers === */
:root{
  --eb-brand-blue:#23AAE2;
  --eb-brand-blue-700:#1e98c9; /* used for some hover accents */
  --eb-card-border:rgba(0,0,0,.06);
  --eb-card-shadow:0 1px 2px rgba(0,0,0,.06);
  --eb-note-bg:#fff7e6;
  --eb-note-border:#ffe0a3;
  --eb-muted:#f7fafc;
}

/* Spacing & text */
.eb-lead{
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem) !important;
  line-height: 1.65;
  margin: .5rem 0 14px;
  letter-spacing: .01em;
}
.eb-lead strong{ font-weight: 800; }

.eb-note{
  background:var(--eb-note-bg);
  border:1px solid var(--eb-note-border);
  border-left:5px solid var(--eb-brand-blue);
  border-radius:12px;
  padding:14px 16px;
  margin:0 0 16px!important
}
hr.is-style-wide{border-color:rgba(0,0,0,.08)!important;margin:18px 0!important}

/* CTA buttons (Maisha-safe) */
.eb-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:14px 0 12px!important}
.eb-cta .wp-block-button{margin:0!important}
.eb-cta a.wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 18px;min-width:190px;height:48px;border-radius:9999px;
  font-weight:700;line-height:1;text-decoration:none!important;border:2px solid var(--eb-brand-blue);
  transition:all .15s ease;box-shadow:none
}
.eb-cta .wp-block-button.is-style-fill a.wp-block-button__link{
  background:var(--eb-brand-blue)!important;color:#fff!important
}
.eb-cta .wp-block-button.is-style-fill a.wp-block-button__link:hover,
.eb-cta .wp-block-button.is-style-fill a.wp-block-button__link:focus{
  background:var(--eb-brand-blue-700)!important;border-color:var(--eb-brand-blue-700)!important
}
.eb-cta .wp-block-button.is-style-outline a.wp-block-button__link{
  background:transparent!important;color:var(--eb-brand-blue)!important
}
.eb-cta .wp-block-button.is-style-outline a.wp-block-button__link:hover,
.eb-cta .wp-block-button.is-style-outline a.wp-block-button__link:focus{
  color:#fff!important;background:var(--eb-brand-blue)!important
}
@media (max-width:900px){.eb-cta a.wp-block-button__link{min-width:unset;width:100%}}

/* Cards */
.eb-card{border:1px solid var(--eb-card-border);border-radius:14px;padding:18px;background:#fff;box-shadow:var(--eb-card-shadow)}
.eb-card.eb-accent{background:var(--eb-muted)}

/* (Changed) Only brand links placed in explicit downloads rows */
.eb-downloads a { color: var(--eb-brand-blue); }
.eb-downloads a:hover { color: var(--eb-brand-blue-700); }

/* Keep linked headings in cards using default color */
.entry-content .eb-card h1 a,
.entry-content .eb-card h2 a,
.entry-content .eb-card h3 a,
.entry-content .eb-card h4 a{
  color: inherit !important;
  text-decoration: none;
}

/* Two-column grid (desktop), one-column (mobile) */
.eb-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
@media (max-width:900px){.eb-grid-2{grid-template-columns:1fr}}

/* Details tidy */
details{margin:8px 0}
details summary{cursor:pointer;font-weight:600}

/* ============================================================
   Posts/Pages — brand ONLY the trailing action link in blocks/cards
   Matches the last paragraph's last link (e.g., "Read more",
   "See details", "Download datasheet", etc.)
   ============================================================ */
.entry-content .eb-card > p:last-child a:last-child,
.entry-content div[class*="eb-"] > p:last-child a:last-child,
.entry-content section > p:last-child a:last-child,
.entry-content article > p:last-child a:last-child,
.entry-content .wp-block-group > p:last-child a:last-child,
.entry-content .wp-block-columns .wp-block-column > p:last-child a:last-child {
  color: var(--eb-brand-blue) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: currentColor;
}

/* Hover / focus */
.entry-content .eb-card > p:last-child a:last-child:hover,
.entry-content div[class*="eb-"] > p:last-child a:last-child:hover,
.entry-content section > p:last-child a:last-child:hover,
.entry-content article > p:last-child a:last-child:hover,
.entry-content .wp-block-group > p:last-child a:last-child:hover,
.entry-content .wp-block-columns .wp-block-column > p:last-child a:last-child:hover,
.entry-content .eb-card > p:last-child a:last-child:focus-visible,
.entry-content div[class*="eb-"] > p:last-child a:last-child:focus-visible,
.entry-content section > p:last-child a:last-child:focus-visible,
.entry-content article > p:last-child a:last-child:focus-visible,
.entry-content .wp-block-group > p:last-child a:last-child:focus-visible,
.entry-content .wp-block-columns .wp-block-column > p:last-child a:last-child:focus-visible {
  text-decoration-thickness: 2px;
  outline: 2px solid var(--eb-brand-blue);
  outline-offset: 2px;
}

/* WordPress loop cards that use the default "more-link" */
.site-main article a.more-link {
  color: var(--eb-brand-blue) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-main article a.more-link:hover,
.site-main article a.more-link:focus-visible {
  text-decoration-thickness: 2px;
  outline: 2px solid var(--eb-brand-blue);
  outline-offset: 2px;
}

/* === Global button branding (site-wide) ============================== */
/* Covers native buttons, inputs, Gutenberg buttons, common classes */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.wp-block-button__link,
a.button,
.button,
.btn,
.eb-btn,
.wpcf7-submit {
  background-color: var(--eb-brand-blue);
  border: 1px solid var(--eb-brand-blue);
  color: #fff;
  text-decoration: none; /* override link underline on button-like anchors */
}

/* Hover/focus/active */
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.wp-block-button__link:hover,
a.button:hover,
.button:hover,
.btn:hover,
.eb-btn:hover,
.wpcf7-submit:hover,
button:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
.wp-block-button__link:focus,
a.button:focus,
.button:focus,
.btn:focus,
.eb-btn:focus,
.wpcf7-submit:focus,
button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active,
.wp-block-button__link:active,
a.button:active,
.button:active,
.btn:active,
.eb-btn:active,
.wpcf7-submit:active {
  background-color: var(--eb-brand-blue);
  border-color: var(--eb-brand-blue);
  color: #fff;
  outline: 2px solid var(--eb-brand-blue);
  outline-offset: 2px;
}

/* Disabled states */
button[disabled],
input[type="submit"][disabled],
input[type="button"][disabled],
input[type="reset"][disabled],
.wp-block-button__link[aria-disabled="true"],
a.button.disabled,
.button.disabled,
.btn.disabled,
.eb-btn.disabled,
.wpcf7-submit[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Brand tokens (safe fallback) */
:root{
  --eb-brand-blue: #23AAE2;
  --eb-brand-blue-700: #1E98C9;
}

/* Content-only hyperlinks (not header/footer/menus/buttons) */
#content a:not(.wp-block-button__link):not(.button):not(.btn):not([class*="button"]) {
  color: var(--eb-brand-blue);
  text-underline-offset: 2px;
}
#content a:not(.wp-block-button__link):not(.button):not(.btn):not([class*="button"]):hover,
#content a:not(.wp-block-button__link):not(.button):not(.btn):not([class*="button"]):focus {
  color: var(--eb-brand-blue-700);
}

/* Do NOT recolor links placed on brand-blue backgrounds; keep them white for contrast */
#content .bg-brand-blue a,
#content .has-eb-brand-blue-background-color a,
#content .eb-on-blue a,
#content [style*="#23AAE2" i] a {  /* catches inline bg styles using #23AAE2 (case-insensitive) */
  color: #fff;
}
/* optional: subtle hover on blue background */
#content .bg-brand-blue a:hover,
#content .has-eb-brand-blue-background-color a:hover,
#content .eb-on-blue a:hover,
#content [style*="#23AAE2" i] a:hover {
  text-decoration: underline;
}

/* ============================================================
   ebollard.ae — H1 + Subheading pattern (pages & hub cards)
   Scope: Site-wide but CLASS-SCOPED (no theme/global tag overrides)
   Notes:
     - Use ONLY where you add the HTML patterns (.eb-h1-block, .eb-card__headingSmall, .eb-card__subheadingSmall).
     - Does NOT redefine .eb-card to avoid conflicts with existing card styles.
   ============================================================ */

/* === Page H1 with subheading (opt-in) === */
.eb-h1-block{ margin: 0 0 1rem 0; }
.eb-h1-block h1{
  font-size: 1.6rem;
  line-height: 1.3;
  margin: 0;
}
.eb-h1-block .eb-h1-sub{
  margin: .35rem 0 0 0;
  font-size: 0.95rem;
  color: var(--eb-muted, #5f6b7a);
  letter-spacing: .01em;
}

/* Optional micro-labels “Heading:” / “Subheading:” */
.eb-label{
  font-size: .8em;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--eb-muted, #5f6b7a);
  margin-right: .35em;
  white-space: nowrap;
}

/* === Card text styles (opt-in, non-destructive) ===
   Use inside existing .eb-card markup without changing the card itself */
.eb-card__headingSmall{
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}
.eb-card__subheadingSmall{
  margin-top: .25rem;
  font-size: .9rem;
  color: var(--eb-muted, #5f6b7a);
}

@media (min-width: 768px){
  .eb-h1-block h1{ font-size: 1.8rem; }
  .eb-h1-block .eb-h1-sub{ font-size: 1rem; }
}







/* 1) Neutralize the old blanket color class so it doesn't bleed into submenus */
.navigation-main li.color a { background: transparent !important; color: inherit !important; }

/* 2) Color ONLY the top-level "Learn" link by its URL (works even if item ID changes) */
.navigation-main .menu > li > a[href$="/learn/"],
.navigation-main .menu > li > a[href$="/learn"],
.navigation-main .menu > li > a[href*="/learn/?"] {
  background: var(--eb-brand-blue) !important;
  color: #fff !important;
  border-radius: 4px;
}

/* Hover/focus for the same top-level link only */
.navigation-main .menu > li:hover > a[href$="/learn/"],
.navigation-main .menu > li:hover > a[href$="/learn"],
.navigation-main .menu > li:hover > a[href*="/learn/?"],
.navigation-main .menu > li:focus-within > a[href$="/learn/"],
.navigation-main .menu > li:focus-within > a[href$="/learn"],
.navigation-main .menu > li:focus-within > a[href*="/learn/?"] {
  background: var(--eb-brand-blue-700) !important;
  color: #fff !important;
}

/* 3) Keep ALL dropdown links under Learn unstyled (inherit theme defaults) */
.navigation-main .menu > li > a[href$="/learn/"] ~ ul a,
.navigation-main .menu > li > a[href$="/learn"] ~ ul a,
.navigation-main .menu > li > a[href*="/learn/?"] ~ ul a,
.navigation-main .menu > li > a[href$="/learn/"] + ul a,
.navigation-main .menu > li > a[href$="/learn"] + ul a,
.navigation-main .menu > li > a[href*="/learn/?"] + ul a {
  background: transparent !important;
  color: inherit !important;
}




/* Darken any inline background-image on PAGES only */
body.page [style*="background-image"]:not(.site-header):not(.site-header *){
  background-color:rgba(0,0,0,.6);background-blend-mode:multiply
}








/* SIRA hub: force 2-column layout using CSS columns */
.entry-content .eb-grid-2.sira-columns {
  /* turn OFF grid for this one instance */
  display: block !important;
  column-count: 2;
  column-gap: 18px;
  margin-bottom: 18px;
}

/* Each card flows as a block but avoids being split between columns */
.entry-content .eb-grid-2.sira-columns > .eb-card {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 18px;
  width: 100% !important;   /* ignore any 50% widths from earlier tests */
}

/* Thumbnail styling stays the same */
.entry-content .eb-grid-2.sira-columns .eb-card-thumb {
  margin: 0 0 0.75rem;
}

.entry-content .eb-grid-2.sira-columns .eb-card-thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Mobile: back to single column */
@media (max-width: 900px) {
  .entry-content .eb-grid-2.sira-columns {
    column-count: 1;
  }
}