/*
Theme Name: Angelica Benissi Coaching
Theme URI: https://benissi.freesongs.gr/
Author: freeSongs
Description: Custom WordPress theme for Angelica Benissi ADHD Coaching & Somatic Regulation.
Version: 1.3
Text Domain: benissi-coaching
*/

:root{
      --bg:#fbfaf7;
      --paper:#ffffff;
      --ink:#1f2824;
      --muted:#65706a;
      --line:#e7e9e4;
      --sage:#8aa496;
      --sage-dark:#4c6659;
      --sage-soft:#edf3ef;
      --sand:#f2ece2;
      --accent:#bb7b63;
      --shadow:0 18px 60px rgba(37,50,43,.10);
      --radius:28px;
      --max:1180px;
    }

    *{
      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:var(--bg);
      line-height:1.6;

      -webkit-font-smoothing:antialiased;
    }

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

    img{
      display:block;
      max-width:100%;
    }

    button{
      font:inherit;
    }

    .wrap{
      width:min(
        var(--max),
        calc(100% - 40px)
      );

      margin:auto;
    }



    /* ==============================
       HEADER
    ============================== */

    .topbar{
      position:sticky;
      top:0;
      z-index:30;

      backdrop-filter:blur(14px);

      background:
        rgba(251,250,247,.88);

      border-bottom:
        1px solid
        rgba(231,233,228,.82);
    }


    .nav{
      height:76px;

      display:flex;
      align-items:center;
      justify-content:space-between;

      gap:28px;
    }



    /* ==============================
       ANGELICA IDENTITY LOGO
    ============================== */

    .brand{
      display:flex;
      align-items:center;

      gap:18px;

      min-width:0;
    }


    .brand-logo{
      display:block;

      width:230px;
      height:auto;

      flex-shrink:0;

      color:#175c7d;
    }


    .brand-positioning{
      padding-left:18px;

      border-left:
        1px solid
        #cfd8d2;

      font-size:10px;
      line-height:1.45;

      text-transform:none;
      letter-spacing:.15em;

      color:#65706a;

      white-space:nowrap;
    }


    .footer-brand .brand-logo{
      color:#ffffff;
      opacity:.92;
    }


    .footer-brand .brand-positioning{
      color:#aeb8b2;
      border-left-color:#536159;
    }



    /* ==============================
       MENU
    ============================== */

    .links{
      display:flex;
      align-items:center;

      gap:27px;

      font-size:.94rem;
    }


    .links a:hover{
      color:var(--sage-dark);
    }


    .nav-cta,
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;

      border-radius:999px;

      min-height:48px;

      padding:0 22px;

      font-weight:650;

      transition:.2s ease;

      border:
        1px solid
        transparent;
    }


    .nav-cta,
    .btn.primary{
      background:var(--ink);
      color:white;
    }


    .nav-cta:hover,
    .btn.primary:hover{
      transform:
        translateY(-2px);

      background:#111914;
    }


    .btn.secondary{
      border-color:#cfd8d2;
      background:white;
    }


    .btn.secondary:hover{
      border-color:
        var(--sage-dark);

      transform:
        translateY(-2px);
    }


    .mobile-toggle{
      display:none;

      border:0;

      background:transparent;

      font-size:1.6rem;
    }



    /* ==============================
       HERO
    ============================== */

    .hero{
      padding:
        62px
        0
        70px;

      overflow:hidden;
    }


    .hero-grid{
      display:grid;

      grid-template-columns:
        1.08fr
        .92fr;

      gap:56px;

      align-items:center;
    }


    .eyebrow{
      display:inline-flex;
      align-items:center;

      gap:10px;

      font-size:.78rem;

      text-transform:none;
      letter-spacing:.14em;

      font-weight:750;

      color:
        var(--sage-dark);

      margin-bottom:22px;
    }


    .eyebrow::before{
      content:"";

      width:34px;
      height:1px;

      background:var(--sage);
    }


    h1,
    h2,
    h3{
      margin:0;
      line-height:1.08;
    }


    h1{
      font-family:
        Georgia,
        "Times New Roman",
        serif;

      font-weight:500;

      font-size:
        clamp(
          3.15rem,
          6.3vw,
          6.15rem
        );

      letter-spacing:-.045em;
    }


    .hero strong{
      font-weight:500;

      color:
        var(--sage-dark);
    }


    .lead{
      max-width:690px;

      font-size:1.17rem;

      color:#536059;

      margin:
        27px
        0
        28px;
    }


    .hero-actions{
      display:flex;

      gap:12px;

      flex-wrap:wrap;
    }


    .trustline{
      margin-top:28px;

      display:flex;

      gap:18px;

      flex-wrap:wrap;

      color:
        var(--muted);

      font-size:.88rem;
    }


    .trustline span{
      display:flex;
      align-items:center;

      gap:8px;
    }


    .dot{
      width:7px;
      height:7px;

      border-radius:50%;

      background:
        var(--sage);
    }



    /* ==============================
       HERO PHOTO
    ============================== */

    .hero-photo{
      position:relative;

      min-height:640px;
    }


    .photo-card{
      position:absolute;

      inset:
        0
        0
        0
        48px;

      overflow:hidden;

      border-radius:
        180px
        180px
        26px
        26px;

      box-shadow:
        var(--shadow);

      background:#dbe6df;
    }


    .photo-card img{
      width:100%;
      height:100%;

      object-fit:cover;

      object-position:
        center 30%;
    }


    .floating{
      position:absolute;

      left:0;
      bottom:38px;

      width:250px;

      background:
        rgba(
          255,
          255,
          255,
          .94
        );

      padding:
        21px 22px;

      border-radius:22px;

      box-shadow:
        0
        16px
        46px
        rgba(
          28,
          39,
          33,
          .14
        );

      border:
        1px solid
        rgba(
          255,
          255,
          255,
          .7
        );
    }


    .floating small{
      color:
        var(--muted);

      text-transform:none;

      letter-spacing:.11em;
    }


    .floating b{
      display:block;

      margin-top:7px;

      font-size:1.08rem;

      line-height:1.35;
    }



    /* ==============================
       DARK STRIP
    ============================== */

    .strip{
      background:
        var(--ink);

      color:white;

      padding:
        20px 0;
    }


    .strip-inner{
      display:flex;

      justify-content:center;

      gap:36px;

      flex-wrap:wrap;

      font-size:.9rem;

      letter-spacing:.02em;
    }


    .strip span::before{
      content:"✦";

      margin-right:11px;

      color:#bfd1c7;
    }



    /* ==============================
       GENERAL SECTIONS
    ============================== */

    section{
      padding:
        100px 0;
    }


    .section-head{
      max-width:760px;

      margin-bottom:44px;
    }


    .kicker{
      color:
        var(--sage-dark);

      font-size:.78rem;

      text-transform:none;

      letter-spacing:.15em;

      font-weight:800;

      margin-bottom:13px;
    }


    h2{
      font-family:
        Georgia,
        "Times New Roman",
        serif;

      font-weight:500;

      font-size:
        clamp(
          2.4rem,
          4.4vw,
          4.35rem
        );

      letter-spacing:-.035em;
    }


    .section-head p{
      color:
        var(--muted);

      font-size:1.08rem;

      margin:
        18px 0 0;
    }



    /* ==============================
       RECOGNITION
    ============================== */

    .recognition{
      background:white;
    }


    .recognition-grid{
      display:grid;

      grid-template-columns:
        repeat(
          3,
          1fr
        );

      gap:16px;
    }


    .recognition-card{
      padding:30px;

      border:
        1px solid
        var(--line);

      border-radius:24px;

      background:
        var(--paper);

      min-height:205px;
    }


    .recognition-card .num{
      font-family:
        Georgia,
        serif;

      font-size:2rem;

      color:
        var(--sage-dark);

      margin-bottom:18px;
    }


    .recognition-card h3{
      font-size:1.05rem;

      margin-bottom:10px;
    }


    .recognition-card p{
      margin:0;

      color:
        var(--muted);

      font-size:.96rem;
    }



    /* ==============================
       METHOD
    ============================== */

    .method-grid{
      display:grid;

      grid-template-columns:
        .95fr
        1.05fr;

      gap:54px;

      align-items:center;
    }


    .method-panel{
      background:
        var(--sage-soft);

      border-radius:
        var(--radius);

      padding:46px;

      min-height:520px;

      position:relative;

      overflow:hidden;
    }


    .method-panel:after{
      content:"";

      position:absolute;

      width:330px;
      height:330px;

      border-radius:50%;

      right:-100px;
      bottom:-120px;

      border:
        1px solid
        #bdd0c5;
    }


    .method-steps{
      display:grid;

      gap:17px;

      margin-top:31px;
    }


    .step{
      display:grid;

      grid-template-columns:
        52px
        1fr;

      gap:16px;

      align-items:start;
    }


    .step-num{
      width:46px;
      height:46px;

      border-radius:50%;

      display:grid;
      place-items:center;

      border:
        1px solid
        #a9bfb3;

      background:
        rgba(
          255,
          255,
          255,
          .5
        );

      font-family:
        Georgia,
        serif;

      font-size:1.1rem;
    }


    .step h3{
      font-size:1.05rem;

      margin:
        1px 0 5px;
    }


    .step p{
      margin:0;

      color:
        var(--muted);

      font-size:.94rem;
    }


    .method-copy p{
      color:
        var(--muted);

      font-size:1.06rem;
    }


    .quote{
      margin-top:28px;

      border-left:
        3px solid
        var(--sage);

      padding-left:22px;

      font-family:
        Georgia,
        serif;

      font-size:1.5rem;

      line-height:1.45;
    }



    /* ==============================
       SERVICES
    ============================== */

    .services{
      background:
        var(--sand);
    }


    .service-grid{
      display:grid;

      grid-template-columns:
        repeat(
          3,
          1fr
        );

      gap:18px;
    }


    .service-card{
      background:white;

      border-radius:26px;

      padding:30px;

      min-height:340px;

      display:flex;

      flex-direction:column;

      box-shadow:
        0
        10px
        30px
        rgba(
          34,
          43,
          38,
          .05
        );
    }


    .service-tag{
      font-size:.74rem;

      text-transform:none;

      letter-spacing:.13em;

      color:
        var(--sage-dark);

      font-weight:800;
    }


    .service-card h3{
      font-family:
        Georgia,
        serif;

      font-size:1.72rem;

      font-weight:500;

      margin:
        15px 0 12px;
    }


    .service-card p{
      color:
        var(--muted);

      margin:0;
    }


    .service-card a{
      margin-top:auto;

      padding-top:24px;

      font-weight:750;

      color:
        var(--sage-dark);
    }


    .service-card a:hover{
      transform:
        translateX(3px);
    }



    /* ==============================
       ABOUT
    ============================== */

    .about-grid{
      display:grid;

      grid-template-columns:
        .86fr
        1.14fr;

      gap:58px;

      align-items:center;
    }


    .about-photo{
      border-radius:28px;

      overflow:hidden;

      min-height:590px;

      background:#d9dfdb;
    }


    .about-photo img{
      width:100%;
      height:100%;

      object-fit:cover;
    }


    .about-copy p{
      color:
        var(--muted);

      font-size:1.05rem;
    }


    .credentials{
      margin-top:28px;

      display:flex;

      gap:10px;

      flex-wrap:wrap;
    }


    .chip{
      border:
        1px solid
        var(--line);

      background:white;

      border-radius:999px;

      padding:
        10px 14px;

      font-size:.84rem;

      color:#46534c;
    }



    /* ==============================
       RETREAT
    ============================== */

    .retreat{
      padding:
        0
        0
        100px;
    }


    .retreat-box{
      display:grid;

      grid-template-columns:
        1fr
        1fr;

      background:
        var(--ink);

      color:white;

      border-radius:34px;

      overflow:hidden;
    }


    .retreat-img{
      min-height:520px;
    }


    .retreat-img img{
      width:100%;
      height:100%;

      object-fit:cover;
    }


    .retreat-copy{
      padding:62px;
    }


    .retreat-copy .kicker{
      color:#c3d4ca;
    }


    .retreat-copy h2{
      font-size:
        clamp(
          2.45rem,
          4vw,
          4rem
        );
    }


    .retreat-copy p{
      color:#ced6d1;
    }


    .retreat-copy .btn{
      margin-top:15px;

      background:white;

      color:
        var(--ink);
    }



    /* ==============================
       CTA
    ============================== */

    .cta{
      background:white;
    }


    .cta-box{
      background:
        var(--sage-soft);

      border-radius:34px;

      padding:68px;

      display:grid;

      grid-template-columns:
        1.2fr
        .8fr;

      gap:30px;

      align-items:center;

      border:
        1px solid
        #dce8e1;
    }


    .cta-box p{
      color:
        var(--muted);

      max-width:720px;
    }


    .cta-actions{
      display:flex;

      justify-content:flex-end;

      gap:10px;

      flex-wrap:wrap;
    }



    /* ==============================
       FOOTER
    ============================== */

    .disclaimer{
      padding:
        0
        0
        72px;

      color:#7c857f;

      font-size:.82rem;
    }


    footer{
      background:#171e1a;

      color:white;

      padding:
        48px 0;
    }


    .footer-grid{
      display:flex;

      justify-content:space-between;

      gap:30px;

      align-items:flex-start;

      flex-wrap:wrap;
    }


    .footer-muted{
      color:#aeb8b2;

      font-size:.9rem;
    }


    .footer-links{
      display:flex;

      gap:18px;

      flex-wrap:wrap;

      font-size:.9rem;
    }



    /* ==============================
       RESPONSIVE
    ============================== */

    @media(max-width:900px){

      .links{
        display:none;
      }


      .mobile-toggle{
        display:block;
        cursor:pointer;
      }


      .nav.open .links{
        display:flex;

        position:absolute;

        left:20px;
        right:20px;

        top:72px;

        flex-direction:column;

        align-items:stretch;

        background:white;

        padding:20px;

        border:
          1px solid
          var(--line);

        border-radius:20px;

        box-shadow:
          var(--shadow);
      }


      .nav.open .links .nav-cta{
        width:100%;
      }


      .hero-grid,
      .method-grid,
      .about-grid,
      .retreat-box,
      .cta-box{
        grid-template-columns:1fr;
      }


      .hero{
        padding-top:38px;
      }


      .hero-photo{
        min-height:540px;

        margin-top:12px;
      }


      .photo-card{
        left:32px;
      }


      .recognition-grid,
      .service-grid{
        grid-template-columns:1fr;
      }


      .retreat-copy{
        padding:
          42px 28px;
      }


      .cta-box{
        padding:
          44px 28px;
      }


      .cta-actions{
        justify-content:flex-start;
      }

    }



    @media(max-width:600px){

      .wrap{
        width:
          min(
            100% - 26px,
            var(--max)
          );
      }


      .nav{
        height:68px;
      }


      .brand{
        gap:10px;
      }


      .brand-logo{
        width:165px;
      }


      .brand-positioning{
        padding-left:10px;

        font-size:7.5px;

        letter-spacing:.10em;
      }


      .hero{
        padding-bottom:50px;
      }


      h1{
        font-size:3rem;
      }


      .lead{
        font-size:1.03rem;
      }


      .hero-photo{
        min-height:455px;
      }


      .photo-card{
        left:18px;

        border-radius:
          120px
          120px
          22px
          22px;
      }


      .floating{
        width:218px;

        padding:17px;

        bottom:24px;
      }


      section{
        padding:
          72px 0;
      }


      .method-panel{
        padding:29px;

        min-height:auto;
      }


      .about-photo{
        min-height:480px;
      }


      .strip-inner{
        justify-content:flex-start;

        gap:13px;
      }


      .strip-inner span{
        width:100%;
      }


      .retreat-img{
        min-height:390px;
      }

    }



    /* ==============================
       SCROLL FADE IN / FADE OUT
    ============================== */

    .reveal{
      opacity:0;

      transform:
        translateY(32px)
        scale(.985);

      transition:
        opacity
        .85s
        cubic-bezier(
          .22,
          .61,
          .36,
          1
        ),

        transform
        .85s
        cubic-bezier(
          .22,
          .61,
          .36,
          1
        );

      will-change:
        opacity,
        transform;
    }


    .reveal.show{
      opacity:1;

      transform:
        translateY(0)
        scale(1);
    }



    /* Hero image slower */

    .hero-photo.reveal{
      transform:
        translateY(24px)
        scale(.975);

      transition:
        opacity
        1.15s
        ease,

        transform
        1.15s
        cubic-bezier(
          .22,
          .61,
          .36,
          1
        );
    }


    .hero-photo.reveal.show{
      opacity:1;

      transform:
        translateY(0)
        scale(1);
    }



    /* Cards */

    .recognition-card.reveal,
    .service-card.reveal{
      transform:
        translateY(26px);
    }


    .recognition-card.reveal.show,
    .service-card.reveal.show{
      transform:
        translateY(0);
    }



    /* Dark strip */

    .strip span.reveal{
      transform:
        translateY(12px);
    }


    .strip span.reveal.show{
      transform:
        translateY(0);
    }



    /* Footer */

    footer .reveal{
      transform:
        translateY(18px);
    }


    footer .reveal.show{
      transform:
        translateY(0);
    }



    /* Accessibility */

    @media(
      prefers-reduced-motion:
      reduce
    ){

      .reveal,
      .reveal.show{
        opacity:1 !important;

        transform:none !important;

        transition:none !important;
      }

    }

/* =========================================================
   WORDPRESS THEME ADDITIONS
========================================================= */

body.admin-bar .topbar{ top:32px; }
@media(max-width:782px){ body.admin-bar .topbar{ top:46px; } }

.brand-logo-img{
  display:block;
  width:230px;
  height:auto;
  flex-shrink:0;
}

.footer-brand .brand-logo-img{
  filter:none;
  opacity:.94;
}

.benissi-news{
  background:#fff;
}

.news-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.news-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:24px;
  padding:28px;
  min-height:260px;
  display:flex;
  flex-direction:column;
}

.news-card .news-date{
  font-size:.76rem;
  text-transform:none;
  letter-spacing:.12em;
  color:var(--sage-dark);
  font-weight:800;
  margin-bottom:12px;
}

.news-card h3{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500;
  font-size:1.55rem;
  margin-bottom:12px;
}

.news-card p{
  color:var(--muted);
  margin:0 0 20px;
}

.news-card a{
  margin-top:auto;
  font-weight:750;
  color:var(--sage-dark);
}

@media(max-width:900px){
  .news-grid{grid-template-columns:1fr;}
}