/*
Theme Name: Remove My Fridge
Description: Custom theme for removemyfridge.co.uk
Version: 0.1
Author: Remove My Fridge
Text Domain: removemyfridge
*/

:root{
    --bg: #F2F7F9;
    --surface: #FFFFFF;
    --ink: #14262E;
    --ink-soft: #4F6B75;
    --accent: #2F8FC4;
    --accent-deep: #1F6E9C;
    --accent-soft: #DCEEF7;
    --cta: #2FA968;
    --cta-deep: #21804C;
    --line: #DCE6EA;
    --panel-dark: #0E2733;
    --panel-dark-line: #1D4353;
    --radius-lg: 22px;
    --radius-md: 14px;
    --radius-sm: 9px;
    --max: 1120px;
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin:0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  h1,h2,h3,.wordmark{
    font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
  }
  p{ margin: 0; color: var(--ink-soft); }
  a{ color: inherit; }
  img,svg{ display:block; max-width:100%; }
  .wrap{ max-width: var(--max); margin: 0 auto; padding: 0 28px; }

  a:focus-visible, button:focus-visible{
    outline: 2px solid var(--accent-deep);
    outline-offset: 3px;
  }

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding: 13px 24px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 0.97rem;
    text-decoration:none;
    border: 1px solid transparent;
    cursor:pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
  }
  .btn-primary{ background: var(--cta); color:#fff; }
  .btn-primary:hover{ background: var(--cta-deep); }
  .btn-outline{ background: transparent; border-color: var(--ink); color: var(--ink); }
  .btn-outline:hover{ border-color: var(--accent-deep); color: var(--accent-deep); }
  .btn-outline-light{ background: transparent; border-color: rgba(255,255,255,.4); color:#fff; }
  .btn-outline-light:hover{ border-color:#fff; }
  .btn-block{ width:100%; }

  /* ---------- Header ---------- */
  header{
    position: sticky; top:0; z-index: 20;
    background: rgba(245,248,246,0.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding: 18px 0;
  }
  .wordmark{
    font-size: 1.28rem;
    display:flex; align-items:center; gap:9px;
  }
  .wordmark .dot{
    width:9px; height:9px; border-radius:50%;
    background: var(--accent);
    display:inline-block;
  }
  .nav-links{
    display:flex; gap: 34px; list-style:none; margin:0; padding:0;
  }
  .nav-links a{
    text-decoration:none; color: var(--ink-soft); font-size: 0.95rem; font-weight: 500;
  }
  .nav-links a:hover{ color: var(--ink); }
  .nav-cta{ display:flex; align-items:center; gap: 14px; }
  #mobile-nav-toggle{
    display:none; background:none; border:none; cursor:pointer; padding:6px; color: var(--ink);
  }
  #mobile-nav-toggle svg{ width:24px; height:24px; }
  .mobile-nav{
    display:none;
    flex-direction:column;
    gap: 4px;
    padding: 8px 28px 18px;
    border-top: 1px solid var(--line);
  }
  .mobile-nav a{
    padding: 12px 0;
    text-decoration:none;
    color: var(--ink-soft);
    font-weight:500;
    border-bottom: 1px solid var(--line);
  }
  .mobile-nav a.btn{ border-bottom:none; margin-top:10px; text-align:center; color:#fff; }
  .mobile-nav.open{ display:flex; }
  @media (max-width: 760px){
    .nav-links{ display:none; }
    .nav-cta .btn{ display:none; }
    #mobile-nav-toggle{ display:block; }
  }

  /* ---------- Hero ---------- */
  .hero{
    padding: 76px 0 92px;
    overflow: hidden;
  }
  .hero-grid{
    display:grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items:center;
  }
  .hero-copy h1{
    font-size: clamp(2.3rem, 4.1vw, 3.35rem);
    line-height: 1.08;
    max-width: 12ch;
  }
  .hero-copy p{
    margin-top: 20px;
    font-size: 1.12rem;
    max-width: 46ch;
  }
  .hero-actions{
    display:flex; gap: 14px; margin-top: 34px; flex-wrap: wrap;
  }
  .hero-note{
    margin-top: 22px;
    font-size: 0.88rem;
    color: var(--ink-soft);
  }
  .hero-art{
    position:relative;
    display:flex; align-items:center; justify-content:center;
  }
  .quote-card{
    position:relative;
    width:100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 30px 30px 26px;
    box-shadow: 0 24px 48px -28px rgba(14,38,45,0.28);
  }
  .quote-title{ font-size: 1.28rem; }
  .quote-sub{ margin-top: 6px; font-size: 0.9rem; }
  .field-group{ margin-top: 18px; }
  .field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top:18px; }
  .field-row .field-group{ min-width: 0; } /* prevents a long autofilled value from forcing one column wider than the other */
  .field-input:-webkit-autofill,
  .field-input:-webkit-autofill:hover,
  .field-input:-webkit-autofill:focus{
    -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
    -webkit-text-fill-color: var(--ink);
    transition: background-color 5000s ease-in-out 0s; /* stops Chrome's autofill yellow flash */
  }
  .field-row .field-group{ margin-top:0; }
  .field-label{
    display:block;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 8px;
  }
  .field-input{
    width:100%;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--bg);
    font-family:'Inter',sans-serif;
    font-size: 0.95rem;
    color: var(--ink);
  }
  .field-input:focus-visible{ outline: 2px solid var(--accent-deep); outline-offset: 1px; }
  .field-input::placeholder{ color: #90A4AB; }
  .field-input[type="file"]{ padding: 9px 12px; }
  .field-input[type="file"]::file-selector-button{
    padding: 8px 16px;
    border-radius: 100px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    margin-right: 12px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
  }
  .field-input[type="file"]::file-selector-button:hover{
    background: var(--accent-soft);
    border-color: var(--accent);
  }
  .pill-group{ display:flex; gap:8px; flex-wrap:wrap; }
  .pill-group input{ position:absolute; opacity:0; pointer-events:none; }
  .pill-group label{
    padding: 9px 16px;
    border-radius: 100px;
    border: 1px solid var(--line);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--ink-soft);
    cursor:pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  }
  .pill-group input:checked + label{
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-deep);
  }
  .pill-group input:focus-visible + label{ outline: 2px solid var(--accent-deep); outline-offset: 2px; }
  .quote-card .btn{ margin-top: 22px; }
  .quote-fine{ margin-top: 12px; font-size: 0.78rem; text-align:center; }
  .honeypot-field{
    position:absolute; left:-9999px; top:-9999px;
    width:1px; height:1px; overflow:hidden;
  }
  @media (max-width: 520px){
    .field-row{ grid-template-columns: 1fr; }
  }

  @keyframes rise{
    from{ opacity:0; transform: translateY(14px); }
    to{ opacity:1; transform: translateY(0); }
  }
  .hero-copy > *, .hero-art{ animation: rise .7s ease both; }
  .hero-art{ animation-delay: .12s; }
  @media (prefers-reduced-motion: reduce){
    .hero-copy > *, .hero-art{ animation: none; }
  }

  @media (max-width: 860px){
    .hero-grid{ grid-template-columns: 1fr; }
    .hero-art{ order:-1; }
    .hero-copy h1{ max-width: none; }
  }

  /* ---------- How it works ---------- */
  .how{ padding: 30px 0 96px; }
  .section-head{ max-width: 52ch; margin-bottom: 48px; }
  .section-head h2{ font-size: clamp(1.7rem, 2.6vw, 2.15rem); }
  .section-head p{ margin-top: 12px; font-size: 1.03rem; }

  .steps{
    position:relative;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
  .steps::before{
    content:"";
    position:absolute;
    top: 27px; left: calc(100%/6); right: calc(100%/6);
    height: 1px;
    background: var(--line);
    z-index:0;
  }
  .step{ position:relative; z-index:1; }
  .step-icon{
    width: 54px; height:54px;
    border-radius:50%;
    background: var(--surface);
    border: 1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    margin-bottom: 20px;
  }
  .step-icon svg{ width:24px; height:24px; }
  .step h3{ font-size: 1.08rem; font-weight:600; margin-bottom:8px; }
  .step p{ font-size: 0.96rem; }
  @media (max-width: 760px){
    .steps{ grid-template-columns: 1fr; gap: 34px; }
    .steps::before{ display:none; }
  }

  /* ---------- Collector banner ---------- */
  .collector-cta{ background: var(--panel-dark); color: #EAF3EF; padding: 60px 0; }
  .collector-cta-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 30px;
    flex-wrap:wrap;
  }
  .collector-cta-copy{ max-width: 560px; }
  .collector-cta h2{ font-size: 1.55rem; color:#fff; margin-bottom: 10px; }
  .collector-cta p{ font-size: 1rem; color: #AFC7BE; }
  .split-tag{
    display:inline-block;
    font-size: 0.82rem;
    font-weight:600;
    color: #9FE3CB;
    background: var(--panel-dark-line);
    padding: 5px 12px;
    border-radius: 100px;
    margin-bottom: 16px;
  }

  /* ---------- Pricing ---------- */
  .pricing{ padding: 96px 0; }
  .price-panel{
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    overflow:hidden;
  }
  .tier{
    padding: 40px 32px;
    border-right: 1px solid var(--line);
    position:relative;
  }
  .tier:last-child{ border-right:none; }
  .tier-accent{ background: var(--accent-soft); }
  .tier-accent::before{
    content:"";
    position:absolute; top:0; left:0; right:0; height:4px;
    background: var(--accent);
  }
  .tier-flag{
    font-size: 0.8rem; font-weight:600; color: var(--accent-deep);
    margin-bottom: 14px;
  }
  .tier-name{ font-size: 1.05rem; font-weight:600; margin-bottom: 6px; }
  .tier-price{ font-family:'Bricolage Grotesque',sans-serif; font-size: 2.1rem; font-weight:600; }
  .tier-price span{ font-family:'Inter',sans-serif; font-size:0.95rem; font-weight:500; color: var(--ink-soft); }
  .tier-leads{ font-size: 0.95rem; font-weight:600; color: var(--ink); margin-top: 6px; }
  .tier-desc{ margin-top: 14px; font-size: 0.92rem; min-height: 62px; }
  .tier .btn{ margin-top: 22px; }
  @media (max-width: 860px){
    .price-panel{ grid-template-columns: 1fr; }
    .tier{ border-right:none; border-bottom: 1px solid var(--line); }
    .tier:last-child{ border-bottom:none; }
  }

  /* ---------- Compliance strip ---------- */
  .compliance{ padding: 30px 0 100px; }
  .compliance-head{ margin-bottom: 40px; max-width: 46ch; }
  .compliance-head h2{ font-size: 1.5rem; }
  .compliance-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
  .comp-item{ display:flex; gap:14px; }
  .comp-item svg{ width:26px; height:26px; flex-shrink:0; margin-top:2px; }
  .comp-item h3{ font-size: 1rem; font-weight:600; margin-bottom:6px; }
  .comp-item p{ font-size: 0.92rem; }
  @media (max-width: 760px){
    .compliance-grid{ grid-template-columns: 1fr; }
  }

  /* ---------- Footer ---------- */
  footer{
    background: var(--panel-dark);
    color: #9FB6AC;
    padding: 52px 0 34px;
  }
  .footer-top{
    display:flex; justify-content:space-between; align-items:flex-start;
    flex-wrap:wrap; gap: 26px;
    padding-bottom: 34px;
    border-bottom: 1px solid var(--panel-dark-line);
  }
  footer .wordmark{ color:#fff; }
  footer .wordmark .dot{ background: #2F8FC4; }
  .footer-tagline{ font-size: 0.9rem; margin-top: 10px; max-width: 34ch; }
  .footer-links{ display:flex; gap: 30px; list-style:none; padding:0; margin:0; }
  .footer-links a{ text-decoration:none; color:#9FB6AC; font-size: 0.9rem; }
  .footer-links a:hover{ color:#fff; }
  .footer-fine{ font-size: 0.82rem; margin-top: 22px; color: #6E877E; }

/* Page-specific additions (collector page) */
.check-card{
  position:relative; width:100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px 30px 26px; box-shadow: 0 24px 48px -28px rgba(14,38,45,0.28);
}
.check-card .field-group{ margin-top: 18px; }
.check-card .field-group:first-of-type{ margin-top: 0; }
.req-cta{ text-align:center; padding: 90px 0 100px; }
.req-cta h2{ font-size: clamp(1.6rem, 2.4vw, 2rem); max-width: 26ch; margin: 0 auto; }
.req-cta p{ margin-top: 14px; font-size: 1.03rem; max-width: 44ch; margin-left:auto; margin-right:auto; }
.req-cta .btn{ margin-top: 28px; }
.form-status{ margin-top: 14px; font-size: 0.9rem; text-align:center; display:none; }
.form-status.success{ color: var(--cta-deep); display:block; }
.form-status.error{ color: #c0392b; display:block; }