/*
Theme Name: Apparel System
Theme URI: https://apparelsystem.com.pk
Author: Apparel System
Description: Custom theme for Apparel System — knitwear, bottoms & underwear manufacturer.
Version: 1.0.0
Text Domain: apparelsystem
*/

body { margin: 0; font-family: 'IBM Plex Sans', sans-serif; background: #F7F4EE; color: #334A57; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }
ul, li { margin: 0; padding: 0; list-style: none; }

.page-wrap { width: 100%; background: #F7F4EE; color: #334A57; display: flex; flex-direction: column; }

/* HEADER */
header.site-header { width: 100%; background: #FFFFFF; border-bottom: 1px solid rgba(20,33,61,0.1); box-sizing: border-box; position: relative; z-index: 50; }
.header-inner { max-width: 1240px; margin: 0 auto; padding: 20px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo-link img { height: 34px; width: auto; display: block; }
nav.desktop-nav { display: flex; align-items: center; gap: 30px; }
.navlink { color: #334A57; opacity: 0.75; position: relative; padding-bottom: 6px; font-size: 14px; font-weight: 500; }
.navlink:hover { opacity: 1; color: #1677A3; }
.navlink.active { opacity: 1; color: var(--accent, #F5A623); }
.navlink.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--accent, #F5A623); }
.quote-btn { background: #145A7A; color: #FFFFFF; font-size: 14px; font-weight: 600; padding: 12px 22px; border-radius: 6px; white-space: nowrap; }

/* nav dropdown (Products) */
.nav-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav-dropdown-arrow { font-size: 8px; margin-left: 4px; opacity: 0.6; }
.nav-dropdown-menu { position: absolute; top: 100%; left: -22px; padding-top: 16px; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; z-index: 60; }
.nav-dropdown-menu-inner { background: #FFFFFF; border: 1px solid rgba(22,119,163,0.12); border-radius: 8px; box-shadow: 0 16px 36px rgba(20,33,61,0.16); min-width: 232px; padding: 8px 0; }
.nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-item { display: block; padding: 11px 22px; font-size: 13.5px; font-weight: 500; color: #334A57; opacity: 0.78; white-space: nowrap; }
.nav-dropdown-item:hover { opacity: 1; color: #145A7A; background: rgba(22,119,163,0.05); }
.mobile-navlink-sub { display: block; padding: 10px 0 10px 16px; font-size: 14px; color: rgba(51,74,87,0.75); border-bottom: none; }

/* mobile nav */
.hamburger-label { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 28px; height: 22px; cursor: pointer; }
.hamburger-bar { display: block; width: 100%; height: 2.5px; border-radius: 2px; background: #145A7A; }
.nav-toggle-input { display: none; }
.mobile-nav-panel { display: none; }
.mobile-navlink { display: block; padding: 12px 0; font-size: 15px; font-weight: 500; color: #334A57; border-bottom: 1px solid rgba(22,119,163,0.08); }
.mobile-navlink.active { color: #1677A3; font-weight: 700; }

@media (max-width: 900px) {
  .desktop-nav { display: none !important; }
  .hamburger-label { display: flex !important; }
  .nav-toggle-input:checked ~ .mobile-nav-panel { display: flex !important; }
  .mobile-nav-panel { position: absolute; top: 100%; left: 0; right: 0; background: #FFFFFF; flex-direction: column; padding: 6px 32px 22px; box-shadow: 0 20px 34px rgba(20,33,61,0.16); border-bottom: 1px solid rgba(22,119,163,0.1); max-height: 80vh; overflow-y: auto; }
  .resp-grid-3, .resp-grid-4, .resp-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  img[style*="height: 220px"] { height: 260px !important; }
}
@media (max-width: 560px) {
  .resp-grid-2, .resp-grid-3, .resp-grid-4, .resp-grid-5 { grid-template-columns: 1fr !important; }
}
.resp-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }

/* ===== GLOBAL MOBILE RESPONSIVE ===== */
@media (max-width: 900px) {
  .header-inner { padding: 14px 20px; gap: 14px; }
  .quote-btn { padding: 10px 14px; font-size: 13px; }
  .hero-title { font-size: 34px !important; }
  .hero-desc { font-size: 15px !important; }
  .section-title { font-size: 24px !important; }
  .cat-hero-inner, .style-grid-inner, .home-hero-inner { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="max-width:1240px"], [style*="max-width:1000px"], [style*="max-width:960px"], [style*="max-width:900px"] { padding-left: 20px; padding-right: 20px; box-sizing: border-box; }
  .wa-float { width: 48px; height: 48px; right: 14px; bottom: 14px; }
  .wa-float svg { width: 24px; height: 24px; }
}
@media (max-width: 560px) {
  .hero-title { font-size: 28px !important; }
  .cta-primary, .cta-outline { width: 100%; box-sizing: border-box; text-align: center; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
}

/* HERO (home) */
.hero-section { width: 100%; box-sizing: border-box; background: #145A7A; color: #FFFFFF; position: relative; }
.hero-inner { max-width: 1240px; margin: 0 auto; padding: 90px 32px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,0.9fr); gap: 56px; align-items: center; }
.hero-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: 1.5px; color: var(--accent, #F5A623); }
.hero-title { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 50px; line-height: 1.14; }
.hero-desc { margin: 0; font-size: 17px; line-height: 1.6; max-width: 480px; color: rgba(255,255,255,0.82); }
.hero-ctas { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.cta-primary { background: var(--accent, #F5A623); color: #145A7A; font-size: 15px; font-weight: 700; padding: 15px 28px; border-radius: 6px; }
.cta-outline { border: 1px solid rgba(255,255,255,0.4); color: #FFFFFF; font-size: 15px; font-weight: 600; padding: 14px 27px; border-radius: 6px; }
.hero-imgs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.hero-imgs img { width: 100%; height: 220px; object-fit: cover; object-position: top; border-radius: 10px; box-shadow: 0 16px 34px rgba(0,0,0,0.35); display: block; }

/* generic section titles */
.section-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; color: var(--accent, #F5A623); }
.section-title { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 32px; color: #145A7A; line-height: 1.25; }

/* CATEGORY / ARCHIVE HERO */
.cat-hero { width: 100%; box-sizing: border-box; background: #145A7A; color: #FFFFFF; }
.cat-hero-inner { max-width: 1240px; margin: 0 auto; padding: 56px 32px 48px; }
.cat-breadcrumb { font-size: 13px; color: rgba(255,255,255,0.55); margin-bottom: 14px; }
.cat-breadcrumb a { color: rgba(255,255,255,0.55); }
.cat-breadcrumb span.current { color: var(--accent, #F5A623); }

/* STYLE CARD GRID */
.style-grid-section { width: 100%; box-sizing: border-box; background: #FFFFFF; }
.style-grid-inner { max-width: 1240px; margin: 0 auto; padding: 64px 32px 90px; }
.resp-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.card { border: 1px solid rgba(22,119,163,0.12); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; background: #FFFFFF; transition: border-color 0.2s ease; }
.card:hover { border-color: var(--accent, #F5A623); }
.card img { width: 100%; height: 220px; object-fit: contain; object-position: center; box-sizing: border-box; padding: 18px 16px; display: block; filter: brightness(1.04); background: radial-gradient(circle, #FFFFFF 0%, #E3E3E3 100%); }
@media (max-width: 560px) { .card img { height: 200px; padding: 14px 12px; } }
.card-body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 6px; flex-grow: 1; }
.card-style-no { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; color: var(--accent, #F5A623); }
.card-title { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14.5px; color: #145A7A; }
.card-meta p { margin: 0; font-size: 12px; line-height: 1.55; color: rgba(51,74,87,0.65); }
.card-meta p span.label { color: rgba(51,74,87,0.45); }

/* FOOTER */
footer.site-footer { width: 100%; box-sizing: border-box; background: #0D1729; color: rgba(255,255,255,0.7); }
.footer-inner { max-width: 1240px; margin: 0 auto; padding: 56px 32px 32px; display: flex; flex-direction: column; gap: 36px; }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 32px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-brand-name { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 16px; color: #FFFFFF; }
.footer-col-title { font-size: 13px; font-weight: 700; letter-spacing: 1px; color: rgba(255,255,255,0.4); }
.footerlink { color: rgba(255,255,255,0.7); font-size: 14px; }
.footerlink:hover { color: var(--accent, #F5A623); }
.footer-rule { width: 100%; height: 1px; background: rgba(255,255,255,0.1); }
.footer-copy { font-size: 12.5px; color: rgba(255,255,255,0.45); }

@media (max-width: 900px) {
  .hero-inner, .home-hero-inner { grid-template-columns: 1fr; padding: 48px 24px; gap: 32px; }
  .footer-cols { grid-template-columns: 1fr; }
}

/* CLIENT LOGOS MARQUEE */
.client-logos-viewport { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); }
.client-logos-track { display: flex; align-items: center; width: max-content; animation: clientLogosSlide 44s linear infinite; }
.client-logos-track img { height: 88px; width: auto; max-width: 200px; object-fit: contain; margin: 0 34px; flex: 0 0 auto; opacity: 0.88; transition: opacity 0.2s ease; }
.client-logos-track img:hover { opacity: 1; }
@keyframes clientLogosSlide { 0% { transform: translateX(-50%); } 100% { transform: translateX(0%); } }
@media (prefers-reduced-motion: reduce) { .client-logos-track { animation: none; } }

/* HOME HERO + VIDEO (merged gradient section) */
.home-hero-video { width: 100%; box-sizing: border-box; background-color: #123B55; background-image: linear-gradient(120deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 32%), linear-gradient(100deg, #1B84B8 0%, #1677A3 30%, #145A7A 60%, #0D4560 85%, #0A3850 100%); color: #FFFFFF; }
.home-hero-inner { max-width: 1240px; margin: 0 auto; padding: 90px 32px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,0.9fr); gap: 56px; align-items: center; }
.hero-img-row { display: flex; gap: 14px; }
.hero-img-row img { flex: 1; min-width: 0; object-fit: cover; object-position: center; border-radius: 10px; filter: brightness(0.95); box-shadow: 0 16px 34px rgba(0,0,0,0.22); }

/* WHAT WE MAKE */
.wwm-intro { display: block; }
.wwm-intro > * + * { margin-top: 16px; }
.wwm-cards { display: block; }
.wwm-cards > * + * { margin-top: 24px; }
@media (min-width: 761px) {
  .wwm-intro { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr); gap: 40px; align-items: end; }
  .wwm-intro > * + * { margin-top: 0; }
  .wwm-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
  .wwm-cards > * + * { margin-top: 0; }
}

/* WHATSAPP FLOAT */
.wa-float { position: fixed; right: 24px; bottom: 24px; width: 58px; height: 58px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,0.28); z-index: 999; }

/* CONTACT PAGE */
.contact-input { background: #FFFFFF; border: 1px solid #DCE8EE !important; transition: border-color 0.15s ease; }
.contact-input:focus { border-color: #1677A3 !important; outline: none; }
.enquiry-btn:hover { background: #E89012 !important; }

@media (max-width: 760px) {
  .hero-img-row { flex-direction: column !important; }
  .resp-grid-uneven { grid-template-columns: 1fr !important; }
}

/* FABRIC PAGE */
#fiberChips { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; margin-bottom: 20px; }
.fiber-chip { position: relative; min-height: 48px; width: 100%; border-radius: 8px; padding: 10px; border: 2px solid rgba(22,119,163,0.1); background: #FFFFFF; cursor: pointer; display: flex; align-items: center; justify-content: center; text-align: center; transition: all 0.2s ease; font-family: inherit; }
.fiber-chip:hover { border-color: var(--accent, #F5A623); }
.fiber-chip.active { background: var(--accent, #F5A623); border-color: var(--accent, #F5A623); box-shadow: 0 6px 16px rgba(22,119,163,0.18); }
.fiber-chip.active .fiber-chip-label { color: #FFFFFF; }
.fiber-chip-label { font-size: 13px; font-weight: 600; color: #145A7A; }
.fiber-detail-panel { margin-bottom: 56px; border: 1px solid rgba(22,119,163,0.12); border-left: 4px solid var(--accent, #F5A623); border-radius: 10px; padding: 26px 30px; box-sizing: border-box; background-size: cover; background-position: right center; background-repeat: no-repeat; }
.fiber-detail-name { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 17px; color: #145A7A; margin-bottom: 4px; }
.fiber-detail-tagline { font-size: 14.5px; font-weight: 600; color: var(--accent, #F5A623); margin-bottom: 16px; }
.fiber-detail-points { display: flex; flex-direction: column; gap: 9px; }
.fiber-detail-point { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: rgba(51,74,87,0.75); }
.fiber-diamond { color: var(--accent, #F5A623); margin-top: 3px; }
@media (max-width: 900px) { #fiberChips { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 560px) { #fiberChips { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* SCROLL REVEAL (fade/slide-in, same effect as the old .dc.html pages) */
.scroll-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.scroll-reveal.revealed { opacity: 1; transform: translateY(0); }
.scroll-reveal-delay-1.revealed { transition-delay: 0.1s; }
.scroll-reveal-delay-2.revealed { transition-delay: 0.2s; }
.scroll-reveal-delay-3.revealed { transition-delay: 0.3s; }

/* Smaller page headings on phones (same as the original site) */
@media (max-width: 560px) {
  h1 { font-size: 26px !important; line-height: 1.28 !important; }
}

.qc-card{transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;}
.qc-card:hover{transform:translateY(-5px);border-color:rgba(22,119,163,.22)!important;box-shadow:0 14px 30px rgba(22,119,163,.12)!important;}

/* Home hero entrance animation (matches the original site) */
@keyframes heroFadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroImageIn { from { opacity: 0; transform: translateY(46px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
.hero-anim { opacity: 0; animation: heroFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.hero-img-anim { opacity: 0; animation: heroImageIn 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.hero-anim-1 { animation-delay: 0.1s; } .hero-anim-2 { animation-delay: 0.28s; } .hero-anim-3 { animation-delay: 0.46s; }
.hero-anim-4 { animation-delay: 0.64s; } .hero-anim-5 { animation-delay: 0.82s; }
.hero-img-1 { animation-delay: 0.35s; } .hero-img-2 { animation-delay: 0.55s; } .hero-img-3 { animation-delay: 0.75s; }
.hero-img-4 { animation-delay: 0.95s; } .hero-img-5 { animation-delay: 1.15s; }
@media (prefers-reduced-motion: reduce) { .hero-anim, .hero-img-anim { animation: none; opacity: 1; transform: none; } .scroll-reveal { opacity: 1; transform: none; transition: none; } }

/* Basic content protection: images can't be dragged/selected; no long-press "save image" on phones. */
img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
video { -webkit-touch-callout: none; }