/*
Theme Name: Straws.my Child
Theme URI: https://straws.my
Description: GeneratePress child theme for Straws.my — a lightweight, centre-aligned layout. Styling lives here; features live in the straws-custom plugin.
Author: Straws.my (Grip Bond (M) Sdn Bhd)
Author URI: https://straws.my
Template: generatepress
Version: 0.3.4
License: GNU General Public License v2 or later
Text Domain: straws-child
*/

/* ==========================================================================
   Design tokens  (captured from the live Avada site)
   ========================================================================== */
:root {
  --straws-orange: #f7941e;   /* primary CTA */
  --straws-orange-dark: #e08416;
  --straws-green:  #7cb63a;   /* brand / outline / accents */
  --straws-green-dark: #5a8a28;
  --straws-notice-bg:  #2f4f2f; /* top ban banner / dark section */
  --straws-text:   #5f6368;
  --straws-heading:#2f3a2a;
  --straws-tint:   #f6f9f0;    /* soft green section wash */
  --straws-line:   #e8ebe2;    /* hairline borders */
  --straws-radius: 2px;
  --straws-card-radius: 10px;
  --straws-maxw:   1080px;
  --straws-readw:  760px;      /* comfortable reading / centred column */
  --font-body: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-head: "Antic Slab", Georgia, "Times New Roman", serif;
}

/* ==========================================================================
   Base typography  (centre-aligned content site)
   ========================================================================== */
body {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--straws-text);
  line-height: 1.75;
}
h1, h2, h3, h4, .entry-title, .site-title {
  font-family: var(--font-head);
  color: var(--straws-heading);
  line-height: 1.2;
}
h1 { font-size: 2.9rem; letter-spacing: -0.5px; }
h2 { font-size: 2.1rem; }
h3 { font-size: 1.4rem; }
a { color: var(--straws-green-dark); }
a:hover { color: var(--straws-orange); }

/* ==========================================================================
   Buttons  (two CTA styles from the live site)
   ========================================================================== */
.straws-btn {
  display: inline-block;
  padding: 0.95em 2em;
  border-radius: var(--straws-radius);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.straws-btn--primary {           /* filled orange */
  background: var(--straws-orange);
  color: #fff;
  border: 1px solid var(--straws-orange);
  box-shadow: 0 6px 18px rgba(247,148,30,.28);
}
.straws-btn--primary:hover { background: var(--straws-orange-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(247,148,30,.34); }
.straws-btn--outline {           /* white bg, orange text, green border */
  background: #fff;
  color: var(--straws-orange);
  border: 1px solid var(--straws-green);
}
.straws-btn--outline:hover { background: var(--straws-green); color: #fff; border-color: var(--straws-green); transform: translateY(-1px); }
.straws-btn--block { display: block; width: 100%; }

/* ==========================================================================
   Header logo sizing
   ========================================================================== */
.site-logo img,
img.custom-logo {
  max-height: 54px;
  width: auto;
  height: auto;
}
/* The logo stands in for the text title — hide the title/tagline visually
   (kept in the DOM for screen readers & SEO; absolute removes it from flow). */
.main-title,
.site-description {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Navigation accent (green active state)
   ========================================================================== */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a { color: var(--straws-green) !important; }

/* ==========================================================================
   Page shell: centre every section's content
   ========================================================================== */
.straws-section { padding: 4rem 0; }
.straws-section--tint { background: var(--straws-tint); }
.straws-section__inner {
  max-width: var(--straws-maxw);
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
}
/* centred, comfortable intro paragraph under each heading */
.straws-section__lead {
  max-width: var(--straws-readw);
  margin: 0 auto 1.75rem;
  font-size: 1.1rem;
}
/* running body copy stays readable: centred column, generous width */
.straws-section__inner > p {
  max-width: var(--straws-readw);
  margin-left: auto;
  margin-right: auto;
}

/* ---- Section heading with a centred accent underline ---- */
.straws-section h2,
.straws-hero h1 { margin-top: 0; }
.straws-section h2 {
  margin-bottom: 1rem;
  padding-bottom: .9rem;
  position: relative;
}
.straws-section h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  border-radius: 3px;
  background: var(--straws-orange);
}
.straws-section h3 { margin-top: 2rem; }

/* ==========================================================================
   Hero  (centred, soft brand backdrop)
   ========================================================================== */
.straws-hero {
  padding: 5rem 0 4rem;
  background:
    radial-gradient(1100px 440px at 50% -140px, rgba(124,182,58,.16), transparent 70%),
    linear-gradient(180deg, #fbfdf7 0%, #ffffff 100%);
  border-bottom: 1px solid var(--straws-line);
}
.straws-hero__inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
}
.straws-hero h1 { margin-bottom: 1.1rem; }
.straws-hero__sub {
  font-size: 1.25rem;
  max-width: 680px;
  margin: 0 auto;
  color: #6b7280;
}
.straws-hero__trust {
  color: var(--straws-green-dark);
  font-weight: 700;
  margin-top: 1.75rem;
}
/* hero also carries product bullet lists / sizes on some pages */
.straws-hero__inner h3 { margin-top: 2rem; }

/* ---- Split hero: text beside a smaller image on desktop ----
   On mobile it stacks and the image becomes a cropped 16:9 banner (object-fit
   cover keeps it tidy), so there's no need to hide it like the old site. */
.straws-hero--split .straws-hero__inner {
  display: flex;
  align-items: center;
  gap: 3rem;
  max-width: 1140px;
  text-align: left;
}
.straws-hero--split .straws-hero__text { flex: 1 1 56%; }
.straws-hero--split .straws-hero__text .straws-hero__sub { margin-left: 0; margin-right: 0; }
.straws-hero--split .straws-ctas { justify-content: flex-start; }
.straws-hero--split .straws-hero__media { flex: 1 1 44%; }
.straws-hero--split .straws-hero__media .straws-figure { margin: 0; }
.straws-hero--split .straws-hero__media .straws-figure img {
  aspect-ratio: 1 / 1;          /* square hero photo — shown in full, no crop */
  object-fit: cover;
  width: 100%;
  height: auto;
}

@media (max-width: 860px) {
  .straws-hero--split .straws-hero__inner { flex-direction: column; gap: 1.75rem; text-align: center; }
  .straws-hero--split .straws-hero__text .straws-hero__sub { margin-left: auto; margin-right: auto; }
  .straws-hero--split .straws-ctas { justify-content: center; }
  .straws-hero--split .straws-hero__media { width: 100%; }
  .straws-hero--split .straws-hero__media .straws-figure img { aspect-ratio: 1 / 1; }
}

/* ==========================================================================
   Feature / checklist bullet lists → centred "pill" checklist
   (applies to plain <ul> in sections & hero, not the sizes table)
   ========================================================================== */
.straws-section__inner ul:not(.straws-sizes),
.straws-hero__inner ul:not(.straws-sizes) {
  list-style: none;
  padding: 0;
  margin: 1.5rem auto;
  max-width: 820px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem .7rem;
}
.straws-section__inner ul:not(.straws-sizes) li,
.straws-hero__inner ul:not(.straws-sizes) li {
  background: #fff;
  border: 1px solid var(--straws-line);
  border-radius: 40px;
  padding: .5rem 1.1rem .5rem 2.1rem;
  position: relative;
  font-weight: 600;
  color: var(--straws-heading);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.straws-section__inner ul:not(.straws-sizes) li::before,
.straws-hero__inner ul:not(.straws-sizes) li::before {
  content: "\2713";              /* check mark */
  position: absolute;
  left: .85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--straws-green);
  font-weight: 700;
}
.straws-section--tint .straws-section__inner ul:not(.straws-sizes) li { background: #fff; }

/* ==========================================================================
   Long-form article sections (.straws-prose)
   Body copy reads left-aligned in a comfortable centred column, while the
   section heading stays centred (with its accent underline) to match the
   rest of the site. Checklists, CTAs and video embeds keep their own centring.
   ========================================================================== */
.straws-prose { text-align: left; }
.straws-prose h2,
.straws-prose h3 { text-align: center; }
.straws-prose > p {
  max-width: var(--straws-readw);
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   Contact section — two columns on desktop (info | form), stacked on mobile.
   Heading + intro stay centred above; this grid holds the details and form.
   ========================================================================== */
.straws-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: stretch;            /* both columns share the form's height */
  text-align: left;
  max-width: 980px;
  margin: 2rem auto 0;
}
/* Left column = filled dark panel so it reads as a deliberate block, not empty space */
.straws-contact__info {
  background: var(--straws-notice-bg);
  color: rgba(255, 255, 255, .85);
  border-radius: 12px;
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;         /* vertically centre the shorter content */
}
.straws-contact__info h3 { margin: 0 0 1rem; color: #fff; text-align: left; }
.straws-contact__info p { margin: 0; line-height: 1.9; }
.straws-contact__info .straws-contact__lead { margin: 0 0 1.5rem; }
.straws-contact__info strong { color: #fff; }
.straws-contact__info a { color: #ffd37a; }
.straws-contact__info a:hover { color: #fff; }
.straws-contact__info .straws-btn--wa {
  background: #25d366; color: #fff; border: 1px solid #25d366; margin-top: 1.5rem;
}
.straws-contact__info .straws-btn--wa:hover { background: #1fbe5a; color: #fff; }
.straws-contact__form .straws-form { max-width: none; margin: 0; height: 100%; }

/* "Why choose Straws.my?" mini-list inside the info panel */
.straws-why { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .18); }
.straws-why h4 { margin: 0 0 .5rem; color: #fff; font-size: 1.05rem; font-family: var(--font-head); }
.straws-why__item { position: relative; padding: .25rem 0 .25rem 1.7rem; }
.straws-why__item::before { content: "\2713"; position: absolute; left: 0; top: .25rem; color: #9fe07a; font-weight: 700; }

@media (max-width: 768px) {
  .straws-contact { grid-template-columns: 1fr; gap: 1.5rem; }
  .straws-contact__info { padding: 1.75rem; }
}

/* ==========================================================================
   Sizes table + product image, side by side (stacks on mobile)
   ========================================================================== */
.straws-sizes-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  max-width: 960px;
  margin: 1.5rem auto 0;
  text-align: left;
}
.straws-sizes-row__media { flex: 1 1 320px; max-width: 420px; }
.straws-sizes-row__media .straws-figure { margin: 0; }
.straws-sizes-row__table { flex: 1 1 360px; }
.straws-sizes-row__table .straws-sizes { margin: 0; max-width: none; }
@media (max-width: 768px) {
  .straws-sizes-row { flex-direction: column; align-items: stretch; gap: 1.25rem; }
  .straws-sizes-row__media { max-width: none; }
}

/* SGS / lab report link */
.straws-report-link { display: inline-block; margin-top: .75rem; font-weight: 700; }

/* Responsive video embed (centred) */
.straws-video {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 1.5rem auto;
  aspect-ratio: 16 / 9;
}
.straws-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ==========================================================================
   Full-bleed sections — no "boxed" content card
   GeneratePress centres the whole site in a 1200px container and wraps the
   content in a white padded card (.inside-article). These rules drop that card
   and let each section's BACKGROUND span the full viewport, while the inner
   content stays centred via .straws-section__inner. Pure CSS, travels to the
   live domain (no Customizer dependency).
   ========================================================================== */
body {
  overflow-x: hidden;                        /* guard against the 100vw scrollbar gutter */
  background: #fff;                           /* kill GP's grey body wash behind full-bleed sections */
}

/* Beat GeneratePress's `.separate-containers .inside-article` (specificity 2)
   by prefixing with body.separate-containers. */
body.separate-containers .inside-article {   /* remove the white content card */
  background: transparent;
  padding: 0;
  box-shadow: none;
  border: 0;
}
body.separate-containers .site-main { margin: 0; padding: 0; }  /* sections meet header/footer directly */

.straws-hero,
.straws-section,
.straws-ban {                                /* background reaches the viewport edges */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.straws-section { background: #fff; }        /* clean default (non-tint) background */
.straws-section--tint { background: var(--straws-tint); }  /* keep tint, must win over #fff */

/* ==========================================================================
   Footer  (dark, full-width, centred content)
   ========================================================================== */
.straws-company { text-align: center; }

.site-info {
  background: var(--straws-notice-bg);
  color: rgba(255, 255, 255, .8);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.inside-site-info {
  max-width: var(--straws-maxw);
  margin: 0 auto;
  padding: 2.25rem 1.5rem;
}
.site-info .straws-company { color: rgba(255, 255, 255, .75); }
.site-info .straws-company strong { color: #fff; }
.site-info .straws-copyright { display: block; margin-top: .4rem; color: rgba(255, 255, 255, .6); }
.site-info a { color: var(--straws-green); }
.site-info a:hover { color: #fff; }

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 768px) {
  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.65rem; }
  .straws-hero { padding: 3rem 0 2.5rem; }
  .straws-hero__sub { font-size: 1.1rem; }
  .straws-section { padding: 2.75rem 0; }
  .straws-section__lead { font-size: 1.05rem; }
}