/*
Theme Name: Saga Child
Theme URI: https://motivoweb.com/saga/
Author: motivoweb
Author URI: https://themeforest.net/user/motivoweb/
Template:  saga
Description: Business Consulting WordPress Theme.
Version: 1.0.0
Text Domain: saga
Tags: responsive, retina, rtl-language-support, blog, portfolio, custom-colors, live-editor
License: GNU General Public License
License URI: license.txt
*/

/* ==========================================================================
   CAO Investment overrides
   Canonical copy lives in the SEO repo at caoinvestment.com/saga-child/style.css.
   Edit there, then scp to the server - never edit the parent theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fix: footer (and any other col-xs-12 row) does not stack on phones.

   Saga's PHP templates use Bootstrap 3 grid classes - `col-xs-12` - but the
   theme ships a Bootstrap 4/5 grid, which removed the `xs` infix (it is plain
   `col-12` there). So `col-xs-12` matches no width rule at all, and `col-sm-*`
   only kicks in at >=576px. Below that every column falls back to bare `.col`
   (`flex: 1 0 0%`) and they all share one row: the footer's seven widgets were
   rendering 56-167px wide, wrapping "Support" mid-word.

   Restoring the missing breakpoint is enough - the parent row is already
   `display:flex; flex-wrap:wrap`, so it wraps as soon as the children claim
   full width.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .col-xs-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Readable measure for long-form (non-Elementor) pages.

   Saga's page.php drops the_content() straight into `.container`, which is
   1320px wide. That is right for Elementor layouts, which set their own column
   widths, but a plain Gutenberg page inherits the full 1320px and runs body copy
   at ~108 characters per line - well past a comfortable measure.

   Every page added by the SEO rebuild (division hubs, service pages, articles) is
   Gutenberg, because the Elementor copy pipeline can only replace strings in
   place and cannot add sections. So they all land here.

   Scoped by `body:not(.elementor-page)`: Elementor adds that class only to pages
   it actually renders, so existing Elementor layouts are untouched. Headings and
   full-width blocks opt back out below.

   Width chosen by measuring, not by eye: canvas measureText puts this font at an
   average 7.37px per character, so 700px is ~90 characters and 1320px was ~180.
   -------------------------------------------------------------------------- */
body:not(.elementor-page) .main-content > .container,
body:not(.elementor-page).single-portfolio .mo-portfolio-article > .container {
  max-width: 700px;
}
body:not(.elementor-page) .main-content > .container > .alignwide {
  max-width: 1100px;
  margin-left: -140px;
  margin-right: -140px;
}
@media (max-width: 1100px) {
  body:not(.elementor-page) .main-content > .container > .alignwide {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* --------------------------------------------------------------------------
   Title bar: give the promoted <h1> the styling the <h2> had.

   saga_title_bar() emitted the page title as <h2 class="mo-text-ellipsis">, which
   is why no page had an <h1>. saga-child/functions.php now rewrites that one tag
   to <h1> - but Saga styles the title bar by TAG, not by class
   (`.page-header .mo-title-bar h2 { color:#fff; font-size:50px; ... }`), so the
   promoted heading dropped straight through to the generic heading styles: navy
   text on a dark hero photo, at the wrong size.

   Every `.mo-title-bar h2` rule in assets/css/style.min.css is mirrored below,
   including both responsive steps. Re-derive with:
     grep -oE '[^{}]*mo-title-bar h2[^{}]*\{[^}]*\}' assets/css/style.min.css
   after any theme update.
   -------------------------------------------------------------------------- */
.page-header .mo-title-bar h1 {
  font-family: "Fira Sans", sans-serif;
  color: #fff;
  line-height: 50px;
  letter-spacing: 1px;
  font-weight: 600 !important;
  font-size: 50px;
  font-style: normal;
  margin-bottom: 0;
}
.pagetitle-v3 .mo-title-bar h1 { text-align: center; }
.pagetitle-v4 .mo-title-bar-wrap .container.parallax-container .mo-title-bar h1 { margin-top: 50px; }
.pagetitle-v5 .mo-title-bar h1 { margin-top: 15px; }

@media only screen and (max-width: 768px) {
  .page-header .mo-title-bar h1 { font-size: 30px !important; line-height: 42px !important; }
}
@media only screen and (max-width: 480px) {
  .page-header .mo-title-bar h1 { font-size: 22px !important; line-height: 32px !important; }
}

/* The blog/search/archive templates use a different class on the same element.
   White ONLY where it sits on the dark hero title bar. The blog index renders its
   heading into a plain `.mo-blog-archive .container` with no background at all, so a
   blanket white rule made the word "Blog" invisible — the page looked like it opened
   with 190px of empty space. Caught on screenshot; nothing automated would see it. */
.page-header .mo-page_title {
  color: #fff;
}
.mo-blog-archive .mo-page_title {
  color: #14133b;
  margin-bottom: 30px;
}

/* --------------------------------------------------------------------------
   Hover-reveal images on touch devices.

   Saga's image-box-style3 (the division cards on the home page) sets
   `.thumb-service img { opacity: 0 }` and fades the picture in on :hover. There is
   no hover on a phone, so every card rendered as a heading, two lines of text, and
   roughly 200px of blank space where the photograph should be — which is what the
   home page looked like on mobile.

   Same class of defect as the team-card names in Phase 4. Worth checking any other
   `opacity: 0` + `:hover` pattern in this theme before assuming a layout is fine on
   touch: `grep -oE '[^{}]*opacity:0[^}]*' assets/css/style.min.css`.

   Scoped on `hover: none` so the desktop animation is untouched, with a width
   fallback for browsers that do not support the interaction media query.
   -------------------------------------------------------------------------- */
@media (hover: none), (max-width: 991px) {
  .image-box-style3 .thumb-service img,
  .image-box-style3 .image-bg::after {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  /* The hover state does two things: reveals the photo AND flips the text to light.
     Revealing the photo alone leaves navy body copy on a mid-tone photograph, which
     is less readable than the blank card it replaced. The scrim (rgba(0,0,0,.6)) is
     already on the ::after; this is the other half.

     The card text is spread across three separate wrappers - .sup-title, .title-wrap
     and .desc - so scoping to .content alone catches the body copy and leaves the
     heading navy. Target each wrapper. */
  .image-box-style3 .title-wrap,
  .image-box-style3 .title-wrap *,
  .image-box-style3 .desc,
  .image-box-style3 .desc *,
  .image-box-style3 .mo_btn_text,
  .image-box-style3 .button {
    color: #fff !important;
  }
  .image-box-style3 .sup-title,
  .image-box-style3 .sup-title span {
    color: #ffb59b !important;   /* accent, lightened so it holds up on a photograph */
  }
}

/* --------------------------------------------------------------------------
   Contact page layout.

   The section was built as two columns — contact details on the left, a Google map
   on the right. The map was removed on 2026-08-01 (the owner did not want one), and
   Elementor left the surviving container at exactly 50% width: measured 648px inside
   a 1296px parent, with the whole right half of the page empty. That is why the page
   read as blank despite having real content on it.

   Widened to full width, then laid out as a grid so the intro spans the top and the
   "what happens next" panel sits beside the form instead of above it. Single column
   below 992px, which is what the flex container did anyway.
   -------------------------------------------------------------------------- */
.elementor-element-574bd71 {
  width: 100% !important;
  max-width: 100% !important;
}
@media (min-width: 992px) {
  .elementor-element-574bd71 {
    display: grid !important;
    grid-template-columns: 1fr 1.1fr;
    column-gap: 70px;
    align-items: start;
  }
  .elementor-element-583c1f0 {           /* heading + intro */
    grid-column: 1 / -1;
    max-width: 760px;
  }
  .elementor-element-39aef84 {           /* the form */
    padding-top: 6px;
  }
}

/* --------------------------------------------------------------------------
   Sample-project notice.

   The ten portfolio items are fictional placeholders the owner asked for to review
   the grid layout. They are noindex, but a visitor who reaches one directly gets no
   such signal, so each carries a visible banner. Deliberately loud — the moment this
   stops being obvious is the moment someone mistakes it for a real case study.

   Delete this rule and the banner in content/projects.php together, when the sample
   items are replaced with real work.
   -------------------------------------------------------------------------- */
.cao-sample-notice {
  background: #fff4ef;
  border-left: 4px solid #f23801;
  padding: 14px 18px;
  margin-bottom: 28px;
  font-size: 15px;
  color: #14133b;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Header .call-us block.

   header-v2 renders `<i envelope> <span>{question}</span> <a>{label}</a>`. With the
   phone number cleared in Phase 2 the anchor was empty, so the header showed an icon,
   a floating question, and nothing to click. The text is restored in saga_options;
   this just stops the pieces sitting at odd baselines relative to each other.

   The parent centres this block with `padding-top: 25px` on a `height: 100%` box —
   a pre-flexbox hack. Making it a flexbox without clearing that padding centred the
   contents inside a box whose top 25px were padding, so the envelope and text sat
   ~13px BELOW the colour switcher and menu toggle beside them. Zero the padding and
   let `align-items: center` centre against the real 90px header.

   Specificity has to match the parent's `.mo-header-v2 .menu_other_v2 .call-us` (0,3,0),
   not the (0,2,0) above, or the padding wins. The child sheet loads later, so equal
   specificity is enough — and it also beats the parent's own 991px override.
   -------------------------------------------------------------------------- */
.mo-header-menu .call-us {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.3;
}
.mo-header-v2 .menu_other_v2 .call-us,
.mo-header-v3 .call-us,
.mo-header-v5 .menu_other_v5 .call-us {
  padding-top: 0;
  padding-bottom: 0;
}
/* `gap` already spaces the icon; the parent's margin doubled it to 20px, which
   read as the envelope being unrelated to the text beside it. Same specificity
   note as above — the parent's selector is (0,3,1). */
.mo-header-v2 .menu_other_v2 .call-us > i,
.mo-header-v3 .call-us > i,
.mo-header-v5 .menu_other_v5 .call-us > i {
  margin-right: 0;
}
.mo-header-menu .call-us > span {
  display: block;
  font-size: 13px;
  opacity: 0.75;
}
.mo-header-menu .call-us > a {
  display: block;
  font-weight: 600;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Hide the team-card share toggle while there are no social profiles.

   mo-teams renders a share-nodes opener per card unconditionally, as
   <a href="#">, whether or not the card has any social links. The demo's
   placeholder profiles were cleared in SEO Phase 2 (#47), so every one of these
   was a dead link opening an empty tray - 8 on the home page alone.

   ponytail: CSS rather than a widget-template override, because Phase 4 puts
   real profiles back for the real team members. Delete this rule then.
   -------------------------------------------------------------------------- */
.mo-team-icon-opener {
  display: none;
}

/* --------------------------------------------------------------------------
   Team cards: show the name and role without requiring a hover.

   Saga's mo-teams tpl1 renders .team-title as
   `position:absolute; visibility:hidden; opacity:0` and reveals it on :hover.
   That means the names are invisible on every touch device - there is no hover
   on a phone, so a visitor on mobile sees six photographs and no idea who they
   are. It also makes the page impossible to review from a screenshot.

   The markup is unchanged, so this costs nothing in SEO terms (the names were
   always in the HTML); it is purely about the page being usable.
   -------------------------------------------------------------------------- */
.mo-team .team-title {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  z-index: 2;
}

/* The theme only ever showed this text over its hover overlay, so it has no background
   of its own. Shown permanently it lands straight on the photograph - white on a light
   studio backdrop is unreadable. A gradient scrim on the image restores the contrast
   without touching the markup. */
.mo-team .team-member .team-img::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(20, 19, 59, 0.85) 0%, rgba(20, 19, 59, 0.55) 45%, rgba(20, 19, 59, 0) 100%);
  pointer-events: none;
}
.mo-team .team-member .team-img {
  position: relative;
}

/* --------------------------------------------------------------------------
   Footer bottom bar.

   The demo built this as a wp:columns whose right column held a legacy-widget
   nav_menu pointing at menu 41 - deleted when the nav was flattened, so the
   column rendered empty and the copyright line sat at half width for no reason.
   copy/footer.php now emits plain markup; this is the layout the theme's own
   `.footer-bottom .widget_nav_menu` rules used to supply (right-aligned, pipe
   separated), minus the widget wrapper they were scoped to.
   -------------------------------------------------------------------------- */
.cao-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
}
.cao-footer-bottom .cao-copyright { margin: 0; }
.cao-footer-legal a {
  position: relative;
  margin-left: 24px;
}
.cao-footer-legal a:first-child { margin-left: 0; }
.cao-footer-legal a + a::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 50%;
  transform: translateY(-50%);
  height: 11px;
  width: 1px;
  background: currentColor;
  opacity: 0.3;
}
@media (max-width: 575.98px) {
  .cao-footer-bottom { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   Footer layout.

   footer-v1/v3 both split the row as two col-lg-6 halves: the left holds the logo
   and contact columns, the right holds three link columns. With five columns of
   real content that is the wrong ratio - the logo blurb got 50% of the width while
   "Real Estate & Operations" and "Company" were squeezed into ~200px each and
   touched, because the template's no-padding-l/r classes remove the gutters too.

   40/60 makes all five columns an even 20%, and the gutter comes back explicitly.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .footer > .container > .row > .col-lg-6:first-child  { flex: 0 0 40%; max-width: 40%; }
  .footer > .container > .row > .col-lg-6:nth-child(2) { flex: 0 0 60%; max-width: 60%; }
  .footer [class*="footer-widget-"]:not(.footer-widget-6) { padding-right: 30px; }
}

/* Anchors are full phrases now ("Property Management, Concord CA") rather than the
   demo's one-word labels, so they wrap. The theme's 25px line-height was tuned for
   single lines and made a wrapped item read as two separate links. */
.footer .widget_nav_menu ul > li a {
  line-height: 22px;
  padding: 5px 0;
}