/*
Theme Name: JISL
Theme URI: https://janataisbd.com/
Author: JISL
Description: Custom WordPress theme for Janata Inspection & Survey Ltd.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: jisl
*/

/* assets/css/site.css carries the design system and is enqueued separately in
   functions.php; the rules below are the WordPress-specific layer on top. */

/* WordPress-specific helpers */
.admin-bar .header { top: 32px; }
/* The CTA copy inside the menu is for the mobile drawer only. */
.jisl-menu-cta { display: none; }
.nav > ul > .current-menu-item > a, .nav > ul > .current-menu-ancestor > a, .nav > ul > .current-menu-parent > a { color: var(--navy); padding-bottom: 4px; border-bottom: 2px solid var(--green); }
.nav .sub-menu .current-menu-item > a { color: var(--green); }
.nav .primary-menu { display: flex; align-items: center; gap: 12px 26px; list-style: none; margin: 0; padding: 0; }
/* Vertical padding keeps the pointer inside the item while it travels to the
   submenu; the ::before below covers the remaining gap. Without both, the
   submenu closes before it can be reached. */
.nav .menu-item { position: relative; padding: 12px 0; margin: -12px 0; }
.nav .menu-item-has-children > a { display: inline-flex; align-items: center; gap: 8px; }
.nav .menu-item-has-children > a::after {
  content: "\25BC"; width: 20px; height: 20px; display: inline-grid; place-items: center;
  border-radius: 50%; background: var(--green); color: #fff; font-size: 9px; line-height: 1;
  box-shadow: 0 2px 6px rgba(15,122,67,.22); transition: transform .18s ease, background .18s ease;
}
.nav .menu-item-has-children:hover > a::after,
.nav .menu-item-has-children:focus-within > a::after { transform: rotate(180deg); background: var(--navy); }
.nav .sub-menu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%,8px);
  width: 250px; padding: 9px; margin: 0; list-style: none; background: #fff;
  border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 18px 40px rgba(10,35,80,.14);
  opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease;
}
.nav .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav .sub-menu a { display: block; padding: 11px 13px; border-radius: 2px; color: var(--body); line-height: 1.35; }
.nav .sub-menu a:hover, .nav .sub-menu a:focus { color: var(--navy); background: rgba(15,122,67,.08); }
.nav .menu-item:hover > .sub-menu, .nav .menu-item:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translate(-50%,0); }
.utility a { color: inherit; }

/* Page templates: content comes through the editor, so normalise its wrappers. */
.management-message > p:last-child, .team-intro > p:last-child { margin-bottom: 0; }
.team-intro p { max-width: 760px; color: var(--body); font-size: 17px; line-height: 1.75; }
.team-card { text-align: center; }
.team-card .icon-wrap { margin-inline: auto; }
.team-card .icon-wrap img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.team-details { margin: 22px 0 0; }
.team-details > div + div { margin-top: 12px; }
.team-details dt { color: var(--green); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.team-details dd { margin: 4px 0 0; color: var(--body); line-height: 1.45; overflow-wrap: anywhere; }
.team-details h2 { margin: 0; }
.team-details a { color: var(--body); }
.team-details a:hover, .team-details a:focus { color: var(--green); }

/* Service-request form: result banner and spam honeypot */
.form-alert { padding: 14px 16px; border-radius: 3px; font-size: 14px; line-height: 1.55; margin-bottom: 22px; border: 1px solid; }
.form-alert.is-ok { background: rgba(15,122,67,.08); border-color: rgba(15,122,67,.4); color: var(--green); }
.form-alert.is-error { background: rgba(176,32,32,.06); border-color: rgba(176,32,32,.35); color: #A11B1B; }
.jisl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 782px) { .admin-bar .header { top: 46px; } }
/* Below 600px WordPress switches the admin bar to position:absolute so it
   scrolls away — keeping a 46px offset would leave a gap above the header. */
@media screen and (max-width: 600px) { .admin-bar .header { top: 0; } }
@media (max-width: 900px) {
  /* The frosted-glass header is unreadable over the hero photo on small
     screens, where backdrop-filter support is also patchy. */
  .header { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* A full-width underline reads as a divider in the stacked drawer, so the
     active item gets a tint instead — same as the static site's mobile nav. */
  .nav > ul > .current-menu-item > a,
  .nav > ul > .current-menu-ancestor > a,
  .nav > ul > .current-menu-parent > a {
    padding-bottom: 13px; border-bottom: 0; background: rgba(15,122,67,.08); border-radius: 3px;
  }
  /* Specific enough to beat the generic .nav .primary-menu > li rules below. */
  .nav .primary-menu > .jisl-menu-cta { display: block; margin: 10px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); }
  .nav .primary-menu > .jisl-menu-cta > a { display: block; width: 100%; text-align: center; padding: 14px 18px; color: #fff; }
  .nav .primary-menu > .jisl-menu-cta > a:hover { color: #fff; background: var(--navy); }
  .nav .primary-menu { display: block; width: 100%; }
  /* The desktop hover-bridge padding would overlap stacked items here. */
  .nav .menu-item { padding: 0; margin: 0; }
  .nav .primary-menu > li > a { display: flex; justify-content: space-between; align-items: center; padding: 13px 12px; }
  .nav .sub-menu { display: none; position: static; width: 100%; padding: 0 0 8px; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: 0; border-radius: 0; background: rgba(10,35,80,.035); }
  /* Tapping a parent focuses it, and the desktop hover/focus rule is more
     specific than the block above — without this the submenu keeps the
     centring transform and slides half its width off to the left. */
  .nav .menu-item:hover > .sub-menu,
  .nav .menu-item:focus-within > .sub-menu { transform: none; }
  .nav .sub-menu::before { display: none; }
  .nav .sub-menu a { padding: 11px 24px; }
  .nav .menu-item.is-open > .sub-menu { display: block; }
  /* Only the open state should flip the caret here — hover/focus would leave a
     tapped-but-closed item pointing up. */
  .nav .menu-item-has-children:hover > a::after,
  .nav .menu-item-has-children:focus-within > a::after { transform: none; background: var(--green); }
  .nav .menu-item-has-children.is-open > a::after { transform: rotate(180deg); background: var(--navy); }
}