/* Additions to the designer's site that live outside site/ so a fresh copy of
   their files can be dropped in without losing them. Built into /web/site-extras.css. */

/* Language switch — sits in the header between the navigation and the booking button,
   inheriting the header's colour so it follows its light/dark states. */
.lang-switch{display:flex;align-items:center;gap:2px;margin-left:auto;font-size:11px;letter-spacing:1.5px}
/* split the free space either side of the navigation, so it keeps sitting between the logo and the buttons */
.site-header .main-nav{margin-left:auto}
.lang-switch a{padding:12px 6px;opacity:.55;border-bottom:1px solid transparent;transition:opacity .2s,border-color .2s}
.lang-switch a:hover{opacity:1}
.lang-switch a[aria-current]{opacity:1;border-bottom-color:currentColor}
.lang-switch+.booking{margin-left:0}
@media(max-width:1000px){.lang-switch{font-size:10px}}
@media(max-width:700px){.lang-switch{font-size:9px;letter-spacing:1px;gap:0}.lang-switch a{padding:10px 4px}}

/* Enquiry form (site/enquiry.js): spam trap kept off-screen, and the send-failure note. */
.aq-hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.aq-error{font-size:11px;line-height:1.6;color:#9b3b2e;margin:-8px 0 18px}
.aq-primary[disabled]{opacity:.6;cursor:progress}
/* the apartment an enquiry is about, when the form is opened from an apartment */
.aq-apartment{display:inline-block;margin:16px 0 0;padding:7px 12px;border:1px solid #d9ddcf;font-size:10px;font-weight:500;letter-spacing:1.6px;text-transform:uppercase;color:#305d49}
.aq-apartment+#aq-intro{margin-top:12px}

/* ---------------------------------------------------------------------------
   Phones: things that sat on top of each other. */
@media(max-width:700px){
  /* The gallery page forces its menu on at every width; on a phone it pushed the
     language switch off the screen. Phones get the same header as the home page. */
  .site-header .main-nav{display:none!important}

  /* The 3D building is drawn behind the page, so chapter text scrolled straight
     across it. A paper backing (same colour as the 3D scene's sky) lets the
     building pass under the text instead; where nothing is behind it, it doesn't show. */
  .spatial-chapter .chapter-copy{position:relative;z-index:1;width:auto;max-width:none;margin:-28px calc(-1 * var(--gutter)) 0;padding:28px var(--gutter) 20px;background:linear-gradient(#e9e7df00,#e9e7df 28px,#e9e7df calc(100% - 20px),#e9e7df00)}

  /* Floating WhatsApp / "find my home" buttons: a little smaller and closer to the
     edge, and out of the way over the contact section and footer, which carry the
     same links (site/enquiry.js sets data-finale). */
  .aq-launcher-dock{width:44px;right:12px;gap:10px;bottom:max(12px,env(safe-area-inset-bottom))}
  .aq-launcher{width:44px;height:44px;padding:10px;transition:background .2s,color .2s,box-shadow .2s,border-color .2s,opacity .25s,visibility .25s}
  .aq-launcher svg{width:21px;height:21px}
  .aq-launcher-dock[data-finale="true"] .aq-launcher{opacity:0;visibility:hidden;pointer-events:none}
}
/* "Built with care": the heading was pinned to the top and the chapter text to the bottom,
   so a long chapter (or the longer Italian/Albanian text) grew up into the heading on
   smaller phones. On phones they now stack, and the section grows instead. */
@media(max-width:760px){
  #quality .quality-stage{display:flex;flex-direction:column;height:auto;padding:75px var(--gutter) 24px}
  #quality .quality-heading,#quality .quality-pages,#quality .quality-nav{position:relative;top:auto;right:auto;bottom:auto;left:auto}
  #quality .quality-heading{margin-bottom:32px}
  #quality .quality-pages{margin-top:auto}
  #quality .quality-nav{margin-top:44px}
}
/* The enquiry popup's photo strip: the close button sat on "DURRËS · ALBANIA" and, in
   Albanian and Italian, on the wrapped slogan. The slogan now sits under the logo on the
   left, on one line per sentence, leaving the corner to the close button. */
@media(max-width:680px){
  #azzure-enquiry .aq-visual{flex:0 0 128px;height:128px;min-height:128px}
  #azzure-enquiry .aq-brand{top:18px}
  #azzure-enquiry .aq-visual-copy{left:24px;right:24px;bottom:14px;width:auto;text-align:left}
  #azzure-enquiry .aq-visual-copy .aq-eyebrow{display:none}
  #azzure-enquiry .aq-visual-copy p{font-size:15px}
}
@media(max-width:400px){#azzure-enquiry .aq-visual-copy{left:19px;right:19px}}