/* =================================================================
   PEACHPDF DESIGN SYSTEM
   Phase 2 — reusable components
   Mobile-first. Single font family (Inter). Borders over shadows.
   ================================================================= */

/* ---------- Tokens ---------- */
:root{
  /* Color */
  --peach:#DE6E63;
  --peach-hover:#C65A50;
  --peach-tint:#FBEDEB;
  --ink:#1F2933;
  --bg:#FFFFFF;
  --surface:#F4F5F6;
  --text:#1F2933;
  --muted:#5B6570;
  --border:#E1E4E8;
  --success:#2F9E63;
  --success-tint:#E8F5EE;
  --error:#C4362B;
  --error-tint:#FBEAE8;
  --warning:#C98A2E;
  --warning-tint:#FBF1E1;

  /* Spacing scale */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;

  /* Radius — modest, not pill-shaped */
  --radius-sm:6px;
  --radius-md:8px;

  /* Type */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --transition: 120ms ease;
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}
a{color:inherit;}
button{font-family:inherit;}

/* =================================================================
   BUTTON
   ================================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  font-size:15px;
  font-weight:500;
  padding:11px 20px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  cursor:pointer;
  transition:background var(--transition), border-color var(--transition);
  white-space:nowrap;
}
.btn--primary{background:var(--peach);color:#fff;}
.btn--primary:hover{background:var(--peach-hover);}
.btn--secondary{background:#fff;color:var(--text);border-color:var(--border);}
.btn--secondary:hover{border-color:var(--ink);}
.btn--text{background:transparent;color:var(--ink);text-decoration:underline;padding-left:2px;padding-right:2px;}
.btn--sm{font-size:13px;padding:7px 14px;}
.btn--lg{font-size:16px;padding:14px 26px;}
.btn:disabled{opacity:0.45;cursor:not-allowed;}

/* =================================================================
   SITE HEADER
   ================================================================= */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--space-4) var(--space-5);
  border-bottom:1px solid var(--border);
}
.site-header__logo img{height:28px;display:block;}
.site-header__nav{
  display:none;
  align-items:center;
  gap:var(--space-6);
}
.site-header__nav-item{
  font-size:15px;
  font-weight:500;
  color:var(--text);
  text-decoration:none;
  position:relative;
}
.site-header__nav-item:hover{color:var(--peach-hover);}
.site-header__actions{display:flex;align-items:center;gap:var(--space-4);}
.site-header__search{
  border:none;
  background:none;
  color:var(--muted);
  cursor:pointer;
  padding:4px;
}
.site-header__menu-toggle{
  border:1px solid var(--border);
  background:#fff;
  border-radius:var(--radius-sm);
  padding:8px 10px;
  cursor:pointer;
}
@media (min-width:900px){
  .site-header__nav{display:flex;}
  .site-header__menu-toggle{display:none;}
}

/* =================================================================
   SITE FOOTER
   ================================================================= */
.site-footer{
  background:var(--surface);
  padding:var(--space-8) var(--space-5) var(--space-5);
  border-top:1px solid var(--border);
}
.footer__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-6);
  max-width:1080px;
  margin:0 auto;
}
@media (min-width:700px){
  .footer__grid{grid-template-columns:1.4fr 1fr 1fr 1fr;}
}
.footer__heading{
  font-size:14px;
  font-weight:600;
  margin:0 0 var(--space-3);
}
.footer__links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-2);}
.footer__links a{font-size:14px;color:var(--muted);text-decoration:none;}
.footer__links a:hover{color:var(--text);}
.footer__bottom{
  max-width:1080px;
  margin:var(--space-7) auto 0;
  padding-top:var(--space-5);
  border-top:1px solid var(--border);
  font-size:13px;
  color:var(--muted);
}

/* =================================================================
   TOOL CARD
   ================================================================= */
.tool-card{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  padding:var(--space-5);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  text-decoration:none;
  color:var(--text);
  transition:border-color var(--transition);
}
.tool-card:hover{border-color:var(--peach);}
.tool-card__icon{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  color:var(--peach);
}
.tool-card__icon svg{width:22px;height:22px;}
.tool-card__name{font-size:15px;font-weight:600;margin:0;}
.tool-card__desc{font-size:13px;color:var(--muted);margin:0;}
.tool-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-4);
}
@media (min-width:600px){ .tool-grid{grid-template-columns:1fr 1fr;} }
@media (min-width:900px){ .tool-grid{grid-template-columns:1fr 1fr 1fr;} }

/* =================================================================
   UPLOAD BOX (all states)
   ================================================================= */
.upload{
  border:2px dashed var(--border);
  border-radius:var(--radius-md);
  padding:var(--space-8) var(--space-5);
  text-align:center;
  background:var(--surface);
  transition:border-color var(--transition), background var(--transition);
}
.upload--dragover{border-color:var(--peach);background:var(--peach-tint);}
.upload__title{font-size:17px;font-weight:600;margin:0 0 4px;}
.upload__hint{font-size:14px;color:var(--muted);margin:0 0 var(--space-4);}
.upload__icon{color:var(--peach);margin-bottom:var(--space-3);}
.upload__icon svg{width:32px;height:32px;}

.upload--busy .upload__title{margin-bottom:var(--space-4);}
.upload--success{background:var(--success-tint);border-style:solid;border-color:var(--success);}
.upload--success .upload__icon{color:var(--success);}
.upload--error{background:var(--error-tint);border-style:solid;border-color:var(--error);}
.upload--error .upload__icon{color:var(--error);}

.upload__actions{display:flex;gap:var(--space-3);justify-content:center;margin-top:var(--space-4);flex-wrap:wrap;}

/* =================================================================
   FILE CARD
   ================================================================= */
.file-card{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:#fff;
  text-align:left;
}
.file-card__icon{color:var(--peach);flex-shrink:0;}
.file-card__icon svg{width:20px;height:20px;}
.file-card__info{flex:1;min-width:0;}
.file-card__name{font-size:14px;font-weight:500;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.file-card__size{font-size:12px;color:var(--muted);margin:0;}
.file-card__remove{
  border:none;background:none;color:var(--muted);cursor:pointer;
  padding:4px;flex-shrink:0;
}
.file-card__remove:hover{color:var(--error);}

/* =================================================================
   PROGRESS BAR
   ================================================================= */
.progress{
  width:100%;
  height:6px;
  background:var(--border);
  border-radius:3px;
  overflow:hidden;
}
.progress__bar{
  height:100%;
  background:var(--peach);
  border-radius:3px;
  transition:width 200ms ease;
}
.progress__label{font-size:13px;color:var(--muted);margin-top:var(--space-2);}

/* =================================================================
   ALERT
   ================================================================= */
.alert{
  display:flex;
  gap:var(--space-3);
  align-items:flex-start;
  padding:var(--space-4);
  border-radius:var(--radius-sm);
  font-size:14px;
  border:1px solid transparent;
}
.alert--success{background:var(--success-tint);border-color:var(--success);color:#1D5B3E;}
.alert--error{background:var(--error-tint);border-color:var(--error);color:#7E241C;}
.alert--warning{background:var(--warning-tint);border-color:var(--warning);color:#7A5419;}
.alert__icon svg{width:18px;height:18px;margin-top:2px;}
.alert__title{font-weight:600;margin:0 0 2px;}
.alert__body{margin:0;}

/* =================================================================
   FAQ ACCORDION — native <details>, no JS required
   ================================================================= */
.faq-item{
  border-bottom:1px solid var(--border);
}
.faq-item summary{
  padding:var(--space-4) 0;
  font-size:15px;
  font-weight:500;
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+";
  color:var(--muted);
  font-size:18px;
  flex-shrink:0;
  margin-left:var(--space-4);
}
.faq-item[open] summary::after{content:"–";}
.faq-item p{
  font-size:14px;
  color:var(--muted);
  margin:0 0 var(--space-4);
  max-width:65ch;
}

/* =================================================================
   BREADCRUMB
   ================================================================= */
.breadcrumb{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  font-size:13px;
  color:var(--muted);
  list-style:none;
  padding:0;
  margin:0;
}
.breadcrumb a{color:var(--muted);text-decoration:none;}
.breadcrumb a:hover{color:var(--text);}
.breadcrumb li{display:flex;align-items:center;gap:var(--space-2);}
.breadcrumb li:not(:last-child)::after{content:"/";color:var(--border);}
.breadcrumb li:last-child{color:var(--text);}

/* =================================================================
   RELATED TOOLS
   ================================================================= */
.related-tools{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.related-tools a{
  display:block;
  padding:var(--space-3) var(--space-4);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  color:var(--text);
}
.related-tools a:hover{border-color:var(--peach);color:var(--peach-hover);}

/* =================================================================
   BLOG CARD
   ================================================================= */
.blog-card{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:var(--text);
}
.blog-card__image{
  aspect-ratio:16/9;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  margin-bottom:var(--space-3);
}
.blog-card__meta{font-size:12px;color:var(--muted);margin:0 0 4px;}
.blog-card__title{font-size:16px;font-weight:600;margin:0 0 4px;}
.blog-card__excerpt{font-size:14px;color:var(--muted);margin:0;}

/* =================================================================
   CTA SECTION
   ================================================================= */
.cta-section{
  background:var(--ink);
  color:#fff;
  border-radius:var(--radius-md);
  padding:var(--space-7) var(--space-5);
  text-align:center;
}
.cta-section h2{font-size:24px;font-weight:600;margin:0 0 var(--space-2);}
.cta-section p{font-size:15px;color:#B8C0C8;margin:0 0 var(--space-5);}
.cta-section .btn--primary{background:var(--peach);}

/* =================================================================
   LAYOUT UTILITIES
   ================================================================= */
.grid-2{display:grid;grid-template-columns:1fr;gap:24px;}
.grid-3{display:grid;grid-template-columns:1fr;gap:24px;}
@media (min-width:700px){
  .grid-2{grid-template-columns:1fr 1fr;}
  .grid-3{grid-template-columns:1fr 1fr 1fr;}
}

/* =================================================================
   ACCESSIBILITY UTILITIES
   ================================================================= */
.screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link.screen-reader-text:focus{
  position:fixed;top:8px;left:8px;width:auto;height:auto;
  padding:10px 16px;background:var(--ink);color:#fff;z-index:1000;
  border-radius:var(--radius-sm);clip:auto;
}
:focus-visible{outline:2px solid var(--peach);outline-offset:2px;}

/* =================================================================
   MOBILE NAV PANEL + HEADER SEARCH PANEL
   ================================================================= */
.site-mobile-nav{
  display:none;
  flex-direction:column;
  padding:var(--space-4) var(--space-5);
  border-bottom:1px solid var(--border);
  background:#fff;
}
.site-mobile-nav.is-open{display:flex;}
.site-mobile-nav a{
  padding:var(--space-3) 0;
  font-size:15px;
  font-weight:500;
  text-decoration:none;
  color:var(--text);
  border-bottom:1px solid var(--border);
}
@media (min-width:900px){ .site-mobile-nav{display:none !important;} }

.site-header__search-panel{display:none;position:absolute;right:24px;top:64px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-3);width:280px;z-index:20;}
.site-header__search-panel.is-open{display:block;}
.site-header{position:relative;}

/* Defensive reset for the tool-page intro area. WordPress's block editor
   can sometimes leave an invisible Cover/Spacer/Group block behind when
   content gets pasted and re-parsed — those blocks often carry a large
   default min-height (Cover blocks default to ~430px+) that shows up as
   unexplained blank space with no visible cause. This neutralizes that
   regardless of which specific block ends up responsible. */
.tool-page__intro{min-height:0 !important;}
.tool-page__intro .wp-block-cover,
.tool-page__intro .wp-block-spacer,
.tool-page__intro .wp-block-group{min-height:0 !important;height:auto !important;padding:0 !important;}
.tool-page__intro > *:empty{display:none !important;}
.tool-page__intro p{margin:0 0 1em;min-height:0;}
.tool-page__intro p:last-child{margin-bottom:0;}

/* Homepage hero — stacks on mobile, two columns on desktop */
@media (min-width:900px){
  .home-hero{grid-template-columns:1.1fr 0.9fr !important;text-align:left;}
  .home-hero > div:first-child{text-align:left;}
  .home-hero > div:first-child > div{justify-content:flex-start;}
}