/* assets/css/legal.css */

/* Page shell */
.legal-hero{
    background: #FEF2F2; /* soft pink */
    padding: 32px 0 48px;
  }
  
  .legal-wrap{
    max-width: 980px;
    margin: 0 auto;
    padding-inline: 24px;
  }
  
  /* Top back link */
  .legal-back{ margin: 0 0 8px;font-size:18px; }
  .legal-back-link{
    display:inline-flex; align-items:center; gap:8px;
    color:#FB2C36; text-decoration:none; font-weight:500;
  }
  .legal-back-link:hover{ text-decoration:underline; }
  
  /* Title */
  .legal-title{
    font-size: 30px;
    font-weight: 700;
    color:#0f172a;
    margin: 6px 0 16px;
  }
  
  /* Card */
  .legal-card{
    background: #fff;
    border: 1px solid #f1cfe0;          /* soft border */
    border-radius: 12px;
    padding: 18px 20px;
    margin-top: 18px;
    box-shadow: 0 1px 0 rgba(16,24,40,.02), 0 1px 2px rgba(16,24,40,.06);
  }
  
  .legal-card-head{
    display:flex; align-items:center; gap:10px;
    margin-bottom: 8px;
  }
  
  .legal-icon{
    display:grid; place-items:center;
    width: 36px; height: 36px;
    border-radius: 10px;
    /* background: #fee2e2;          pale red */
    color: #FB2C36;
  }
  
  .legal-icon svg{ stroke: currentColor; }
  
  .legal-card-title{
    font-size: 18px;
    font-weight: 700;
    color:#0f172a;
    margin: 0;
  }
  
  /* Body text */
  .legal-para{
    color:#334155;
    line-height: 1.8;
    margin: 20px 0 ;
    font-size: 0.975rem;
  }
  
  /* Bullets */
  .legal-bullets{
    margin: 8px 0 0 0;
    padding-left: 0;
    list-style: none;
    color:#334155;
    line-height:1.7;
    font-size: 0.975rem;
  }
  .legal-bullets li{
    position: relative;
    padding-left: 18px;
    margin: 8px 0 0;
  }
  .legal-bullets li::before{
    content:"";
    position:absolute; left:0; top: .66em;
    width: 6px; height: 6px;
    border-radius: 999px;
    background:#FB2C36           /* red dot like screenshot */
  }
  
  /* Responsive */
  @media (max-width: 640px){
    .legal-wrap{ padding-inline: 14px; }
    .legal-card{ padding: 16px; }
  }
  

  /* Sub-section titles inside a card */
.legal-subhead{
    margin: 14px 0 6px;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
  }
  
  /* Variant for bullets where the first words are bold labels */
  .legal-bullets--labels .label{
    font-weight: 700;
    color: #0f172a;
    margin-right: 4px;
  }
  
  /* Tighter spacing for stacked bullet sections in one card */
  .legal-card .legal-bullets + .legal-subhead { margin-top: 16px; }
  
  /* Link color inside legal text */
  .legal-para a { color:#FB2C36; text-decoration: none; }
  .legal-para a:hover { text-decoration: underline; }
  





  /* privacy  */
  /* --- Privacy page extras --- */

/* Outline ring variant for the icon on the first card */
.legal-icon--ring{
    background: #fff;
    /* border: 2px solid #fecaca; */
    color: #FB2C36;
  }
  
  /* Info tiles (pale pink boxes) */
  .info-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
    margin-top: 10px;
  }
  .info-tile{
    background: #FEF2F2;        /* soft pink tile */
    border: 1px solid #FEF2F2;  /* subtle border */
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 15px;
  }
  .info-tile h4{
    margin: 0 0 6px;
    font-size: .98rem;
    font-weight: 700;
    color:#0f172a;
  }
  .info-tile p{
    margin: 0;
    color:#334155;
    line-height: 1.6;
    font-size: .95rem;
  }
  
  /* Two column lists (Security Measures) */
  .legal-two-cols{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px;
    margin-top: 8px;
  }
  .legal-minihead{
    margin: 0 0 6px;
    font-size: .98rem;
    font-weight: 700;
    color:#0f172a;
  }
  
  /* Tighten card spacing like screenshots */
  .legal-card + .legal-card{ margin-top: 16px; }
  
  /* Mobile */
  @media (max-width: 768px){
    .info-grid { grid-template-columns: 1fr; }
    .legal-two-cols { grid-template-columns: 1fr; }
  }
  


  /* --- Cookie Policy extras (builds on existing legal.css) --- */

/* Ringed icon variant already defined earlier:
   .legal-icon--ring { background:#fff; border:2px solid #fecaca; color:#b91c1c; } */

/* Tight spacing like screenshots */
.legal-card + .legal-card { margin-top: 16px; }

/* Info tiles are reused from privacy page:
   .info-grid, .info-tile, .info-tile h4, .info-tile p already exist.
   If you want the tiles slightly lighter here, uncomment the following:

.info-tile { background:#f8eaf3; border-color:#f6d7e9; }
*/

/* Optional: make cookie sections breathe a bit less on mobile */
@media (max-width: 640px){
  .legal-card { padding: 16px; }
}