/* Global layout-only styles: header + footer */

:root {
  /* Single control point for dark-header logo sizing. */
  --tarmez-dark-logo-max-height: 64px;
  --tarmez-dark-logo-width: 176px;
}

/* ============================================
   HEADER — Desktop Navbar (uses Odoo structure)
   ============================================ */

/* Common tarmez navbar styles */
.tarmez-navbar {
  min-height: 72px !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.tarmez-navbar .nav-link {
  font-family: 'Baloo Bhaijaan 2', cursive;
  font-weight: 700 !important;
  font-size: clamp(16px, 1.25vw, 19px) !important;
  white-space: nowrap;
  transition: color .2s ease !important;
}

/* Keep desktop menu in one row */
.tarmez-navbar #top_menu {
  flex-wrap: nowrap !important;
  white-space: nowrap;
  overflow: visible;
  column-gap: clamp(0.3rem, 0.72vw, 0.85rem) !important;
}

/* ---- Home page: white/light header ---- */
.tarmez-navbar--home {
  background-color: #ffffff;
}

.tarmez-navbar--home .nav-link {
  color: #1a1a24 !important; /* Dark bold color to match Image 2 */
}

.tarmez-navbar--home .nav-link:hover,
.tarmez-navbar--home .nav-link:focus {
  color: #0d9488 !important;
}

/* ---- Inner pages: dark header ---- */
.tarmez-navbar--inner {
  background-color: #161616 !important;
}

.tarmez-navbar--inner .nav-link,
.tarmez-navbar--inner .dropdown-toggle {
  color: #ffffff !important;
}

.tarmez-navbar--inner .nav-link:hover,
.tarmez-navbar--inner .nav-link:focus,
.tarmez-navbar--inner .dropdown-toggle:hover {
  color: #67e8f9 !important;
}

/* Inner pages: mobile header dark background */
.tarmez-navbar--inner + .o_header_mobile {
  background-color: #161616 !important;
  border-bottom-color: #374151 !important;
}

/* Mobile header inherits dark styling from parent header */
header:has(.tarmez-navbar--inner) .o_header_mobile {
  background-color: #1f2937 !important;
  border-bottom-color: #374151 !important;
}

header:has(.tarmez-navbar--inner) .o_header_mobile .nav-link,
header:has(.tarmez-navbar--inner) .o_header_mobile .navbar-toggler {
  color: #ffffff !important;
}

header:has(.tarmez-navbar--inner) .o_header_mobile .o_navbar_mobile {
  background-color: #1f2937 !important;
  color: #ffffff;
}

header:has(.tarmez-navbar--inner) .o_header_mobile .o_navbar_mobile .nav-link {
  color: #ffffff !important;
}

header:has(.tarmez-navbar--inner) .o_header_mobile .o_navbar_mobile .nav-link:hover {
  color: #67e8f9 !important;
}

header:has(.tarmez-navbar--inner) .o_header_mobile .btn-close {
  filter: invert(1);
}

/* Header Native Elements Styling (Matching Image 2) */

/* 1. Language Button */
.tarmez-navbar .js_language_selector button {
  font-family: 'Baloo Bhaijaan 2', cursive !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 0.3rem 1rem !important;
  border-radius: 9999px !important;
  background-color: rgb(55 65 81) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: background-color .2s ease !important;
}

.tarmez-navbar .js_language_selector button::before {
  content: "\f0ac";
  font-family: "FontAwesome";
  font-weight: 900;
  margin-inline-end: 6px;
  font-size: 15px;
}

.tarmez-navbar .js_language_selector button:hover,
.tarmez-navbar .js_language_selector button:focus {
  background-color: rgb(55 65 81) !important;
  color: #ffffff !important;
}

/* 2. Phone Button */
.tarmez-navbar .tarmez-header-phone-link {
  background: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  transition: opacity .2s ease !important;
}
.tarmez-navbar .tarmez-header-phone-link:hover {
  opacity: 0.8;
}
.tarmez-navbar .tarmez-header-phone-icon-img {
  width: 50px !important;
  height: 50px !important;
  object-fit: contain;
}

/* 3. Contact Us CTA Button */
.tarmez-navbar .btn_cta,
.tarmez-navbar a[href="/contactus"] {
  background-color: #2d9588 !important; /* Teal from Image 2 */
  color: #ffffff !important;
  border-radius: 9999px !important; /* Pill shape */
  border: none !important;
  padding: 0.5rem 1.75rem !important;
  font-weight: 700 !important;
  transition: background-color .2s ease !important;
}
.tarmez-navbar .btn_cta:hover,
.tarmez-navbar a[href="/contactus"]:hover {
  background-color: #247c71 !important;
  color: #ffffff !important;
}

/* 4. Sign In text link & User Dropdown */
.tarmez-navbar .o_nav_link_btn,
.tarmez-navbar .dropdown-toggle {
  font-weight: 700 !important;
  font-family: 'Baloo Bhaijaan 2', cursive !important;
}

/* ============================================
   MOBILE HEADER (top bar + offcanvas drawer)
   ============================================ */

/* Mobile top bar height */
.o_header_mobile .o_main_nav {
  min-height: 64px !important;
}

/* Mobile offcanvas drawer */
.o_navbar_mobile {
  background-color: #ffffff !important;
}

/* Mobile nav links typography */
.o_navbar_mobile .nav-link {
  font-family: 'Baloo Bhaijaan 2', cursive !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: #1a1a24 !important;
}

.o_navbar_mobile .nav-link:hover {
  color: #0d9488 !important;
}

/* Mobile language selector — dark grey pill (full width) */
.o_navbar_mobile .js_language_selector button {
  background-color: #374151 !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  border: none !important;
  font-family: 'Baloo Bhaijaan 2', cursive !important;
  font-weight: 600 !important;
  width: 100% !important;
  padding: 0.5rem 1.25rem !important;
  text-align: start !important;
}

.o_navbar_mobile .js_language_selector button:hover {
  background-color: rgb(55 65 81) !important;
  color: #ffffff !important;
}

/* Mobile CTA (Contact Us) — teal */
.o_navbar_mobile .btn_cta,
.o_navbar_mobile a[href="/contactus"] {
  background-color: #2d9588 !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  border: none !important;
  font-weight: 700 !important;
  font-family: 'Baloo Bhaijaan 2', cursive !important;
  text-align: center !important;
  display: block !important;
  padding: 0.6rem 1.75rem !important;
}

.o_navbar_mobile .btn_cta:hover,
.o_navbar_mobile a[href="/contactus"]:hover {
  background-color: #247c71 !important;
  color: #ffffff !important;
}

/* Mobile phone link — hide number text, keep icon only as circle */
.o_navbar_mobile .s_text_block small {
  display: none !important;
}

.o_navbar_mobile .s_text_block .border-top {
  border-top: 1px solid #e5e7eb !important;
}

.o_navbar_mobile .s_text_block a[href^="tel:"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background-color: #374151 !important;
}

.o_navbar_mobile .s_text_block a[href^="tel:"] .fa {
  color: #ffffff !important;
  font-size: 18px !important;
  margin: 0 !important;
}

/* Mobile sign-in typography */
.o_navbar_mobile .o_dropdown_user .nav-link,
.o_navbar_mobile .o_header_user_sign_in .nav-link {
  font-family: 'Baloo Bhaijaan 2', cursive !important;
  font-weight: 600 !important;
}

/* Inner page: dark offcanvas drawer */
header:has(.tarmez-navbar--inner) .o_navbar_mobile {
  background-color: #1f2937 !important;
}

header:has(.tarmez-navbar--inner) .o_navbar_mobile .nav-link {
  color: #f9fafb !important;
}

header:has(.tarmez-navbar--inner) .o_navbar_mobile .nav-link:hover {
  color: #67e8f9 !important;
}

header:has(.tarmez-navbar--inner) .o_navbar_mobile .s_text_block .border-top {
  border-top-color: #374151 !important;
}

/* ============================================
   FOOTER
   ============================================ */

#wrapwrap footer h3 {
  color: #fff;
  font-weight: 800 !important;
}

#wrapwrap footer a {
  color: #fff;
}

.s_tarmez_footer {
  background-color: #111111;
}

.s_tarmez_copyright {
  background-color: #111111 !important;
  border-top: 1px solid #374151;
}

.s_tarmez_copyright .container {
  max-width: 1280px;
}

.s_tarmez_copyright .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.s_tarmez_copyright .text-muted,
.s_tarmez_copyright .o_footer_copyright_name,
.s_tarmez_copyright span,
.s_tarmez_copyright a {
  color: #9CA3AF !important;
}

.s_tarmez_copyright a:hover {
  color: #fff !important;
}

.s_tarmez_copyright .o_brand_promotion {
  color: #9CA3AF;
}

.s_tarmez_copyright .o_brand_promotion a {
  color: #9CA3AF !important;
}

footer#bottom.o_footer {
  background-color: transparent !important;
}

/* ============================================
   HEADER — Brand & Actions
   ============================================ */

header .navbar-brand {
  max-width: 100%;
}

header .navbar-brand.logo img {
  height: 4.5rem;
}

header .navbar-brand img,
header .o_header_logo img {
  max-height: 58px !important;
  width: auto !important;
}

/* Dark pages logo control */
header:has(.tarmez-navbar--inner) .navbar-brand img,
header:has(.tarmez-navbar--inner) .o_header_logo img {
  max-height: var(--tarmez-dark-logo-max-height) !important;
  width: var(--tarmez-dark-logo-width) !important;
  height: auto !important;
  object-fit: contain;
}

.tarmez-navbar .navbar-nav,
.tarmez-navbar .navbar-nav ul,
.tarmez-navbar .navbar-nav li {
  list-style: none !important;
}

.tarmez-navbar .navbar-nav li::marker,
.tarmez-navbar .navbar-nav .nav-item::marker {
  content: '' !important;
}

.tarmez-navbar .o_no_autohide_item > a::before,
.tarmez-navbar .dropdown > a::before {
  content: none !important;
}

/* ============================================
   SHARED BUTTONS
   ============================================ */

#wrapwrap .btn.tarmez-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 0.75rem 1.5rem !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  background-image: none !important;
  transition: background-color .2s ease, color .2s ease !important;
}

#wrapwrap .btn.tarmez-btn.tarmez-btn--teal {
  background-color: #0d9488 !important;
  color: #ffffff !important;
}

#wrapwrap .btn.tarmez-btn.tarmez-btn--teal:hover {
  background-color: #0f766e !important;
  color: #ffffff !important;
}

#wrapwrap .btn.tarmez-btn.tarmez-btn--purple {
  background-color: #7a4f7a !important;
  color: #ffffff !important;
}

#wrapwrap .btn.tarmez-btn.tarmez-btn--purple:hover {
  background-color: #5d3b5d !important;
  color: #ffffff !important;
}

/* Clients section — dark band (main-black lives in theme.css, not on all pages) */
#wrapwrap .s_tarmez_clients.main-black {
  background-color: #161616 !important;
}

/* Footer logo from website settings (same source as header brand) */
#wrapwrap #footer footer a.tarmez-brand-logo img {
  height: 3rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* ============================================
   FOOTER — Nav + contact lists
   ============================================ */

#wrapwrap #footer footer .tarmez-footer-nav-list,
#wrapwrap #footer footer .tarmez-footer-contact-list {
  list-style: none !important;
  padding-left: 0 !important;
  margin-bottom: 0;
}

#wrapwrap #footer footer .tarmez-footer-nav-list li,
#wrapwrap #footer footer .tarmez-footer-contact-list li {
  list-style: none !important;
}

#wrapwrap #footer footer .tarmez-footer-nav-list li::marker,
#wrapwrap #footer footer .tarmez-footer-contact-list li::marker {
  content: '' !important;
}

.tarmez-footer-contact-list li {
  align-items: center !important;
  gap: 0.625rem !important;
}

.tarmez-footer-contact-list li i {
  margin-top: 0 !important;
  line-height: 1;
}

/* Mobile offcanvas: phone link without pill background. */
.o_navbar_mobile .tarmez-header-phone-link {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ============================================
   PAGE HERO SNIPPET (global — used in all inner pages)
   ============================================ */

.s_tarmez_page_hero {
  background: url("/tait_tarmez_theme/static/src/img/dark-background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #161616;
  color: #ffffff;
  padding-top: 7rem;
  padding-bottom: 7rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.s_tarmez_page_hero .tarmez-hero-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  margin-bottom: 1rem;
  color: #ffffff;
}

.s_tarmez_page_hero .tarmez-breadcrumb-trail {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #9ca3af;
  font-size: 0.95rem;
}

.s_tarmez_page_hero .tarmez-breadcrumb-trail a {
  color: #9ca3af;
  text-decoration: none;
  transition: color .2s;
}

.s_tarmez_page_hero .tarmez-breadcrumb-trail a:hover {
  color: #ffffff;
}

.s_tarmez_page_hero .tarmez-breadcrumb-current {
  color: #2dd4bf;
}

/* ============================================
   BREADCRUMBS (RTL)
   ============================================ */

html[dir="rtl"] .hero-bg .tarmez-breadcrumb-trail,
html[lang^="ar"] .hero-bg .tarmez-breadcrumb-trail,
html[dir="rtl"] .tarmez-contact-hero .tarmez-breadcrumb-trail,
html[lang^="ar"] .tarmez-contact-hero .tarmez-breadcrumb-trail,
html[dir="rtl"] nav.tarmez-breadcrumb-trail,
html[lang^="ar"] nav.tarmez-breadcrumb-trail {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.5rem;
  direction: rtl;
  unicode-bidi: isolate;
}

/* ============================================
   FOOTER — LTR alignment
   ============================================ */

html[dir="ltr"] #wrapwrap #footer footer .max-w-7xl > .grid,
html:not([dir="rtl"]) #wrapwrap #footer footer .max-w-7xl > .grid {
  justify-items: start !important;
}

html[dir="ltr"] #wrapwrap #footer footer .max-w-7xl > .grid > div,
html:not([dir="rtl"]) #wrapwrap #footer footer .max-w-7xl > .grid > div {
  text-align: start !important;
}

html[dir="ltr"] #wrapwrap #footer footer .tarmez-brand-logo,
html:not([dir="rtl"]) #wrapwrap #footer footer .tarmez-brand-logo {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html[dir="ltr"] #wrapwrap #footer footer .max-w-7xl > .grid > div .flex.gap-3,
html:not([dir="rtl"]) #wrapwrap #footer footer .max-w-7xl > .grid > div .flex.gap-3 {
  justify-content: flex-start !important;
}

html[dir="ltr"] #wrapwrap #footer footer .tarmez-footer-contact-list li,
html:not([dir="rtl"]) #wrapwrap #footer footer .tarmez-footer-contact-list li {
  justify-content: flex-start !important;
}

html[dir="ltr"] #wrapwrap #footer footer .tarmez-footer-bottom,
html:not([dir="rtl"]) #wrapwrap #footer footer .tarmez-footer-bottom {
  justify-content: flex-start !important;
}

html[dir="ltr"] #wrapwrap #footer footer .tarmez-footer-copyright,
html:not([dir="rtl"]) #wrapwrap #footer footer .tarmez-footer-copyright {
  text-align: left !important;
}

@media (max-width: 767.98px) {
  html[dir="ltr"] #wrapwrap #footer footer .tarmez-footer-copyright,
  html:not([dir="rtl"]) #wrapwrap #footer footer .tarmez-footer-copyright {
    text-align: center !important;
  }
}

/* ============================================
   FOOTER — RTL alignment
   ============================================ */

html[lang^="ar"] #wrapwrap #footer footer .max-w-7xl > .grid,
html[dir="rtl"] #wrapwrap #footer footer .max-w-7xl > .grid {
  justify-items: start !important;
}

html[lang^="ar"] #wrapwrap #footer footer .max-w-7xl > .grid > div,
html[dir="rtl"] #wrapwrap #footer footer .max-w-7xl > .grid > div {
  text-align: start !important;
  width: 100%;
}

html[lang^="ar"] #wrapwrap #footer footer .max-w-7xl > .grid > div > p,
html[dir="rtl"] #wrapwrap #footer footer .max-w-7xl > .grid > div > p {
  text-align: start !important;
}

html[lang^="ar"] #wrapwrap #footer footer .max-w-7xl > .grid > div > h3,
html[dir="rtl"] #wrapwrap #footer footer .max-w-7xl > .grid > div > h3,
html[lang^="ar"] #wrapwrap #footer footer .max-w-7xl > .grid > div ul,
html[dir="rtl"] #wrapwrap #footer footer .max-w-7xl > .grid > div ul {
  text-align: start !important;
}

html[lang^="ar"] #wrapwrap #footer footer .tarmez-brand-logo,
html[dir="rtl"] #wrapwrap #footer footer .tarmez-brand-logo {
  margin-inline-start: 0 !important;
  margin-inline-end: auto !important;
  display: block;
}

html[lang^="ar"] #wrapwrap #footer footer .max-w-7xl > .grid > div .flex.gap-3,
html[dir="rtl"] #wrapwrap #footer footer .max-w-7xl > .grid > div .flex.gap-3 {
  justify-content: flex-start !important;
}

html[lang^="ar"] #wrapwrap #footer footer .tarmez-footer-contact-list li,
html[dir="rtl"] #wrapwrap #footer footer .tarmez-footer-contact-list li {
  justify-content: flex-start !important;
}

html[lang^="ar"] #wrapwrap #footer footer .tarmez-footer-bottom,
html[dir="rtl"] #wrapwrap #footer footer .tarmez-footer-bottom {
  justify-content: flex-start !important;
}

html[lang^="ar"] #wrapwrap #footer footer .tarmez-footer-copyright,
html[dir="rtl"] #wrapwrap #footer footer .tarmez-footer-copyright {
  text-align: start !important;
}

@media (max-width: 767.98px) {
  html[lang^="ar"] #wrapwrap #footer footer .max-w-7xl > .grid,
  html[dir="rtl"] #wrapwrap #footer footer .max-w-7xl > .grid {
    justify-items: start !important;
  }

  html[lang^="ar"] #wrapwrap #footer footer .max-w-7xl > .grid > div,
  html[dir="rtl"] #wrapwrap #footer footer .max-w-7xl > .grid > div {
    text-align: start !important;
  }

  html[lang^="ar"] #wrapwrap #footer footer .tarmez-footer-copyright,
  html[dir="rtl"] #wrapwrap #footer footer .tarmez-footer-copyright {
    text-align: start !important;
  }

  html[lang^="ar"] #wrapwrap #footer footer .tarmez-brand-logo,
  html[dir="rtl"] #wrapwrap #footer footer .tarmez-brand-logo {
    margin-inline-start: 0 !important;
    margin-inline-end: auto !important;
  }
}