/* ==========================================================================
   Swiss Meridian Group AG — the only stylesheet for this website

   Sections, in the same order as the page:
     1. Colours and fonts
     2. Page basics
     3. Header
     4. Hero (the big photo at the top)
     5. Contact section
     6. Footer
     7. Legal pages and "page not found"
     8. Larger screens (tablet and desktop)
   ========================================================================== */


/* ==========================================================================
   1. COLOURS AND FONTS
   Change a colour or font here and it changes everywhere on the site.
   ========================================================================== */

/* Carlito font files are stored in assets/fonts (no outside requests).
   Georgia is not stored here: it comes already installed on Windows, Mac and iPhone. */
@font-face {
  font-family: "Carlito";
  src: url("../fonts/carlito-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Carlito";
  src: url("../fonts/carlito-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colours from the brand guidelines (Figma, October 2026) */
  --brand-red: #780606;          /* "Blood Red": buttons, links, form labels, legal headings, contact card background */
  --brand-red-dark: #5C0404;     /* a slightly darker red, for buttons when the mouse is over them */
  --gold-line: #C9A94C;          /* "Gold": decorative lines, titles on Blood Red, legal page titles */
  --light-yellow: #F0EDE4;       /* "Light Yellow": header, footer and the form side of the contact card */
  --dark-grey: #555566;          /* "Dark Grey": text on the legal pages */

  /* Supporting colours */
  --gold-text: #7A6429;          /* darker gold that is readable as text on light backgrounds */
  --background: #FAFAF8;         /* main page background (warm off-white) */
  --background-alternate: #F7F5F1; /* slightly warmer off-white for the contact section */
  --dark: #191410;               /* near-black brown: main text colour and dark panels */
  --text-soft: #5A524A;          /* softer brown-grey for less important text on light backgrounds */
  --text-on-dark: #FAFAF8;       /* text on dark backgrounds and on the photo */
  --text-on-dark-soft: #D9D2C7;  /* softer text on dark backgrounds */
  --line: #E4DED3;               /* thin dividing lines and field borders on light backgrounds */
  --white: #FFFFFF;              /* background of the form boxes (name, email, message …) */

  --font-headings: Georgia, "Times New Roman", serif;                      /* brand-guideline font for headlines and titles */
  --font-body: "Carlito", Calibri, Arial, sans-serif;                      /* brand-guideline font for all other text */

  --page-width: 1180px;          /* the widest the content gets on big screens */
  --page-gutter: 20px;           /* space at the left and right edge of the screen */
  --header-height: 72px;         /* height of the bar at the top */
}


/* ==========================================================================
   2. PAGE BASICS
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  margin: 0;
  /* Every page fills at least the whole screen, so the footer always sits at the bottom */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--background);
  color: var(--dark);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
}

/* The main content takes up the free space above the footer */
main {
  flex-grow: 1;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--brand-red);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-headings);
  font-weight: 400;
  line-height: 1.1;
}

p {
  margin: 0 0 1em;
}

/* Keeps content centred and not too wide */
.page-width {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 30px;
  border: 1px solid var(--brand-red);
  background-color: var(--brand-red);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.button:hover,
.button:focus-visible {
  background-color: var(--brand-red-dark);
  border-color: var(--brand-red-dark);
}

/* Visible outline for people using the keyboard */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold-line);
  outline-offset: 3px;
}

/* For people who prefer less movement on screen */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


/* ==========================================================================
   3. HEADER
   The light bar at the top with the logo, the links and the language menu.
   It stays at the top of the screen while scrolling.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--light-yellow);
  border-bottom: 1px solid var(--line);
}

.site-header .page-width {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-height);
}

.site-logo img,
.footer-logo img {
  /* The logo file has a white background; this lets the off-white page show through instead */
  mix-blend-mode: multiply;
}

.site-logo img {
  width: auto;
  height: 40px;
}

.main-navigation {
  display: flex;
  align-items: center;
  gap: 16px;
}

.main-navigation a {
  color: var(--dark);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

.main-navigation a:hover {
  color: var(--brand-red);
}

/* The "Home" link is hidden on small phones to save space (the logo also goes home) */
.navigation-home {
  display: none;
}

/* The "Contact" link looks like an outlined button */
.main-navigation .navigation-contact {
  padding: 10px 14px;
  border: 1px solid var(--brand-red);
  color: var(--brand-red);
}

.main-navigation .navigation-contact:hover {
  background-color: var(--brand-red);
  color: var(--text-on-dark);
}

/* Language menu: the flag and "EN" / "DE"; a click opens the list of languages */
.language-menu {
  position: relative;
}

.language-menu summary {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  list-style: none;
  cursor: pointer;
}

/* Hides the small default triangle in Safari (other browsers hide it with the line above) */
.language-menu summary::-webkit-details-marker {
  display: none;
}

/* The small arrow after "EN" / "DE" */
.language-menu summary::after {
  content: "▾";
}

.language-menu summary:hover {
  color: var(--brand-red);
}

/* The list that opens under the flag */
.language-menu-list {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 170px;
  margin: 12px 0 0;
  padding: 8px 0;
  list-style: none;
  background-color: var(--light-yellow);
  border: 1px solid var(--line);
}

.main-navigation .language-menu-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
}

/* The language you are reading now */
.main-navigation .language-menu-list .current-language {
  color: var(--brand-red);
}

/* A thin grey edge so light parts of the flags stand out on the ivory header */
.language-menu img {
  border: 1px solid var(--line);
}


/* ==========================================================================
   4. HERO (the big photo at the top)
   ========================================================================== */

.hero {
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--header-height));
  padding: 72px 0;
  /* A warm dark layer over the photo so the white text is easy to read */
  background-image:
    linear-gradient(90deg, rgba(25, 20, 16, 0.9) 0%, rgba(25, 20, 16, 0.72) 55%, rgba(25, 20, 16, 0.45) 100%),
    url("../images/hero-handshake.jpg");
  background-size: cover;
  background-position: center;
  color: var(--text-on-dark);
}

.hero-heading {
  max-width: 14em;
  margin-bottom: 32px;
  font-size: 44px;
  line-height: 1.05;
}

/* The gold line under the heading */
.hero-heading::after {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  margin-top: 32px;
  background-color: var(--gold-line);
}

.hero-text {
  max-width: 38em;
  margin-bottom: 40px;
  color: var(--text-on-dark-soft);
  font-size: 18px;
  line-height: 1.75;
}


/* ==========================================================================
   5. CONTACT SECTION
   Dark panel with the contact details on the left, the form on the right.
   ========================================================================== */

.contact-section {
  padding: 72px 0;
  background-color: var(--background-alternate);
}

.contact-card {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--line);
}

/* Left: Blood Red panel with a Gold title (as in the brand guidelines) */
.contact-introduction {
  padding: 40px 28px;
  background-color: var(--brand-red);
  color: var(--text-on-dark);
}

.contact-heading {
  margin-bottom: 24px;
  color: var(--gold-line);
  font-size: 40px;
  font-weight: 700;
}

.contact-intro-text {
  margin-bottom: 36px;
  color: var(--text-on-dark-soft);
  font-size: 18px;
}

.contact-details {
  margin: 0;
  border-top: 1px solid var(--gold-line);
}

.contact-details dt {
  margin-top: 24px;
  color: var(--gold-line);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.contact-details dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 6px 0 0;
  font-size: 18px;
  overflow-wrap: anywhere;
}

.contact-details dd,
.contact-details a {
  color: var(--text-on-dark);
}

.contact-details a {
  text-decoration: none;
}

.contact-details a:hover {
  text-decoration: underline;
  text-decoration-color: var(--gold-line);
}

/* The small "Copy" button next to the email address */
.copy-button {
  padding: 4px 10px;
  border: 1px solid var(--text-on-dark-soft);
  background-color: transparent;
  color: var(--text-on-dark-soft);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.copy-button:hover {
  border-color: var(--gold-line);
  color: var(--text-on-dark);
}

/* The copy button only appears when the browser can actually copy */
.copy-button[hidden] {
  display: none;
}

/* Right: the form */
.contact-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  padding: 40px 28px;
  background-color: var(--light-yellow);
}

.form-field label {
  display: block;
  margin-bottom: 8px;
  color: var(--brand-red);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* "(optional)" always sits on its own line under the label, so labels side by side line up */
.form-field .optional {
  display: block;
  margin-top: 2px;
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 0;
  background-color: var(--white);
  color: var(--dark);
  font-family: var(--font-body);
  font-size: 16px;
}

/* Text boxes and the drop-down list are all the same height */
.form-field input,
.form-field select {
  height: 52px;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--gold-text);
}

.form-field textarea {
  min-height: 160px;
  padding: 14px 16px;
  resize: vertical;
}

.form-field textarea::placeholder {
  color: var(--text-soft);
}

.form-note {
  margin: 0;
  color: var(--text-soft);
  font-size: 14px;
}


/* ==========================================================================
   6. FOOTER
   ========================================================================== */

.site-footer {
  padding: 48px 0 32px;
  background-color: var(--light-yellow);
  border-top: 1px solid var(--line);
  color: var(--text-soft);
  font-size: 15px;
}

.footer-top {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.footer-logo img {
  width: auto;
  height: 36px;
}

.footer-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}

.footer-navigation a {
  color: var(--dark);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

.footer-navigation a:hover {
  color: var(--brand-red);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
}

.footer-bottom p {
  margin: 0;
}

.footer-bottom a {
  color: var(--text-soft);
}

.footer-bottom a:hover {
  color: var(--brand-red);
}

.back-to-top {
  text-decoration: none;
}


/* ==========================================================================
   7. LEGAL PAGES AND "PAGE NOT FOUND"
   ========================================================================== */

.legal-page {
  padding: 56px 0 80px;
  color: var(--dark-grey);
}

.legal-page .page-width {
  max-width: 820px;
}

.legal-page h1 {
  margin-bottom: 32px;
  color: var(--gold-line);
  font-size: 40px;
  font-weight: 700;
}

.legal-page h2 {
  margin: 40px 0 12px;
  color: var(--brand-red);
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
}

.legal-page address {
  font-style: normal;
}


/* ==========================================================================
   8. LARGER SCREENS (tablet and desktop, 768 pixels wide and more)
   ========================================================================== */

@media (min-width: 768px) {
  :root {
    --page-gutter: 40px;
    --header-height: 88px;
  }

  .site-logo img {
    height: 52px;
  }

  .main-navigation {
    gap: 36px;
  }

  .navigation-home {
    display: inline;
  }

  .main-navigation .navigation-contact {
    padding: 14px 26px;
  }

  .hero {
    padding: 96px 0;
  }

  .hero-heading {
    font-size: 76px;
  }

  .hero-text {
    font-size: 20px;
  }

  .contact-section {
    padding: 120px 0;
  }

  .contact-card {
    grid-template-columns: 5fr 7fr;
  }

  .contact-introduction {
    padding: 64px 56px;
  }

  .contact-heading {
    font-size: 54px;
  }

  .contact-form {
    grid-template-columns: 1fr 1fr;
    gap: 26px 28px;
    /* If a label runs onto two lines, the boxes side by side still line up at the bottom */
    align-items: end;
    padding: 64px 56px;
  }

  /* Fields that take the full width of the form */
  .form-field-wide,
  .form-actions {
    grid-column: 1 / -1;
  }

  .footer-top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .footer-bottom {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 32px;
  }

  .legal-page h1 {
    font-size: 54px;
  }
}