@import url("./tokens.css");

*,
*::before,
*::after { box-sizing: border-box; }

*,
*::before,
*::after { border-radius: 0 !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text-primary);
  font-size: 16px;
  line-height: 1.65;
}

body.admin-bar .site-header { top: 32px; }

img { display: block; max-width: 100%; height: auto; }
.ui-icon-image { width: 1em; height: 1em; object-fit: contain; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-standard), opacity var(--transition-standard);
}

a:hover { color: var(--color-text-secondary); }
a:focus-visible,
button:focus-visible,
input:is([type="submit"], [type="button"], [type="reset"]):focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 4px;
}

:root body :is(input:not([type="submit"], [type="button"], [type="reset"]), textarea, select):focus {
  outline: none;
  border-color: var(--color-text-secondary);
}

button,
input,
textarea,
select { font: inherit; }

.container {
  width: min(100% - (2 * var(--space-gutter)), var(--container-content));
  margin-inline: auto;
}

.container-wide {
  width: min(100% - (2 * var(--space-gutter)), var(--container-wide));
  margin-inline: auto;
}

.site-main { min-height: 60vh; }
.site-front { overflow: clip; }

.section { padding-block: var(--space-section); }
.section--accent { background: var(--color-accent); }
.section--light { background: var(--color-background); }
.section-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 64px); }
.section-head--center { margin-inline: auto; text-align: center; }

.section-label {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--color-text-secondary);
  font-size: var(--responsive-kicker-size, 13px);
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.brand-value__intro > .section-label,
.featured-products__head > .section-label,
.custom-service__eyebrow > .section-label,
.success-stories > .container-wide > .section-head > .section-label,
.customer-reviews > .container-wide > .section-head > .section-label,
.latest-news > .container-wide > .section-head > .section-label,
.inquiry-copy > .section-label { font-size: var(--responsive-kicker-size, 15px); }

.display-title {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--responsive-title-size, clamp(34px, 4.2vw, 50px));
  font-weight: 400;
  line-height: var(--responsive-title-leading, 1.08);
}

.section-sub {
  max-width: 680px;
  margin: 20px 0 0;
  color: var(--color-text-secondary);
  font-size: 17px;
}

.btn,
input[type="submit"] {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-small);
  background: var(--color-accent);
  color: var(--color-text-primary);
  cursor: pointer;
  font-weight: 400;
  transition: background var(--transition-standard), color var(--transition-standard);
}

.btn:hover,
input[type="submit"]:hover {
  background: var(--color-accent);
  color: var(--color-text-primary);
  opacity: .86;
}

.btn--secondary {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-text-primary);
}

.btn--secondary:hover {
  background: var(--color-accent);
  color: var(--color-text-primary);
}

.media {
  position: relative;
  overflow: hidden;
  background: var(--color-accent);
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.placeholder-media {
  display: grid;
  min-height: 280px;
  place-items: center;
  border: 1px solid var(--color-accent);
  background: linear-gradient(135deg, var(--color-background), var(--color-accent));
  color: var(--color-text-secondary);
}

.card-title { margin: 18px 0 8px; font-size: 21px; font-weight: 400; }
.card-copy { margin: 0; color: var(--color-text-secondary); }

.wpcf7-form p { margin: 0 0 18px; }
.wpcf7-form label { display: block; color: var(--color-text-primary); font-size: 14px; }
.wpcf7-form input:not([type="submit"]),
.wpcf7-form textarea,
.wpcf7-form select {
  width: 100%;
  margin-top: 7px;
  padding: 13px 14px;
  border: 1px solid var(--color-accent);
  border-radius: 0;
  background: var(--color-background);
  color: var(--color-text-primary);
}
.wpcf7-form textarea { min-height: 130px; resize: vertical; }

.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.archive-head { padding: 100px 0 52px; }
.archive-card { border-top: 1px solid var(--color-accent); padding-top: 18px; }
.archive-pagination { margin-top: 48px; }
.archive-pagination .page-numbers { margin-right: 12px; }

.breadcrumb {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-accent);
  color: var(--color-text-secondary);
  font-size: 14px;
}

.single-content { max-width: 820px; margin-inline: auto; }
.single-content > * { max-width: 100%; }

@media (max-width: 900px) {
  body.admin-bar .site-header { top: 46px; }
  .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  :root { --space-section: 72px; }
  .archive-grid { grid-template-columns: 1fr; }
  .display-title { font-size: var(--responsive-title-size, clamp(32px, 10vw, 44px)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}
/* Shared typography and controls for the approved Pencil homepage sections. */
.pencil-section { padding: var(--responsive-section-space, 120px) 0; font-family: "Inter",sans-serif; }
.pencil-section .container-wide { width: min(1440px,calc(100% - 80px)); }
:where(.pencil-section) .pencil-kicker { margin: 0 0 15px; color: #666; font: 400 var(--responsive-kicker-size, 14px)/var(--responsive-kicker-leading, 17px) "Inter",sans-serif; letter-spacing: 2px; }
:where(.pencil-section) .pencil-title { margin: 0; color: inherit; font-family: "Plus Jakarta Sans",sans-serif; font-size: var(--responsive-title-size, 48px); font-weight: 600; line-height: var(--responsive-title-leading, 60px); letter-spacing: -1.2px; }
.pencil-button { display: inline-flex; min-height: 60px; padding: 20px 40px; align-items: center; justify-content: center; border: 0; border-radius: 20px !important; background: #111; color: #fff; text-align: center; font: 400 16px/20px "Inter",sans-serif; }
.pencil-button:hover { background: #333; color: #fff; }
.pencil-button:active { background: #555; }
@media (max-width: 1024px) { .pencil-section { padding: var(--responsive-section-space, 80px) 0; } .pencil-section .container-wide { width: calc(100% - 40px); } }
@media (max-width: 767px) { .pencil-section { padding: var(--responsive-section-space, 56px) 0; } .pencil-section .pencil-title { font-size: var(--responsive-title-size, 32px); line-height: var(--responsive-title-leading, 1.2); letter-spacing: -.8px; } .pencil-button { padding: 20px 30px; } }

@media (max-width: 767px) {
  .site-main :is(.pencil-button, .hero-cta, .product-category-panel__button, .category-support__button, .promise-cta__button, .search-results__button, .not-found__button, .news-archive--category .news-archive__read-more, .news-archive__partner > a, .page-banner__button, .product-summary__actions a, .inquiry input[type=submit]) { height: auto; min-height: 44px; padding: 10px 20px; font-size: 14px; line-height: 20px; }
  .site-main :is(.pencil-button, .hero-cta, .product-category-panel__button, .category-support__button, .promise-cta__button, .search-results__button, .not-found__button, .news-archive--category .news-archive__read-more, .news-archive__partner > a) { width: fit-content; min-width: min(180px,100%); max-width: 100%; }
  .site-main .inquiry .wpcf7-spinner { top: 10px; }
}

@media (max-width: 1639px) {
  .site-main { overflow-wrap: anywhere; }
  .wpcf7 input, .wpcf7 select, .wpcf7 textarea { min-width: 0; max-width: 100%; }
}
@media (max-width: 767px) {
  /* 16px prevents focus zoom in iOS without disabling user zoom. */
  .site-main .wpcf7 .wpcf7-form input:not([type=submit]), .site-main .wpcf7 .wpcf7-form select, .site-main .wpcf7 .wpcf7-form textarea { font-size: 16px; }
}

/* Shared section rhythm; desktop values remain the original per-block fallbacks. */
@media (max-width: 1639px) {
  .site-main { --space-section: 100px; --responsive-section-space: 100px; }
  .site-main :is(.pencil-section.partners, .pencil-section.company-snapshot, .pencil-section.customer-reviews, .pencil-section.inquiry) { height: auto; min-height: 0; }
}
@media (max-width: 1024px) {
  .site-main { --space-section: 80px; --responsive-section-space: 80px; --responsive-kicker-size: 14px; --responsive-kicker-leading: 1.5; --responsive-title-size: 36px; --responsive-title-leading: 1.2; --responsive-copy-size: 16px; --responsive-copy-leading: 1.6; }
}
@media (max-width: 767px) {
  .site-main { --space-section: 50px; --responsive-section-space: 50px; --responsive-title-size: 28px; --responsive-copy-size: 14px; }
}

@media (max-width: 1024px) {
  .site-main .csf-inner-banner h1, .site-main .editorial-detail__hero h1 { font-size: var(--responsive-title-size); line-height: var(--responsive-title-leading); }
  .site-main :is(.single-content, .section-sub, .card-copy, .csf-inner-banner p, .csf-collection-archive__list > p, .editorial-detail__body, .editorial-detail__hero-copy > p) { font-size: var(--responsive-copy-size); line-height: var(--responsive-copy-leading); }
  .site-main .csf-inner-banner .csf-inner-banner__eyebrow { font-size: var(--responsive-kicker-size); line-height: var(--responsive-kicker-leading); }
}

/* Fluid content edges and continuous plain-background section spacing. */
@media (min-width: 1025px) and (max-width: 1639px) {
  :root { --container-wide: 1100px; --container-content: 1100px; --space-gutter: 40px; }
  .site-main :is(h2.pencil-title, :is(.about-introduction, .company-story, .business-philosophy, .brand-capabilities, .promise-cta, .product-category-panel, .category-collections, .category-features, .category-support, .category-faq, .product-description, .related-products, .service-solutions__head, .development-process, .service-advantages, .contact-details, .preparation-steps, .location-map, .pdf-library, .success-stories) h2) { --responsive-title-size: 42px; }
  body .site-main > section > :is(.container, .container-wide, [class*="__inner"], .page-banner__copy, .search-hero__copy),
  body .site-main > :is(.wp-block-paragraph, .wp-block-heading, .wp-block-quote, .wp-block-image),
  body .site-header .header-inner, body .site-footer > .container-wide { width: min(1100px,calc(100% - 80px)); max-width: 1100px; min-width: 0; margin-inline: auto; }
}
@media (max-width: 1024px) {
  :root { --canvas-gutter: 50px; --canvas-section-gap: 80px; --space-gutter: var(--canvas-gutter); }
  body .site-main > section > :is(.container, .container-wide, [class*="__inner"], .hero-copy, .page-banner__copy, .search-hero__copy) { width: calc(100% - (2 * var(--canvas-gutter))); max-width: none; min-width: 0; margin-inline: auto; }
  body .site-main > :is(.wp-block-paragraph, .wp-block-heading, .wp-block-quote, .wp-block-image) { width: calc(100% - (2 * var(--canvas-gutter))); max-width: none; margin-inline: auto; }
  body .site-main > :is(.category-support--continuation, .product-category-panel, .related-products--article, .not-found, .editorial-detail__article, .editorial-detail__related, .editorial-detail__cta) { padding-block: var(--canvas-section-gap); }
  body .site-main > :is(.brand-value, .article-reading, .about-introduction, .business-philosophy, .brand-capabilities, .custom-service, .latest-news, .category-collections, .category-products, .category-support, .contact-details, .location-map, .news-archive, .pdf-library, .privacy-reading, .product-category-panel, .product-summary, .related-products, .site-search-results, .service-advantages, .service-solutions, .inquiry:not([style*="--inquiry-background"]), .editorial-detail__article, .editorial-detail__related, .editorial-detail__cta) + :is(.brand-value, .article-reading, .about-introduction, .business-philosophy, .brand-capabilities, .custom-service, .latest-news, .category-collections, .category-products, .category-support, .contact-details, .location-map, .news-archive, .pdf-library, .privacy-reading, .product-category-panel, .product-summary, .related-products, .site-search-results, .service-advantages, .service-solutions, .inquiry:not([style*="--inquiry-background"]), .editorial-detail__article, .editorial-detail__related, .editorial-detail__cta) { padding-top: 0; }
}

@media (max-width: 767px) { :root { --canvas-gutter: 20px; --canvas-section-gap: 50px; } }

/* Inner-page banner titles are independent of homepage and section headings. */
@media (max-width: 1639px) {
  .site-main { --inner-banner-title-size: 50px; }
  .site-main :is(.page-banner, .csf-inner-banner, .editorial-detail__hero, .privacy-title) h1 { font-size: var(--inner-banner-title-size); }
}
@media (max-width: 1024px) {
  .site-main { --inner-banner-title-size: 36px; --inner-banner-height: 450px; }
  body .site-main :is(.page-banner, .csf-inner-banner, .editorial-detail__hero, .privacy-title) { height: var(--inner-banner-height); min-height: var(--inner-banner-height); }
  body .site-main .csf-inner-banner { display: flex; align-items: center; padding-block: 24px; }
}
@media (max-width: 767px) {
  .site-main { --inner-banner-title-size: 30px; --inner-banner-height: 300px; }
  body .site-main :is(.page-banner, .editorial-detail__hero) { height: auto; }
}

/* Keep upload controls in English regardless of the browser's locale. */
.wpcf7 .csf-file-picker { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; max-width: 100%; font: 400 14px/20px "Inter",sans-serif; }
.wpcf7 .csf-file-picker__button { flex-shrink: 0; padding: 10px 16px; border: 1px solid #bdbdbd; background: #e8e8e8; color: #111; }
.wpcf7 .csf-file-picker__status { min-width: 0; overflow-wrap: anywhere; color: #555; }
.wpcf7 .csf-file-picker input[type=file] { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.wpcf7 .csf-file-picker:focus-within { outline: 2px solid #111; outline-offset: 3px; }
.wpcf7 .csf-file-picker:has(input:disabled) { opacity: .6; }
.wpcf7 .csf-file-picker input:disabled { cursor: not-allowed; }