/* =====================================================
   STYLESHEET – Physio cabinet
   Sections: 1 Theme · 2 Base · 3 Buttons · 4 Header · 5 Hero
             6 Specialties · 7 About/Hours · 8 Contact · 9 Footer · 10 Responsive
   ===================================================== */

/* =====================================================
   1. THEME – change colours, fonts and sizes here only
   ===================================================== */
:root {
  /* Colours taken from the logo */
  --color-primary:      #1d5fd1;   /* main brand blue (top segment of the logo): buttons, links */
  --color-primary-dark: #174aa6;   /* hover colour for buttons */
  --color-primary-soft: #9dbaeb;   /* light blue (bottom segment of the logo) */
  --color-accent:       #eef3fc;   /* soft background tint (same family as the logo background) */
  --color-heading:      #0b2a5b;   /* deep navy of the logo text: titles */
  --color-text:         #22314d;   /* main text */
  --color-muted:        #5b6b88;   /* secondary text */
  --color-bg:           #ffffff;   /* page background */
  --color-border:       #dbe5f5;   /* thin lines around cards */
  --color-footer:       #0b2a5b;   /* footer background */
  --radius:             14px;      /* roundness of cards and inputs */
  --font:               system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading:       Georgia, "Times New Roman", serif;   /* serif font used for titles (like the logo) */
  --max-width:          1080px;    /* maximum width of the content */
}

/* =====================================================
   2. BASE – resets and generic elements
   ===================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; } /* offset for sticky header */
body { font-family: var(--font); color: var(--color-text); background: var(--color-bg); line-height: 1.6; }
img { max-width: 100%; display: block; }
a { color: var(--color-primary); text-decoration: none; }
h1, h2, h3 { line-height: 1.2; color: var(--color-heading); }
h1, h2 { font-family: var(--font-heading); font-weight: 700; }   /* serif titles, sans-serif card titles */
h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: .6rem; }

.container { width: min(100% - 2.5rem, var(--max-width)); margin-inline: auto; } /* centred content column */
section { padding: 4.5rem 0; }                 /* vertical space between sections */
section.tinted { background: var(--color-accent); } /* coloured background section */
.section-intro { color: var(--color-muted); max-width: 620px; margin-bottom: 2.5rem; }

/* =====================================================
   3. BUTTONS
   ===================================================== */
.btn {
  display: inline-block; padding: .85rem 1.6rem; border-radius: 999px;
  background: var(--color-primary); color: #fff; font-weight: 600; border: 0;
  cursor: pointer; font-size: 1rem; font-family: inherit; transition: background .2s;
}
.btn:hover { background: var(--color-primary-dark); }
.btn.secondary { background: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); }
.btn.secondary:hover { background: var(--color-primary); color: #fff; }

/* =====================================================
   4. HEADER (sticky top bar)
   ===================================================== */
header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255,255,255,.95); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: .75rem; color: var(--color-heading); min-width: 0; }
.brand img { height: 50px; width: auto; flex-shrink: 0; }   /* logo height – adjust if needed */
.logo-placeholder {                                      /* shown only when logo.png is missing */
  width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary);
  color: #fff; display: grid; place-items: center; font-weight: 700; flex-shrink: 0;
}
/* Name + small line under it (mimics the logo: serif name, spaced capitals below) */
.brand-text { display: grid; line-height: 1.15; min-width: 0; }
.brand-name {
  font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.brand-tagline {
  font-size: .62rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase;
  color: #3a5a94;
}
nav ul { display: flex; gap: 1.8rem; list-style: none; align-items: center; }
nav a { color: var(--color-text); font-weight: 500; }
nav a:hover { color: var(--color-primary); }
.header-right { display: flex; align-items: center; gap: 1.4rem; }   /* menu + language + call button */
.call-btn { color: #fff; padding: .55rem 1.2rem; font-weight: 600; } /* the "Call us" button */

/* Language selector (FR | DE | EN) */
.lang-switch { display: flex; gap: .2rem; }
.lang-switch a {
  color: var(--color-muted); font-size: .85rem; font-weight: 600;
  padding: .3rem .55rem; border-radius: 8px;
}
.lang-switch a:hover { color: var(--color-primary); }
.lang-switch a.active { background: var(--color-accent); color: var(--color-primary); } /* current language */

/* =====================================================
   5. HERO (big intro at the top)
   ===================================================== */
.hero { padding: 5rem 0 4.5rem; background: linear-gradient(135deg, var(--color-accent), #fff 70%); }
.hero-inner { display: grid; gap: 2.5rem; grid-template-columns: 1.2fr 1fr; align-items: center; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); margin-bottom: 1rem; }
.hero p { color: var(--color-muted); font-size: 1.1rem; margin-bottom: 1.8rem; max-width: 520px; }
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.hero-visual {                                           /* photo area: shows the logo icon on soft blue until a photo is set in config.php */
  aspect-ratio: 4/3; border-radius: var(--radius);
  background: url('logo.png') center / auto 55% no-repeat,
              linear-gradient(145deg, #eaf1fc, #c9daf6);
}

/* Hero slideshow (pictures come from the "slides" folder, see config.php) */
.slideshow {
  position: relative; aspect-ratio: 4/3; border-radius: var(--radius);
  overflow: hidden; background: var(--color-accent);
  box-shadow: 0 14px 34px rgba(11,42,91,.14);
}
.slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;                                     /* crops the picture to fill the frame */
  opacity: 0; transition: opacity .9s ease;              /* fade between pictures: change .9s for a faster/slower fade */
}
.slide.active { opacity: 1; }
.slide-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.85); color: var(--color-heading); font-size: 1.6rem; line-height: 1;
  display: grid; place-items: center; padding-bottom: 3px; transition: background .2s;
}
.slide-btn:hover { background: #fff; }
.slide-btn.prev { left: .8rem; }
.slide-btn.next { right: .8rem; }
.slide-dots { position: absolute; left: 0; right: 0; bottom: .8rem; display: flex; justify-content: center; gap: .5rem; }
.dot { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(255,255,255,.6); }
.dot.active { background: #fff; transform: scale(1.25); }

/* =====================================================
   6. SPECIALTIES (cards grid)
   Cards automatically wrap: as many per row as they fit (min 280px each = 3 per row on desktop)
   ===================================================== */
.cards { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 1.6rem; transition: transform .2s, box-shadow .2s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(11,42,91,.10); }
.card .icon { font-size: 1.8rem; margin-bottom: .6rem; }
.card h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.card p { color: var(--color-muted); font-size: .95rem; }

/* =====================================================
   6b. TEAM (one .member card per person, from config.php)
   ===================================================== */
.team-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.member {
  display: grid; grid-template-columns: 190px 1fr; gap: 1.5rem; align-items: center;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.2rem;
}
.member img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 10px; }   /* portrait photo */
.member h3 { font-size: 1.25rem; font-family: var(--font-heading); }
.member .role { color: var(--color-primary); font-weight: 600; font-size: .9rem; margin: .15rem 0 .6rem; }
.member p { color: var(--color-muted); font-size: .95rem; }
.member .role { color: var(--color-primary); }

/* =====================================================
   7. ABOUT + OPENING HOURS
   ===================================================== */
.two-col { display: grid; gap: 3rem; grid-template-columns: 1fr 1fr; align-items: start; }
.hours { list-style: none; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem 1.5rem; }
.hours li { display: flex; justify-content: space-between; padding: .6rem 0; border-bottom: 1px solid var(--color-border); }
.hours li:last-child { border-bottom: 0; }

/* =====================================================
   8. CONTACT (info + form)
   ===================================================== */
.contact-grid { display: grid; gap: 3rem; grid-template-columns: 1fr 1.2fr; }
.contact-info p { margin-bottom: 1.2rem; }
.contact-info strong { display: block; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); }
.contact-info a.phone { font-size: 1.4rem; font-weight: 700; }
.map-placeholder {
  margin-top: 1rem; height: 180px; border-radius: var(--radius); background: var(--color-accent);
  display: grid; place-items: center; color: var(--color-muted); font-size: .9rem;
}
.map-embed { margin-top: 1rem; width: 100%; height: 260px; border: 0; border-radius: var(--radius); }

form { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.8rem; display: grid; gap: 1rem; }
label { font-weight: 600; font-size: .9rem; display: grid; gap: .35rem; }
input, select, textarea {
  font: inherit; padding: .75rem .9rem; border: 1px solid var(--color-border);
  border-radius: 10px; width: 100%; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--color-primary); border-color: transparent; }
textarea { min-height: 120px; resize: vertical; }
.form-row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.form-note { font-size: .85rem; color: var(--color-muted); }
.hp { position: absolute; left: -9999px; }               /* hidden anti-spam field – do not remove */

/* Messages shown after sending the form */
.alert { padding: 1rem; border-radius: 10px; font-weight: 600; margin-bottom: 1rem; }
.alert.success { background: var(--color-accent); color: var(--color-primary-dark); }
.alert.error   { background: #fdecec; color: #a33030; }

/* =====================================================
   9. FOOTER
   ===================================================== */
footer { background: var(--color-footer); color: #b9c8e6; padding: 2rem 0; font-size: .9rem; }
.footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
footer a { color: #b9c8e6; }
footer a:hover { color: #fff; }

/* =====================================================
   10. RESPONSIVE – rules for phones and small tablets (<= 800px wide)
   ===================================================== */
@media (max-width: 800px) {
  section { padding: 3rem 0; }
  .hero-inner, .two-col, .contact-grid, .form-row { grid-template-columns: 1fr; } /* stack columns */
  .hero-visual, .slideshow { order: -1; aspect-ratio: 16/10; }   /* slideshow above the text on phones */
  .team-grid { grid-template-columns: 1fr; }
  .member { grid-template-columns: 110px 1fr; gap: 1rem; padding: 1rem; }
  nav { display: none; }                                 /* phones: menu links hidden, only language + "Call us" stay */
  .header-right { gap: .6rem; }
  .call-btn { padding: .5rem 1rem; font-size: .9rem; }
  .brand { gap: .55rem; }
  .brand img { height: 42px; }
  .brand-name { font-size: 1.05rem; }                    /* name is shortened with "…" if too long for the screen */
  .brand-tagline { font-size: .55rem; letter-spacing: .24em; }
}