/*
Theme Name: Pink Lotus Editorial
Theme URI: https://pinklotusphotography.co.uk
Author: Pink Lotus Photography
Author URI: https://pinklotusphotography.co.uk
Description: A fully customisable editorial-style WordPress theme built for Pink Lotus Photography — luxury wedding photographers in London. Features a magazine-style contact-sheet portfolio, hero slider, testimonials, pricing packages, and built-in on-page SEO controls, all editable from the WordPress Customizer and admin dashboard.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pink-lotus
Tags: photography, portfolio, wedding, editorial, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles

Pink Lotus Editorial is proprietary in design but distributed here as a starting theme for the site owner's own use.
*/

/* =========================================================
   0. DESIGN TOKENS
   ========================================================= */
:root{
  --pl-ink:        #211A1D;   /* primary dark / charcoal-plum */
  --pl-ink-soft:    #2E262A;
  --pl-cream:       #F6F2EC;  /* light background */
  --pl-cream-dim:   #EDE6DA;
  --pl-paper:       #FFFFFF;
  --pl-accent:      #C08497;  /* dusty rose accent, used sparingly */
  --pl-accent-dim:  #8C6470;
  --pl-line:        rgba(246,242,236,0.18);
  --pl-line-dark:   rgba(33,26,29,0.14);
  --pl-text-on-dark: #F6F2EC;
  --pl-text-on-light:#211A1D;
  --pl-muted-dark:  rgba(246,242,236,0.62);
  --pl-muted-light: rgba(33,26,29,0.60);

  --pl-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --pl-font-body:    'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pl-font-mono:    'Jost', sans-serif;

  --pl-container: 1280px;
  --pl-gutter: clamp(20px, 5vw, 64px);
  --pl-radius: 2px;
  --pl-ease: cubic-bezier(.6,.05,.28,1);
}

/* =========================================================
   1. RESET
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--pl-cream);
  color: var(--pl-text-on-light);
  font-family: var(--pl-font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input, textarea, select{ font-family:inherit; font-size:1em; }
h1,h2,h3,h4,h5,h6{ font-family:var(--pl-font-display); font-weight:400; margin:0 0 .5em; line-height:1.1; letter-spacing:-.01em; }
p{ margin:0 0 1em; }

.pl-container{ max-width:var(--pl-container); margin:0 auto; padding-inline: var(--pl-gutter); }
.screen-reader-text{
  position:absolute!important; width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:9999; background:var(--pl-accent);
  color:#fff; padding:14px 22px; font-family:var(--pl-font-body); text-transform:uppercase; letter-spacing:.1em; font-size:.8rem;
}
.skip-link:focus{ left: var(--pl-gutter); top: 10px; }
:focus-visible{ outline: 2px solid var(--pl-accent); outline-offset: 3px; }

/* Eyebrow / label style used across sections */
.pl-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.22em;
  color: var(--pl-accent); font-weight:500; margin-bottom: 18px;
}
.pl-eyebrow::before{ content:""; width:26px; height:1px; background: var(--pl-accent); }

.pl-section{ padding: clamp(64px, 10vw, 140px) 0; position:relative; }
.pl-section--dark{ background: var(--pl-ink); color: var(--pl-text-on-dark); }
.pl-section--dark h2, .pl-section--dark h3{ color: var(--pl-text-on-dark); }
.pl-section--cream{ background: var(--pl-cream); }
.pl-section--paper{ background: var(--pl-paper); }
.pl-section-head{ max-width: 720px; margin-bottom: 56px; }
.pl-section-head h2{ font-size: clamp(2rem, 4vw, 3.1rem); }
.pl-section-head p{ color: var(--pl-muted-light); font-size:1.05rem; max-width: 52ch; }
.pl-section--dark .pl-section-head p{ color: var(--pl-muted-dark); }

.pl-btn{
  display:inline-flex; align-items:center; gap:10px; padding: 15px 32px;
  border:1px solid currentColor; font-size:.78rem; text-transform:uppercase; letter-spacing:.14em;
  transition: all .35s var(--pl-ease); background:transparent;
}
.pl-btn--solid{ background: var(--pl-ink); color: var(--pl-cream); border-color: var(--pl-ink); }
.pl-btn--solid:hover{ background: var(--pl-accent); border-color: var(--pl-accent); color:#fff; }
.pl-btn--outline-dark{ color: var(--pl-ink); border-color: var(--pl-ink); }
.pl-btn--outline-dark:hover{ background: var(--pl-ink); color: var(--pl-cream); }
.pl-btn--outline-light{ color: var(--pl-cream); border-color: var(--pl-line); }
.pl-btn--outline-light:hover{ background: var(--pl-cream); color: var(--pl-ink); border-color:var(--pl-cream); }

/* =========================================================
   2. HEADER
   ========================================================= */
.pl-site-header{
  position:absolute; top:0; left:0; right:0; z-index:100;
  padding: 28px 0;
}
.pl-site-header.is-solid{
  position:fixed; background: var(--pl-ink); box-shadow:0 4px 24px rgba(0,0,0,.15);
  animation: pl-slidedown .35s var(--pl-ease);
  padding: 16px 0;
}
@keyframes pl-slidedown{ from{ transform:translateY(-100%); } to{ transform:translateY(0); } }
.pl-header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.pl-logo{ font-family: var(--pl-font-display); font-size: 1.5rem; color: var(--pl-cream); letter-spacing:.01em; }
.pl-logo img{ max-height:44px; width:auto; }
.pl-logo em{ font-style:italic; color: var(--pl-accent); }
.pl-nav-primary ul{ display:flex; gap:34px; align-items:center; }
.pl-nav-primary a{
  color: var(--pl-cream); font-size:.82rem; text-transform:uppercase; letter-spacing:.12em;
  position:relative; padding-bottom:4px;
}
.pl-nav-primary a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background: var(--pl-accent);
  transition: width .3s var(--pl-ease);
}
.pl-nav-primary a:hover::after, .pl-nav-primary li.current-menu-item a::after{ width:100%; }
.pl-header-actions{ display:flex; align-items:center; gap:20px; }
.pl-menu-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:0; padding:6px; z-index:200;
}
.pl-menu-toggle span{ width:26px; height:1px; background: var(--pl-cream); display:block; transition: all .3s var(--pl-ease); }

@media (max-width: 900px){
  .pl-nav-primary{
    position:fixed; inset:0; background: var(--pl-ink); display:flex; align-items:center; justify-content:center;
    transform: translateX(100%); transition: transform .45s var(--pl-ease); z-index:150;
  }
  .pl-nav-primary.is-open{ transform:translateX(0); }
  .pl-nav-primary ul{ flex-direction:column; gap:28px; text-align:center; }
  .pl-nav-primary a{ font-size:1.1rem; }
  .pl-menu-toggle{ display:flex; }
  .pl-header-actions .pl-btn{ display:none; }
  body.pl-nav-open{ overflow:hidden; }
}

/* =========================================================
   3. HERO SLIDER
   ========================================================= */
.pl-hero{ position:relative; height:100vh; min-height:620px; overflow:hidden; background:var(--pl-ink); }
.pl-hero-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden; transition: opacity 1.1s var(--pl-ease);
  display:flex; align-items:flex-end;
}
.pl-hero-slide.is-active{ opacity:1; visibility:visible; z-index:2; }
.pl-hero-slide img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.pl-hero-slide::before{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(33,26,29,.15) 0%, rgba(33,26,29,.75) 100%);
}
.pl-hero-content{ position:relative; z-index:2; color:var(--pl-cream); padding: 0 0 90px; max-width:760px; }
.pl-hero-content .pl-eyebrow{ color: var(--pl-cream); opacity:.85; }
.pl-hero-content .pl-eyebrow::before{ background: var(--pl-accent); }
.pl-hero-content h1{ font-size: clamp(2.4rem, 6vw, 4.4rem); margin-bottom:.3em; }
.pl-hero-content p{ font-size:1.1rem; max-width:46ch; color: rgba(246,242,236,.85); margin-bottom:2em; }
.pl-hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.pl-hero-nav{
  position:absolute; z-index:3; bottom:44px; right: var(--pl-gutter); display:flex; align-items:center; gap:18px;
  color: var(--pl-cream);
}
.pl-hero-nav button{ background:none; border:1px solid var(--pl-line); color:var(--pl-cream); width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.3s; }
.pl-hero-nav button:hover{ background: var(--pl-accent); border-color: var(--pl-accent); }
.pl-hero-count{ font-size:.78rem; letter-spacing:.15em; font-variant-numeric: tabular-nums; }

/* =========================================================
   4. ABOUT / BEHIND THE LENS
   ========================================================= */
.pl-about{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px,6vw,90px); align-items:center; }
.pl-about-media{ position:relative; }
.pl-about-media img{ width:100%; aspect-ratio: 4/5; object-fit:cover; }
.pl-about-media .pl-frame-tag{
  position:absolute; bottom:-20px; left:-20px; background: var(--pl-ink); color: var(--pl-cream);
  padding:14px 22px; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
}
.pl-about-copy h2{ font-size: clamp(2rem, 4vw, 3rem); }
.pl-about-copy p{ font-size:1.08rem; color: var(--pl-muted-light); max-width:52ch; }
.pl-about-stats{ display:flex; gap:34px; margin-top:34px; flex-wrap:wrap; }
.pl-about-stats li{ font-size:.86rem; letter-spacing:.04em; display:flex; align-items:center; gap:8px; }
.pl-about-stats .pl-stat-icon{ color: var(--pl-accent); }
@media (max-width: 860px){ .pl-about{ grid-template-columns:1fr; } .pl-about-media .pl-frame-tag{ left:0; } }

/* =========================================================
   5. PORTFOLIO — CONTACT SHEET
   ========================================================= */
.pl-filter-bar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:44px; }
.pl-filter-bar button{
  background:none; border:1px solid var(--pl-line-dark); color: var(--pl-text-on-light);
  padding:10px 20px; font-size:.75rem; text-transform:uppercase; letter-spacing:.12em; transition:.3s;
}
.pl-section--dark .pl-filter-bar button{ border-color: var(--pl-line); color: var(--pl-cream); }
.pl-filter-bar button.is-active, .pl-filter-bar button:hover{ background: var(--pl-ink); color: var(--pl-cream); border-color: var(--pl-ink); }
.pl-section--dark .pl-filter-bar button.is-active, .pl-section--dark .pl-filter-bar button:hover{ background: var(--pl-accent); border-color: var(--pl-accent); }

.pl-contact-sheet{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.pl-frame{ position:relative; overflow:hidden; aspect-ratio: 4/5; background:#000; }
.pl-frame img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--pl-ease); filter: grayscale(15%); }
.pl-frame:hover img{ transform: scale(1.06); filter:grayscale(0%); }
.pl-frame-no{
  position:absolute; left:12px; bottom:12px; color:#fff; font-size:.7rem; letter-spacing:.1em; font-style:italic;
  z-index:2; text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.pl-frame::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55) 100%); }
@media (max-width: 900px){ .pl-contact-sheet{ grid-template-columns: repeat(2,1fr); } }
.pl-load-more{ margin-top:44px; text-align:center; }

/* =========================================================
   6. TESTIMONIALS
   ========================================================= */
.pl-testimonial-slider{ position:relative; max-width:820px; margin:0 auto; text-align:center; }
.pl-testimonial{ display:none; }
.pl-testimonial.is-active{ display:block; animation: pl-fadein .6s var(--pl-ease); }
@keyframes pl-fadein{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
.pl-testimonial blockquote{ font-family: var(--pl-font-display); font-size: clamp(1.4rem, 2.6vw, 2rem); font-style:italic; margin:0 0 28px; line-height:1.45; }
.pl-testimonial cite{ font-style:normal; display:block; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color: var(--pl-accent); }
.pl-stars{ letter-spacing:.2em; color: var(--pl-accent); margin-bottom:18px; font-size:.9rem; }
.pl-testimonial-dots{ display:flex; justify-content:center; gap:10px; margin-top:36px; }
.pl-testimonial-dots button{ width:8px; height:8px; border-radius:50%; background: var(--pl-line); border:0; padding:0; }
.pl-testimonial-dots button.is-active{ background: var(--pl-accent); }

/* =========================================================
   7. PRICING
   ========================================================= */
.pl-pricing-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items:stretch; }
.pl-price-card{
  border:1px solid var(--pl-line-dark); padding: 44px 34px; display:flex; flex-direction:column; background: var(--pl-paper);
  transition: transform .4s var(--pl-ease), box-shadow .4s var(--pl-ease);
}
.pl-price-card:hover{ transform: translateY(-6px); box-shadow: 0 20px 50px rgba(33,26,29,.1); }
.pl-price-card.is-featured{ background: var(--pl-ink); color: var(--pl-cream); border-color: var(--pl-ink); }
.pl-price-card.is-featured .pl-price-features li{ color: var(--pl-muted-dark); }
.pl-price-name{ font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color: var(--pl-accent); margin-bottom:10px; }
.pl-price-amount{ font-family: var(--pl-font-display); font-size: 2.6rem; margin-bottom: 24px; }
.pl-price-features{ flex:1; margin-bottom:30px; }
.pl-price-features li{ padding: 10px 0; border-top:1px solid var(--pl-line-dark); font-size:.92rem; color: var(--pl-muted-light); }
.pl-price-card.is-featured .pl-price-features li{ border-color: var(--pl-line); }
.pl-price-features li:first-child{ border-top:0; }
@media (max-width: 900px){ .pl-pricing-grid{ grid-template-columns:1fr; } }

/* =========================================================
   8. INSTAGRAM / GALLERY STRIP
   ========================================================= */
.pl-insta-grid{ display:grid; grid-template-columns: repeat(6, 1fr); gap:4px; }
.pl-insta-grid a{ position:relative; aspect-ratio:1; overflow:hidden; display:block; }
.pl-insta-grid img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--pl-ease); }
.pl-insta-grid a:hover img{ transform: scale(1.08); }
@media (max-width: 700px){ .pl-insta-grid{ grid-template-columns: repeat(3,1fr); } }

/* =========================================================
   9. CTA BAND
   ========================================================= */
.pl-cta-band{ text-align:center; }
.pl-cta-band h2{ font-size: clamp(1.9rem, 4vw, 3rem); max-width:16ch; margin:0 auto .3em; }
.pl-cta-band p{ color: var(--pl-muted-dark); max-width:46ch; margin:0 auto 34px; }

/* =========================================================
   10. FOOTER
   ========================================================= */
.pl-site-footer{ background: var(--pl-ink); color: var(--pl-cream); padding: 80px 0 30px; }
.pl-footer-grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; padding-bottom: 60px; border-bottom:1px solid var(--pl-line); }
.pl-footer-grid h4{ font-size:.75rem; text-transform:uppercase; letter-spacing:.16em; color: var(--pl-accent); margin-bottom: 18px; font-family: var(--pl-font-body); }
.pl-footer-grid p{ color: var(--pl-muted-dark); max-width:40ch; }
.pl-footer-grid li{ margin-bottom:10px; }
.pl-footer-grid a:hover{ color: var(--pl-accent); }
.pl-footer-bottom{ display:flex; justify-content:space-between; padding-top:26px; font-size:.78rem; color: var(--pl-muted-dark); flex-wrap:wrap; gap:10px; }
@media (max-width: 760px){ .pl-footer-grid{ grid-template-columns:1fr; } }

/* =========================================================
   11. BLOG / ARCHIVE / SINGLE
   ========================================================= */
.pl-page-header{ background: var(--pl-ink); color: var(--pl-cream); padding: 180px 0 80px; text-align:center; }
.pl-page-header h1{ font-size: clamp(2.2rem, 5vw, 3.6rem); }
.pl-page-header p{ color: var(--pl-muted-dark); max-width:60ch; margin:14px auto 0; }
.pl-blog-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 40px; }
.pl-post-card img{ aspect-ratio: 4/3; object-fit:cover; margin-bottom:20px; }
.pl-post-card .pl-eyebrow{ color: var(--pl-accent-dim); }
.pl-post-card h3{ font-size:1.4rem; margin-bottom:.4em; }
.pl-post-card p{ color: var(--pl-muted-light); font-size:.95rem; }
.pl-post-meta{ font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color: var(--pl-muted-light); margin-bottom:10px; }
@media (max-width: 900px){ .pl-blog-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 600px){ .pl-blog-grid{ grid-template-columns:1fr; } }

.pl-single-content{ max-width: 760px; margin:0 auto; }
.pl-single-content img{ margin: 1.6em 0; }
.pl-single-content h2{ font-size:1.8rem; margin-top:1.4em; }
.pl-single-content h3{ font-size:1.4rem; margin-top:1.2em; }
.pl-single-content blockquote{ border-left: 2px solid var(--pl-accent); padding-left: 24px; font-style:italic; font-family: var(--pl-font-display); font-size:1.2rem; }
.pl-single-content a{ color: var(--pl-accent-dim); text-decoration:underline; }

.pl-pagination{ display:flex; justify-content:center; gap:12px; margin-top: 60px; }
.pl-pagination a, .pl-pagination span{ padding:10px 16px; border:1px solid var(--pl-line-dark); font-size:.85rem; }
.pl-pagination .current{ background: var(--pl-ink); color: var(--pl-cream); }

/* Comments */
.pl-comments{ max-width:760px; margin: 60px auto 0; }
.pl-comments textarea, .pl-comments input[type="text"], .pl-comments input[type="email"], .pl-comments input[type="url"]{
  width:100%; border:1px solid var(--pl-line-dark); padding:14px 16px; margin-bottom:16px; background: var(--pl-paper);
}
.pl-comments .comment-form-cookies-consent{ display:flex; gap:8px; align-items:center; }

/* Widgets / sidebar */
.widget{ margin-bottom: 44px; }
.widget h2, .widget-title{ font-size:.85rem; text-transform:uppercase; letter-spacing:.14em; margin-bottom:18px; }
.widget ul li{ padding:8px 0; border-top:1px solid var(--pl-line-dark); }
.widget ul li:first-child{ border-top:0; }

/* 404 */
.pl-404{ text-align:center; padding: 200px 0 140px; }
.pl-404 h1{ font-size: clamp(4rem,10vw,8rem); color: var(--pl-accent); }

/* Contact page */
.pl-contact-wrap{ display:grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.pl-contact-info li{ display:flex; gap:14px; margin-bottom:22px; font-size:1rem; }
.pl-contact-info .pl-label{ color: var(--pl-accent); text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; display:block; margin-bottom:4px; }
.wpcf7-form input, .wpcf7-form textarea, .pl-form input, .pl-form textarea, .pl-form select{
  width:100%; padding:15px 16px; border:1px solid var(--pl-line-dark); background:transparent; margin-bottom:18px;
}
.pl-form label{ font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; display:block; margin-bottom:8px; color: var(--pl-muted-light); }
@media (max-width: 860px){ .pl-contact-wrap{ grid-template-columns:1fr; } }

/* Reveal-on-scroll */
.pl-reveal{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--pl-ease), transform .8s var(--pl-ease); }
.pl-reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .pl-reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}