/*
 * Shared public information and editorial layer.
 *
 * The page-specific styles remain responsible for their own composition. This
 * file keeps the visual contract in one place so shipping, warranty, FAQ, and
 * blog pages feel like the warm Surabaya homepage without changing their content
 * or routes.
 */

.shipping-page,
.info-page,
.blog-archive-page,
.article-page {
  --public-shell-width: 1140px;
  --public-radius: 16px;
  --public-shadow: 0 18px 42px rgb(78 44 17 / .08);
  --public-shadow-soft: 0 10px 26px rgb(78 44 17 / .06);
  color: var(--brand-ink);
}

.shipping-shell,
.info-shell,
.blog-archive-shell,
.article-intro-container,
.article-wide-container,
.article-body-wrap {
  width: min(calc(100% - 40px), var(--public-shell-width));
  margin-inline: auto;
}

.shipping-page,
.info-page,
.blog-archive-page,
.article-page {
  overflow-x: clip;
  background: var(--brand-cream);
}

.shipping-page img,
.info-page img,
.blog-archive-page img,
.article-page img {
  max-width: 100%;
}

.shipping-eyebrow,
.info-eyebrow,
.blog-archive-eyebrow,
.article-eyebrow,
.article-section-heading > p,
.related-card > div > p,
.faq-category__label {
  color: var(--brand-primary-strong) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .075em !important;
  line-height: 1.3 !important;
  text-transform: uppercase;
}

.shipping-heading h2,
.shipping-estimates__intro h2,
.shipping-cta__panel h2,
.info-heading h2,
.info-customization__intro h2,
.info-cta__panel h2,
.faq-category__intro h2,
.blog-archive-heading h2,
.blog-archive-empty h2,
.blog-archive-cta h2,
.article-section-heading h2,
.related-articles h2,
.article-related-sidebar__heading h2 {
  color: var(--brand-ink) !important;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem) !important;
  font-weight: 750 !important;
  letter-spacing: -.035em !important;
  line-height: 1.12 !important;
  text-wrap: balance;
}

.shipping-heading > p:last-child,
.shipping-estimates__intro > p,
.shipping-cta__panel p,
.info-heading > p:last-child,
.info-customization__intro > p,
.info-cta__panel p,
.faq-category__intro > p:not(.faq-category__label),
.blog-archive-heading > div > p,
.blog-archive-hero__copy > p:last-child,
.blog-author-hero__copy > p:not(.blog-archive-eyebrow),
.blog-archive-cta p {
  color: var(--brand-muted) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

.shipping-hero h1,
.info-hero h1,
.blog-archive-hero h1,
.blog-author-hero h1,
.article-header h1 {
  max-width: 22ch;
  color: var(--brand-ink) !important;
  font-size: clamp(2.35rem, 4.25vw, 3.7rem) !important;
  font-weight: 780 !important;
  letter-spacing: -.055em !important;
  line-height: 1.02 !important;
  text-wrap: balance;
}

.shipping-button,
.info-button,
.blog-archive-button,
.blog-archive-search button,
.blog-archive-empty a,
.article-page button,
.article-page .share-button,
.article-page .comment-form button {
  min-height: 48px;
  border-radius: 10px;
  font-size: 15px !important;
  font-weight: 800;
}

.shipping-button--primary,
.info-button--primary,
.blog-archive-search button,
.blog-archive-empty a,
.article-page .comment-form button {
  border-color: var(--brand-primary) !important;
  background: var(--brand-primary) !important;
  color: #fff !important;
}

.shipping-button--primary:hover,
.info-button--primary:hover,
.blog-archive-search button:hover,
.blog-archive-empty a:hover,
.article-page .comment-form button:hover {
  border-color: var(--brand-primary-strong) !important;
  background: var(--brand-primary-strong) !important;
}

.shipping-button--secondary,
.info-button--secondary,
.blog-archive-button--light {
  border-color: var(--brand-line) !important;
  background: var(--brand-panel) !important;
  color: var(--brand-ink) !important;
}

.shipping-button--secondary:hover,
.info-button--secondary:hover,
.blog-archive-button--light:hover {
  border-color: var(--brand-primary) !important;
  background: var(--brand-cream-soft) !important;
  color: var(--brand-primary-strong) !important;
}

.shipping-button:focus-visible,
.info-button:focus-visible,
.blog-archive-page a:focus-visible,
.blog-archive-page button:focus-visible,
.blog-archive-page input:focus-visible,
.article-page a:focus-visible,
.article-page summary:focus-visible,
.article-page button:focus-visible {
  outline: 3px solid rgb(var(--brand-primary-rgb) / .32);
  outline-offset: 4px;
}

/* Shipping: split editorial hero and structured information bands. */
.shipping-page .shipping-hero,
.info-page .info-hero {
  padding: 58px 0 92px;
  background:
    radial-gradient(circle at 10% 18%, rgb(var(--brand-primary-rgb) / .1), transparent 26%),
    linear-gradient(135deg, #fff 0%, var(--brand-cream) 100%);
}

.shipping-page .shipping-hero__grid,
.info-page .info-hero__grid {
  min-height: 500px;
}

.shipping-page .shipping-hero__content > .shipping-eyebrow,
.info-page .info-eyebrow--badge {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  background: transparent;
  padding: 0 14px;
  color: var(--brand-primary-strong) !important;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.shipping-page .shipping-hero__visual::before,
.info-page .info-hero__visual::before {
  background: linear-gradient(145deg, rgb(var(--brand-primary-rgb) / .16), rgb(var(--brand-primary-rgb) / .035));
}

.shipping-page .shipping-hero__image-frame,
.info-page .info-hero__visual--landscape .info-hero__image-frame {
  border: 1px solid var(--brand-line);
  border-radius: 18px;
  background: var(--brand-panel);
  padding: 14px;
  box-shadow: var(--public-shadow);
  transform: rotate(-2deg);
}

.warranty-page .info-hero__visual--landscape .info-hero__image-frame {
  aspect-ratio: 16 / 9;
}

.faq-page .info-hero__visual--landscape .info-hero__image-frame {
  aspect-ratio: 16 / 9;
}

.shipping-page .shipping-hero__image-frame img,
.info-page .info-hero__visual--landscape img {
  border-radius: 13px;
}

.shipping-page .shipping-trust,
.info-page .info-trust {
  position: relative;
  z-index: 2;
  margin-top: -42px;
  padding: 0 0 28px;
  background: var(--brand-cream);
}

.shipping-page .shipping-trust__list,
.info-page .info-trust__list {
  border: 1px solid var(--brand-line);
  border-radius: var(--public-radius);
  background: var(--brand-panel);
  padding: 10px;
  box-shadow: var(--public-shadow-soft);
}

.shipping-page .shipping-trust__icon,
.info-page .info-icon,
.info-page .info-feature-grid__icon,
.info-page .info-audience-grid > li > .material-symbols-outlined,
.info-page .info-customization__list > li > .material-symbols-outlined,
.info-page .info-process__list > li > .material-symbols-outlined,
.faq-topics__icon,
.faq-category__icon {
  background: var(--brand-cream-soft) !important;
  color: var(--brand-primary) !important;
}

.shipping-page .shipping-services,
.shipping-page .shipping-estimates,
.info-page .info-capabilities,
.info-page .info-customization,
.info-page .info-faq,
.blog-archive-section,
.article-header {
  background: #fff;
}

.shipping-page .shipping-process,
.shipping-page .shipping-faq,
.info-page .info-audiences,
.info-page .info-process,
.faq-topics,
.blog-archive-page,
.related-articles {
  background: var(--brand-cream);
}

.shipping-page .shipping-service-card,
.shipping-page .shipping-estimates__table-wrap,
.shipping-page .shipping-faq__item,
.info-page .info-feature-grid li,
.info-page .info-audience-grid li,
.info-page .info-customization__list li,
.info-page .info-process__list li,
.info-page .info-faq__item,
.faq-topics__list a,
.faq-category__list .info-faq__item {
  border-color: var(--brand-line) !important;
  border-radius: var(--public-radius) !important;
  background: var(--brand-panel) !important;
  box-shadow: var(--public-shadow-soft);
}

.shipping-page .shipping-service-card h3,
.shipping-page .shipping-process__list h3,
.shipping-page .shipping-faq__item summary,
.info-page .info-feature-grid h3,
.info-page .info-audience-grid h3,
.info-page .info-customization__list h3,
.info-page .info-process__list h3,
.info-page .info-faq__item summary,
.faq-topics__list strong {
  color: var(--brand-ink) !important;
  font-size: 17px !important;
}

.shipping-page .shipping-service-card > p,
.shipping-page .shipping-service-card li,
.shipping-page .shipping-process__list p,
.shipping-page .shipping-trust__list strong,
.shipping-page .shipping-trust__list small,
.shipping-page .shipping-faq__answer p,
.info-page .info-feature-grid p,
.info-page .info-audience-grid p,
.info-page .info-customization__list p,
.info-page .info-process__list p,
.info-page .info-faq__item p,
.faq-topics__list small,
.faq-category__list .info-faq__item p {
  color: var(--brand-muted) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.shipping-page .shipping-estimates thead {
  background: var(--brand-ink);
}

.shipping-page .shipping-estimates th,
.shipping-page .shipping-estimates td {
  font-size: 15px;
}

.shipping-page .shipping-cta__panel,
.info-page .info-cta__panel,
.blog-archive-cta__panel {
  border: 1px solid rgb(255 220 186 / .46);
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% 120%, rgb(255 170 79 / .22), transparent 38%),
    linear-gradient(112deg, #c94f15 0%, #ec6618 55%, #d74710 100%);
  box-shadow: 0 18px 42px rgb(111 44 12 / .15);
}

.shipping-page .shipping-cta__panel h2,
.shipping-page .shipping-cta__panel p,
.info-page .info-cta__panel h2,
.info-page .info-cta__panel p,
.blog-archive-cta h2,
.blog-archive-cta p {
  color: #fff !important;
}

/* FAQ: topic navigation and accordion stay scannable on every viewport. */
.faq-page .faq-topics__list a:hover {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 16px 32px rgb(var(--brand-primary-rgb) / .1);
  transform: translateY(-2px);
}

.faq-page .faq-category__layout {
  gap: clamp(40px, 6vw, 76px);
}

.faq-page .faq-category__intro h2 {
  max-width: 15ch;
}

.faq-page .faq-category__intro a,
.faq-page .faq-topics__arrow {
  color: var(--brand-primary-strong) !important;
  font-size: 15px !important;
}

/* Blog archive and taxonomy pages: calm editorial grid instead of stretched rows. */
.blog-archive-page {
  color: var(--brand-ink);
}

.blog-archive-page .blog-archive-hero,
.blog-archive-page .blog-author-hero {
  padding: 58px 0 78px;
  background:
    radial-gradient(circle at 88% 8%, rgb(var(--brand-primary-rgb) / .12), transparent 28%),
    linear-gradient(135deg, #fff 0%, var(--brand-cream) 100%);
}

.blog-archive-page .blog-archive-hero__layout {
  gap: clamp(42px, 7vw, 84px);
}

.blog-archive-page .blog-archive-search-panel {
  border-color: var(--brand-line);
  border-radius: var(--public-radius);
  background: var(--brand-panel);
  box-shadow: var(--public-shadow-soft);
}

.blog-archive-page .blog-archive-search label,
.blog-archive-page .blog-archive-search input {
  font-size: 15px !important;
}

.blog-archive-page .blog-archive-search__hint,
.blog-archive-page .blog-archive-search__status,
.blog-archive-page .blog-archive-search__status a,
.blog-archive-page .blog-archive-heading__count,
.blog-archive-page .blog-archive-breadcrumb,
.blog-archive-page .blog-archive-card__meta,
.blog-archive-page .blog-archive-card__author,
.blog-archive-page .blog-archive-card__link {
  color: var(--brand-primary-strong) !important;
  font-size: 15px !important;
}

.blog-archive-page .blog-archive-pagination p,
.blog-archive-page .blog-archive-pagination__link,
.blog-archive-page .blog-archive-back-link,
.blog-archive-page .blog-archive-empty p,
.blog-archive-page .blog-archive-empty a {
  font-size: 15px !important;
}

.blog-archive-page .blog-archive-section {
  padding: 78px 0 92px;
}

.blog-archive-page .blog-archive-heading {
  margin-bottom: 28px;
}

.blog-archive-page .blog-archive-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.blog-archive-page .blog-archive-card {
  display: flex;
  min-height: 0;
  flex-direction: column;
  border-color: var(--brand-line);
  border-radius: var(--public-radius);
  background: var(--brand-panel);
  box-shadow: var(--public-shadow-soft);
}

.blog-archive-page .blog-archive-card:hover {
  border-color: var(--brand-primary);
  box-shadow: var(--public-shadow);
  transform: translateY(-3px);
}

.blog-archive-page .blog-archive-card__media {
  min-height: 0;
  aspect-ratio: 4 / 3;
  border-right: 0;
  border-bottom: 1px solid var(--brand-line);
}

.blog-archive-page .blog-archive-card__content {
  min-height: 250px;
  padding: 22px;
}

.blog-archive-page .blog-archive-card h3 {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 11px;
  font-size: 20px !important;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.blog-archive-page .blog-archive-card__content > p {
  margin-top: 12px;
  font-size: 15px !important;
  line-height: 1.6;
  -webkit-line-clamp: 3;
}

.blog-archive-page .blog-archive-card__footer {
  padding-top: 18px;
}

.blog-archive-page .blog-archive-cta {
  padding: 78px 0 92px;
  background: #fff;
}

.blog-archive-page .blog-archive-cta__panel {
  padding: clamp(30px, 5vw, 50px);
}

/* Article detail: readable editorial column with the same warm surfaces. */
.article-page .article-header {
  padding: 58px 0 78px;
  background: linear-gradient(135deg, #fff 0%, var(--brand-cream) 100%);
}

.article-page .article-intro-container {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(42px, 7vw, 82px);
}

.article-page .article-breadcrumb,
.article-page .article-meta {
  color: var(--brand-primary-strong);
  font-size: 15px;
}

.article-page .article-sidebar .article-toc summary,
.article-page .article-sidebar .article-toc a,
.article-page .article-author h2,
.article-page .article-share,
.article-page .article-sidebar__heading,
.article-page .article-sidebar__heading h2 {
  font-size: 15px !important;
}

.article-page .article-hero-media {
  border-color: var(--brand-line);
  border-radius: 18px;
  background: var(--brand-panel);
  box-shadow: var(--public-shadow);
}

.article-page .article-body-wrap {
  grid-template-columns: minmax(0, 760px) minmax(220px, 280px);
  gap: clamp(42px, 7vw, 76px);
  padding: 76px 0 92px;
}

.article-page .article-content {
  font-size: 16px;
  line-height: 1.82;
}

.article-page .article-content h2 {
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  font-weight: 750;
}

.article-page .article-content h3 {
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 750;
}

.article-page .article-content figcaption,
.article-page .article-content caption,
.article-page .article-author div > p:last-child,
.article-page .comment-notice,
.article-page .comment-form label,
.article-page .comment-form input,
.article-page .comment-form textarea,
.article-page .comment-form__footer p,
.article-page .comments-empty span,
.article-page .comment-item header time,
.article-page .comment-item p {
  font-size: 15px !important;
}

.article-page .article-content blockquote,
.article-page .article-toc,
.article-page .article-author,
.article-page .comment-form {
  border-color: var(--brand-line);
  border-radius: var(--public-radius);
  background: var(--brand-cream-soft);
}

.article-page .related-articles {
  padding: 76px 0 92px;
  border-top-color: var(--brand-line);
}

.article-page .related-grid {
  gap: 20px;
}

.article-page .related-card {
  border-color: var(--brand-line);
  border-radius: var(--public-radius);
  background: var(--brand-panel);
  box-shadow: var(--public-shadow-soft);
}

@media (max-width: 767px) {
  .shipping-shell,
  .info-shell,
  .blog-archive-shell,
  .article-intro-container,
  .article-wide-container,
  .article-body-wrap {
    width: min(calc(100% - 32px), 680px);
  }

  .shipping-page .shipping-hero,
  .info-page .info-hero,
  .blog-archive-page .blog-archive-hero,
  .blog-archive-page .blog-author-hero,
  .article-page .article-header {
    padding: 36px 0 68px;
  }

  .shipping-page .shipping-hero__grid,
  .info-page .info-hero__grid,
  .article-page .article-intro-container {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .shipping-page .shipping-hero h1,
  .info-page .info-hero h1,
  .blog-archive-page .blog-archive-hero h1,
  .blog-archive-page .blog-author-hero h1,
  .article-page .article-header h1 {
    max-width: 18ch;
    font-size: clamp(2.2rem, 9.5vw, 3.1rem) !important;
  }

  .shipping-page .shipping-hero__image-frame,
  .info-page .info-hero__visual--landscape .info-hero__image-frame {
    transform: rotate(-1deg);
  }

  .shipping-page .shipping-trust,
  .info-page .info-trust {
    margin-top: -32px;
  }

  .shipping-page .shipping-services__grid,
  .shipping-page .shipping-faq__list,
  .faq-page .faq-topics__list,
  .faq-page .faq-category__layout,
  .blog-archive-page .blog-archive-list,
  .article-page .article-body-wrap {
    grid-template-columns: 1fr;
  }

  .faq-page .faq-category__intro {
    position: static;
  }

  .blog-archive-page .blog-archive-section,
  .blog-archive-page .blog-archive-cta,
  .article-page .related-articles {
    padding: 64px 0 76px;
  }

  .blog-archive-page .blog-archive-card__content {
    min-height: 0;
  }

  .article-page .article-body-wrap {
    gap: 32px;
    padding: 58px 0 76px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shipping-page *,
  .shipping-page *::before,
  .shipping-page *::after,
  .info-page *,
  .info-page *::before,
  .info-page *::after,
  .blog-archive-page *,
  .blog-archive-page *::before,
  .blog-archive-page *::after,
  .article-page *,
  .article-page *::before,
  .article-page *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }

  .blog-archive-page .blog-archive-card:hover,
  .blog-archive-page .blog-archive-card:hover .blog-archive-card__media img,
  .faq-page .faq-topics__list a:hover {
    transform: none;
  }
}