/* ===========================
   RESET BÁSICO & TIPOGRAFIA
   =========================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root{
  --accent: #f5a623;     /* laranja do layout */
  --text: #ffffff;
  --muted: rgba(255,255,255,0.85);
  --max-width: 600px;    /* largura do bloco de conteúdo */
}

/* Fonte base (pode substituir por import/Google Fonts se quiser) */
html,body{
  height:100%;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color: var(--text);
  background-color: #0b0b0b;
}

.sr-only{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ===========================
   LAYOUT GERAL (desktop first)
   - body é coluna flex: header / main-wrapper / footer
   - main-wrapper preenche o espaço e alinha conteúdo verticalmente ao centro e à direita
   =========================== */
body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  background-image: url("assets/background-desktop.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Header (vazio por enquanto) */
.site-header{
  height: 0; /* sem altura visível, só para semântica */
}

/* Main wrapper: preenche o espaço entre header e footer */
.main-wrapper{
  flex:1 0 auto;
  display:flex;
  align-items: center;       /* centraliza verticalmente */
  justify-content: flex-end; /* empurra o conteúdo para direita */
  padding: 0 40px;           /* espaço lateral para "respirar" */
}

/* Conteúdo principal (bloco encostado à direita) */
.container{
    max-width: var(--max-width);
    width: 100%;
    right: 5%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 26px;
    position: absolute;
}

/* Logo */
.logo{
  width:100%;
  max-width:420px;
  height:auto;
  display:block;
  margin-bottom:20px;
  -webkit-user-drag: none;
}

/* Headline e textos */
.headline{
  font-size:28px;
  line-height:1.15;
  color: var(--accent);
  font-weight:600;
  margin-bottom:12px;
}

.address,
.hours{
  font-size:18px;
  color: var(--muted);
  margin-bottom:6px;
}

/* CONTACTS: organiza em coluna alinhada à direita (desktop) */
.contacts{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:18px;
  align-items:flex-end;
}

/* item de contato */
.contact-item{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--text);
  font-size:18px;
  transition:opacity .18s ease, transform .12s ease;
}

.contact-item:hover,
.contact-item:focus{
  opacity:0.92;
  transform: translateX(-2px);
  outline: none;
}

/* icones */
.icon{
  width:28px;
  height:28px;
  display:inline-block;
  flex: 0 0 28px;
}

/* footer: sempre no final */
.site-footer{
  flex-shrink:0;
  width:100%;
  background: rgba(0,0,0,0.26); /* leve sobreposição para leitura */
  text-align:center;
  padding:16px 12px;
  font-size:14px;
  color: rgba(255,255,255,0.85);
}

/* ===========================
   RESPONSIVO (mobile-first adjustments)
   Mobile: centraliza conteúdo vertical/horizontal e troca background
   =========================== */
@media (max-width: 768px){
  body{
    background-image: url("assets/background-mobile.jpg");
  }

  .main-wrapper{
    justify-content: center;  /* centro horizontal */
    align-items: center;      /* centro vertical */
    padding: 20px;
  }

  .container{
    align-items: center;
    text-align: center;
    padding: 10px 0;
    position: absolute;
    top: 5%;
  }

  .logo{
    max-width:320px;
    margin-bottom:16px;
  }

  .headline{
    font-size:20px;
    margin-bottom:8px;
  }

  .address,
  .hours{
    font-size:15px;
  }

  .contacts{
    flex-direction:column;
    align-items:center;
    gap:12px;
    margin-top:14px;
  }

  .contact-item{
    font-size:16px;
  }

  .icon{
    width:24px;
    height:24px;
  }
}

/* ===========================
   Acessibilidade visual (foco)
   =========================== */
.contact-item:focus-visible{
  outline: 3px solid rgba(245,166,35,0.2);
  outline-offset: 3px;
}