/* ==============================================================
   vweg-freelance custom overrides
   Edits live here so third-party theme/plugin files stay pristine.
   Load order: after theme.css (see <link> in index.html).
   ============================================================== */

/* Brighter body text across the dark-background sections.
   Default theme sets body to #9e9e9e which is low-contrast on photos. */
.section .service-list,
.section .service-list li,
.section .service-list a,
.about-body,
.about-body p {
  color: #e8e8e8;
}
.service-list a:hover {
  color: #ffffff;
}

/* Services list: drop the theme's uppercase transform and show actual
   bullets in the site's yellow accent. The original items are written
   as sentences, so uppercase clipped meaning (abbrevs, proper nouns).
   Font is shrunk slightly so the longest item fits one line in the
   original col-md-5 width without stretching the layout. */
.service-list {
  list-style: disc;
  padding-left: 1.25em;
  text-transform: none;
  font-size: 1.1rem;
}

/* Services section: theme adds an extra 7rem below the h2, while the
   other sections use 5rem. Normalise so the title-to-body gap matches. */
.section-4 h2 {
  margin-bottom: 5rem;
}
.service-list li {
  margin-bottom: 0.25rem;
}
.service-list li::marker {
  color: #f3ca2f;
  font-size: 1.1em;
}

/* Services: centered "20 YEARS EXPERIENCE" badge below the portrait.
   Number stacked above "YEARS EXPERIENCE" (originally inline, which only
   worked at the old left:12% offset; once centered, inline overflows the
   photo width). Size kept close to the theme's original. */
.dots-image-2 .experience-info {
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  margin-top: -3rem;           /* overlap photo bottom */
  text-align: center;
  white-space: normal;
  width: auto;
}
.experience-info .number {
  display: block;
  font-size: 8rem;
  line-height: 1;
  margin-right: 0;
}
.experience-info .text {
  display: block;
  font-size: 1.2rem;
  line-height: 1.15;
  margin-top: 0.5rem;
  letter-spacing: 0.05em;
}

/* References: brighten partner logos to match body text contrast */
.col-partner img {
  opacity: 0.7;
}
/* DAY, BY MALENE BIRGER and Custommade logos have more whitespace baked
   into their PNG canvas, so they render visually smaller. Scale them up
   to match. The intro/row containers default to overflow:hidden, which
   clips the leftmost scaled logo — so we let those overflow on this
   section only. */
#page4 .intro.overflow-hidden,
#page4 .row-partners,
#page4 .col-partner,
#page4 .partner-inner {
  overflow: visible;
}
.col-partner img[src*="Web_DAY-"],
.col-partner img[src*="By-Malene-Birger"],
.col-partner img[src*="Custommade"],
.col-partner img[src*="Lovechild"],
.col-partner img[src*="GANNI"] {
  transform: scale(1.25);
}
/* Lovechild PNG is black on transparent — on the dark references
   background it would disappear. Invert to white so it matches the
   other logos that are already rendered light. */
.col-partner img[src*="Lovechild"] {
  filter: invert(1);
}

/* Contact section sits on a bright coffee photo, so text needs to be dark,
   not the white the other sections use. */
.section-6 h2,
.section-6 h2.title-uppercase,
.section-6 .contact-lead {
  color: #1a1a1a;
}
.section-6 h2 .text-primary {
  /* keep accent gold readable on light background */
  color: #725f4c;
}

/* About section (page3): make body paragraphs match Services readability */
.about-body {
  margin-top: 1.5rem;
  font-size: 1.1857rem;
  line-height: 1.55;
  letter-spacing: -0.01rem;
  font-weight: 300;
}
.about-body p {
  margin-bottom: 1rem;
}
.about-body p:last-child {
  margin-bottom: 0;
}

/* References section (page4): 1 centered column on mobile.
   Desktop layout is untouched (default .row-partners / .col-partner rules in theme.css). */
@media (max-width: 575px) {
  .row-partners {
    margin: 0;
    text-align: center;
  }
  .col-partner {
    display: block;
    width: 100%;
    padding: 0.75rem 0;
    margin-top: 0;
    text-align: center;
  }
  .col-partner .partner-inner {
    display: inline-block;
  }
  .col-partner img {
    max-width: 170px; /* original logo width */
    height: auto;
  }
}

/* Contact section (page5): add breathing room around the "Email me"
   block and give the lead paragraph a readable size. */
.contact-lead {
  max-width: 36rem;
  margin: 0 0 1.5rem 0;
  font-size: 1.1857rem;
  line-height: 1.55;
  font-weight: 300;
}

/* Inline LinkedIn icon sitting to the left of the phone number in the
   footer/bottom-left copy blocks. Matches the copy text colour (white)
   and sized up for easier tap/click. */
.copy-linkedin,
.copy-linkedin:before {
  color: inherit;
  font-size: 1.35rem;
  line-height: 1;
}
.copy-linkedin {
  display: inline-block;
  margin-right: 0.5rem;
  vertical-align: -0.25rem;
  text-decoration: none;
}
.copy-linkedin:hover,
.copy-linkedin:hover:before {
  opacity: 0.75;
  color: inherit;
}

/* Pagepiling sections set overflow-y:auto, which (per spec) promotes
   overflow-x to auto too. On the hero the uppercase "DEVELOPMENT" headline
   is wider than narrow viewports, so the section becomes horizontally
   scrollable and a swipe drags the absolutely-positioned background image
   sideways. Lock the x-axis so only vertical scroll remains. */
.pp-scrollable {
  overflow-x: hidden;
}

/* Hero headline: on phones the theme's 5.14rem display-2 makes
   "DEVELOPMENT" wider than the column. Scale down below the Bootstrap
   sm breakpoint; tablet/desktop keep the original size. */
@media (max-width: 767px) {
  #page1 .display-2 {
    font-size: 3.5rem;
  }
}

/* Home hero: enlarge the "Pernille Viehweg" subtitle above the headline,
   bump weight + colour so it reads next to the white headline, and
   tighten the gap below so it sits close to "Technical". */
#page1 .subtitle-top {
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #ffffff;
}

/* Sidebar menu reveal: cut the staggered transition delays roughly in
   half so items appear faster once the panel opens. Theme defaults were
   .6s/.7s/.9s — which made the menu feel sluggish. */
.menu-list {
  transition: transform 0.35s 0.25s ease, opacity 0.35s 0.25s ease;
}
.menu-footer .social-list {
  transition: all 0.35s 0.3s ease;
}
.menu-footer .copy {
  transition: all 0.35s 0.35s ease;
}