/*
Theme Name: WINGKAI Logistics
Theme URI: https://wingkai.co.uk
Author: WINGKAI Logistics
Author URI: https://wingkai.co.uk
Description: Static single-page theme for WINGKAI Logistics Limited. Mirrors the brand mockup: red brand color (#d50000), Arial typography, hero banner, about / services / contact sections, sticky CTA. No customizer, no options — copy lives in the templates.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wingkai
Tags: one-column, custom-logo, translation-ready, accessibility-ready
*/

/* ---------- Reset & base ---------- */
*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif}
body{background:#f5f5f5;color:#333;line-height:1.5}
img{max-width:100%;height:auto}
a{color:#d50000}

/* ---------- Header ---------- */
header{background:#fff;text-align:center;padding:30px;box-shadow:0 2px 8px rgba(0,0,0,.1)}
header img{width:180px;display:block;margin:0 auto 10px}
header h1{color:#d50000;font-size:2rem;margin-bottom:0.25rem}
header p{color:#666;font-size:1rem}

/* ---------- Hero ---------- */
.hero{background:#d50000;color:#fff;text-align:center;padding:70px 20px}
.hero h2{font-size:2.25rem;margin-bottom:0.75rem;color:#fff}
.hero p{font-size:1.1rem;max-width:720px;margin:0 auto}
.btn{display:inline-block;margin-top:20px;padding:12px 25px;background:#fff;color:#d50000;text-decoration:none;border-radius:25px;font-weight:bold;transition:transform .15s ease}
.btn:hover{transform:translateY(-2px)}

/* ---------- Sections ---------- */
section{max-width:1000px;margin:auto;padding:60px 20px}
section h2{text-align:center;color:#d50000;margin-bottom:20px;font-size:1.75rem}

/* ---------- Cards (Services) ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.card,.contact{background:#fff;padding:25px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.card h3{color:#d50000;margin-bottom:0.5rem;font-size:1.15rem}

/* ---------- Contact block ---------- */
.contact p{margin-bottom:0.5rem}
.contact p:last-child{margin-bottom:0}

/* ---------- Footer ---------- */
footer{background:#222;color:#fff;text-align:center;padding:20px;font-size:0.9rem}

/* ---------- Responsive tweaks ---------- */
@media (max-width:600px){
  .hero{padding:50px 20px}
  .hero h2{font-size:1.75rem}
  header h1{font-size:1.5rem}
  section{padding:40px 20px}
}


/* ---------- Site nav ---------- */
.site-nav{margin-top:14px;font-size:0.95rem;line-height:1.6}
.site-nav a{color:#1a3a8f;text-decoration:underline;margin:0 4px;white-space:nowrap}
.site-nav a:first-child{margin-left:0}
.site-nav a:last-child{margin-right:0}
.site-nav .sep{color:#1a3a8f;opacity:0.7;user-select:none}

/* ---------- Page content (Privacy / Data Protection / etc.) ---------- */
.page-content{max-width:900px;padding:0 16px;margin:auto}
.page-content article{background:#fff;padding:30px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);word-wrap:break-word;overflow-wrap:break-word}
.page-content h2{text-align:left;color:#d50000;font-size:1.6rem;margin-bottom:0.75rem}
.page-content h3{color:#d50000;font-size:1.2rem;margin-top:1.25rem;margin-bottom:0.5rem}
.page-content p{margin-bottom:0.85rem;color:#333;line-height:1.7}
.page-content ul{margin:0 0 1rem 1.25rem;color:#333;line-height:1.7}
.page-content ul li{margin-bottom:0.25rem}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  /* Header */
  header { padding: 18px 12px; }
  header img { width: 130px; }
  header h1 { font-size: 1.4rem; }
  header p { font-size: 0.85rem; }

  /* Nav: vertical stack on phones, hide the pipe separators */
  .site-nav { margin-top: 12px; font-size: 1rem; line-height: 1.4; display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .site-nav a { display: block; margin: 0; padding: 8px 16px; min-width: 180px; text-align: center; border: 1px solid #d50000; border-radius: 6px; background: #fff; }
  .site-nav .sep { display: none; }

  /* Hero */
  .hero { padding: 44px 16px; }
  .hero h2 { font-size: 1.5rem; }
  .hero p { font-size: 1rem; }
  .btn { padding: 10px 22px; font-size: 0.95rem; }

  /* Sections */
  section { padding: 36px 16px; }
  section h2 { font-size: 1.4rem; }

  /* Cards: single column on phones */
  .cards { grid-template-columns: 1fr; gap: 14px; }
  .card, .contact { padding: 18px; }

  /* Page content card */
  .page-content { padding: 0 12px; }
  .page-content article { padding: 20px; }
  .page-content h2 { font-size: 1.35rem; }
  .page-content h3 { font-size: 1.1rem; }
  .page-content p, .page-content ul { font-size: 0.98rem; line-height: 1.65; }

  /* Footer */
  footer { padding: 16px 12px; font-size: 0.85rem; }
}

@media (max-width: 380px) {
  /* Very narrow phones: shrink further */
  header h1 { font-size: 1.2rem; }
  .site-nav a { min-width: 160px; padding: 7px 12px; font-size: 0.95rem; }
  .hero h2 { font-size: 1.3rem; }
}