/* QUICK GUIDE
  CSS changes how the HTML looks. A rule such as .card { ... } styles elements
  with class="card". Inside the braces, each property ends with a semicolon.
  px means pixels. margin is space OUTSIDE an element; padding is space INSIDE.
  gap is space between items. font-size changes text size; border-radius rounds corners.
  Save this file and refresh the browser after editing.

  COLOURS: these named values are reused through var(...), e.g. var(--ink).
  --ink = main text; --muted = secondary text; --line = borders;
  --blue = primary buttons and links; --green = accents.
  Some individual rules also use their own #hex colour values.
 */
:root {
  color-scheme: light;
  --ink: #252d2a;
  --muted: #636d68;
  --line: #e4e7e3;
  --blue: #2169ce;
  --green: #35594d;
}


/* BASE STYLES: border-box keeps padding and borders inside the width you set. */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}


/* PAGE DEFAULTS: change the page background and main font here. 15px/1.65 means font size / line spacing. */
body {
  margin: 0;
  background: #f1f3f0;
  color: var(--ink);
  font: 15px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}


/* Keyboard focus outline: keep it visible so people can see which link is selected. */
a:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 5px;
}

svg {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
}

p, h1, h2, h3 {
  margin-top: 0;
}


/* The skip link stays offscreen until a keyboard user focuses it. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 20px;
  z-index: 10;
  background: white;
  padding: 12px;
}

.skip-link:focus {
  top: 12px;
}


/* TOP BAR: flex arranges items in a row; space-between puts them at opposite ends. */
.site-header {
  min-height: 76px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 12px max(24px, calc((100vw - 1120px) / 2));
  background: white;
  border-bottom: 1px solid var(--line);
}

/* LANGUAGE LINKS: both HTML pages use this same stylesheet.
  The header can wrap on small screens. aria-current highlights the current language.
  Change text in index.html and index-en.html separately; change shared styles here once.
*/
.site-header {
  flex-wrap: wrap;
}

.header-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
}

.language-switch {
  display: flex;
  gap: 4px;
  font-size: 12px;
}

.language-switch a {
  padding: 8px 10px;
  border-radius: 5px;
}

.language-switch a:hover {
  background: #edf0ec;
}

.language-switch a[aria-current="page"] {
  background: #edf0ec;
  color: var(--green);
  font-weight: 700;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 17px;
  font-weight: 700;
}

.brand-symbol {
  color: var(--green);
  font-size: 33px;
  line-height: 1;
}

.brand-location {
  font-weight: 400;
}

.header-link {
  color: var(--muted);
  font-size: 13px;
}

.header-link span {
  margin-left: 12px;
}

.header-link:hover, .site-footer a:hover {
  color: var(--blue);
  text-decoration: underline;
}


/* PAGE WIDTH: 1120px is the maximum content width. auto centres it horizontally. The header padding also uses 1120px to align with it. */
.page {
  max-width: 1120px;
  margin: 24px auto 0;
}


/* PROFILE PANEL: white background, rounded corners, and the cover photo. */
.profile {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}


/* COVER FRAME: height sets its visible height; overflow: hidden clips anything outside it. */
.cover {
  height: 420px;
  position: relative;
  overflow: hidden;
  background: #d8d2c5;
}


/* COVER PHOTO POSITION: object-fit: cover fills the frame and crops the photo as needed.
  object-position sets the horizontal position first, then the vertical position.
  The current vertical setting is 42% plus 75px: increase 75px to move DOWN,
  decrease it to move UP. For example, 50px moves it up another 25px.
  Large offsets can expose the frame background; check after changing them.
  The mobile rule near the bottom overrides this position on screens up to 640px wide.
 */
.cover-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center calc(42% + 75px);
}

.section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}


/* PROFILE TEXT: flex-direction: column stacks the portrait, title, and button vertically. */
.profile-details {
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: center;
  align-items: center;
  padding: 0 32px 26px;
  position: relative;
}


/* PORTRAIT: equal width/height and 50% border-radius make a circle. Negative margin-top overlaps the cover. */
.avatar {
  display: block;
  background: white;
  border: 5px solid white;
  border-radius: 50%;
  width: 132px;
  height: 132px;
  margin-top: -66px;
  object-fit: cover;
  box-shadow: 0 2px 8px #283e3410;
}

.profile-title {
  padding-top: 16px;
}

h1 {
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -.8px;
  margin-bottom: 6px;
}

.profile-title p {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

.profile-title p span {
  margin: 0 5px;
}


/* BUTTONS: these are normal HTML links styled as buttons. :hover applies when a pointer is over them. */
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-height: 43px;
  border-radius: 6px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  transition: background .15s;
}

.button-primary {
  background: var(--blue);
  color: white;
}

.button-primary:hover {
  background: #1556af;
}

.profile-details > .button {
  margin-top: 18px;
}


/* SECTION NAVIGATION: the first link has a permanent underline; it does not track scrolling. */
.profile-nav {
  margin: 0 32px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 28px;
}

.profile-nav > a {
  padding: 16px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 3px solid transparent;
}

.profile-nav > a:first-child {
  border-bottom-color: var(--green);
  color: var(--green);
}

.profile-nav > a:hover {
  color: var(--green);
  border-bottom-color: var(--green);
}

.nav-location {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
}


/* TWO-COLUMN LAYOUT: sidebar = 350px, main column = remaining space (1fr).
  minmax(0, 1fr) lets the main column shrink without forcing the page wider.
  Change gap to adjust the space between the columns.
 */
.content-grid {
  display: grid;
  grid-template-columns: 350px minmax(0, 1fr);
  gap: 22px;
  margin-top: 22px;
  align-items: start;
}


/* SHARED CARDS: changing these styles affects the introduction, address, gallery, and contact boxes. */
.card {
  padding: 26px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.card h2 {
  font-size: 19px;
  line-height: 1.35;
  margin-bottom: 18px;
  letter-spacing: -.35px;
}

.intro-text {
  color: var(--muted);
  font-size: 14px;
  padding-bottom: 21px;
  border-bottom: 1px solid var(--line);
}


/* SIDEBAR DETAILS: icon and text sit next to each other. */
.detail-row {
  display: flex;
  gap: 14px;
  margin-top: 22px;
  font-size: 13px;
}

.detail-row svg {
  color: #78847c;
  margin-top: 3px;
}

.detail-row strong {
  font-weight: 600;
}

address {
  font-style: normal;
  color: var(--muted);
}

.small-note {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 5px;
}

.detail-text {
  display: block;
  color: var(--muted);
}


/* The pale secondary button is used for the map link. */
.button-secondary {
  background: #edf0ec;
  color: #384b40;
}

.button-secondary:hover {
  background: #dfe6dd;
}

.full-width {
  width: 100%;
  margin-top: 25px;
}

.sidebar-note {
  display: flex;
  gap: 15px;
  padding: 24px 26px;
  color: #6a786d;
}

.sidebar-note > span {
  font-size: 30px;
}

.sidebar-note p {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 15px;
  margin: 0;
}


/* MAIN COLUMN: gap sets the vertical space between its cards. */
.main-column {
  display: grid;
  gap: 20px;
}


/* INTRODUCTION: this card has extra spacing and a larger serif heading. */
.welcome-card {
  padding: 30px;
}

.section-label {
  color: #607365;
  margin-bottom: 16px;
}

.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #71947c;
  vertical-align: middle;
  margin-right: 7px;
}

.welcome-card h2 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 31px;
  margin-bottom: 16px;
}

.welcome-card > p, .contact-card > p {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 16px;
}


/* THREE FEATURES: repeat(3, 1fr) creates three equally wide columns. */
.qualities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  padding-top: 23px;
  margin-top: 26px;
  gap: 14px;
}

.qualities > div > span {
  display: block;
  color: #547461;
  font-size: 27px;
  line-height: 1.2;
  margin-bottom: 10px;
}

.qualities h3 {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 3px;
}

.qualities p {
  color: var(--muted);
  font-size: 11px;
  margin: 0;
}


/* CONTACT SECTION: heading, Facebook text link, email, and phone. */
.contact-card {
  padding: 28px 30px;
}

.contact-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.contact-symbol {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf1e9;
  color: var(--green);
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  font-size: 24px;
}

.contact-heading .section-label {
  font-size: 9px;
  margin-bottom: 4px;
}

.contact-heading h2 {
  margin: 0;
  font-size: 20px;
}

.text-link {
  color: var(--blue);
  font-size: 14px;
  font-weight: 600;
}

.text-link span {
  margin-left: 8px;
}

.text-link:hover {
  text-decoration: underline;
}

.venue-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 24px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  font-size: 12px;
}

.venue-contact a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.venue-contact > span {
  width: 100%;
  color: var(--muted);
  font-size: 11px;
}


/* FOOTER: small text and the venue link at the bottom of the page. */
.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 2px 32px;
  color: var(--muted);
  font-size: 11px;
}

.site-footer p {
  margin: 0;
}

.site-footer p span {
  margin: 0 6px;
}


/* Long email addresses can wrap onto another line instead of overflowing the sidebar. */
.contact-detail {
  display: block;
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 6px;
  overflow-wrap: anywhere;
}


/* PHOTO GALLERY: two columns with captions underneath. The wide photo spans both columns. */
.gallery-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
}

.gallery-heading h2 {
  margin: 0;
}

.gallery-heading > span {
  color: var(--muted);
  font-size: 11px;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 14px;
}

.photo-grid figure {
  margin: 0;
}

.photo-wide {
  grid-column: 1 / -1;
}

.photo-grid a {
  display: block;
  border-radius: 6px;
  overflow: hidden;
}


/* aspect-ratio controls the displayed photo shape (width / height); object-fit crops without stretching. */
.photo-grid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.photo-grid .photo-wide img {
  aspect-ratio: 3 / 2;
}

.photo-grid figcaption {
  color: var(--muted);
  font-size: 11px;
  padding-top: 7px;
}


/* RESPONSIVE LAYOUT
  @media rules apply only when their condition matches the browser window.
  Later rules with the same selector override earlier values for those properties.
  On narrow screens several of the following groups apply together.
  Up to 1168px: leave space between the page and the window edges.
 */
@media (max-width: 1168px) {
  .page {
    margin: 20px 24px 0;
  }

}


/* TABLETS / SMALL WINDOWS: narrower sidebar, shorter cover, and smaller card padding. */
@media (max-width: 850px) {
  .content-grid {
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 16px;
  }

  .cover {
    height: 350px;
  }

  .card {
    padding: 22px;
  }

  .qualities {
    gap: 8px;
  }

  .gallery-heading {
    display: block;
  }

}


/* PHONES: use one main content column, smaller text, and a full-width button.
  Edit the .cover-photo rule in THIS group to change the mobile photo position.
  Here, 44% is horizontal and center is vertical; the desktop +75px offset does not apply.
 */
@media (max-width: 640px) {
  .site-header {
    min-height: 64px;
    padding: 12px 18px;
  }

  .brand {
    font-size: 14px;
    gap: 8px;
  }

  .brand-symbol {
    font-size: 28px;
  }

  .header-link {
    font-size: 11px;
  }

  .header-link span {
    margin-left: 2px;
  }

  .page {
    margin: 12px 12px 0;
  }

  .cover {
    height: 265px;
  }

  .cover-photo {
    object-position: 44% center;
  }

  .profile-details {
    padding: 0 20px 20px;
  }

  .avatar {
    width: 104px;
    height: 104px;
    margin-top: -52px;
    border-width: 4px;
  }

  .profile-title {
    padding-top: 15px;
  }

  h1 {
    font-size: 24px;
  }

  .profile-title p {
    font-size: 12px;
  }

  .profile-details > .button {
    width: 100%;
    margin-top: 20px;
  }

  .profile-nav {
    margin: 0 18px;
    justify-content: space-between;
    gap: 12px;
  }

  .profile-nav > a {
    font-size: 12px;
  }

  .nav-location {
    display: none;
  }

  .content-grid {
    grid-template-columns: 1fr;
    margin-top: 16px;
  }

  .main-column {
    gap: 16px;
  }

  .welcome-card h2 {
    font-size: 29px;
  }

  .qualities {
    gap: 12px;
  }

  .qualities p {
    font-size: 10px;
  }

  .sidebar-note {
    display: none;
  }

  .site-footer {
    flex-direction: column;
    gap: 5px;
    padding-left: 8px;
  }

}


/* ACCESSIBILITY: respect visitors who prefer less animation by disabling smooth scrolling and button transitions. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .button {
    transition: none;
  }

}