/*
Theme Name: CS Hairstudio - Tijdelijke Pagina
Theme URI: https://hairapppurm.mijnsalon.nl/
Author: CS Hairstudio
Description: Tijdelijke holding-pagina voor de naamswijziging van Hairapp Purmerend naar CS Hairstudio: aankondiging, boekingsknop en adresgegevens. Vervang dit thema zodra de nieuwe website klaar is.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: cs-hairstudio-tijdelijk
*/
  @font-face{
    font-family:'Glacial Indifference';
    src:url('assets/fonts/GlacialIndifference-Regular.otf') format('opentype');
    font-weight:400;
    font-style:normal;
    font-display:swap;
  }
  @font-face{
    font-family:'Glacial Indifference';
    src:url('assets/fonts/GlacialIndifference-Bold.otf') format('opentype');
    font-weight:700;
    font-style:normal;
    font-display:swap;
  }

  :root{
    --rose:#c59a85;
    --ivory:#f4ece6;
    --sand:#e9ded4;
    --taupe:#d6ccc2;
    --ink:#1a1a1a;
    --paper:#fffaf7;
    --font-display:'Glacial Indifference','Montserrat','Helvetica Neue',Arial,sans-serif;
    --font-body:'Cormorant Garamond','Maharlika',Georgia,serif;
  }

  /* CS Hairstudio has its own established huisstijl (this palette, these two
     typefaces, this logo) — this page uses it as-is rather than a new
     invented identity, and commits to it in both themes on purpose. */

  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;}

  .wrap{
    max-width:660px;
    margin-inline-start:clamp(20px,8vw,96px);
    margin-inline-end:20px;
  }

  h1,h2{
    font-family:var(--font-display);
    font-weight:700;
    text-wrap:balance;
    margin:0;
  }

  a{color:inherit;}

  .btn{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    text-decoration:none;
    font-family:var(--font-display);
    font-weight:700;
    font-size:.95rem;
    letter-spacing:.02em;
    padding:.9rem 1.8rem;
    border-radius:999px;
    border:1px solid transparent;
    transition:background-color .2s ease, color .2s ease, transform .2s ease;
  }
  .btn:hover{transform:translateY(-1px);}
  .btn:focus-visible{outline:2px solid var(--rose); outline-offset:3px;}

  .btn-dark{background:var(--ink); color:var(--paper);}
  .btn-dark:hover{background:#000;}


  /* ---------- hero ---------- */
  .hero{
    background:var(--rose);
    color:var(--ink);
  }
  .hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:stretch;
    min-height:640px;
  }
  .hero-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:clamp(40px,6vw,72px) clamp(24px,6vw,64px);
  }
  .hero-media{
    position:relative;
    overflow:hidden;
  }
  .hero-media img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:65% 20%;
  }
  .rebrand{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:clamp(12px,2.4vw,26px);
    margin-bottom:clamp(32px,5vw,48px);
  }
  .old-logo{
    height:clamp(40px,5.6vw,100px);
    width:auto;
    flex-shrink:0;
  }
  .rebrand-arrow{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(2rem,3.4vw,3.5rem);
    opacity:.75;
    flex-shrink:0;
  }
  .logo{
    width:clamp(160px,17vw,300px);
    height:auto;
    flex-shrink:0;
  }
  .eyebrow{
    font-family:var(--font-display);
    font-size:.9rem;
    color:var(--ink);
    opacity:.75;
    margin:0 0 .8rem;
  }
  .strapline{
    font-family:var(--font-body);
    font-style:italic;
    font-weight:500;
    font-size:clamp(1.3rem,2vw + .7rem,1.7rem);
    margin:0 0 1.9rem;
    max-width:24ch;
    line-height:1.35;
  }

  .hero-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:1.1rem;
  }
  .hero-note{
    font-family:var(--font-body);
    font-size:clamp(1.2rem,1.6vw + .7rem,1.45rem);
    line-height:1.45;
    max-width:30ch;
    opacity:.85;
  }

  @media (max-width:980px){
    .hero-grid{
      grid-template-columns:1fr;
      min-height:0;
    }
    .hero-media{
      order:-1;
      aspect-ratio:4/5;
    }
    .hero-text{
      padding:clamp(36px,8vw,48px) 20px clamp(40px,8vw,56px);
    }
    .rebrand{
      gap:clamp(10px,4vw,22px);
    }
    .old-logo{
      height:clamp(36px,11vw,68px);
    }
    .rebrand-arrow{
      font-size:clamp(1.5rem,6vw,2.3rem);
    }
    .logo{
      width:clamp(138px,44vw,220px);
    }
  }

  /* ---------- story ---------- */
  .story{
    background:var(--ivory);
    padding-block:clamp(48px,8vw,80px);
  }
  .story h2{
    font-size:clamp(1.7rem,2.5vw + 1rem,2.3rem);
    margin-bottom:1.2rem;
  }
  .story p{
    font-size:1.2rem;
    line-height:1.7;
    margin:0 0 1.2rem;
    max-width:56ch;
  }
  .story p:last-child{margin-bottom:0;}

  /* ---------- contact ---------- */
  .contact{
    background:var(--ink);
    color:var(--paper);
    padding-block:clamp(48px,8vw,80px);
  }
  .contact h2{
    color:var(--paper);
    font-size:clamp(1.6rem,2.5vw + 1rem,2.1rem);
    margin-bottom:1.3rem;
  }
  .icon{
    flex-shrink:0;
    display:block;
  }
  .contact-info{
    display:flex;
    flex-direction:column;
    gap:.65rem;
    margin-bottom:1.5rem;
  }
  .info-row{
    display:flex;
    align-items:flex-start;
    gap:.7rem;
  }
  .info-row .icon{
    width:20px;
    height:20px;
    margin-top:.25rem;
    opacity:.75;
  }
  .address{
    font-family:var(--font-body);
    font-size:1.25rem;
    line-height:1.55;
    margin:0;
  }
  .phone{
    font-family:var(--font-body);
    font-size:1.25rem;
    line-height:1.55;
    opacity:.85;
    margin:0;
  }
  .maps-link{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    font-family:var(--font-body);
    font-size:1.05rem;
    text-decoration:underline;
    text-decoration-color:var(--rose);
    text-underline-offset:3px;
    color:var(--paper);
    margin-bottom:1.9rem;
  }
  .maps-link .icon{
    width:16px;
    height:16px;
    opacity:.9;
  }
  .btn .icon{
    width:18px;
    height:18px;
  }