/*
Theme Name: Creased Lightning
Theme URI: https://creasedlightning.co.uk/
Author: Creased Lightning
Description: A one-page theme for Creased Lightning, an ironing service in Wollaton, Nottingham. Built to the Creased Lightning brand guidelines: Olive, Cream, Ink, Sage, Warm Tan and Lightning Gold, with Antique Olive Compact used for headings where an Adobe Fonts kit is available and Lato as the approved fallback. Includes an enquiry form that opens the visitor's own email app, and LocalBusiness structured data for local search.
Version: 1.6.2
Requires at least: 6.0
Tested up to: 6.6
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: creased-lightning
Tags: one-column, custom-colors, custom-logo, custom-menu, editor-style, accessibility-ready
*/

/* ==========================================================================
   All styles live in this one file. Colours come from the brand guidelines:
   Olive #65784D · Deep Olive #43512F · Cream #FDF9EC · Ink #110F0D
   Sage #9AA584 · Warm Tan #B5A071 · Lightning Gold #EFBD34 (accent, max 5%)
   ========================================================================== */

:root{
  --olive:#65784D;
  --deep-olive:#43512F;
  --cream:#FDF9EC;
  --ink:#110F0D;
  --sage:#9AA584;
  --tan:#B5A071;
  --gold:#EFBD34;

  /* Antique Olive Compact first — if an Adobe Fonts kit is added later it takes
     over automatically. Lato is the guidelines' approved alternative until then. */
  --display:"antique-olive-compact","Lato","Source Sans 3",Arial,sans-serif;
  --body:"Source Sans 3","Source Sans Pro",Arial,sans-serif;
  --light:"Lato","Source Sans 3",Arial,sans-serif;

  --wrap:1080px;
}

*,*::before,*::after{box-sizing:border-box;}
body,h1,h2,h3,p,figure,ul,ol,fieldset,legend{margin:0;padding:0;}
ul{list-style:none;}
img{max-width:100%;height:auto;display:block;}

html{scroll-behavior:smooth;}
body{
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.amt{
  font-family:var(--display);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-0.01em;
  line-height:1.04;
}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto;}

.eyebrow{
  font-family:var(--light);font-weight:300;
  font-size:.85rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--deep-olive);
}

a{color:var(--deep-olive);}
/* High-contrast focus ring: ink on light panels, gold on the dark ones. */
:focus-visible{outline:4px solid var(--ink);outline-offset:2px;}
.topbar :focus-visible,.enquire > .wrap > .eyebrow:focus-visible,
.enquire .intro :focus-visible,.site-footer :focus-visible,.promise :focus-visible{outline-color:var(--gold);}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--ink);
  padding:.75rem 1.25rem;font-weight:700;z-index:100;
}
.skip:focus{left:0;}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--body);font-weight:700;font-size:1rem;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  padding:.95rem 1.6rem;border:2px solid transparent;cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.btn-gold{background:var(--gold);color:var(--ink);}
.btn-gold:hover{background:#e0ad22;}
.btn-outline{background:transparent;color:var(--deep-olive);border-color:var(--olive);}
.btn-outline:hover{background:var(--olive);color:var(--cream);}
.btn-cream{background:var(--cream);color:var(--ink);}
.btn-cream:hover{background:#f2ead2;}

/* ---------------- top bar ---------------- */
.topbar{
  background:var(--olive);
  position:sticky;top:0;z-index:50;
}
.topbar .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:.7rem;
}
.topbar img{width:132px;}
.topbar .call{
  font-family:var(--display);font-weight:900;font-size:1.27rem;
  color:var(--cream);letter-spacing:0;white-space:nowrap;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;
  text-decoration-color:var(--gold);
}
.topbar .call:hover{color:var(--gold);}
.topbar .call span{
  display:block;font-family:var(--light);font-weight:400;font-size:.82rem;
  letter-spacing:.12em;color:var(--cream);text-align:right;
  text-decoration:none;margin-top:.15rem;
}

/* ---------------- hero ---------------- */
.hero{padding-top:clamp(2.5rem,6vw,4.5rem);padding-bottom:0;}
.hero .headline{container-type:inline-size;}
.hero .cols{
  display:grid;grid-template-columns:0.92fr 1.08fr;gap:clamp(1.5rem,4vw,3.5rem);
  align-items:end;margin-top:clamp(1.5rem,3.5vw,2.5rem);
}
/* Alison sits flush on the gold strip so she reads as stepping out from behind it. */
.hero .lede-col{padding-bottom:clamp(3rem,14vw,10.5rem);}
/* Headline is set to fit its container on a single line at every width.
   The clamp() is the fallback for browsers without container query units. */
.hero h1{
  font-size:clamp(1.4rem,4.8vw,3.4rem);
  white-space:nowrap;
}
@supports (font-size:1cqw){
  .hero h1{font-size:min(3.4rem,5.4cqw);}
}
.hero h1 .quiet{color:var(--olive);display:block;}
.hero .lede{
  font-size:clamp(1.02rem,1.9vw,1.2rem);max-width:38ch;
}
.hero .eyebrow{margin-bottom:1.1rem;}
.hero .actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.75rem;}
.hero figure{position:relative;align-self:end;margin-bottom:0;justify-self:end;}
/* The illustration has 463px of native detail. Capping the display width keeps
   it comfortably above 1:1 on high-density screens instead of going soft. */
.hero figure img{width:100%;height:auto;max-width:560px;margin-left:auto;}

/* ---------------- promise strip ---------------- */
.promise{background:var(--deep-olive);color:var(--cream);}
.promise ul{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
  padding-block:1.5rem;text-align:center;
}
.promise li{
  font-family:var(--light);font-weight:400;line-height:1.35;
  font-size:.9rem;letter-spacing:.11em;text-transform:uppercase;
}
.promise li b{
  display:block;font-family:var(--display);font-weight:900;font-size:1.5rem;
  line-height:1.05;letter-spacing:0;margin-bottom:.3rem;color:var(--cream);
}

/* ---------------- sections ---------------- */
.section{padding-block:clamp(3rem,7vw,5rem);}
#pricing,#enquire,#about{scroll-margin-top:96px;}
.section h2{font-size:clamp(1.7rem,3.6vw,2.4rem);margin-top:.5rem;}
.section .intro{margin-top:1rem;max-width:58ch;}
/* Above the hero illustration, so the strip can never be painted over. */
.rule{height:8px;background:var(--gold);width:100%;position:relative;z-index:2;}

/* ---------------- pricing ---------------- */
.cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.5rem;
}
.card{
  background:var(--sage);color:var(--ink);
  padding:2rem 1.25rem 1.75rem;text-align:center;position:relative;
}
.card.featured{background:var(--deep-olive);color:var(--cream);}
.card .name{
  font-family:var(--light);font-weight:400;
  font-size:.88rem;letter-spacing:.13em;text-transform:uppercase;
}
.card.featured .name{color:var(--cream);}
.card .amt{font-size:3rem;margin-block:.35rem .2rem;letter-spacing:-0.02em;}
.card .qty{font-size:1.02rem;}
.card.featured .qty{color:var(--cream);}
.card .flash{
  position:absolute;top:-.75rem;left:50%;transform:translateX(-50%);
  background:var(--gold);color:var(--ink);
  font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.35rem .85rem;white-space:nowrap;
}
.bundles{
  margin-top:1.25rem;background:var(--tan);color:var(--ink);
  padding:1rem 1.5rem;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;
}
.bundles .k{
  font-family:var(--body);font-weight:700;
  font-size:.88rem;letter-spacing:.12em;text-transform:uppercase;
}
.bundles .v{font-weight:700;font-size:1.12rem;}
.note{margin-top:1.25rem;font-size:1.02rem;color:var(--deep-olive);}

/* ---------------- about ---------------- */
.about{background:#F6F1DF;}
.about .wrap{
  display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;
}
.about p + p{margin-top:1rem;}
.pullquote{
  background:var(--olive);color:var(--cream);
  padding:clamp(1.75rem,4vw,2.5rem);
  border-left:10px solid var(--gold);
}
.pullquote p{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.6rem,3.4vw,2.2rem);line-height:1.05;letter-spacing:-0.01em;
}
.pullquote cite{
  display:block;margin-top:1.1rem;font-style:normal;
  font-family:var(--light);font-weight:300;
  font-size:.84rem;letter-spacing:.13em;text-transform:uppercase;color:var(--cream);
}

/* ---------------- enquiry form ---------------- */
.enquire{background:var(--olive);color:var(--cream);}
.enquire h2,.enquire .eyebrow{color:var(--cream);}
.enquire .intro{color:var(--cream);}
.enquire .intro a{color:var(--gold);font-weight:700;}
.nowrap{white-space:nowrap;}
.form-shell{
  background:var(--cream);color:var(--ink);
  margin-top:2.5rem;padding:clamp(1.5rem,3.5vw,2.5rem);
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;}
.field{display:flex;flex-direction:column;gap:.4rem;}
.field.full{grid-column:1 / -1;}
label{
  font-family:var(--light);font-weight:300;
  font-size:.84rem;letter-spacing:.12em;text-transform:uppercase;color:var(--deep-olive);
}
label .req{color:#8a3b2f;}
input,select,textarea{
  font-family:var(--body);font-size:1rem;color:var(--ink);
  background:#fff;border:2px solid var(--olive);border-radius:0;
  padding:.7rem .8rem;width:100%;
}
/* Size the dropdown to its content so the arrow sits beside the text, not at the far edge. */
select{width:auto;max-width:100%;padding-right:.6rem;}
input:focus,select:focus,textarea:focus{border-color:var(--deep-olive);}
::placeholder{color:#57534B;opacity:1;}
textarea{resize:vertical;min-height:110px;}
fieldset{border:0;}
legend{
  font-family:var(--light);font-weight:300;
  font-size:.84rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--deep-olive);margin-bottom:.55rem;
}
.radios{
  display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center;
  min-height:calc(1rem * 1.6 + 1.4rem + 4px);
}
.radios label{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--body);font-size:1rem;letter-spacing:0;text-transform:none;
  color:var(--ink);cursor:pointer;padding:.35rem 0;
}
.radios input{width:auto;inline-size:1.35rem;block-size:1.35rem;accent-color:var(--deep-olive);}
.form-foot{
  margin-top:1.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
}
.form-foot .small{font-size:.98rem;color:var(--deep-olive);flex:1 1 auto;max-width:60ch;}
.form-foot .small a{color:var(--deep-olive);font-weight:700;text-underline-offset:2px;}
.enquire .intro a,.form-foot .small a{text-decoration:underline;text-decoration-thickness:2px;}
.status{
  margin-top:1.1rem;padding:.9rem 1.1rem;background:var(--sage);
  font-size:1.02rem;font-weight:600;line-height:1.5;display:none;
}
.status.show{display:block;}
.status a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:2px;}
.status span{display:block;margin-top:.35rem;font-weight:400;}

/* ---------------- footer ---------------- */
.site-footer{background:var(--deep-olive);color:var(--cream);}
.site-footer .wrap{
  padding-block:clamp(2.5rem,5vw,3.5rem);text-align:center;
}
.site-footer img{width:150px;margin:0 auto 1.5rem;}
.site-footer .kicker{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.35rem,3vw,1.9rem);line-height:1.1;
}
.site-footer .contact{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;}
.site-footer .legal{
  margin-top:2rem;font-family:var(--light);font-weight:300;
  font-size:.84rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cream);
}

/* ---------------- responsive ---------------- */
@media (max-width:860px){
  /* The hero's two columns live on .cols, not .wrap — collapsing the wrong
     element left the layout stuck in two columns on phones. */
  .hero .cols,.about .wrap{grid-template-columns:1fr;}

  /* The illustration is a wide landscape frame with empty space to the left of
     Alison. On a narrow screen that reads as a tiny figure in a big gap, so
     crop to a square focused on her, still anchored to the bottom edge. */
  .hero figure{max-width:none;margin-inline:0;justify-self:stretch;}
  .hero figure img{
    max-width:none;width:100%;
    aspect-ratio:1/1;object-fit:cover;object-position:75% bottom;
  }
  .hero .lede{max-width:none;}
  .hero .lede-col{padding-bottom:clamp(1.75rem,5vw,2.5rem);}
  .hero .actions .btn{flex:1 1 100%;}

  /* A compact sticky bar. At full size it ate a third of a phone screen and
     covered content as you scrolled past it. */
  .topbar .call{font-size:1rem;}
  .topbar img{width:112px;}
  #pricing,#enquire,#about{scroll-margin-top:110px;}

  .pullquote{border-left-width:8px;}
  .cards{grid-template-columns:1fr;gap:1.5rem;}
  .card .flash{top:-.7rem;}
  .promise ul{grid-template-columns:1fr;gap:1.25rem;}
  .grid2{grid-template-columns:1fr;}
  .bundles{flex-direction:column;align-items:flex-start;gap:.35rem;}
}

@media (max-width:400px){
  .topbar img{width:104px;}
  .topbar .call{font-size:.98rem;}
  .card .amt{font-size:2.6rem;}
}
@media (prefers-contrast:more){
  .card{background:var(--cream);color:var(--ink);border:3px solid var(--ink);}
  .card .name,.card .qty{color:var(--ink);}
  .card.featured{background:var(--ink);color:var(--cream);}
  .card.featured .name,.card.featured .qty{color:var(--cream);}
  input,select,textarea{border-color:var(--ink);border-width:3px;}
  .eyebrow,.note,label,legend{color:var(--ink);}
  .btn-outline{border-color:var(--ink);color:var(--ink);}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}
@media print{
  .topbar{position:static;}
  .enquire{background:#fff;color:#000;}
}

/* ---------------- WordPress specifics ---------------- */
/* The sticky bar is offset by the WordPress admin bar's height so the two
   don't overlap. But below 600px WordPress switches #wpadminbar to
   position:absolute, so it scrolls away — leaving that offset as an empty
   window with page content showing through above the header. Reset it there.
   (Logged-out visitors never have an admin bar, so they never saw this.) */
.admin-bar .topbar{top:32px;}
@media screen and (max-width:782px){.admin-bar .topbar{top:46px;}}
@media screen and (max-width:600px){.admin-bar .topbar{top:0;}}
.screen-reader-text{
  border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;
  padding:0;position:absolute;width:1px;word-wrap:normal!important;
}
.wp-site-blocks,.wp-block-group{max-width:none;}

.footer-copyright {
  color: #FDF9EC;          /* matches the cream of the line above */
  font-size: 0.84rem;
  margin-top: 0.5rem;
  opacity: 0.85;
}

.footer-copyright a {
  color: #FDF9EC;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-copyright a:hover {
  opacity: 0.75;
}