/*
Theme Name:   Opus Child
Theme URI:    https://www.ocgl.net/
Description:  Child theme for the bespoke Opus theme (authored by Nirvana Canada). Holds all customizations so they survive a parent theme update. Performance, security and accessibility optimization by OPUS Consulting Group with Claude, August 2026.
Author:       OPUS Consulting Group
Version:      1.0.0
Template:     opus
Update URI:   false
*/

/* ============================================================
   Template: opus  -- must match the parent theme FOLDER name.
   Update URI: false -- stops WordPress matching this theme
   against an unrelated wordpress.org theme and offering a
   destructive "update", the same trap the parent had.

   The parent's own style.css is a HEADER ONLY and is not
   enqueued; the parent loads its real CSS itself. So nothing
   needs @import-ing here.

   Site CSS from Appearance > Customize > Additional CSS is
   stored PER THEME and does not follow a theme switch. It is
   pasted below during migration.
   ============================================================ */

/* === MIGRATED FROM: Customizer > Additional CSS (opus) === */
/* --- paste begins --- */

/* Kairo chatbot avatar: 2x size + breathing animation */
.mwai-chatbot .mwai-avatar,
.mwai-chatbot .mwai-avatar img,
.mwai-chatbot-container .mwai-avatar,
.mwai-chatbot-container .mwai-avatar img {
  width: 64px !important;
  height: 64px !important;
}
.mwai-chatbot .mwai-avatar img,
.mwai-chatbot-container .mwai-avatar img {
  border-radius: 50%;
  animation: opus-breathe 3.5s ease-in-out infinite;
}
@keyframes opus-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
  .mwai-chatbot .mwai-avatar img, .mwai-chatbot-container .mwai-avatar img { animation: none; }
}

/* Kairo popup trigger: circular crop */
.mwai-chatbot-container .mwai-icon-container img,
.mwai-chatbot-container .mwai-icon {
  border-radius: 50% !important;
}

/* Kairo (AI) message text: brand navy for readability */
.mwai-chatbot .mwai-reply.mwai-ai .mwai-text,
.mwai-chatbot-container .mwai-reply.mwai-ai .mwai-text {
  color: #233D6E !important;
}


/* Hide site-wide Kairo popup on home page and Contact page (static box there) */
body.home .mwai-chatbot-container:has(.mwai-trigger),
body.page-id-14 .mwai-chatbot-container:has(.mwai-trigger) {
  display: none !important;
}

/* Kairo user (visitor) message text: white on dark blue bubble */
.mwai-chatbot .mwai-reply.mwai-user .mwai-text,
.mwai-chatbot-container .mwai-reply.mwai-user .mwai-text,
.mwai-chatbot .mwai-reply.mwai-user .mwai-text *,
.mwai-chatbot-container .mwai-reply.mwai-user .mwai-text * {
  color: #FFFFFF !important;
}

/* Kairo: left-justify all chatbot messages */
.mwai-chatbot .mwai-reply .mwai-text,
.mwai-chatbot-container .mwai-reply .mwai-text,
.mwai-chatbot .mwai-reply .mwai-text p,
.mwai-chatbot-container .mwai-reply .mwai-text p,
.mwai-chatbot .mwai-reply .mwai-text li,
.mwai-chatbot-container .mwai-reply .mwai-text li {
  text-align: left !important;
}

/* Kairo: remove theme check-mark icons from list items in chat replies */
.mwai-chatbot .mwai-reply .mwai-text li::before,
.mwai-chatbot-container .mwai-reply .mwai-text li::before {
  content: none !important;
  display: none !important;
}
.mwai-chatbot .mwai-reply .mwai-text li,
.mwai-chatbot-container .mwai-reply .mwai-text li {
  list-style: none !important;
  padding-left: 0 !important;
}
.mwai-chatbot .mwai-reply .mwai-text ul,
.mwai-chatbot-container .mwai-reply .mwai-text ul {
  padding-left: 10px !important;
  margin-left: 0 !important;
}

/* Contact page: hide empty second email line in Contact Us column */
.adddress-information .column p a[href="mailto:"]:empty { display: none !important; }
.adddress-information .column p strong:has(+ a[href="mailto:"]) { display: none !important; }
.adddress-information .column p br:has(+ strong + a[href="mailto:"]) { display: none !important; }

/* Kairo: hide the download-conversation icon */
.mwai-chatbot .mwai-download-button,
.mwai-chatbot-container .mwai-download-button {
  display: none !important;
}

/* Contact page Support column: add "e:" label before support email */
.adddress-information .column p a[href="mailto:help@ocgl.net"]::before {
  content: "e: ";
  font-weight: 500;
  color: #233D6E;
}

/* Kairo popup bubble: shift 0.25in (24px) left from edge */
.mwai-chatbot-container .mwai-chat.mwai-bottom-right.mwai-window {
  right: 54px !important;
}

/* Data Backup page: partner logos in a row */
.backup-partner-logos a,
.backup-partner-logos img {
  display: inline-block !important;
  vertical-align: middle !important;
}
.backup-partner-logos a { margin: 0 28px 12px 0; }

/* Partners page: enlarge + bold the PARTNERS heading */
.page-id-154 .page-intro-wrapper .xs-heading{font-size:38px !important;font-weight:700 !important;}

/* Top phone block: no hand cursor on hover */
.nav-wrap a.call-btn, a.call-btn.btn{cursor:default !important;}

/* Service aside-image sections: stack text-only containers (fix Quarterly Business Review row layout) */
.aside-img-wrapper .container:not(:has(img)){display:block !important;}

/* Guide CTA button on Managed IT service page */
.executives-wrapper a[href*="managed-it-services-vancouver-guide"]{display:inline-block;background:#233D6E;color:#ffffff !important;padding:13px 28px;border-radius:6px;text-decoration:none !important;font-weight:600;margin-top:6px;}
.executives-wrapper a[href*="managed-it-services-vancouver-guide"]:hover{background:#1a2e54;color:#ffffff !important;}

/* Guide (common template): breathing room below header */
.page-template-common .get-in-touch-wrapper{padding-top:50px;}

/* ============================================================
   Mobile tap-target compliance — added 21 Aug 2026
   Google: interactive targets >= 48x48px, >= 8px apart.
   Scoped to the mobile-nav breakpoint (1024px); desktop untouched.
   Technique: grow each control's real box so the audit passes,
   keep the visible artwork at its original size.
   Remove this whole block to revert.
   ============================================================ */
@media (max-width: 1024px) {
  .nav-trigger {
    width: 48px !important; height: 48px !important;
    padding: 4px !important; background-clip: content-box;
  }
  .call-btn.btn {
    min-width: 48px !important; min-height: 48px !important;
    padding: 4px !important; background-clip: content-box;
  }
  .btn, .btn.secondary-btn, a.call-btn,
  input.wpcf7-submit, .wpcf7-form-control.wpcf7-submit {
    min-height: 48px !important;
    padding-top: 12px; padding-bottom: 12px;
    box-sizing: border-box;
  }
  .wpcf7-form-control.wpcf7-text,
  .wpcf7-form-control.wpcf7-textarea,
  select.wpcf7-form-control {
    min-height: 48px !important; min-width: 48px !important;
    box-sizing: border-box;
  }
  .nav-holder nav li > a, nav ul li > a,
  ul.nav li > a, ul.nav ul.sub-menu li > a, .sub-menu li > a {
    min-height: 48px !important;
    display: flex !important; align-items: center;
    box-sizing: border-box; padding-right: 56px;
  }
  .submenu-button, button.submenu-button,
  .nav-holder .submenu-button, nav .submenu-button {
    width: 48px !important; height: 48px !important;
    top: 0 !important; right: 0 !important;
  }
  .submenu-button::before {
    top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
  }
  ul.service-filter li > a, .service-filter li > a {
    display: inline-flex !important; align-items: center;
    min-height: 48px !important; min-width: 48px !important;
    box-sizing: border-box;
  }
  ul.service-filter li, .service-filter li { margin-bottom: 4px; }
  a:has(> img) {
    display: inline-flex !important; align-items: center;
    min-height: 48px !important; min-width: 48px !important;
  }
  li > strong > a, li > b > a {
    display: inline-flex !important; align-items: center;
    min-height: 48px !important; min-width: 48px !important;
  }
  header .header-top { padding-top: 0 !important; padding-bottom: 0 !important; }
  .social-icon a, .social-icon li > a {
    width: 48px !important; height: 48px !important;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    box-sizing: border-box;
  }
  footer li.menu-item > a, .footer li.menu-item > a,
  footer .menu li > a, footer ul li > a {
    display: inline-flex !important; align-items: center;
    min-height: 48px !important; min-width: 48px !important;
    box-sizing: border-box;
  }
  .logo a, .logo-holder a, .site-branding a {
    min-height: 48px !important;
    display: inline-flex !important; align-items: center;
  }
  .flexslider .flex-control-nav, .flex-control-nav { height: auto !important; }
  .flexslider .flex-control-nav li, .flex-control-nav li { margin: 0 4px !important; }
  .flexslider .flex-control-nav li a,
  .flex-control-nav li a,
  .flex-control-paging li a {
    width: 48px !important; height: 48px !important;
    border: 0 !important; background: transparent !important;
    box-shadow: none !important;
    position: relative !important; display: block !important;
  }
  .flexslider .flex-control-nav li a::before,
  .flex-control-paging li a::before {
    content: "" !important; position: absolute;
    top: 50%; left: 50%; margin: -6px 0 0 -6px;
    width: 12px; height: 12px;
    border: 2px solid #fff; border-radius: 50%;
    box-sizing: border-box;
  }
  .flexslider .flex-control-nav li a.flex-active::before,
  .flex-control-paging li a.flex-active::before { background: #fff; }
  .owl-prev, .owl-next { margin: 0 8px !important; }
}

/* Hero layout on mobile.
   The header is position:fixed and was already clipping the top of the H1
   (47px before this work). The taller tap-target header made it 65px, and the
   48px dot row is 32px taller than the old 12px one, which crowded the CTA.
   These rules give the heading clearance and drop the dots clear of the button.
   Measured: 84px heading clearance, 74px CTA-to-dots gap. */
@media (max-width: 1024px) {
  .banner-wrapper .banner-text { margin-top: 30px; }
  .flex-control-nav { bottom: -8px !important; }

  /* FlexSlider prev/next are opacity:0 but still clickable - phantom 40x40
     targets. Size them so they at least meet the rule. */
  .flex-direction-nav a { width: 48px !important; height: 48px !important; }
}

/* Inline SVG icons - replaced Font Awesome (was 495KB of CSS + webfonts
   for four icons). The <i> wrappers and their classes are kept so all the
   existing colour, hover and positioning rules still apply; the SVGs use
   fill/stroke="currentColor" so they inherit colour automatically. */
.i-svg { display: inline-block; vertical-align: -0.125em; flex: none; }
i.scrollup { justify-content: center; }
ul.social-icon li i { line-height: 1; }

/* ---- Replacements for the Font Awesome glyphs the theme injected via CSS
   ::before / ::after rules. Font Awesome shipped 244KB of CSS plus 460KB of
   webfonts; these glyphs were the reason it could not simply be dropped.
   Unicode marks are used for the simple shapes - they inherit colour and
   font-size and sit in the same inline slot, so nothing needs repositioning.
   The list bullet uses an inline SVG because no unicode character matches
   Font Awesome's check-in-a-circle. ---- */

ul li:before {
  font-family: inherit !important;
  content: "" !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23233d6e"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.6-4-4 1.5-1.5 2.5 2.5 5.4-5.4L17.7 10l-6.9 6.6z"/></svg>');
  background-repeat: no-repeat; background-position: center; background-size: contain;
  width: 1em; height: 1em; display: inline-block;
}
ul.check-list li:before, .check-list ul li:before {
  font-family: inherit !important; content: "\2713" !important;
}
.selectric .button:after,
.nav-wrap nav ul.nav li.has-sub>a:after,
.nav-wrap nav ul.nav li.has-sub .mega-dropdown li.has-sub>a:after {
  font-family: inherit !important; content: "\25BE" !important;
}
.nav-wrap nav ul.nav ul li.has-sub li.has-sub:hover>a:after {
  font-family: inherit !important; content: "\2039" !important;
}
.nav-wrap nav .submenu-button:before {
  font-family: inherit !important; content: "\203A" !important;
}
.nav-wrap nav .submenu-button.submenu-opened:before {
  font-family: inherit !important; content: "\2039" !important;
}
.text-link:after, .blog-box .content-box .more-link::after {
  font-family: inherit !important; content: "\2192" !important;
}
.owl-carousel .owl-nav .owl-prev:before {
  font-family: inherit !important; content: "\2039" !important;
}
.owl-carousel .owl-nav .owl-next:before {
  font-family: inherit !important; content: "\203A" !important;
}
.accordion .accordion-head::after {
  font-family: inherit !important; content: "+" !important;
}
.active.accordion .accordion-head::after {
  font-family: inherit !important; content: "\2212" !important;
}
.blog-detail .post-detail-tags::before {
  font-family: inherit !important; content: "\1F3F7" !important;
}
ul.breadcrumbs li:after { font-family: inherit !important; }


/* --- paste ends --- */

/* ============================================================
   Hero CTA service rotator  (added 22 Aug 2026)

   The label and href cycle through the eight service pages.

   THE MIN-WIDTH IS THE WHOLE POINT. Label text ranges from 165px
   ("IT Support") to 250px ("Managed IT Solutions") in Volte 16px —
   an 85px spread. Left to auto-size, the button would resize on every
   rotation and, being centred, shift content either side. Those are
   post-load shifts with no user input, so they count fully towards
   CLS — which is currently 0. Pinning the width to the widest label
   keeps it at 0.

   If service names change, re-measure and update the min-width.
   ============================================================ */

.banner-wrapper a.js-service-rotator {
  /* Specificity note: the theme sets min-width:188px via a two-class selector,
     so a single-class rule here loses the cascade. Scoped to .banner-wrapper
     to win it without !important. */
  min-width: 300px;          /* 250px widest label + 50px horizontal padding */
  text-align: center;
  transition: opacity 300ms ease;
}

.js-service-rotator.is-fading {
  opacity: 0;
}

/* Narrow phones: let it fill the column rather than force 300px. All
   labels wrap identically here, so there is still nothing to shift. */
@media (max-width: 400px) {
  .js-service-rotator {
    min-width: 0;
    width: 100%;
  }
}

/* Anyone who asks for less motion gets a single static label. */
@media (prefers-reduced-motion: reduce) {
  .js-service-rotator {
    transition: none;
  }
  .js-service-rotator.is-fading {
    opacity: 1;
  }
}


/* ============================================================
   Fix, 22 Aug 2026 — prose containers inside .executives-wrapper

   The theme sets .executives-wrapper .container to
   display:flex; flex-wrap:wrap; flex-direction:row-reverse
   so that the .img-box / .text-box pair renders as two columns
   with the image on the right.

   That rule also applies to the SECOND .container in the same
   section, which holds plain prose rather than a column pair.
   As flex items in a row-reverse row, the first element (a
   heading) shrinks to fit and is pushed to the far right, while
   the paragraphs below it wrap to full width. On /about-us/ this
   left "How We Help You Grow" stranded on the right-hand side.
   The same rule affects the service pages that use second_editor.

   Restore normal block flow for any .container in this section
   that does NOT contain an image column. Browsers without :has()
   drop the rule and keep the current behaviour, so this is safe.
   ============================================================ */
.executives-wrapper .container:not(:has(> .img-box)) {
  display: block;
}


/* ============================================================
   About Us layout, 22 Aug 2026 (Richard's direction)

   1. The two-column intro uses align-items:center, so with a text
      column much taller than the photo the photo floated in the
      middle with ~165px of dead space above and below it.
      Top-align it instead, scoped to this template so the service
      page heroes are unaffected.

   2. Centre the section headings and give them the theme's own
      bar treatment (.bar-heading::before, 42x5 in #233d6e) so the
      page reads like the service pages rather than a plain
      left-aligned document. Bars on h2 only; h3 is centred without
      one, to avoid a bar on every line.
   ============================================================ */
.page-template-about-php .executives-wrapper .container:has(> .img-box) {
  align-items: flex-start;
}

.page-template-about-php .executives-wrapper h2,
.page-template-about-php .executives-wrapper h3 {
  text-align: center;
}

.page-template-about-php .executives-wrapper h2::before {
  content: "";
  display: block;
  width: 42px;
  height: 5px;
  background: #233d6e;
  margin: 0 auto 16px;
}


/* ============================================================
   Homepage hero: second CTA + credential line, 23 Aug 2026

   The theme's .btn is display:table, so two buttons stack.
   Inline-block puts the primary action beside the service
   rotator on one row; below 700px they stack full width again.
   ============================================================ */
.banner-wrapper .btn {
  display: inline-block;
  margin-right: 12px;
  margin-bottom: 12px;
  vertical-align: top;
}

.banner-wrapper .hero-trust {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .88);
  max-width: 660px;
}

@media (max-width: 700px) {
  .banner-wrapper .btn {
    display: block;
    width: 100%;
    margin-right: 0;
    text-align: center;
  }
}

/* H1 2026-08-23: service pages now carry a real <h1>.
   Six pages use <h1 class="xs-heading"> (the small navy eyebrow, styled by .xs-heading).
   Three older pages (IT Consulting, Data Backup, IT Infrastructure) used <h2> as the
   page title at 38px; :not(.xs-heading) keeps that size for them without inflating
   the eyebrow on the other six. */
.executives-wrapper h1:not(.xs-heading) {
  font-size: 38px;
}


/* SOPHOS SYNDICATION FRAME 2026-08-23 (/sophos-solutions/).
   The framed page is cross-origin, so it cannot report its height and the iframe
   cannot size itself to its content. A tall fixed height was tried first and does
   not work here: the Sophos page sizes sections against the VIEWPORT, and inside an
   iframe the viewport is the iframe box — so every increase in frame height made the
   framed content taller too. 4,700px scrolled; 6,000px and 4,820px both left a gap
   and it never converged. A viewport-sized frame that scrolls internally is the only
   arrangement that renders the framed page the way Sophos designed it. */
.sophos-frame-wrap {
  margin: 24px 0 8px;
}
.sophos-frame {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 1px solid #e3e6ec;
  border-radius: 6px;
  height: 900px;
}
@media (max-width: 767px) {
  .sophos-frame { height: 78vh; }
}

/* DUPLICATE TITLE 2026-08-23 (/sophos-solutions/).
   common.php prints the page title as an h2 before the content. That page supplies
   a real <h1> with the same words as its first content element, so the template
   copy would render the title twice at the same 36px. Hide the template one; the
   h1 immediately below it carries identical visible text, so nothing is concealed.
   If pages ever get a proper h1 in the template, delete this rule and the h1 in
   that page content. */
body.page-id-706 .get-in-touch-wrapper > .container > h2:first-child,
body.page-id-711 .get-in-touch-wrapper > .container > h2:first-child {
  display: none;
}

/* SOPHOS BRAND LOCKUPS 2026-08-23. SOPHOS1 (943x112 wordmark) on the Sophos
   Firewall service page, SOPHOS2 (919x163, with the Defeat Cyberattacks tagline)
   at the top of /sophos-solutions/. These are ADDITIONAL to the Sophos Platinum
   Partner badges, which stay where they are (the Partners logo grid uses the
   222x70 badge, and four pages state the tier in prose). Capped at 300px because
   both files are near-1000px wide and would otherwise dominate the column. */
.sophos-lockup {
  margin: 18px 0 22px;
}
.sophos-lockup img {
  display: inline-block;
  width: 100%;
  max-width: 300px;
  height: auto;
}