/* Shared Lasangnon site header.
   Edit this file to change the menu bar, logo, navigation sizing,
   spacing, margins, and responsive behavior across the site. */

@font-face{
  font-family:"Weidemann";
  src:url("../fonts/Weidemann-Medium.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:block;
}
@font-face{
  font-family:"Weidemann";
  src:url("../fonts/Weidemann-Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:block;
}

.topbar{
    position:relative;
    z-index:5;
    height:35px;
    background:url("../images/menu_bar.jpg") center center/cover no-repeat;
    display:flex;
    align-items:center;
    justify-content:flex-end;
  }

.nav{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:clamp(19.8px,calc(3.457vw - 4.4px),44px);
    width:calc(100% - clamp(150px,calc(7.143vw + 100px),250px));
    padding-right:clamp(40px,calc(6.286vw - 4px),84px);
    white-space:nowrap;
  }

.nav a{
    flex:0 1 auto;
    min-width:0;
    color:#FBEFAB;
    text-decoration:none;
    font-family:"Weidemann",Helvetica,Arial,sans-serif;
    font-weight:500;
    font-size:clamp(13.6px,calc(1.21vw + 5.13px),22.08px);
    line-height:1;
  }

.nav a:hover{color:#fff}
.nav a.active{color:#fff}

  .hero{
    position:relative;
    min-height:650px;
    height:max(650px,54.75vw);
    background-image:url("images/hero_property.jpeg");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center top;
  }

.logo{
    position:absolute;
    z-index:10;
    width:clamp(137.5px,calc(8.0146vw + 81.4px),193.6px);
    height:clamp(137.5px,calc(8.0146vw + 81.4px),193.6px);
    left:clamp(25px,calc(0.571vw + 21px),29px);
    top:10px;
    object-fit:contain;
    filter:drop-shadow(3px 5px 3px rgba(0,0,0,.35));
  }

/* Phone portrait navigation.
   The main navigation remains unchanged in landscape/horizontal layouts.
   The hamburger is part of the shared header, so it appears on every page. */
.phone-menu-toggle,
.phone-menu{
  display:none;
}

@media (max-width:650px) and (orientation:portrait){
  .topbar{
    justify-content:flex-end;
    height:35px;
  }

  .topbar .nav{
    display:none;
  }

  .phone-menu-toggle{
    display:flex;
    position:absolute;
    z-index:30;
    top:8px;
    right:12px;
    width:22.4px;
    height:18.9px;
    padding:2px 1.4px;
    border:0;
    background:transparent;
    flex-direction:column;
    justify-content:space-between;
    cursor:pointer;
  }

  .phone-menu-toggle span{
    display:block;
    width:19.6px;
    height:2.1px;
    background:#FBEFAB;
    box-shadow:0 1px 2px rgba(0,0,0,.45);
    transition:transform .2s ease, opacity .2s ease;
  }

  .phone-menu-toggle.open span:nth-child(1){
    transform:translateY(6.3px) rotate(45deg);
  }

  .phone-menu-toggle.open span:nth-child(2){
    opacity:0;
  }

  .phone-menu-toggle.open span:nth-child(3){
    transform:translateY(-6.3px) rotate(-45deg);
  }

  .phone-menu{
    display:flex;
    position:absolute;
    z-index:25;
    top:35px;
    right:0;
    width:161px;
    padding:12px 0;
    flex-direction:column;
    background:rgba(71,94,62,.80);
    border-radius:0 0 10px 10px;
    box-shadow:0 4px 12px rgba(0,0,0,.35);
    transform:translateY(-8px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }

  .phone-menu.open{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:opacity .2s ease, transform .2s ease;
  }

  .phone-menu a{
    color:#FBEFAB;
    text-decoration:none;
    font-family:"Weidemann",Helvetica,Arial,sans-serif;
    font-size:19px;
    line-height:1;
    padding:13px 22px;
    text-align:right;
  }

  .phone-menu a:hover,
  .phone-menu a.active{
    color:#fff;
  }

  .phone-menu a:hover{
    background:rgba(255,255,255,.08);
  }
}