/* yetunde-siemers.com site styles (moved out of index.html, 13.10.2026) */

/* Lato, served locally (latin subset, OFL licence) */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/lato-400.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/lato-700.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/lato-400-italic.woff2") format("woff2");
}

/* Text grey of the headings and body text, 4.61:1 on white */
:root {--ink: #757575;}

body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
body, html {
  height: 100%;
  color: var(--ink);
  line-height: 1.8;
}

/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* First image (Logo. Full height) */
.bgimg-1 {
  background-image: url("../images/logo.jpg");
  background-image: image-set(
    url("../images/logo.webp") type("image/webp"),
    url("../images/logo.jpg") type("image/jpeg"));
  min-height: 100%;
}

/* Second image (Portfolio): cropped 2.4:1 banner, 1924 px above 1200 px screens */
.bgimg-2 {
  background-image: url("../banner/portfolio-banner-1924.jpg");
  background-image: image-set(
    url("../banner/portfolio-banner-1924.webp") type("image/webp"),
    url("../banner/portfolio-banner-1924.jpg") type("image/jpeg"));
  background-position: 65% center;
  min-height: 600px;
}
@media only screen and (max-width: 1200px) {
  .bgimg-2 {
    background-image: url("../banner/portfolio-banner-1200.jpg");
    background-image: image-set(
      url("../banner/portfolio-banner-1200.webp") type("image/webp"),
      url("../banner/portfolio-banner-1200.jpg") type("image/jpeg"));
  }
}
/* Large screens: limit the banner to about 60vh so the face stays in view */
@media only screen and (min-width: 1601px) {
  .bgimg-2 {
    min-height: 0;
    height: 60vh;
  }
}

/* PORTFOLIO and CONTACT ME labels: black box at the left, vertically centred
   (w3-display-left), 5 % from the left edge, over the empty part of the image */
.banner-label {left: 5%;}
.banner-label span {display: inline-block; white-space: nowrap;}

/* Third image (Contact) */
.bgimg-3 {
  background-image: url("../images/contact.jpg");
  background-image: image-set(
    url("../images/contact.webp") type("image/webp"),
    url("../images/contact.jpg") type("image/jpeg"));
  min-height: 400px;
}

.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1600px) {
  .bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: scroll;
    min-height: 400px;
  }
}

/* Phones and small tablets: the banner shows a narrow slice, so the label box
   moves to the bottom left with a smaller font and the face stays fully visible.
   (Up to 767 px: between 601 and 767 px a centred box still touched the face.) */
@media only screen and (max-width: 767px) {
  .banner-label {
    top: auto;
    bottom: 16px;
    transform: none;
  }
  .banner-label .w3-xxlarge {font-size: 20px !important; letter-spacing: 5px;}
  .bgimg-2 {background-position: 65% center;}
}
/* Tablets: same size as the name box (24 px) so the box stays clear of the face */
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .banner-label .w3-xxlarge {font-size: 24px !important;}
}

/* Phones: the name in the first block was wider than a 390 px screen */
@media only screen and (max-width: 600px) {
  .bgimg-1 .w3-wide {letter-spacing: 5px;}
}

/* Heading levels: h1 name, h2 section titles, h3 below. Explicit sizes keep
   every heading and heading-styled text looking exactly as before. */
.hero-title, .banner-title {font-size: 15px; font-weight: 400; margin: 0;}
.title-24 {font-size: 24px; font-weight: 400; margin: 10px 0;}
.text-h4, .text-h5 {font-family: "Lato", sans-serif; font-weight: 400; margin: 10px 0;}
.text-h4 {font-size: 20px;}
.text-h5 {font-size: 18px;}

/* Header navigation: solid white bar with a 1 px line below */
.site-nav {background-color: #fff; border-bottom: 1px solid #ddd;}
.w3-top .nav-link {
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.04em;
  min-height: 44px;
  padding: 10px 14px;
  margin: 5px 6px; /* room for the 3 px focus outline inside the bar */
  background-color: transparent;
  text-decoration: none;
  text-underline-offset: 6px;
}
/* w3.css hover gives black text on a grey box: replace with an underline */
.w3-top .nav-link:hover {
  color: var(--ink) !important;
  background-color: transparent !important;
  text-decoration: underline;
  text-decoration-color: var(--ink);
}
.w3-top .nav-link.is-active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--ink);
}
.w3-top .nav-link:focus-visible {outline: 2px solid var(--ink); outline-offset: 3px;}
/* Mobile menu: same colours, full-width tap targets of at least 44 px */
.nav-menu {background-color: #fff; border-bottom: 1px solid #ddd;}
.nav-menu .nav-link {display: block; width: auto;}

/* One button style for the practice and blog links */
.btn-row {text-align: center; margin: 16px 0;}
.btn-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 44px;
  min-width: 260px;
  max-width: 100%;
  padding: 10px 24px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background-color: transparent;
  color: var(--ink);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease;
}
.btn-line:hover,
.btn-line:focus-visible {background-color: var(--ink); color: #fff;}
.btn-line:focus-visible {outline: 2px solid var(--ink); outline-offset: 3px;}
.btn-line .btn-arrow {width: 16px; height: 16px; margin-left: 10px; flex: 0 0 auto; stroke-width: 1.5;}
@media (prefers-reduced-motion: reduce) {
  .btn-line {transition: none;}
}

/* Blog links: small line above a button */
.blog-link {text-align: center;}
.blog-link-portfolio {margin-top: 56px;}
.blog-link-creativity {margin-top: 32px;}
.blog-kicker {color: #595959; font-size: 15px; margin: 0 0 8px;}
.blog-link .btn-row {margin: 0;}

/* Former inline styles */
.nowrap {white-space: nowrap;}
.img-full {width: 100%;}
.img-40 {width: 40%;}

/* Inline SVG icons (replace Font Awesome 4.7) */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-fw {width: 1.28571em; text-align: center;}

/* Contact links */
.contact-link {color: inherit; text-decoration: none;}
.contact-link:hover, .contact-link:focus-visible {text-decoration: underline;}

/* Portrait: black and white by default, colour layer fades in */
.portrait {
  position: relative;
  display: block;
  width: 50%;
  margin: 16px auto;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #eee;
}
.portrait picture {display: block;}
.portrait img {
  display: block;
  width: 100%;
  height: auto;
}
.portrait .portrait-colour {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 600ms ease;
}
.portrait .portrait-colour img {height: 100%; object-fit: cover;}
@media (hover: hover) {
  .portrait:hover .portrait-colour {opacity: 1;}
}
.portrait:focus-visible {outline: 2px solid #000; outline-offset: 3px;}
.portrait:focus-visible .portrait-colour,
.portrait.is-colour .portrait-colour {opacity: 1;}
@media (prefers-reduced-motion: reduce) {
  .portrait .portrait-colour {display: none;}
}

/* Dividers (replace the rows of asterisks) */
.divider {
  display: flex;
  align-items: center;
  width: 70%;
  margin: 26px auto;
  color: #000;
  font-family: "Lato", sans-serif;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
}
.divider::before,
.divider::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: #000;
  position: relative;
  top: -0.15em; /* Lato's asterisk sits high: align the lines with its centre */
}
.divider::before {margin-right: 14px;}
.divider::after {margin-left: 14px;}
.divider-minor {
  justify-content: center;
  width: auto;
  margin: 8px 0 10px;
  color: #777;
}
.divider-minor::before,
.divider-minor::after {content: none;}
@media only screen and (max-width: 600px) {
  .divider {width: 50%;}
  .divider-minor {width: auto;}
}

/* Modal close button */
.modal-close {border: 0;}

/* Footer */
.footer-links {padding: 0 16px;}
.footer-links a {color: inherit;}

/* Legal pages */
.legal {color: #555; max-width: 760px;}
.legal h1 {font-size: 28px; color: var(--ink); letter-spacing: 4px; margin-top: 32px; overflow-wrap: break-word;}
@media only screen and (max-width: 600px) {
  .legal h1 {font-size: 22px; letter-spacing: 1px;}
}
.legal h2 {font-size: 20px; color: var(--ink); margin-top: 28px;}
.legal h3 {font-size: 17px; color: var(--ink); margin-top: 20px;}
.legal a {color: var(--ink);}
.pending {color: #c00; font-weight: 700;}
.lang-switch {margin-bottom: 8px;}
.legal-top {padding: 8px 16px;}
.legal-top a {color: var(--ink); text-decoration: none;}