/* ============================================================
   PT Agriindo Jaya Persada — visual upgrade layer
   Overrides IMCO's base CSS without modifying the originals.
   Loaded after responsive.css / globalpresence.css / product.css
   ============================================================ */

:root {
  --brand-green: #1e3a2e;
  --brand-green-light: #2a5240;
  --brand-gold: #d4a017;
  --brand-gold-light: #e6b733;
  --header-bg: #f5efe0;
  --header-bg-hover: #ebe4d0;
  --header-text: #14213d;
  --ink: #2c2c2c;
  --paper: #fafaf7;
  --card: #ffffff;
}

/* -------- Base / body -------- */
body {
  background-color: var(--paper);
  font-family: 'PT Sans', 'Helvetica Neue', sans-serif;
  color: var(--ink);
}

/* -------- Header -------- */
.header {
  background-color: var(--header-bg) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  border-bottom: 2px solid var(--brand-gold);
}

.header ul {
  background-color: var(--header-bg) !important;
  border-bottom: none !important;
}

.header .logo {
  max-width: 220px;
}

.header li a {
  color: var(--header-text);
  font-family: 'Dosis', sans-serif;
  font-weight: 600;
  font-size: 0.95em;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.header li a:hover,
.header .menu-btn:hover {
  background-color: var(--header-bg-hover);
}

.menu a:hover {
  color: var(--brand-gold) !important;
}

.header .menu-icon .navicon,
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: var(--header-text) !important;
}

@media (max-width: 600px) {
  .header .logo {
    max-width: 160px;
    padding: 8px 12px;
  }
}

/* -------- Homepage hero --------
   Body becomes a flex column at viewport height so the .hero block
   fills the remaining space (after the fixed header) and the footer
   sits naturally at the bottom. The logo is centred inside .hero
   with equal space above and below — same behaviour on desktop and mobile. */
body.home {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.hero {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 90px 20px 30px 20px; /* top padding clears the fixed header */
  box-sizing: border-box;
}

.hero .logoslogan {
  width: auto;
  max-width: 420px;
  padding-top: 0;
  margin: 0;
  display: block;
}

@media (max-width: 600px) {
  .hero {
    padding: 80px 16px 24px 16px;
  }
  .hero .logoslogan {
    width: 80%;
    max-width: 320px;
  }
}

/* Keep the standalone .logoslogan rule for any non-homepage usage */
.logoslogan {
  width: auto;
  max-width: 420px;
}

/* -------- Headings -------- */
h2 {
  color: var(--brand-green) !important;
  font-family: 'Dosis', sans-serif;
  font-weight: 600;
  padding-top: 120px;
  letter-spacing: 6px;
}

h3 {
  color: var(--brand-gold) !important;
  font-family: 'Dosis', sans-serif;
  font-weight: 600;
  letter-spacing: 4px;
  padding: 50px 5px 20px 5px;
}

/* -------- Footer -------- */
footer {
  background-color: var(--brand-green);
  color: #ffffff !important;
  padding: 30px 20px !important;
  margin-top: 60px;
  font-family: 'PT Sans', sans-serif;
  letter-spacing: 1.5px;
  font-size: 0.85em;
}

footer p,
footer ul {
  color: #ffffff !important;
  margin: 0;
}

/* -------- Global Presence — new section layout -------- */
.locations {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 30px 60px 30px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.location {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 32px;
  align-items: start;
}

.location-img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.location-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.location-title {
  color: var(--brand-green);
  font-family: 'Dosis', sans-serif;
  font-weight: 700;
  font-size: 1.5em;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0;
  padding: 8px 0 0 0;
  line-height: 1.25;
}

.location-desc {
  color: var(--ink);
  font-family: 'PT Sans', sans-serif;
  font-size: 1em;
  line-height: 1.7;
  background: var(--card);
  padding: 22px 26px;
  border-radius: 8px;
  border-left: 4px solid var(--brand-gold);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  margin: 0;
}

.timber-link {
  color: var(--brand-gold);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--brand-gold);
}

.timber-link:hover {
  color: var(--brand-green);
  border-bottom-color: var(--brand-green);
}

@media (max-width: 768px) {
  .location {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .location-img {
    height: 220px;
  }
  .location-title {
    font-size: 1.25em;
  }
}

/* -------- About page — leader sections -------- */
.leaders {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 30px 60px 30px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.leader {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 32px;
  align-items: start;
}

.leader-img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  object-position: center top;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.leader-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.leader-title {
  color: var(--brand-green);
  font-family: 'Dosis', sans-serif;
  font-weight: 700;
  font-size: 1.5em;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0;
  padding: 8px 0 0 0;
  line-height: 1.25;
}

.leader-desc {
  color: var(--ink);
  font-family: 'PT Sans', sans-serif;
  font-size: 1em;
  line-height: 1.7;
  background: var(--card);
  padding: 22px 26px;
  border-radius: 8px;
  border-left: 4px solid var(--brand-gold);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  margin: 0;
}

@media (max-width: 768px) {
  .leaders {
    padding: 20px 18px 40px 18px;
    gap: 36px;
  }
  .leader {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .leader-img {
    height: 360px;
  }
  .leader-title {
    font-size: 1.25em;
  }
}

/* -------- Products page — captions + placeholders -------- */
/* Override IMCO's position:absolute on #products so margin:auto centers it */
#products {
  position: relative !important;
  height: auto !important;
  padding-top: 0 !important;
  max-width: 1200px;
  margin: 0 auto !important;
  text-align: center !important;
}

#wrapper {
  text-align: center;
}

.gallery {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 16px 12px;
  text-align: left;
  width: 320px;
  height: 280px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background: var(--brand-green);
}

.gallery:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

/* Image fills the top portion; the bottom is reserved for a solid title bar.
   object-position: center top crops the bottom of source images, which is where
   the legacy IMCO product-name watermarks live, removing them from view. */
.gallery img {
  display: block !important;
  width: 100% !important;
  height: 210px !important;
  object-fit: cover !important;
  object-position: center 20% !important;
  margin: 0 !important;
  float: none !important;
  border-radius: 0 !important;
}

/* Solid title bar at the bottom — single clean title, no overlap with photo. */
.gallery .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  background: var(--brand-green);
  color: #ffffff;
  font-family: 'Dosis', sans-serif;
  font-weight: 700;
  font-size: 1.05em;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-align: center;
  border-top: 3px solid var(--brand-gold);
}

/* Placeholder tile fills the upper image area (same 210px) */
.gallery .tile {
  width: 100%;
  height: 210px;
  background: linear-gradient(135deg, var(--brand-green-light) 0%, var(--brand-green) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

.gallery .tile .tile-name {
  color: var(--brand-gold);
  font-family: 'Dosis', sans-serif;
  font-weight: 700;
  font-size: 1.4em;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.gallery .tile .tile-note {
  color: rgba(255, 255, 255, 0.7);
  font-family: 'PT Sans', sans-serif;
  font-size: 0.75em;
  letter-spacing: 1px;
  margin-top: 10px;
  text-transform: uppercase;
}

/* -------- Contact page -------- */
.contact {
  max-width: 700px;
  margin: 0 auto;
  background: var(--card);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  padding: 40px 30px !important;
  border-top: 4px solid var(--brand-gold);
  height: auto !important;
  margin-top: 30px;
}

.contact .one,
.contact .address,
.contact .number {
  color: var(--ink) !important;
  padding-top: 14px !important;
  font-family: 'PT Sans', sans-serif !important;
  line-height: 1.7;
}

.contact .one {
  color: var(--brand-green) !important;
  font-family: 'Dosis', sans-serif !important;
  font-size: 1.6em !important;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding-top: 0 !important;
}

.contact .address {
  font-size: 1.05em !important;
}

.contact .number {
  font-size: 1.05em !important;
  color: var(--brand-green) !important;
}

/* Management list on contact page */
body > ul.number {
  max-width: 700px;
  margin: 12px auto 0 auto;
  background: var(--card);
  padding: 18px 24px !important;
  border-radius: 6px;
  border-left: 3px solid var(--brand-gold);
  font-family: 'PT Sans', sans-serif !important;
  color: var(--ink) !important;
  text-align: left !important;
  padding-top: 18px !important;
  font-size: 1em !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

/* -------- Floating WhatsApp button -------- */
.wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  background-color: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  z-index: 9999;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wa-float:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.wa-float svg {
  width: 34px;
  height: 34px;
  display: block;
}

@media (max-width: 600px) {
  .wa-float {
    width: 54px;
    height: 54px;
    bottom: 18px;
    right: 18px;
  }
  .wa-float svg {
    width: 30px;
    height: 30px;
  }
}