/*
Theme Name: PLDay
Theme URI: https://plday.com
Author: PLDay
Description: Daily profit & loss tracking, bookkeeping and financial reporting for small business owners. Built for plday.com.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: plday
*/

/* =========================================================
   TOKENS
   ========================================================= */
:root{
  --ink:        #1B241E;   /* primary text, near-black with a green cast */
  --paper:      #F2F3EE;   /* ledger paper background */
  --paper-2:    #E9EAE2;   /* slightly deeper paper, for alt sections */
  --line:       #C9CBBE;   /* ruled line color */
  --line-soft:  #DCDDD3;
  --profit:     #1E8E5A;   /* green — up */
  --profit-dark:#166B44;
  --loss:       #C1443B;   /* red — down */
  --loss-dark:  #9C362E;
  --amber:      #C08A28;   /* stamp/accent, used sparingly */
  --blue:       #3B6FA0;   /* the "mixed colour" letter in the Day wordmark */
  --white:      #FFFFFF;

  --font-head: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --max: 1120px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:600;
  line-height:1.15;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(2.1rem, 4.4vw, 3.4rem); }
h2{ font-size:clamp(1.6rem, 2.8vw, 2.2rem); }
h3{ font-size:1.25rem; }
p{ margin:0 0 1em; max-width:64ch; }
.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px;
}
.rule{ border:0; border-top:1px solid var(--line); margin:0; }
.visually-hidden{
  position:absolute!important; width:1px;height:1px; padding:0;margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

/* =========================================================
   WORDMARK / LOGO
   ========================================================= */
.brand{ display:flex; align-items:center; gap:.55rem; text-decoration:none; }
.brand img.custom-logo{ height:40px; width:auto; }
.brand-mark{
  display:inline-flex; align-items:baseline;
  font-family:var(--font-head); font-weight:700; font-size:1.55rem;
  letter-spacing:-0.01em;
}
.brand-mark .p{ color:var(--profit); position:relative; }
.brand-mark .l{ color:var(--loss); position:relative; }
.brand-mark .p::after{ content:"↑"; font-size:.62em; position:absolute; top:-.55em; left:-.05em; }
.brand-mark .l::after{ content:"↓"; font-size:.62em; position:absolute; bottom:-.5em; left:.02em; }
.brand-mark .day{ margin-left:.05em; }
.brand-mark .day span:nth-child(1){ color:var(--profit); }
.brand-mark .day span:nth-child(2){ color:var(--loss); }
.brand-mark .day span:nth-child(3){ color:var(--amber); }
.brand-mark .day span:nth-child(4){ color:var(--blue); }
.brand-tagline{ font-size:.72rem; color:#5B6259; margin-left:.6rem; font-family:var(--font-mono); }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--paper); border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; padding-bottom:16px; gap:1.5rem;
}
.primary-nav ul{ list-style:none; display:flex; gap:1.9rem; margin:0; padding:0; }
.primary-nav a{
  text-decoration:none; font-size:.98rem; color:var(--ink);
  border-bottom:1px solid transparent; padding-bottom:2px;
}
.primary-nav a:hover{ border-bottom-color:var(--ink); }
.nav-cta{
  white-space:nowrap;
}
.menu-toggle{ display:none; }

@media (max-width: 860px){
  .primary-nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--paper); border-bottom:1px solid var(--line);
  }
  .primary-nav.is-open{ display:block; }
  .primary-nav ul{ flex-direction:column; gap:0; }
  .primary-nav li{ border-top:1px solid var(--line-soft); }
  .primary-nav a{ display:block; padding:14px 24px; }
  .menu-toggle{
    display:inline-flex; background:none; border:1px solid var(--line);
    padding:8px 12px; font-size:1rem; cursor:pointer; border-radius:2px;
  }
  .nav-cta.btn{ display:none; }
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-block; font-family:var(--font-body); font-weight:600;
  font-size:.98rem; padding:.75em 1.4em; text-decoration:none;
  border:1px solid var(--ink); border-radius:2px; cursor:pointer;
  background:transparent; color:var(--ink); transition:background .15s, color .15s;
}
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn-solid{
  background:var(--profit-dark); border-color:var(--profit-dark); color:var(--white);
}
.btn-solid:hover{ background:var(--profit); border-color:var(--profit); color:var(--white); }
.btn-block{ display:block; width:100%; text-align:center; }

/* =========================================================
   HERO — ledger statement treatment
   ========================================================= */
.hero{ padding:64px 0 56px; }
.hero .container{
  display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center;
}
.hero-eyebrow{ font-family:var(--font-mono); font-size:.85rem; color:var(--profit-dark); margin-bottom:.9rem; }
.hero h1{ margin-bottom:.5rem; }
.hero .lede{ font-size:1.15rem; color:#3C463E; max-width:46ch; }
.hero-ctas{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.6rem; }

.statement-card{
  border:1px solid var(--line); background:var(--white);
}
.statement-card .stmt-head{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:14px 18px; border-bottom:1px solid var(--line); font-family:var(--font-mono); font-size:.8rem;
  color:#5B6259;
}
.stmt-row{
  display:flex; justify-content:space-between; padding:12px 18px;
  border-bottom:1px solid var(--line-soft); font-family:var(--font-mono); font-size:.94rem;
}
.stmt-row .label{ color:#3C463E; }
.stmt-row .val.up{ color:var(--profit-dark); font-weight:600; }
.stmt-row .val.down{ color:var(--loss-dark); font-weight:600; }
.stmt-row.total{ border-bottom:none; background:var(--paper-2); font-weight:700; font-size:1.05rem; }
.stmt-row.total .val.up::before{ content:"↑ "; }
.stmt-row.total .val.down::before{ content:"↓ "; }

@media (max-width: 860px){
  .hero .container{ grid-template-columns:1fr; }
}

/* =========================================================
   SECTION SCAFFOLDING
   ========================================================= */
.section{ padding:64px 0; }
.section-alt{ background:var(--paper-2); }
.section-head{ max-width:56ch; margin-bottom:2.4rem; }
.section-head .kicker{ font-family:var(--font-mono); font-size:.82rem; color:var(--profit-dark); margin-bottom:.5rem; }

/* Services — ledger line items, not cards */
.ledger-list{ border-top:1px solid var(--line); }
.ledger-item{
  display:grid; grid-template-columns:2.4fr 3.6fr; gap:2rem;
  padding:1.8rem 0; border-bottom:1px solid var(--line);
}
.ledger-item h3{ margin-bottom:.35rem; }
.ledger-item .num{ font-family:var(--font-mono); color:#8A9086; font-size:.85rem; }
@media (max-width: 720px){
  .ledger-item{ grid-template-columns:1fr; gap:.5rem; }
}

/* Founder story */
.story{
  display:grid; grid-template-columns:.9fr 1.6fr; gap:3rem; align-items:start;
}
.story-figure{
  border:1px solid var(--line); background:var(--white); padding:1.6rem;
  font-family:var(--font-mono); font-size:.85rem;
}
.story-figure .big{ font-family:var(--font-head); font-size:2.6rem; color:var(--profit-dark); line-height:1; margin-bottom:.2rem;}
.story-figure .row{ display:flex; justify-content:space-between; padding:.55rem 0; border-top:1px solid var(--line-soft); }
.story-figure .row:first-of-type{ border-top:none; }
@media (max-width: 860px){ .story{ grid-template-columns:1fr; } }

/* CTA banner */
.cta-banner{
  background:var(--ink); color:var(--paper); padding:56px 0; text-align:left;
}
.cta-banner h2{ color:var(--white); }
.cta-banner .btn{ border-color:var(--paper); color:var(--paper); }
.cta-banner .btn:hover{ background:var(--paper); color:var(--ink); }
.cta-banner-row{ display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap; }

/* =========================================================
   PRICING (services page)
   ========================================================= */
.pricing-grid{
  display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line);
}
.pricing-col{ padding:2rem 1.7rem; border-left:1px solid var(--line); }
.pricing-col:first-child{ border-left:none; }
.pricing-col.featured{ background:var(--white); }
.price-tag{ font-family:var(--font-mono); font-size:2rem; color:var(--ink); margin:.4rem 0 .2rem; }
.price-tag small{ font-size:.9rem; font-weight:400; color:#5B6259; }
.price-note{ font-size:.85rem; color:var(--profit-dark); font-family:var(--font-mono); margin-bottom:1.2rem; }
.plan-includes{ list-style:none; margin:1rem 0 0; padding:0; font-size:.94rem; }
.plan-includes li{ padding:.5rem 0; border-top:1px solid var(--line-soft); }
.plan-includes li:first-child{ border-top:none; }
@media (max-width: 860px){
  .pricing-grid{ grid-template-columns:1fr; }
  .pricing-col{ border-left:none; border-top:1px solid var(--line); }
  .pricing-col:first-child{ border-top:none; }
}

/* =========================================================
   PRODUCTS PAGE
   ========================================================= */
.product-group{ margin-bottom:2.6rem; }
.product-group h3{ font-family:var(--font-mono); font-size:.95rem; text-transform:none; color:var(--profit-dark); margin-bottom:1rem; letter-spacing:0; font-weight:600; }
.product-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.product-list li{
  padding:.9rem 0; border-bottom:1px solid var(--line-soft);
  display:flex; justify-content:space-between; gap:1rem; font-size:1rem;
}
.product-list li span.desc{ color:#5B6259; font-size:.92rem; text-align:right; max-width:38ch; }
@media (max-width: 720px){
  .product-list li{ flex-direction:column; gap:.2rem; }
  .product-list li span.desc{ text-align:left; max-width:none; }
}

/* =========================================================
   FORMS
   ========================================================= */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem 1.6rem; }
.form-grid .full{ grid-column:1 / -1; }
label{ display:block; font-size:.9rem; margin-bottom:.4rem; color:#3C463E; }
input[type=text], input[type=tel], input[type=email], input[type=date], input[type=time], select, textarea{
  width:100%; font-family:var(--font-body); font-size:1rem; padding:.7em .8em;
  border:1px solid var(--line); background:var(--white); border-radius:2px; color:var(--ink);
}
textarea{ min-height:110px; resize:vertical; }
.field{ margin-bottom:0; }
.form-note{ font-size:.85rem; color:#5B6259; margin-top:.3rem; }
.login-box{
  border:1px dashed var(--line); padding:1.2rem 1.4rem; margin-bottom:2rem; background:var(--white);
}
.login-box form p{ margin-bottom:.7rem; }
.notice{ padding:1rem 1.2rem; border:1px solid var(--profit-dark); background:#EAF4EE; color:var(--profit-dark); margin-bottom:1.6rem; }
.notice.error{ border-color:var(--loss-dark); background:#FBEAE9; color:var(--loss-dark); }

/* Contact page */
.contact-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:3rem; }
.contact-info dl{ margin:0; }
.contact-info dt{ font-family:var(--font-mono); font-size:.78rem; color:#8A9086; margin-top:1.4rem; }
.contact-info dt:first-child{ margin-top:0; }
.contact-info dd{ margin:.2rem 0 0; font-size:1.1rem; }
@media (max-width: 860px){ .contact-grid{ grid-template-columns:1fr; } }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ border-top:1px solid var(--line); padding:40px 0; margin-top:40px; }
.footer-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-contact{ font-family:var(--font-mono); font-size:.92rem; }
.footer-contact a{ text-decoration:none; border-bottom:1px solid var(--line); }
.footer-contact a:hover{ border-bottom-color:var(--ink); }
.footer-contact-sep{ margin:0 .6rem; color:#8A9086; }
.footer-links ul{ list-style:none; display:flex; gap:1.4rem; margin:0; padding:0; font-size:.9rem; }
.footer-links a{ text-decoration:none; }
.footer-note{ font-size:.82rem; color:#8A9086; margin-top:1.2rem; }