/*
Theme Name: Doula Kasia Rakowska
Theme URI: https://example.com/
Author: Doula Kasia Rakowska
Description: Indywidualny motyw WordPress dla strony douli – ciąża, poród, połóg, Shantala i Rebozo.
Version: 1.0.0
Text Domain: doula-kasia-rakowska
License: GPL-2.0-or-later
*/
:root{
      --bg:#f7f3ec;
      --paper:#fffdf9;
      --ink:#2f312c;
      --muted:#6e7168;
      --olive:#78836c;
      --olive-dark:#59644f;
      --sand:#ded2c1;
      --line:#e8e0d4;
      --radius:24px;
      --shadow:0 18px 60px rgba(58,53,45,.08);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color:var(--ink);
      background:
        radial-gradient(circle at 10% 10%, rgba(120,131,108,.10), transparent 30%),
        radial-gradient(circle at 90% 20%, rgba(222,210,193,.18), transparent 32%),
        var(--bg);
      line-height:1.65;
    }
    a{color:inherit}
    .wrap{width:min(1120px, calc(100% - 40px)); margin:0 auto}
    header{
      position:sticky; top:0; z-index:20;
      backdrop-filter:blur(14px);
      background:rgba(247,243,236,.88);
      border-bottom:1px solid rgba(232,224,212,.8);
    }
    .nav{
      min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px;
    }
    .brand{font-family:Georgia,serif; font-size:1.28rem; text-decoration:none; letter-spacing:.01em}
    .brand span{color:var(--olive-dark)}
    nav{display:flex; gap:22px; flex-wrap:wrap}
    nav a{font-size:.94rem; text-decoration:none; color:var(--muted)}
    nav a:hover{color:var(--ink)}
    .hero{padding:108px 0 86px}
    .hero-grid{
      display:grid; grid-template-columns:1.2fr .8fr; gap:70px; align-items:center;
    }
    .eyebrow{
      display:inline-block; text-transform:uppercase; letter-spacing:.14em;
      font-size:.78rem; color:var(--olive-dark); margin-bottom:18px;
    }
    h1,h2,h3{font-family:Georgia,serif; font-weight:500; line-height:1.12; margin:0}
    h1{font-size:clamp(3rem,7vw,6.5rem); max-width:760px}
    .lead{
      margin:28px 0 30px; font-size:1.17rem; color:var(--muted); max-width:700px;
    }
    .actions{display:flex; gap:14px; flex-wrap:wrap}
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      min-height:50px; padding:0 22px; border-radius:999px;
      text-decoration:none; border:1px solid var(--olive-dark); transition:.2s ease;
    }
    .btn-primary{background:var(--olive-dark); color:white}
    .btn-primary:hover{transform:translateY(-1px); background:#4e5946}
    .btn-secondary:hover{background:rgba(120,131,108,.08)}
    .nature-card{
      min-height:430px; border-radius:42px; position:relative; overflow:hidden;
      background:
        radial-gradient(circle at 24% 20%, rgba(255,255,255,.48), transparent 24%),
        linear-gradient(145deg, rgba(120,131,108,.58), rgba(120,131,108,.18)),
        linear-gradient(45deg, #d5c6b3, #edf0e9);
      box-shadow:var(--shadow);
    }
    .nature-card:before,.nature-card:after{
      content:""; position:absolute; border-radius:50% 50% 45% 55%;
      background:rgba(255,255,255,.28);
      transform:rotate(-18deg);
    }
    .nature-card:before{width:210px;height:330px;right:18%;top:14%}
    .nature-card:after{width:140px;height:230px;left:12%;bottom:-6%}

    .hero-small-photo{
      width:210px;
      height:210px;
      object-fit:cover;
      object-position:center;
      border-radius:28px;
      box-shadow:none;
      border:none;
      position:absolute;
      top:28px;
      right:28px;
      background:#fff;
    }

    .quote{
      position:absolute; inset:auto 26px 26px 26px; background:rgba(255,253,249,.90);
      padding:24px; border-radius:22px; font-family:Georgia,serif; font-size:1.25rem;
    }
    section{padding:84px 0}
    .section-head{display:grid; grid-template-columns:.7fr 1.3fr; gap:50px; align-items:start; margin-bottom:42px}
    .section-head h2{font-size:clamp(2.25rem,4vw,4rem)}
    .section-head p{margin:8px 0 0; color:var(--muted); max-width:720px}
    .panel{
      background:rgba(255,253,249,.82); border:1px solid var(--line); border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    .about{padding:42px 48px; display:block}

    .about p{margin:0 0 16px; color:var(--muted)}
    .facts{display:grid; gap:14px}
    .fact{padding:18px 20px; border-radius:18px; background:#f3efe7}
    .fact strong{display:block; font-family:Georgia,serif; font-size:1.08rem; margin-bottom:4px}
    .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
    .service{padding:30px}
    .service .num{font-size:.78rem; letter-spacing:.12em; color:var(--olive-dark); margin-bottom:50px}
    .service h3{font-size:2rem; margin-bottom:16px}
    .service p{color:var(--muted); margin:0}
    .soft{background:rgba(120,131,108,.08)}
    .forwho{display:grid; grid-template-columns:1fr 1fr; gap:20px}
    .forwho .panel{padding:30px}
    .forwho h3{font-size:1.55rem; margin-bottom:10px}
    .forwho p{margin:0;color:var(--muted)}
    .process{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
    .step{padding:28px}
    .step small{color:var(--olive-dark); letter-spacing:.12em; text-transform:uppercase}
    .step h3{font-size:1.5rem; margin:16px 0 10px}
    .step p{color:var(--muted); margin:0}
    .contact{
      padding:50px; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;
      background:var(--olive-dark); color:white; border-radius:36px;
    }
    .contact h2{font-size:clamp(2.4rem,4vw,4.6rem); margin-bottom:18px}
    .contact p{color:rgba(255,255,255,.78); margin:0; max-width:600px}
    .contact-card{
      background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
      border-radius:24px; padding:26px;
    }
    .contact-card a{display:block; text-decoration:none; margin:8px 0; font-size:1.03rem}
    .contact-card a:hover{text-decoration:underline}
    footer{padding:34px 0 46px; color:var(--muted); font-size:.9rem}
    .footer-row{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}


    .massage-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:22px;
      margin-top:34px;
    }
    .massage-card{
      background:rgba(255,253,249,.86);
      border:1px solid var(--line);
      border-radius:24px;
      overflow:hidden;
      box-shadow:var(--shadow);
    }
    .massage-card img{
      width:100%;
      aspect-ratio:16/9;
      object-fit:cover;
      object-position:center;
      display:block;
    }
    .massage-card-content{padding:26px}
    .massage-card h3{
      font-size:1.75rem;
      margin-bottom:12px;
    }
    .massage-card p{
      margin:0;
      color:var(--muted);
    }


    .prep-grid{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:22px;
      align-items:stretch;
    }
    .prep-main,.prep-price{
      padding:32px;
    }
    .prep-main h3,.prep-price h3{
      font-size:1.9rem;
      margin-bottom:14px;
    }
    .prep-main p,.prep-price p{
      color:var(--muted);
      margin:0 0 14px;
    }
    .prep-list{
      margin:18px 0 0;
      padding-left:20px;
      color:var(--muted);
    }
    .prep-list li{margin:8px 0}
    .prep-price .big-price{
      font-family:Georgia,serif;
      font-size:2.4rem;
      color:var(--olive-dark);
      margin:10px 0 6px;
    }
    .prep-option{
      padding:18px 0;
      border-top:1px solid var(--line);
    }
    .prep-option:first-of-type{border-top:none}

    .pricing-groups{display:grid; gap:26px}
    .pricing-group{
      background:rgba(255,253,249,.82); border:1px solid var(--line);
      border-radius:var(--radius); padding:30px; box-shadow:var(--shadow);
    }
    .pricing-group h3{font-size:1.85rem; margin-bottom:8px}
    .pricing-group > p{margin:0 0 22px; color:var(--muted)}
    .price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
    .price-card{
      padding:24px; border-radius:20px; background:#f3efe7;
      display:flex; flex-direction:column; min-height:100%;
    }
    .price-card.featured{
      background:rgba(120,131,108,.12); border:1px solid rgba(120,131,108,.28);
    }
    .price-card h4{
      margin:0 0 10px; font-family:Georgia,serif; font-size:1.25rem; font-weight:500;
    }
    .price{
      font-family:Georgia,serif; font-size:2rem; margin:2px 0 14px; color:var(--olive-dark);
    }
    .price-card p{margin:0; color:var(--muted)}
    .price-note{
      margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
      color:var(--muted); font-size:.95rem;
    }

    @media (max-width:900px){
      nav{display:none}
      .hero-grid,.section-head,.about,.contact{grid-template-columns:1fr}
      .grid3,.process,.price-grid,.massage-grid,.prep-grid{grid-template-columns:1fr}
      .forwho{grid-template-columns:1fr}
      .nature-card{min-height:360px}
      .hero-small-photo{width:170px;height:170px;top:22px;right:22px}
      .hero{padding-top:72px}
    }
    @media (max-width:520px){
      .wrap{width:min(100% - 28px,1120px)}
      h1{font-size:3.1rem}
      .contact{padding:30px 24px}
      .about{padding:26px}
      section{padding:64px 0}
    }
  
    .about > div{
      width:100%;
      max-width:none;
    }
    .about > div > p{
      max-width:none;
      font-size:1.06rem;
      line-height:1.85;
    }
    .about-text-columns{
      columns:2;
      column-gap:48px;
    }
    @media(max-width:760px){
      .about{padding:30px 24px}
      .about-text-columns{columns:1}
    }

  
    #omnie .panel.about{
      border:none !important;
      box-shadow:none !important;
      background:transparent !important;
      border-radius:0 !important;
    }

  
    #omnie .panel.about,
    #omnie .about,
    #omnie .about > div,
    #omnie .about-text-columns{
      display:block !important;
      columns:auto !important;
      column-count:1 !important;
      width:100% !important;
      max-width:none !important;
      margin:0 !important;
      padding:0 !important;
      border:0 !important;
      outline:0 !important;
      box-shadow:none !important;
      background:none !important;
      border-radius:0 !important;
    }
    #omnie .about::before,
    #omnie .about::after,
    #omnie .panel::before,
    #omnie .panel::after{
      display:none !important;
      content:none !important;
    }


/* Contact form */
.contact-form-section{background:rgba(120,131,108,.08)}
.doula-contact-form{max-width:900px;margin:0 auto;background:rgba(255,253,249,.88);border:1px solid var(--line);border-radius:28px;padding:36px;box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.form-field{margin-bottom:20px}.form-field label{display:block;margin-bottom:8px;font-weight:600;font-size:.95rem}
.form-field input,.form-field select,.form-field textarea{width:100%;font:inherit;color:var(--ink);background:#fff;border:1px solid #d9d0c4;border-radius:14px;padding:13px 15px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--olive-dark);box-shadow:0 0 0 3px rgba(89,100,79,.10)}
.form-field textarea{resize:vertical;min-height:150px}.form-consent{display:flex;gap:12px;align-items:flex-start;margin:4px 0 24px;color:var(--muted);font-size:.9rem}.form-consent input{margin-top:4px}
.form-submit{border:0;cursor:pointer;font:inherit}.form-message{max-width:900px;margin:0 auto 20px;padding:16px 18px;border-radius:14px}.form-success{background:#edf3e9;border:1px solid #cbd8c3}.form-error{background:#f7ece9;border:1px solid #e4c9c1}
.honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
@media(max-width:760px){.form-grid{grid-template-columns:1fr;gap:0}.doula-contact-form{padding:24px 18px}}


#formularz-kontaktowy{
  scroll-margin-top:95px;
}