/*
  assets/css/custom.css — cleaned and reorganized
  Purpose: visual overrides and layout tweaks for the Tineke Meyer site
*/

:root {
  --header-start: #f36b7a;
  --header-end: #e8a78a;
  --accent: #f35858;
  --accent-soft: #f7b6a6;
  --muted: #52575c;
  --bg: #fbf6f6;
}

/* Base */
body {
  background: linear-gradient(180deg, var(--bg) 0%, #f5f7fa 100%);
  color: var(--muted);
}

/* Header */
#header {
  display: flex;
  align-items: center;
  justify-content: center; /* center nav */
  padding: 1.25rem 1.5rem 1rem 1.5rem; /* more top space so nav sits lower */
  min-height: 64px;
  background: transparent; /* let hero gradient show through */
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10005;
}

#logo a { font-weight: 700; color: rgba(255,255,255,0.95); letter-spacing: 2px }
#nav { display:flex; justify-content:center; width:100%; }
#nav ul { display:flex; gap:1rem; align-items:center; background: rgba(0,0,0,0.08); padding:0.6rem 1.1rem; border-radius:10px; box-shadow: 0 4px 18px rgba(0,0,0,0.10); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.06) }
#nav a { padding:0.4rem 0.7rem; border-radius:6px; color: #fff; font-size:0.95rem; text-shadow: 0 1px 0 rgba(0,0,0,0.25) }
#nav a:hover, #nav a:focus { background: rgba(255,255,255,0.12); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.35) }

/* ensure nav doesn't hug the very top of the viewport on small screens */
@media (max-width:820px) {
  #header { padding-top: 0.9rem; padding-bottom: 0.6rem }
  #nav ul { padding: 0.45rem 0.8rem }
}

/* Hero */
#home { padding:6rem 1.5rem 6rem 1.5rem; text-align:center; background: linear-gradient(90deg, var(--header-start) 0%, var(--header-end) 100%); color: #fff; }
#home header h2 { font-size:2.6rem; color:#fff; margin-bottom:0.4rem }
#home .lead { max-width:920px; margin:1rem auto 1.5rem; font-size:1.05rem; color: rgba(255,255,255,0.95) }

/* make the hero visually larger on wide screens */
@media (min-width:1100px){
  #home{padding-top:8rem;padding-bottom:8rem}
}

/* Buttons */
.button, input[type=submit] {
  background: var(--accent);
  color: #fff;
  padding: 0.65rem 1rem;
  border-radius: 6px;
  border: none;
  box-shadow: 0 6px 14px rgba(243,88,88,0.18);
  cursor: pointer;
}
.button:hover, input[type=submit]:hover { transform: translateY(-2px) }

/* Layout helpers */
.wrapper, section.container { padding:2rem 1.5rem }
.header.major p { color: var(--accent) }

/* Contact / Form area */
#contact { background: transparent; display:flex; flex-direction:column; align-items:center }
#contact header.major { text-align:center }
#contact .form-card { width:100%; max-width:1100px; background:#fff; padding:0.8rem 0.9rem; border-radius:10px; box-shadow:0 10px 30px rgba(227,128,113,0.04); margin:0 auto 1.25rem auto }
#contact .form-card form { max-width:100% }

.small { font-size:0.875rem; color:#6d7676 }

/* Form inputs: normalize appearance for all fields in contact card */
#contact .form-card input[type="text"],
#contact .form-card input[type="email"],
#contact .form-card input[type="tel"],
#contact .form-card textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 0.75rem 0.9rem;
  border-radius: 6px;
  border: 1px solid #ececec;
  background: #fbfcfd;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
  font-size: 15pt;
  line-height: 1.75em;
  color: var(--muted);
}
#contact .form-card textarea { min-height: 140px }

/* Placeholder colors */
#contact .form-card ::-webkit-input-placeholder { color: #9ea6ab }
#contact .form-card ::-moz-placeholder { color: #9ea6ab }
#contact .form-card :-ms-input-placeholder { color: #9ea6ab }
#contact .form-card ::placeholder { color: #9ea6ab }

/* Focus */
#contact .form-card input:focus, #contact .form-card textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(243,88,88,0.06), inset 0 1px 2px rgba(0,0,0,0.03);
  border-color: rgba(243,88,88,0.25);
}

/* Row / column adjustments for the form */
.form-card .row.gtr-50 > div { display:block; padding:0 0.5rem }
.form-card .row.gtr-50 input[type="text"],
.form-card .row.gtr-50 input[type="email"],
.form-card .row.gtr-50 input[type="tel"] { margin-bottom:0.6rem; width:100% }
.form-card .row.gtr-50 textarea { margin-top:0.4rem }

/* Horizontal padding around the card; inner columns add gutter via padding above */
.form-card { padding-left:0.6rem; padding-right:0.6rem; padding-top:0.9rem; margin-top:0; position:relative; overflow:hidden }
.form-card .row.gtr-50 { margin:0 }

/* Actions (buttons) centered */
.form-card .actions { display:flex; justify-content:center; gap:1rem; padding:1rem 0 0 0 }
.form-card .actions li { list-style:none }
.form-card .actions input[type="submit"], .form-card .actions input[type="reset"] {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.75rem 1.3rem;
  min-height:56px;
  border-radius:8px;
  font-size:1.05rem;
  line-height:1;
  vertical-align:middle;
}
.form-card .actions input[type="reset"]{background:#fff}

/* Praxis card */
.praxis-card { max-width:900px; margin:0.8rem auto }
.praxis-card h3 { text-align:left }

/* Insurance / consent */
.insurance-group { margin:0.5rem 0 1rem 0 }
.insurance-group .label-block { display:block; margin-bottom:0.6rem; color:#6d6d6d; font-weight:600 }
.insurance-group label { display:inline-block; color:#3b3b3b; font-size:1rem }
.insurance-group input[type=checkbox] { margin-right:0.5rem; transform:scale(1.05) }

input[type=checkbox] { -webkit-appearance: checkbox; -moz-appearance: checkbox; appearance: checkbox; cursor: pointer; width:1.05em; height:1.05em; vertical-align: middle }

input[type=radio] { -webkit-appearance: radio; -moz-appearance: radio; appearance: radio; cursor: pointer; width:1.05em; height:1.05em; vertical-align: middle; margin-right:.45rem; accent-color: var(--accent) }

.consent-block { max-width:920px; margin:1.25rem auto 1rem auto; text-align:center; color:#6b6b6b }
.consent-block p { margin-bottom:1rem; line-height:1.6 }
.consent-block label { display:inline-flex; align-items:center; gap:0.6rem }

/* Inline insurance group (inline with name/email) */
.insurance-row { display:flex; justify-content:center; width:100%; margin:0.5rem 0 1rem 0 }
.insurance-group-inline { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; justify-content:center }
.insurance-group-inline .label-block { font-weight:600; margin-right:0.5rem; color:#555 }
.insurance-group-inline .ins-label { display:inline-flex; align-items:center; gap:0.5rem; color:#444; font-size:0.95rem; padding:0.25rem 0.5rem; border-radius:6px; cursor:pointer }
.insurance-group-inline .ins-label:hover { background: rgba(243,88,88,0.04) }

/* Responsive */
@media (max-width:820px) {
  #home { padding:3rem 1rem }
  #nav ul { flex-wrap:wrap; gap:.6rem }
  .col-6 { width:100% !important }
  .insurance-group-inline { gap:0.6rem }
  /* larger message box on mobile */
  #contact .form-card textarea { min-height: 220px }
}

/* Minor helpers */
#contact .label-block { text-align:center }

/* === Full-bleed sections: span the viewport width (remove white side gutters) === */
html, body { overflow-x: hidden; }

/* Apply negative-margin technique so sections inside a centered container
   visually span the full viewport while their inner .container/.wrapper
   remains centered. This overrides the template's centered page wrapper. */
#home, #contact {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  box-sizing: border-box;
  /* keep the same content padding as before but applied to viewport edges */
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

/* Increase side padding on wide screens so content keeps breathing room */
@media (min-width:1100px){
  #home, #contact { padding-left: 6rem; padding-right: 6rem }
}

/* Ensure inner centered cards keep their max-width and remain centered */
#contact .form-card { margin-left: auto; margin-right: auto }

/* If you prefer to only apply full-bleed sometimes, add the class `.full-bleed`
   to the section element and override #home / #contact above accordingly. */

/* Make the header full-bleed too so the nav aligns with the hero */
#header.container, #header {
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  box-sizing: border-box;
}

/* Nav visual tweaks: ensure inline nav items sit centered and hover keeps high contrast */
#nav { display:flex; justify-content:center; width:100%; }
#nav ul { display:flex; gap:1rem; align-items:center; background: rgba(255,255,255,0.06); padding:0.4rem 1rem; border-radius:8px; margin:0 }
#nav a { padding:0.35rem 0.6rem; border-radius:6px; color: rgba(255,255,255,0.95); transition: background-color 160ms ease, color 160ms ease }
#nav a:hover, #nav a:focus { background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.98) }

/* CTA/button hover: explicitly keep white text and a subtle darken, avoid global a:hover collisions */
.button { transition: transform 140ms ease, background-color 140ms ease, color 140ms ease, opacity 140ms ease }
.button:hover, .button:focus { color: #fff; opacity: 0.95; box-shadow: 0 8px 20px rgba(243,88,88,0.20); transform: translateY(-2px) }

/* Center content paragraphs in the About section and constrain width */
#about p { max-width: 920px; margin: 0 auto 1.25rem auto; text-align: center; color: rgba(82,87,92,0.95) }