/*
Theme Name: DoktorFys
Theme URI: https://doktorfys.dk
Author: DoktorFys
Description: Responsivt specialtema til DoktorFys, baseret på det godkendte Stitch-design.
Version: 0.15.1
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: doktorfys
*/

.df-process-section {
  background: #fff;
  padding: 72px 32px 78px;
  scroll-margin-top: 110px;
}
.df-process-wrap { max-width: 1120px; margin: 0 auto; }
.df-process-kicker { text-align: center; color: #7d967d; font-weight: 700; letter-spacing: .14em; font-size: 12px; margin: 0 0 10px; }
.df-process-section h2 { text-align: center; color: #1b2b48; font-size: 38px; line-height: 1.2; font-weight: 600; margin: 0; }
.df-process-intro { max-width: 680px; margin: 16px auto 48px; color: #596575; font-size: 17px; line-height: 1.55; text-align: center; }
.df-process-timeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; position: relative; }
.df-process-timeline::before { content: ""; position: absolute; left: 9%; right: 9%; top: 28px; height: 2px; background: #d9e1d7; }
.df-process-step { position: relative; text-align: center; padding: 0 5px; }
.df-process-dot { width: 56px; height: 56px; border: 2px solid #899d87; border-radius: 999px; background: #fff; color: #1b2b48; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; position: relative; z-index: 1; box-shadow: 0 0 0 8px #fff; font-size: 17px; font-weight: 700; }
.df-process-step h3 { color: #1b2b48; font-size: 18px; line-height: 1.3; font-weight: 700; margin: 0 0 8px; }
.df-process-step p { color: #66717d; font-size: 15px; line-height: 1.55; max-width: 190px; margin: 0 auto; }
@media (max-width: 767px) {
  .df-process-section { padding: 52px 22px 58px; }
  .df-process-section h2 { font-size: 30px !important; line-height: 1.2 !important; }
  .df-process-intro { font-size: 16px; margin-bottom: 36px; }
  .df-process-timeline { grid-template-columns: 1fr; gap: 0; }
  .df-process-timeline::before { left: 27px; right: auto; top: 22px; bottom: 24px; width: 2px; height: auto; }
  .df-process-step { display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; text-align: left; padding: 0 0 25px; }
  .df-process-dot { grid-row: 1 / 3; margin: 0; box-shadow: 0 0 0 6px #fff; }
  .df-process-step h3 { margin-top: 4px; }
  .df-process-step p { max-width: none; margin: 0; }
}