/* Travel with Lizzy — site styles */

/* ===== Theme tokens ===== */
:root{
  --bg:#EEF2F7;
  --panel:#FFFFFF;
  --panel-tint:#F4EFEC;
  --line:#E3E7F0;

  --text:#2F2F31;
  --muted:#7E7A78;

  --accent:#6B79A5;      /* legacy slate blue (kept for future needs) */
  --accent-ink:#FFFFFF;

  --warn:#C06A50;        /* terracotta = main brand accent */

  --radius:16px;
  --shadow:0 14px 36px rgba(25,34,50,.08);
  --max:900px;
}

/* ===== Base ===== */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg, var(--bg), #F8FAFD 60%) fixed;
}

/* Global link colour = terracotta */
a{
  color:var(--warn);
  text-decoration:underline;
  text-underline-offset:2px;
}
a:hover{ color:#a9523d; } /* slightly darker terracotta */

/* ===== Layout & cards ===== */
.wrap{ max-width:var(--max); margin:auto; padding:20px; }

.card{
  max-width:var(--max);
  width:100%;
  margin-left:auto;
  margin-right:auto;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* ===== Header ===== */
header{ display:flex; align-items:center; justify-content:center; padding:16px; }
header img.logo{ height:90px; width:auto; }

/* ===== Hero ===== */
.hero{
  padding:28px 24px;
  background:linear-gradient(180deg, var(--panel-tint) 0%, #fff 100%);
  border:1px solid var(--line);
}
.hero h2{ color:var(--warn); }

h1{ margin:.2em 0; font-size:clamp(26px,4vw,40px); line-height:1.2; }
h2{ margin:.2em 0 .4em; font-size:clamp(24px,3.6vw,34px); line-height:1.2; }
.muted{ color:var(--muted); }

.section-title{
  grid-column:1 / -1;
  font-weight:800;
  font-size:18px;
  margin:8px 0 2px;
  color:var(--text);
}

/* ===== Form ===== */
.form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  padding:20px;
}
.full{ grid-column:1 / -1; }

label{
  font-weight:600;
  margin-bottom:6px;
  display:block;
}

input, select, textarea, .msg{
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

input, select, textarea{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  outline:none;
  font-size:16px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--warn);
  box-shadow:0 0 0 3px rgba(192,106,80,.18);
}

.note{ margin-top:6px; font-size:13px; color:var(--muted); }

textarea{ resize:vertical; min-height:120px; }

.checkline{ display:flex; gap:10px; align-items:flex-start; }
.checkline input{ width:auto; margin-top:3px; }

:focus-visible{
  outline:3px solid rgba(192,106,80,.35);
  outline-offset:2px;
}

/* ===== Buttons & messages ===== */
.actions{
  grid-column:1 / -1;
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:20px;
}

.btn{
  border:none;
  cursor:pointer;
  font-weight:700;
  padding:12px 16px;
  border-radius:12px;
  background:var(--warn);
  color:var(--accent-ink);
  transition:filter .15s ease, transform .15s ease;
}
.btn:hover{ filter:brightness(.95); transform:translateY(-1px); }
.btn:active{ transform:none; }
.btn[disabled]{ opacity:.7; cursor:not-allowed; transform:none; }

/* Secondary outline button (global) */
.btn.secondary{
  background:#fff;
  color:var(--text);
  border:1px solid var(--line);
  font-weight:600;
}
.btn.secondary:hover{ background:#f9f9f9; }

/* Messages (placed near buttons) */
.msg{ display:none; margin:14px 20px; padding:12px; border-radius:12px; font-weight:600; }
.ok{  background:#EAF6F0; border:1px solid #CDE7D7; color:#0E6A3B; }
.err{ background:#FBEEEC; border:1px solid #EBCFC8; color:var(--warn); }

/* ===== Hidden helpers ===== */
.hidden-iframe{ position:absolute; left:-9999px; width:1px; height:1px; border:0; }
.hp{ display:none; }

/* ===== Footer ===== */
.footerBar{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  column-gap:20px;
  padding:16px 20px;
}

/* Left: email only (Privacy lives in footer-bottom) */
.footerBar .left{
  justify-self:start;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  white-space:nowrap;
}
.footerBar .left a{
  font-weight:600; color:var(--text); text-decoration:none;
}
.footerBar .left a:hover{ color:var(--warn); text-decoration:underline; }

/* Middle: Instagram */
.footerBar .middle{ justify-self:center; }
.footerBar .middle img{
  height:32px; /* larger */
  width:auto;
  transition:opacity .2s ease;
}
.footerBar .middle img:hover{ opacity:.85; }

/* Right: ATOL + ABTA badges */
.footerBar .right{
  justify-self:end;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; white-space:nowrap;
}
.footerBar .right img{ height:44px; width:auto; } /* larger */

/* Footer bottom bar */
.footer-bottom{
  text-align:center;
  font-size:13px;
  color:var(--muted);
  padding:12px 8px;
  background:#f9f9f9;
  border-top:1px solid var(--line);
}
.footer-bottom a{
  color:var(--warn);
  text-decoration:underline;
  text-underline-offset:2px;
}

/* ===== Responsive ===== */
@media (max-width:780px){
  header img.logo{ height:70px; }

  .form{ grid-template-columns:1fr; }

  .footerBar{
    grid-template-columns:1fr;
    row-gap:16px;
    text-align:center;
    padding-bottom:24px;
  }
  .footerBar .left,
  .footerBar .middle,
  .footerBar .right{
    justify-content:center;
    justify-self:center;
  }
  .footerBar .middle img{ height:30px; } /* larger than before */
  .footerBar .right img{ height:40px; }  /* larger than before */
}