/* ===================== BraVeBo — main.css (clean) ===================== */
/* Design tokens */
:root{
  --text:#222; --muted:#888; --bg:#f5f5f5; --card:#fff;
  --brand-red:#b11e1e; --brand-red-dark:#8e1717;
  --brand-green:#25D366; --brand-green-dark:#1ebe5d;
  --brand-blue:#0A66C2;  --brand-blue-dark:#084d92;
  --radius:.75rem; --shadow:0 1px 8px rgba(0,0,0,.06);
  --shadow-hover:0 4px 16px rgba(177,30,30,.35);
}
:root{ color-scheme: light dark; }

/* Base */
html,body{height:100%}
*{box-sizing:border-box}
body{
  margin:0; padding:1rem;
  font-family:Roboto, Arial, sans-serif; line-height:1.5;
  background:var(--bg); color:var(--text);
}

/* Page containers */
header,main,footer{max-width:1000px; margin:0 auto}
header{ text-align:center; padding-top:2.5rem }
header img{ display:block; margin:0 auto .625rem; max-width:100%; height:auto }

/* Sections / cards */
.section{
  background:var(--card); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1rem; margin-top:.75rem;
  overflow:hidden; /* keep content inside rounded corners */
}
.section--top{ margin-top:0; padding-top:1rem }

/* Headings & titles */
h1,h2,h3{font-weight:700}
h1,h2{color:var(--brand-red)}
h2{margin:0 0 .5rem}
h3{margin:.75rem 0 .4rem; color:var(--text)}
.bravebo-title{ margin:1rem 0 .25rem; color:var(--brand-red); font-size:1.25rem }
.bravebo-subtitle,.bravebo-claim{ font-weight:700; color:var(--brand-red); font-size:1.125rem; margin:.25rem 0 }
.bravebo-claim{ margin-top:1rem }
.bravebo-services-line{ margin:.3125rem 0 1.5625rem; font-weight:700; color:var(--brand-red); font-size:.9375rem }

/* Language switcher */
.language-switcher{ margin:0 0 1rem auto; width:fit-content }
.language-switcher a{
  display:inline-block; padding:.375rem .625rem; border-radius:.5rem;
  background:var(--brand-red); color:#fff; font-weight:700; text-decoration:none;
  box-shadow:0 1px 4px rgba(0,0,0,.15);
  transition:background-color .25s, box-shadow .25s, transform .15s;
}
.language-switcher a:hover{ background:var(--brand-red-dark) }
.language-switcher a:focus-visible{ outline:2px solid #fff; outline-offset:2px; box-shadow:0 0 0 3px rgba(177,30,30,.6) }

/* Buttons */
a.button, a.button:link, a.button:visited,
button.button, input[type="submit"].button{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; max-width:min(320px, 92vw);
  margin:0 auto; padding:.875rem 1rem; min-height:48px;
  text-align:center; font-size:1rem; border-radius:.625rem;
  background:var(--brand-red); color:#fff; font-weight:700;
  text-decoration:none; cursor:pointer; border:0;
  transition:background-color .25s, box-shadow .25s, transform .15s;
}
a.button:hover,
button.button:hover,
input[type="submit"].button:hover{ background:var(--brand-red-dark); box-shadow:var(--shadow-hover); transform:translateY(-1px) }
a.button:active,
button.button:active,
input[type="submit"].button:active{ transform:translateY(0) }
a.button:focus-visible,
button.button:focus-visible,
input[type="submit"].button:focus-visible{ outline:2px solid #fff; outline-offset:2px; box-shadow:0 0 0 3px rgba(177,30,30,.6) }

/* Keep Contact buttons full width */
:where(.contact-actions) .button{ max-width:none; margin:0 }

/* Color variants */
a.button.whatsapp{ background:var(--brand-green) }
a.button.whatsapp:hover{ background:var(--brand-green-dark) }
a.button.mail{ background:var(--brand-blue) }
a.button.mail:hover{ background:var(--brand-blue-dark) }

/* Inline exception */
a.button.button--inline{
  display:inline-block; width:auto; min-height:auto;
  padding:.375rem .75rem; font-size:.875rem; border-radius:.5rem;
}

/* Generic button group */
.button-actions{
  display:flex; flex-direction:column; gap:.625rem;
}
.button-actions .button{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; padding:.875rem 1rem; min-height:48px;
  text-align:center; font-size:1rem; border-radius:.625rem;
  white-space:normal; text-wrap:balance;
}

/* Contact section */
.section.contact{ padding:1.25rem; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:1rem; }
.section.contact h2{ margin:0 0 .75rem; font-weight:700; display:flex; align-items:center; gap:.5rem; }
.contact-info p{ margin:.25rem 0; }

/* Icons inside buttons */
.button *{ color:inherit; fill:currentColor }

/* Lists */
ul{ padding-left:1.125rem }
.section ul{ margin:.75rem 0 1rem; padding-left:1.25rem }
.section li{ margin:.55rem 0 }

/* Contact actions */
.contact-actions{ display:flex; flex-direction:column; gap:.625rem; margin-bottom:1rem; }
.contact-actions .button{ display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; padding:.875rem 1rem; min-height:48px; text-align:center; font-size:1rem; border-radius:.625rem; white-space:normal; text-wrap:balance; }
.contact-actions .button.mail{ overflow-wrap:anywhere; word-break:break-word; hyphens:auto }

/* Footer */
footer{ text-align:center; color:var(--muted); font-size:.9em; margin-top:1.5rem; padding-bottom:1rem }
.site-footer{ text-align:center; font-size:.9rem; color:#777; padding:2em 1em; background:#f9f9f9; border-top:1px solid #ddd }
.site-footer strong{ color:var(--brand-red); display:block; margin-bottom:.3em }

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

/* ===================== Responsive ===================== */
@media (min-width:600px){
  body{ padding:1.5rem }
  .section{ padding:1.25rem; margin-top:1rem }
  .bravebo-title{ font-size:1.625rem }
  .bravebo-claim{ font-size:1.375rem }
  .contact-actions{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.75rem; align-items:stretch; }
}
@media (min-width:992px){
  body{ padding:2.5rem 1.25rem }
  header{ padding-top:3.75rem }
  .section{ padding:1.5625rem; margin-top:1.25rem }
  .section ul{ max-width:90ch }
  .bravebo-title{ font-size:1.875rem }
  .bravebo-subtitle,.bravebo-claim{ font-size:1.5rem }
  .bravebo-claim{ margin-top:1.5rem }
}
@media (min-width:600px){
  .button-actions{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:.75rem; align-items:stretch; }
}

/* ===== Media grids ===== */
.media-grid{ display:grid; grid-template-columns:1fr; gap:.75rem; align-items:start; }
@media (min-width:600px){
  .media-grid--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .media-grid--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
.media-grid__item{ min-width:0; }
.media-grid__item img,.media-grid__item video,.media-grid__item picture,.media-grid__item canvas{ display:block; width:100%; height:auto; max-width:100%; border-radius:.375rem; }
.media-grid__item figure{ margin:0; }
.media-grid__item figcaption{ color:#888; font-size:.95em; text-align:center; margin-top:.25rem; }
.section figure,.section p > img{ max-width:100%; }
.section figure img,.section p > img{ max-width:100%; height:auto; display:block; }

/* ===== Image sizing helpers ===== */
img.content-img--sm{ max-width:240px!important; }
img.content-img--md{ max-width:420px!important; }
img.content-img--lg{ max-width:720px!important; }

/* ===== Contact form ===== */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
}
.form-grid .field { display: flex; flex-direction: column; min-width: 0; }
.form-grid .field-span-2 { grid-column: 1 / -1; }
.form-grid label { font-weight: 600; margin-bottom: .35rem; }
.form-grid textarea { min-height: 8rem; resize: vertical; }
.form-grid .actions { display: flex; gap: .5rem; }

.form-grid input,
.form-grid select,
.form-grid textarea {
  padding: .7rem .85rem;
  border: 1px solid #d7d7d7;
  border-radius: .6rem;
  background: #fff;
  color: var(--text);
  outline: none;

  /* iOS: prevent zoom and keep legible */
  font-size: 16px;
  line-height: 1.4;
  min-height: 44px; /* Apple HIG touch target */
}

/* iOS can still zoom on <select> unless forced */
.form-grid select {
  min-height: 48px;   /* aligns with buttons */
  line-height: 1.3;
  font-size: 16px !important; /* bulletproof for iOS */
}

/* iOS also considers placeholder size */
.form-grid input::placeholder,
.form-grid textarea::placeholder {
  font-size: 16px;
  opacity: .7;
}

/* Buttons in the form — match size so nothing looks smaller */
.form-grid button,
.form-grid .button {
  font-size: 16px;
  line-height: 1.4;
  min-height: 48px;
}

/* Focus states */
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  border-color: var(--brand-red);
  box-shadow: 0 0 0 3px rgba(177,30,30,.15);
}

/* Error state */
.field-error{ margin-top:.35rem; font-size:.9rem; line-height:1.3; color:var(--brand-red); font-weight:600; }
.form-grid .has-error label{ color:var(--brand-red); }
.form-grid .has-error input,
.form-grid .has-error select,
.form-grid .has-error textarea{
  border-color:var(--brand-red);
  box-shadow:0 0 0 3px rgba(177,30,30,.15);
  animation: bravebo-shake .32s ease-out 1;
}
@keyframes bravebo-shake{
  10%,90%{transform:translateX(-1px);}
  20%,80%{transform:translateX(2px);}
  30%,50%,70%{transform:translateX(-4px);}
  40%,60%{transform:translateX(4px);}
}

/* Mobile stacking */
@media (max-width:700px){
  .form-grid{ grid-template-columns:1fr; }
  .form-grid .field-span-2, .form-grid .actions{ grid-column:auto; }
}


/* Notices */
.notice{ padding:.65rem .85rem; border-radius:.6rem; margin:.5rem 0 1rem; font-weight:600; }
.notice.error{ background:rgba(177,30,30,.08); border:1px solid var(--brand-red); color:var(--brand-red); }
.notice.success{ background:rgba(16,185,129,.08); border:1px solid #10b981; color:#059669; }

/* ===================== Dark mode ===================== */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#111; --text:#e6e6e6; --card:#181818; --muted:#bdbdbd;
    --brand-red:#b11e1e; --brand-red-dark:#9b1919;
  }
  body{ background:var(--bg); color:var(--text); }
  .section{ box-shadow:0 1px 8px rgba(0,0,0,.4) }
  .language-switcher a{ box-shadow:none }
  .site-footer{ background:#151515; border-top-color:#222; color:var(--muted) }
  .section, .service-card, .setting-card{ background:var(--card); box-shadow:0 1px 8px rgba(0,0,0,.4) }
  .form-grid input,.form-grid select,.form-grid textarea{ background:#121212; border-color:#444; color:var(--text); }
  .form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{ border-color:var(--brand-red); box-shadow:0 0 0 3px rgba(177,30,30,.22); }
  .notice.error{ background:rgba(177,30,30,.15); border-color:var(--brand-red); color:var(--brand-red); }
  .notice.success{ background:rgba(16,185,129,.15); border-color:#10b981; color:#34d399; }
}

/* ===================== Reduced motion ===================== */
@media (prefers-reduced-motion:reduce){
  .language-switcher a, a.button, button.button, input[type="submit"].button{
    transition:none; transform:none!important;
  }
}

.contact-title {
  margin: 0 0 1rem;
  font-size: 1.6rem;
  color: var(--brand-red); /* same as other h2 */
  text-align: center;      /* optional: centers the text */
}

.contact-link {
  color: inherit;            /* inherits brand-red from h2 */
  text-decoration: none;     /* no underline at rest */
  font-weight: 700;
  padding: .1rem .3rem;      /* tiny padding so glow has space */
  border-radius: .25rem;     /* soft corners for glow */
  transition: text-decoration .2s, box-shadow .25s, color .25s;
}

.contact-link:hover {
  text-decoration: underline;
  color: var(--brand-red-dark); /* slightly darker on hover */
  box-shadow: 0 0 12px rgba(177,30,30,.55); /* glow around text */
}

/* Stack tables on small screens (opt-in via .table--stack) */
@media (max-width:640px){
  .section .table.table--stack{ display:block; table-layout:auto; min-width:0 }
  .section .table.table--stack thead{ display:none }
  .section .table.table--stack tbody{ display:block }
  .section .table.table--stack tr{ display:block; border-top:1px solid #e5e5e5; padding:8px 0 }
  .section .table.table--stack td{
    display:grid; grid-template-columns:44% 56%; gap:8px; padding:6px 0;
  }
  .section .table.table--stack td::before{
    content:attr(data-th); font-weight:700; color:var(--text);
  }
  /* If a cell lacks a header label, don’t show an empty before */
  .section .table.table--stack td:not([data-th]), 
  .section .table.table--stack td[data-th=""] { display:block }
  .section .table.table--stack td[data-th=""]::before{ content:none }
}

/* Content tables base */
.section .table-wrap{ margin:1rem 0; overflow-x:auto; -webkit-overflow-scrolling:touch }
.section .table{ width:100%; border-collapse:collapse; table-layout:fixed; min-width:520px }
.section .table th,
.section .table td{
  padding:10px 12px; vertical-align:top; text-align:left;
  white-space:normal; word-break:break-word; overflow-wrap:anywhere;
  hyphens:auto; -webkit-hyphens:auto;
}
.section .table thead th{ font-weight:700 }