/* MyShopSwift — shared styles for static content pages (Contact, Help,
   Track Order, Returns, FAQ, About, Careers, Privacy, Terms).
   Design tokens and base rules are copied from index.html's inline
   <style> so these pages match the storefront exactly. index.html itself
   is left untouched/self-contained — this file is only for the new pages. */

:root{
  --indigo:#0F2A6B;
  --indigo-2:#0A1F52;
  --paper:#F7F9FC;
  --paper-2:#EBF0F8;
  --ochre:#FF6B00;
  --rust:#C2410C;
  --green:#2F6E4E;
  --ink:#0F2A6B;
  --line:rgba(27,31,59,0.14);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Work Sans',sans-serif;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:'Poppins',sans-serif;font-weight:700;letter-spacing:-0.01em;margin:0;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px;}

.adire{height:6px;width:100%;background:linear-gradient(90deg, var(--indigo) 0%, var(--indigo) 55%, var(--rust) 78%, var(--ochre) 100%);}

/* ---- Utility bar + header (simplified: no live search/cart/account data —
   those live in index.html; this header just gets people back there) ---- */
.utility-bar{background:var(--indigo);color:var(--paper);font-size:12.5px;letter-spacing:.02em;}
.utility-bar .wrap{display:flex;justify-content:space-between;align-items:center;padding:8px 24px;flex-wrap:wrap;gap:6px;}
.utility-bar span{opacity:.85;}
.utility-bar .ub-right{display:flex;gap:18px;}

header.site{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;gap:24px;flex-wrap:wrap;}
.logo{display:flex;align-items:center;gap:10px;}
.logo img{height:52px;width:auto;display:block;}
.logo .tagline{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--rust);font-family:'IBM Plex Mono',monospace;line-height:1.5;}
.site-nav{display:flex;gap:20px;flex-wrap:wrap;}
.site-nav a{font-size:13.5px;font-weight:500;padding:6px 0;border-bottom:2px solid transparent;}
.site-nav a:hover, .site-nav a.active{border-color:var(--rust);color:var(--rust);}
.header-actions{display:flex;align-items:center;gap:18px;}
.icon-link{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-family:'IBM Plex Mono',monospace;color:var(--ink);}
.icon-link svg{width:20px;height:20px;}

/* ---- Page hero ---- */
.page-hero{background:var(--indigo);color:var(--paper);padding:44px 0 36px;}
.page-hero .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ochre);margin-bottom:10px;display:block;}
.page-hero h1{font-size:clamp(26px,4vw,38px);color:var(--paper);}
.page-hero p{font-size:14.5px;color:rgba(247,249,252,.82);margin-top:10px;max-width:560px;line-height:1.6;}

/* ---- Content sections ---- */
.section{padding:44px 0;}
.section-narrow{max-width:760px;margin:0 auto;padding:44px 24px;}
.section-head{margin-bottom:22px;}
.section-head .num{font-family:'IBM Plex Mono',monospace;color:var(--rust);font-size:12.5px;margin-bottom:6px;display:block;}
.section-head h2{font-size:clamp(21px,2.6vw,28px);}
.prose{font-size:14.5px;line-height:1.75;color:#333;}
.prose h3{font-size:17px;margin:26px 0 8px;color:var(--indigo);}
.prose h3:first-child{margin-top:0;}
.prose ul{padding-left:20px;line-height:1.8;}
.prose p{margin:0 0 14px;}
.prose strong{color:var(--indigo);}

/* ---- Cards / grid ---- */
.info-card{background:#fff;border:1px solid var(--line);padding:20px;}
.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}

/* ---- Buttons ---- */
.btn{display:inline-block;padding:12px 22px;font-size:13.5px;font-weight:600;letter-spacing:.02em;border:1.5px solid transparent;transition:all .15s;background:none;cursor:pointer;}
.btn-primary{background:var(--ochre);color:var(--indigo);}
.btn-primary:hover{background:#e05f00;}
.btn-dark{background:var(--indigo);color:var(--paper);}
.btn-dark:hover{background:var(--rust);}
.btn-outline{background:transparent;border-color:var(--indigo);color:var(--indigo);}
.btn-outline:hover{background:var(--indigo);color:var(--paper);}

/* ---- Forms (contact form, track order) ---- */
.field{margin-bottom:16px;}
.field label{display:block;font-size:11.5px;font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--rust);margin-bottom:6px;}
.field input, .field select, .field textarea{
  width:100%;padding:11px 12px;border:1.5px solid var(--indigo);background:#fff;font-size:14px;outline:none;font-family:'Work Sans',sans-serif;
}
.field textarea{resize:vertical;min-height:110px;}
.field-row{display:flex;gap:14px;}
.field-row .field{flex:1;}
.form-error{color:var(--rust);font-size:12.5px;margin:0 0 10px;min-height:1em;}
.form-success{
  background:#eef7f1;border:1.5px solid var(--green);color:var(--green);
  padding:14px 16px;font-size:13.5px;display:none;margin-bottom:16px;
}
.form-success.show{display:block;}

/* ---- FAQ / accordion ---- */
.faq-search{margin-bottom:22px;}
.faq-group{margin-bottom:28px;}
.faq-group h3{font-size:15px;color:var(--rust);font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;}
.faq-item{border:1px solid var(--line);background:#fff;margin-bottom:8px;}
.faq-q{
  width:100%;text-align:left;padding:14px 16px;background:none;border:none;
  font-size:14.5px;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.faq-q .chev{font-size:13px;color:var(--rust);transition:transform .15s;flex-shrink:0;}
.faq-item.open .faq-q .chev{transform:rotate(180deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .2s ease;font-size:13.5px;line-height:1.7;color:#444;}
.faq-item.open .faq-a{max-height:400px;}
.faq-a-inner{padding:0 16px 16px;}
.faq-hidden{display:none;}

/* ---- Track order ---- */
.order-status-card{background:#fff;border:1px solid var(--line);padding:20px;margin-top:20px;}
.order-status-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;}
.order-status-row:last-child{border-bottom:none;}
.status-pill{
  font-family:'IBM Plex Mono',monospace;text-transform:uppercase;font-size:11px;
  padding:4px 10px;background:var(--paper-2);color:var(--indigo);display:inline-block;
}
.status-pill.delivered{background:#eef7f1;color:var(--green);}
.status-pill.cancelled{background:#fbeae6;color:var(--rust);}

/* ---- Footer ---- */
footer{background:var(--indigo);color:rgba(247,249,252,.8);}
.footer-inner{max-width:1240px;margin:0 auto;padding:56px 24px 28px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;}
footer h5{color:var(--paper);font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-family:'IBM Plex Mono',monospace;margin-bottom:16px;}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:13.5px;}
footer ul a:hover{color:var(--ochre);}
footer .foot-logo{font-family:'Poppins',sans-serif;font-size:24px;color:var(--paper);margin-bottom:12px;}
footer p.small{font-size:13px;line-height:1.6;max-width:280px;}
.foot-bottom{border-top:1px solid rgba(247,249,252,.15);padding:20px 24px;font-size:12px;display:flex;justify-content:space-between;max-width:1240px;margin:0 auto;flex-wrap:wrap;gap:8px;}

@media (max-width:900px){
  .card-grid{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr 1fr;}
  .site-nav{order:3;width:100%;}
}
@media (max-width:600px){
  .field-row{flex-direction:column;gap:0;}
  .footer-inner{grid-template-columns:1fr;}
  .foot-bottom{flex-direction:column;}
}
:focus-visible{outline:2px solid var(--rust);outline-offset:2px;}