/* 3i revamp — shared component layer. Loaded last in <head>. */
:root{ --r-brand:#bd3e1b; --r-on-brand:#fff; --r-ease:cubic-bezier(.2,.7,.2,1); }

/* WhatsApp button — house default, bottom LEFT (right collides with
   back-to-top and most chat widgets). Number read from the page's own tel:
   link, never typed in. */
.u-wa{
  position:fixed !important; left:16px !important; right:auto !important; bottom:16px !important;
  width:62px; height:62px; border-radius:50%; background:#25D366;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.45); z-index:9000; display:block; text-decoration:none;
  transition:transform .2s var(--r-ease), box-shadow .2s ease;
}
.u-wa::after{
  content:""; position:absolute; inset:0; margin:auto; width:34px; height:34px; background:#fff;
  -webkit-mask:var(--wa) center/contain no-repeat; mask:var(--wa) center/contain no-repeat;
}
.u-wa{ --wa:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12.04 2A9.9 9.9 0 0 0 2.1 11.9a9.8 9.8 0 0 0 1.35 4.96L2 22l5.3-1.38a9.9 9.9 0 0 0 4.74 1.21h.01A9.9 9.9 0 0 0 22 11.93 9.9 9.9 0 0 0 12.04 2zm5.8 14.06c-.24.68-1.4 1.3-1.94 1.35-.5.05-.96.23-3.23-.67-2.72-1.07-4.45-3.84-4.58-4.02-.13-.18-1.1-1.46-1.1-2.79s.7-1.98.95-2.25c.25-.27.54-.34.72-.34h.52c.17 0 .4-.06.62.47.24.57.8 1.97.87 2.11.07.14.12.3.02.48-.1.18-.15.3-.3.46l-.44.5c-.14.14-.3.3-.13.6.17.3.75 1.23 1.6 2 1.1.98 2.02 1.28 2.32 1.43.3.15.47.13.64-.08.18-.2.74-.86.94-1.16.2-.3.4-.25.66-.15.27.1 1.67.79 1.96.93.29.14.48.21.55.33.07.12.07.7-.17 1.38z'/></svg>"); }
.u-wa:hover{ transform:translateY(-3px); box-shadow:0 10px 26px -8px rgba(0,0,0,.5); }
.u-wa:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
@media (max-width:767px){ .u-wa{ width:56px; height:56px; left:14px !important; bottom:14px !important; } }
@media (prefers-reduced-motion:reduce){ .u-wa{ transition:none; } .u-wa:hover{ transform:none; } }

/* Phone row in the mobile menu. The theme's own menu is left alone wherever it
   works; this is the one thing it lacks. Full menu width, 48px target. */
.u-menu-call{
  display:none; box-sizing:border-box; width:100%; align-items:center; gap:10px;
  min-height:48px; padding:12px 20px; background:var(--r-brand); color:var(--r-on-brand) !important;
  font-weight:600; text-decoration:none; white-space:nowrap;
}
.u-menu-call svg{ width:18px; height:18px; fill:currentColor; flex:0 0 auto; }
@media (max-width:980px){ .u-menu-call{ display:flex; } }
.u-menu-call-item{ list-style:none; }
.u-menu-call-item{ margin:0 !important; padding:0 !important; border:0 !important; }

/* Mobile type floor. These themes drop body copy to 13-14px on phones.
   Body text only; heading sizes stay the designer's, desktop is untouched. */
@media (max-width:767px){
  body{ font-size:16px; }
  p, li, td, .et_pb_text, .et_pb_text_inner{ font-size:16px; line-height:1.65; }
  /* Betheme's own .big is 16px on desktop and 13px on phones - the one
     paragraph class whose rule outranks the line above. Named here so the
     floor actually holds: mtr-construction.com had exactly one line of
     13px text left after the sweep, and it was this. */
  p.big, .big{ font-size:16px; line-height:1.65; }
  footer p, footer li, footer a, #main-footer p, #main-footer li, #main-footer a{ font-size:15px; line-height:1.6; }
  small, .small{ font-size:14px; }
}

/* The enquiry form's reply box: success and failure printed in the same grey
   on every site seen so far. The live handler tags the FORM, so the states are
   styled from those classes. */
.wpcf7 form .wpcf7-response-output, form[data-3i] .wpcf7-response-output{
  margin:16px 0 0; padding:12px 16px; border:1px solid transparent; border-radius:10px;
  font-size:15px; line-height:1.5;
}
.wpcf7 form.sent .wpcf7-response-output, form[data-3i].sent .wpcf7-response-output{
  border-color:rgba(26,156,91,.40) !important; background:#effaf4 !important; color:#12623a !important;
}
.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.invalid .wpcf7-response-output,
form[data-3i].failed .wpcf7-response-output{
  border-color:rgba(190,120,20,.45) !important; background:#fff8ec !important; color:#8a5a06 !important;
}



/* A number that was plain text must not start looking like a link - and must
   not start OCCUPYING a different box either. On welicronlifesciences.com the
   theme's own `.icon_box a{display:block}` (meant for an icon box that is
   wholly a link) caught our injected anchor, so a number that had been inline
   text inside `<div class="desc">` became a full-width block and added exactly
   one 28px line box: /contact-us/ grew 28px with not one computed style
   different, which is how a cascade FAIL with no style diff looks when the
   cause is a box-model change rather than a restyle. Plain text is inline, so
   pin inline. (The mobile menu's phone row is .u-menu-call, not this class, so
   it keeps its own flex box.) */
a.u-tel{font:inherit!important;color:inherit!important;line-height:inherit!important;
  letter-spacing:inherit!important;text-decoration:inherit!important;font-weight:inherit!important;
  display:inline!important;width:auto!important;padding:0!important;margin:0!important}

/* Divi mobile menu — THE PANEL THAT HAD A HANDLER AND NO CSS.
   The flat-PHP conversion ships a small <script id="et-mm"> that toggles
   `body.et-mobile-open`, sets --et-mm-top/-bg/-fg from the live header, and
   marks an open submenu `li.et-mm-sub-open`. Nothing ever styled those, so on
   sompuratemples.com the hamburger added a class to <body> and the panel stayed
   `display:none, height 0` on every page - the menu was dead on phones, in the
   control build as much as ours, and only a real tap revealed it: the markup is
   present, the toggle is present, the console is clean, and 24 links are right
   there in the DOM. "The menu exists" is the easier question.
   This is the missing half. Divi's breakpoint is 980px; the panel is a <ul>
   positioned absolute inside a 40x40 static .mobile_nav, so it is pinned to the
   viewport under the header instead, full width and opaque - a translucent
   panel over a photo is the complaint that follows otherwise. */
@media (max-width:980px){
  body.et-mobile-open ul.et_mobile_menu{
    display:block!important; visibility:visible!important; opacity:1!important;
    position:fixed!important; top:var(--et-mm-top,64px)!important;
    left:0!important; right:0!important; width:100%!important;
    max-height:calc(100vh - var(--et-mm-top,64px))!important; overflow-y:auto!important;
    margin:0!important; padding:0!important; list-style:none!important;
    background:var(--et-mm-bg,#fff)!important; z-index:99999!important;
    border-top:1px solid rgba(0,0,0,.08);
    box-shadow:0 14px 30px -14px rgba(0,0,0,.45);
  }
  body.et-mobile-open ul.et_mobile_menu li{
    list-style:none!important; margin:0!important; padding:0!important; width:100%!important;
    float:none!important; position:relative!important;
  }
  /* :not(.mobile-toggle-icon) matters. Divi ships a SECOND, empty <a> inside
     every parent item - its own submenu arrow, which its CSS pins to the right
     as a small control. Styled by a blanket `li a` rule it became a full-width
     48px blank row with a chevron, sitting between "Gallery" and "Contact Us"
     and looking exactly like a menu item whose label had gone missing. */
  body.et-mobile-open ul.et_mobile_menu li>a:not(.mobile-toggle-icon){
    display:block!important; box-sizing:border-box!important;
    padding:14px 56px 14px 20px!important; min-height:48px!important;   /* 48px tap target */
    color:var(--et-mm-fg,#111)!important; text-decoration:none!important;
    font-size:16px!important; line-height:1.4!important;
    border-bottom:1px solid rgba(0,0,0,.07)!important; width:auto!important;
  }
  /* The toggle icon goes back to being a control: 48x48 at the right of its own
     row, carrying the chevron. It expands the submenu and the label beside it
     still NAVIGATES - which matters here, because /temple-construction-india/
     (the Gallery page itself) is not repeated inside its own submenu, so a
     parent link that only expands makes that page unreachable on a phone. */
  body.et-mobile-open ul.et_mobile_menu li>a.mobile-toggle-icon{
    position:absolute!important; top:0!important; right:0!important;
    width:48px!important; height:48px!important; min-height:0!important;
    padding:0!important; margin:0!important; border:0!important;
    display:flex!important; align-items:center; justify-content:center;
    color:var(--et-mm-fg,#111)!important; opacity:.55; z-index:2;
  }
  body.et-mobile-open ul.et_mobile_menu li>a.mobile-toggle-icon::before{
    content:"\203A"; display:block; font-size:22px; line-height:1;
    transform:rotate(90deg); transition:transform .18s ease;
  }
  body.et-mobile-open ul.et_mobile_menu li.et-mm-sub-open>a.mobile-toggle-icon::before{
    transform:rotate(-90deg);
  }
  /* Sub-menus stay closed until the handler marks the parent, so a long nav
     does not open as a wall of links. */
  body.et-mobile-open ul.et_mobile_menu .sub-menu{display:none!important; margin:0!important; padding:0!important}
  body.et-mobile-open ul.et_mobile_menu li.et-mm-sub-open>.sub-menu{display:block!important}
  body.et-mobile-open ul.et_mobile_menu .sub-menu a{padding-left:36px!important; font-size:15px!important}
  /* Only for a theme that gives us NO toggle icon of its own. Written as
     :not(:has(...)) on purpose: where :has() is unsupported the rule is dropped
     and such an item simply has no chevron, which is better than the two
     chevrons the other way round would produce. */
  body.et-mobile-open ul.et_mobile_menu li.menu-item-has-children:not(:has(>a.mobile-toggle-icon))>a::after{
    content:"\203A"; float:right; transform:rotate(90deg); opacity:.55;
  }
  body.et-mobile-open ul.et_mobile_menu li.et-mm-sub-open:not(:has(>a.mobile-toggle-icon))>a::after{
    transform:rotate(-90deg);
  }
}

/* ---------------------------------------------------------------------------
   u-lb — rescue lightbox for a gallery whose plugin lightbox is dead.

   mtr-construction.com runs Photo Gallery by WD (BWG). Every thumbnail is an
   <a class="bwg_lightbox" href="<full image>">, and the plugin answers the
   click by XHRing wp-admin/admin-ajax.php — which on a WordPress-free build is
   410 Gone. What a visitor got was a black overlay and a spinner that never
   stopped, on 98 thumbnails across 19 pages. The anchors already carry the full
   image, so the rescue is to take the click ourselves.

   Arrow sizing is written the long way on purpose: a theme's global
   button{padding:10px 35px} with content-box turns a 46px square into a
   130x80 pill (§3.3's arrow trap). Force the box model, don't just set w/h.
--------------------------------------------------------------------------- */
.u-lb{position:fixed; inset:0; z-index:2147483000; display:flex; align-items:center;
  justify-content:center; background:rgba(9,11,16,.93); opacity:0; transition:opacity .18s ease-out}
.u-lb.is-open{opacity:1}
.u-lb-fig{margin:0; max-width:94vw; max-height:92vh; display:flex; flex-direction:column;
  align-items:center; gap:10px}
.u-lb-img{max-width:94vw; max-height:80vh; width:auto; height:auto; object-fit:contain;
  border-radius:4px; background:#111; box-shadow:0 18px 50px rgba(0,0,0,.5)}
.u-lb-cap{color:#f2f4f8; font-size:15px; line-height:1.5; text-align:center; max-width:70ch;
  padding:0 12px; text-wrap:pretty}
.u-lb-count{color:#aeb6c4; font-size:13px; letter-spacing:.04em}
.u-lb button{box-sizing:border-box!important; padding:0!important; margin:0!important;
  min-width:0!important; border:0!important; letter-spacing:0!important; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff; border-radius:50%!important;
  width:46px!important; height:46px!important; line-height:46px!important; font-size:22px!important;
  transition:background .15s ease-out, transform .15s ease-out}
.u-lb button:hover{background:rgba(255,255,255,.28)}
.u-lb button:focus-visible{outline:3px solid #fff; outline-offset:3px}
.u-lb-prev{position:absolute; left:18px; top:50%; transform:translateY(-50%)}
.u-lb-next{position:absolute; right:18px; top:50%; transform:translateY(-50%)}
.u-lb-close{position:absolute; top:16px; right:18px; font-size:26px!important}
.u-lb-spin{position:absolute; width:34px; height:34px; border-radius:50%;
  border:3px solid rgba(255,255,255,.25); border-top-color:#fff; animation:u-lb-spin .8s linear infinite}
@keyframes u-lb-spin{to{transform:rotate(360deg)}}
body.u-lb-lock{overflow:hidden}
@media(max-width:600px){
  .u-lb button{width:40px!important; height:40px!important; line-height:40px!important; font-size:19px!important}
  .u-lb-prev{left:8px} .u-lb-next{right:8px} .u-lb-close{top:10px; right:10px}
  .u-lb-img{max-height:72vh}
  .u-lb-cap{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  .u-lb{transition:none} .u-lb button{transition:none} .u-lb-spin{animation-duration:2s}
}

/* telwrap.py: a phone number or e-mail that the page printed as plain text,
   wrapped in a link so a tap dials or opens the mail app. It must look exactly
   the same as the text around it - the point is that nothing visible changed. */
a.u-telwrap{color:inherit !important; text-decoration:none !important;
  border:0 !important; background:none !important}
a.u-telwrap:hover{text-decoration:underline !important}
a.u-telwrap:focus-visible{outline:2px solid currentColor; outline-offset:2px}