/* Every page with the site header, on phones (up to 767px wide), Ekin's
   mobile design of 16 October 2026: the brand with the account and language
   buttons, a full-width Menu bar that opens the site's own navigation, and a
   slim Schedule Meeting / Call Ekin row at the bottom. The home page adds its
   video top (home-mobile.css), Search Homes its search cards
   (search-mobile.css).

   Each page loads this file for phones only (media="(max-width: 767px)") and
   every rule sits inside the same query, so tablets and computers never see
   it. Rules start at body#sbe-site: the shared styles.css has many
   !important phone rules for the same parts, and an id outranks them all.
   Nothing here turns the header or the row on: a page that hides them (Search
   Homes while drawing on the map, or embedded) still does. */
@media (max-width: 767px) {
  #sbe-site {
    --hm-teal: #063d3c;
    --hm-teal-deep: #042e2d;
    --hm-gold: #d9ac54;
    --hm-cream: #f6f2ea;
    --hm-ink: #0f2a29;
    --hm-gutter: 16px;
    padding-bottom: calc(57px + env(safe-area-inset-bottom)) !important;
  }

  /* ---- Header: brand, account and language; the Menu bar under them ---- */
  #sbe-site .site-header {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: stretch !important;
    gap: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: calc(env(safe-area-inset-top) + 14px) max(var(--hm-gutter), env(safe-area-inset-right)) 12px max(var(--hm-gutter), env(safe-area-inset-left)) !important;
    border: 0 !important;
    background: var(--hm-teal) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    z-index: 20 !important;
  }
  /* Room on the brand's line for the account and language buttons. */
  #sbe-site .site-header .brand {
    flex: 1 1 0;
    min-width: 0;
    margin: 0 !important;
    margin-inline-end: 128px !important;
    padding: 0 !important;
    justify-content: flex-start !important;
    transform: none !important;
  }
  /* The home and search pages carry the brand twice (computers / phones); the other pages once. */
  #sbe-site .site-header .mobile-brand-legacy,
  #sbe-site .site-header .brand:not(:has(.mobile-brand-legacy)) { display: flex !important; align-items: center; gap: 10px !important; min-width: 0; }
  #sbe-site .site-header :is(.mobile-brand-logo, .site-brand-logo) { display: block !important; width: 54px !important; height: 54px !important; flex: 0 0 54px !important; margin: 0 !important; }
  #sbe-site .site-header .brand > .brand-copy { display: block !important; }
  #sbe-site .site-header .brand .brand-copy { min-width: 0; white-space: normal !important; }
  /* The brand on phones (Ekin, 16 October 2026): SOLD BY in white sans-serif,
     EKIN in champagne serif; under it MUCAHIT “MUCA” EKIN in gold over REAL ESTATE
     ADVISOR in white (each language's own title), each on one line. */
  #sbe-site .site-header .brand .brand-copy strong {
    display: block;
    padding: 0 !important;
    border: 0 !important;
    color: #fff !important;
    font-family: "Montserrat", "Avenir Next", "DM Sans", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: .06em !important;
    line-height: 1 !important;
    white-space: nowrap;
    /* The brand reads left to right in Arabic too, spaces and all. */
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
  }
  #sbe-site .site-header .brand .brand-copy strong b { font-weight: 800; margin-inline-end: .3em; }
  #sbe-site .site-header .brand .brand-copy strong span {
    margin-inline-start: .26em;
    color: var(--hm-gold) !important;
    font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
    font-size: 1.42em;
    font-weight: 600;
    letter-spacing: .03em;
    line-height: 0;
  }
  /* The one-line "Mucahit "Muca" Ekin • Real Estate Advisor" stays for computers. */
  #sbe-site .site-header .brand .brand-copy > small:not(.brand-lines) { display: none !important; }
  #sbe-site .site-header .brand .brand-copy > .brand-lines {
    display: block !important;
    margin-top: 7px !important;
    padding: 0 !important;
    border: 0 !important;
  }
  #sbe-site .site-header .brand-lines > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
    line-height: 1.4;
  }
  #sbe-site .site-header .brand-lines .brand-name { color: var(--hm-gold) !important; font-size: 9px; font-weight: 700; letter-spacing: .13em; }
  #sbe-site .site-header .brand-lines .brand-role { margin-top: 1px; color: #fff !important; font-size: 9px; font-weight: 500; letter-spacing: .16em; }
  /* Arabic letters join: no spacing between them. */
  html[lang="ar"] #sbe-site .site-header .brand-lines .brand-role { font-size: 10px; letter-spacing: 0; }
  #sbe-site .site-header .brand .brand-copy strong::after,
  #sbe-site .site-header .brand .brand-copy small::before { display: none !important; }

  /* The account and language buttons stay at the top right (top left in
     Arabic), level with the logo, whether the menu is open or not. */
  #sbe-site .site-header nav > .sbe-account,
  #sbe-site .site-header nav > .sbe-lang {
    position: absolute !important;
    top: calc(env(safe-area-inset-top) + 19px) !important;
    bottom: auto !important;
    left: auto;
    right: auto;
    margin: 0 !important;
    transform: none !important;
  }
  #sbe-site .site-header nav > .sbe-lang { inset-inline-end: max(var(--hm-gutter), env(safe-area-inset-right)) !important; }
  #sbe-site .site-header nav > .sbe-account { inset-inline-end: calc(max(var(--hm-gutter), env(safe-area-inset-right)) + 76px) !important; }
  #sbe-site .site-header .sbe-account-button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border: 1.5px solid var(--hm-gold) !important;
    border-radius: 50% !important;
    background: rgba(4, 46, 45, .6) !important;
    color: var(--hm-gold) !important;
  }
  #sbe-site .site-header .sbe-lang-button {
    width: 68px !important;
    min-width: 68px !important;
    height: 44px !important;
    min-height: 44px !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 8px !important;
    border: 1px solid rgba(246, 242, 234, .32) !important;
    border-radius: 12px !important;
    background: rgba(4, 46, 45, .6) !important;
    color: #fff !important;
  }

  /* The Menu bar (hidden on wider screens by its hidden attribute). */
  #sbe-site .site-menu-toggle {
    display: flex !important;
    flex: 1 0 100%;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    grid-column: 1 / -1;
    margin: 14px 0 0;
    padding: 0 16px;
    border: 1px solid rgba(217, 172, 84, .72);
    border-radius: 12px;
    background: rgba(4, 46, 45, .55);
    color: var(--hm-cream);
    font-family: "Montserrat", "Avenir Next", "DM Sans", Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .02em;
    text-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #sbe-site .site-menu-toggle:focus-visible { outline: 3px solid #f0c46a; outline-offset: 2px; }
  #sbe-site .site-menu-toggle svg { flex: none; width: 24px; height: 24px; }
  #sbe-site .site-menu-toggle .site-menu-chevron { width: 20px; height: 20px; margin-inline-start: auto; color: var(--hm-cream); transition: transform .2s ease; }
  #sbe-site .site-menu-toggle[aria-expanded="true"] .site-menu-chevron { transform: rotate(90deg); }
  html[dir="rtl"] #sbe-site .site-menu-toggle .site-menu-chevron { transform: scaleX(-1); }
  html[dir="rtl"] #sbe-site .site-menu-toggle[aria-expanded="true"] .site-menu-chevron { transform: rotate(90deg); }

  /* The navigation itself: closed, only the account and language buttons
     show; open, Buyers, Sellers, Resources, Search Homes and About in one
     list under the Menu bar, each menu opening in place. */
  #sbe-site .site-header nav {
    display: block !important;
    flex: 1 0 100%;
    grid-column: 1 / -1;
    width: 100%;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    gap: 0 !important;
    font-size: 13px !important;
    letter-spacing: .14em !important;
  }
  #sbe-site .site-header:not(.is-menu-open) nav > :not(.sbe-account):not(.sbe-lang) { display: none !important; }
  #sbe-site .site-header.is-menu-open nav {
    margin-top: 8px !important;
    padding: 4px 0 !important;
    border: 1px solid rgba(217, 172, 84, .38);
    border-radius: 14px;
    background: var(--hm-teal-deep);
    box-shadow: 0 18px 36px -24px rgba(0, 0, 0, .7);
  }
  #sbe-site .site-header.is-menu-open nav > .header-cta { display: none !important; }
  #sbe-site .site-header.is-menu-open nav > .nav-menu,
  #sbe-site .site-header.is-menu-open nav > a:not(.header-cta) {
    display: block !important;
    position: static !important;
    width: auto !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(246, 242, 234, .09) !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }
  #sbe-site .site-header.is-menu-open nav > :is(.nav-menu, a:not(.header-cta)):nth-last-child(1 of :is(.nav-menu, a:not(.header-cta))) { border-bottom: 0 !important; }
  #sbe-site .site-header.is-menu-open nav .nav-menu-toggle,
  #sbe-site .site-header.is-menu-open nav > a:not(.header-cta) {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 52px !important;
    height: auto !important;
    padding: 0 18px !important;
    border: 0;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--hm-cream) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .16em !important;
    line-height: 1.3 !important;
    text-align: start !important;
    text-transform: uppercase !important;
  }
  /* Search Homes stands out in the menu (Ekin, 30 October 2026): gold words on a light gold row with a
     gold line on the left. a.header-search: the row rule above (a:not(.header-cta)) outweighed .header-search. */
  #sbe-site .site-header.is-menu-open nav > a.header-search { border-bottom: 1px solid rgba(246, 242, 234, .09) !important; background: linear-gradient(90deg, rgba(217, 172, 84, .2), rgba(217, 172, 84, .06)) !important; box-shadow: inset 3px 0 0 var(--hm-gold) !important; color: #e2b862 !important; font-weight: 700 !important; }
  #sbe-site .site-header.is-menu-open nav > a.header-search > span { color: var(--hm-gold) !important; transform: none !important; }
  #sbe-site .site-header.is-menu-open nav .nav-menu-toggle[aria-expanded="true"] { color: var(--hm-gold) !important; }
  #sbe-site .site-header.is-menu-open nav .nav-menu-toggle:focus-visible,
  #sbe-site .site-header.is-menu-open nav > a:focus-visible { outline: 2px solid #f0c46a !important; outline-offset: -4px !important; }
  /* A menu's pages open in place, as cards under its name. */
  #sbe-site .site-header.is-menu-open nav .nav-menu-panel:not([hidden]) {
    display: grid !important;
    position: static !important;
    inset: auto !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 2px 12px 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    transform: none !important;
    translate: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    letter-spacing: normal !important;
    text-transform: none !important;
  }
  #sbe-site .site-header.is-menu-open nav .nav-menu-panel::before,
  #sbe-site .site-header.is-menu-open nav .nav-menu-panel::after { display: none !important; }
  #sbe-site .site-header.is-menu-open nav .nav-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 56px;
    padding: 10px 12px !important;
    border: 1px solid rgba(246, 242, 234, .1) !important;
    border-radius: 12px !important;
    background: rgba(246, 242, 234, .05) !important;
    box-shadow: none !important;
    color: var(--hm-cream) !important;
  }
  #sbe-site .site-header.is-menu-open nav .nav-card::before,
  #sbe-site .site-header.is-menu-open nav .nav-card::after { display: none !important; }
  #sbe-site .site-header.is-menu-open nav .nav-card-icon { flex: none; width: 40px !important; height: 40px !important; margin: 0 !important; border-radius: 50% !important; background: rgba(217, 172, 84, .14) !important; color: var(--hm-gold) !important; }
  #sbe-site .site-header.is-menu-open nav .nav-card-copy strong { color: #fff !important; font-size: 14px !important; letter-spacing: .01em !important; }
  #sbe-site .site-header.is-menu-open nav .nav-card-copy strong::after { color: var(--hm-gold) !important; }
  #sbe-site .site-header.is-menu-open nav .nav-card-copy small { color: rgba(246, 242, 234, .72) !important; font-size: 13px !important; letter-spacing: 0 !important; }
  #sbe-site .site-header.is-menu-open nav .nav-card:focus-visible { outline: 2px solid #f0c46a !important; outline-offset: 2px !important; }

  /* ---- Schedule Meeting | Call Ekin ---- */
  #sbe-site .mobile-bar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 30 !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 max(12px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(12px, env(safe-area-inset-left)) !important;
    border: 0 !important;
    border-top: 1px solid rgba(217, 172, 84, .3) !important;
    border-radius: 0 !important;
    background: rgba(4, 46, 45, .95) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    box-shadow: none !important;
  }
  #sbe-site .mobile-bar a {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--hm-cream) !important;
    font-family: "Montserrat", "Avenir Next", "DM Sans", Arial, sans-serif !important;
    font-size: clamp(13.5px, 3.85vw, 15px) !important;
    font-weight: 500 !important;
    letter-spacing: .01em !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-transform: none !important;
    opacity: 1 !important;
    -webkit-tap-highlight-color: transparent;
  }
  /* A thin gold line between the two. */
  #sbe-site .mobile-bar a + a {
    background: linear-gradient(rgba(217, 172, 84, .55), rgba(217, 172, 84, .55)) left center / 1px 30px no-repeat !important;
  }
  html[dir="rtl"] #sbe-site .mobile-bar a + a { background-position: right center !important; }
  #sbe-site .mobile-bar a::before {
    content: "";
    flex: none;
    width: 22px;
    height: 22px;
    background: var(--hm-gold);
    -webkit-mask: var(--hm-icon) center / contain no-repeat;
    mask: var(--hm-icon) center / contain no-repeat;
  }
  #sbe-site .mobile-bar a[href^="https://calendly.com"] {
    --hm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4M8 14h.01M12 14h.01M16 14h.01M8 17.5h.01M12 17.5h.01'/%3E%3C/svg%3E");
  }
  #sbe-site .mobile-bar a[href^="tel:"] {
    --hm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25c1.1.37 2.3.57 3.6.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");
  }
  #sbe-site .mobile-bar a:active { background-color: rgba(217, 172, 84, .12) !important; }
  #sbe-site .mobile-bar a:focus-visible { outline: 2px solid var(--hm-gold) !important; outline-offset: -5px !important; }

  /* The Ekin Collection's heading (home page and Search Homes) in its own
     serif, its lines of even length with a little more air between them
     (Ekin, 16 October 2026): "Exclusive Listings and / Open Houses". */
  #sbe-site .ekin-collection h2 {
    line-height: 1.16;
    text-wrap: balance;
  }

  @media (prefers-reduced-motion: reduce) {
    #sbe-site .site-menu-toggle .site-menu-chevron { transition: none; }
  }
}