/*
Theme Name: Longform
Theme URI: https://example.com/longform
Author: Distribution Strategy Group
Author URI: https://distributionstrategy.com
Description: A clean editorial theme for writers. Ships three block patterns — a full-screen image hero, a split about section, and a newsletter sign-up — that you insert into any page and edit directly in the block editor.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: longform
Tags: one-column, custom-logo, custom-menu, editor-style, featured-images, block-patterns, blog
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root{
  --lf-ink:#111111;
  --lf-body:#2b2b2b;
  --lf-muted:#6a6a6a;
  --lf-line:#dcdcdc;
  --lf-bg:#ffffff;
  --lf-bg-alt:#f4f2ef;
  --lf-accent:#111111;
  --lf-serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --lf-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --lf-max:1320px;
  --lf-gutter:clamp(20px,5vw,64px);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--lf-bg);
  color:var(--lf-body);
  font-family:var(--lf-sans);
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--lf-ink);text-decoration:underline;text-underline-offset:3px}
a:hover{opacity:.65}
h1,h2,h3,h4{
  font-family:var(--lf-serif);
  color:var(--lf-ink);
  font-weight:400;
  line-height:1.18;
  margin:0 0 .6em;
  letter-spacing:.005em;
}
p{margin:0 0 1.35em}
p:last-child{margin-bottom:0}
.lf-container{max-width:var(--lf-max);margin:0 auto;padding-inline:var(--lf-gutter)}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;
}
.skip-link:focus{
  position:fixed;top:12px;left:12px;z-index:999;background:#fff;
  padding:10px 16px;clip:auto;clip-path:none;width:auto;height:auto;
}

/* ==========================================================================
   3. Header
   ========================================================================== */
.lf-header{
  position:absolute;top:0;left:0;right:0;z-index:20;
  padding:26px var(--lf-gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.lf-header--solid{
  position:relative;background:var(--lf-bg);
  border-bottom:1px solid var(--lf-line);
}
.lf-brand{
  font-family:var(--lf-serif);font-size:1.5rem;color:#fff;
  text-decoration:none;letter-spacing:.01em;
}
.lf-header--solid .lf-brand{color:var(--lf-ink)}
.lf-brand img{max-height:52px;width:auto}
.lf-nav{display:flex;align-items:center;gap:28px}
.lf-nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0}
.lf-nav a{
  color:#fff;text-decoration:none;font-size:.82rem;
  letter-spacing:.14em;text-transform:uppercase;
}
.lf-header--solid .lf-nav a{color:var(--lf-ink)}
.lf-social{display:flex;gap:18px;align-items:center}
.lf-social a{color:#fff;display:inline-flex}
.lf-header--solid .lf-social a{color:var(--lf-ink)}
.lf-social svg{width:17px;height:17px;fill:currentColor}
.lf-nav-toggle{
  display:none;background:none;border:0;color:#fff;cursor:pointer;
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;padding:6px 0;
}
.lf-header--solid .lf-nav-toggle{color:var(--lf-ink)}

/* ==========================================================================
   4. Pattern: Hero (core/cover + heading + buttons)
   ========================================================================== */
.lf-b-hero.wp-block-cover{
  min-height:100svh;
  align-items:flex-end;
  padding:0;
}
.lf-b-hero .wp-block-cover__inner-container{
  width:100%;
  max-width:var(--lf-max);
  margin-inline:auto;
  padding:0 var(--lf-gutter) clamp(56px,9vh,110px);
}
/* Stronger scrim at the foot so the headline stays legible on a light photo. */
.lf-b-hero .wp-block-cover__background{
  background:linear-gradient(to bottom,
    rgba(0,0,0,.45) 0%,
    rgba(0,0,0,.05) 26%,
    rgba(0,0,0,.34) 58%,
    rgba(0,0,0,.80) 100%)!important;
  opacity:1!important;
}
.lf-b-hero__title{
  max-width:20ch;
  color:#fff;
  text-shadow:0 1px 30px rgba(0,0,0,.35);
  margin:0;
}
.lf-b-hero .wp-block-cover__inner-container > p{
  color:rgba(255,255,255,.88);
  max-width:56ch;
  margin-top:18px;
}
.lf-b-hero__cta{margin-top:30px}
.lf-b-hero .wp-block-button.is-style-outline .wp-block-button__link{
  border-color:rgba(255,255,255,.8);
  color:#fff;
  background:transparent;
}
.lf-b-hero .wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:#fff;
  color:var(--lf-ink);
}

/* ==========================================================================
   5. Pattern: About split (core/columns)
   ========================================================================== */
.lf-b-about.wp-block-columns{
  gap:0;
  margin-block:0;
  align-items:stretch;
}
.lf-b-about .lf-b-about__text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(56px,8vw,120px) clamp(28px,6vw,96px);
}
.lf-b-about .lf-b-about__text > *{
  max-width:44ch;
  margin-inline:auto;
  width:100%;
}
.lf-b-about__title{
  width:auto!important;
  align-self:center;
  border-bottom:1px solid var(--lf-ink);
  padding-bottom:.12em;
  margin-bottom:.9em;
}
.lf-b-about__sig{
  font-family:var(--lf-serif);
  font-size:1.5rem;
  margin-top:1.2em;
}
.lf-b-about__media{
  display:flex;
}
.lf-b-about__media .wp-block-image,
.lf-b-about__media figure{
  margin:0;
  width:100%;
}
.lf-b-about__media img{
  width:100%;
  height:100%;
  min-height:520px;
  object-fit:cover;
  display:block;
}

/* ==========================================================================
   6. Pattern: Newsletter (core/group)
   ========================================================================== */
.lf-b-news.wp-block-group{
  padding:clamp(64px,9vw,130px) var(--lf-gutter);
  text-align:center;
}
.lf-b-news > *{max-width:660px;margin-inline:auto}
.lf-b-news__title{margin-bottom:.5em}
.lf-b-news__fine{max-width:52ch;margin-top:1.6em}

.lf-form{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  max-width:520px;margin:2em auto 0;
}
.lf-form input[type=email]{
  flex:1 1 280px;min-width:0;
  padding:15px 18px;border:1px solid var(--lf-line);background:#fff;
  font-family:inherit;font-size:.98rem;color:var(--lf-ink);border-radius:0;
}
.lf-form input[type=email]:focus{outline:2px solid var(--lf-ink);outline-offset:-2px}
.lf-form button{
  padding:15px 34px;border:1px solid var(--lf-ink);background:var(--lf-ink);color:#fff;
  font-family:inherit;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;border-radius:0;transition:background .2s ease,color .2s ease;
}
.lf-form button:hover{background:transparent;color:var(--lf-ink)}

/* ==========================================================================
   7. Generic page/post content
   ========================================================================== */
.lf-main{padding:clamp(48px,7vw,96px) 0}
.lf-entry{max-width:760px;margin:0 auto}
.lf-entry__title{font-size:clamp(1.9rem,3.4vw,2.9rem)}
.lf-entry__meta{
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--lf-muted);margin-bottom:2em;
}
.lf-entry + .lf-entry{margin-top:72px;padding-top:72px;border-top:1px solid var(--lf-line)}

/* A page built from the patterns runs edge to edge, so drop the wrapper. */
.lf-page-blocks{padding:0}
.lf-page-blocks .lf-entry{max-width:none;margin:0}

/* ==========================================================================
   8. Footer
   ========================================================================== */
.lf-footer{
  border-top:1px solid var(--lf-line);
  padding:44px var(--lf-gutter);
  text-align:center;font-size:.8rem;color:var(--lf-muted);
  letter-spacing:.06em;
}

/* ==========================================================================
   9. Editor parity — the canvas should read like the front end
   ========================================================================== */
.editor-styles-wrapper .lf-b-hero.wp-block-cover{min-height:70vh}
.editor-styles-wrapper .lf-b-about__media img{min-height:380px}

/* ==========================================================================
   10. Responsive
   ========================================================================== */
@media (max-width:900px){
  .lf-b-about.wp-block-columns{flex-wrap:wrap!important}
  .lf-b-about .wp-block-column{flex-basis:100%!important}
  .lf-b-about__media{order:-1}
  .lf-b-about__media img{min-height:340px}
}
@media (max-width:782px){
  body.admin-bar .lf-header{top:46px}
}
@media (max-width:768px){
  .lf-nav-toggle{display:inline-block}
  .lf-nav ul{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;
    background:rgba(17,17,17,.96);padding:14px var(--lf-gutter) 22px;
  }
  .lf-header--solid .lf-nav ul{background:var(--lf-bg);border-bottom:1px solid var(--lf-line)}
  .lf-nav.is-open ul{display:flex}
  .lf-nav ul li{padding:10px 0}
  .lf-b-hero.wp-block-cover{min-height:88svh}
  .lf-form{flex-direction:column}
  .lf-form input[type=email]{flex:0 0 auto;width:100%}
  .lf-form button{width:100%}
}