/*
Theme Name: Arsa Parama Kreasi Visual
Theme URI: https://arsaparamakreasi.com/
Author: PT Arsa Parama Kreasi
Description: Tema korporat untuk exhibition booth, retail fit-out, signage, interior, dan fabrikasi khusus.
Version: 23.0.0
Text Domain: arsa-parama-kreasi
*/

:root { --apc-navy: #212134; --apc-orange: #f05a24; }
html { scroll-behavior: smooth; }
body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; line-height: 1.5; }
header .custom-logo-link { display: flex; align-items: center; }
header .custom-logo { width: 3rem; height: 3rem; border-radius: 9999px; object-fit: contain; }
h1, h2, h3 { letter-spacing: -.025em; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid #f7ac91; outline-offset: 3px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.screen-reader-text:focus { position: fixed; z-index: 100; width: auto; height: auto; padding: .75rem 1rem; margin: 1rem; clip: auto; background: #fff; color: var(--apc-navy); }
.apc-prose > * + * { margin-top: 1.25rem; }
.apc-prose h2 { font-size: 1.75rem; font-weight: 800; color: var(--apc-navy); margin-top: 2.5rem; }
.apc-prose h3 { font-size: 1.25rem; font-weight: 800; color: var(--apc-navy); margin-top: 2rem; }
.apc-prose ul { list-style: disc; padding-left: 1.25rem; }
.apc-prose a { color: var(--apc-orange); font-weight: 700; text-decoration: underline; }
.mobile-menu { transition: max-height .3s ease; overflow: hidden; }
.portfolio-card .overlay { opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.portfolio-card:hover .overlay, .portfolio-card:focus-within .overlay { opacity: 1; transform: translateY(0); }
.portfolio-card img { transition: transform .4s ease; }
.portfolio-card:hover img, .portfolio-card:focus-within img { transform: scale(1.04); }
/* A grid, not CSS columns: columns fill one column at a time, which reordered the
   project list between breakpoints and left empty gaps once items were filtered out. */
.masonry { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .masonry { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .masonry { grid-template-columns: repeat(3, 1fr); } }
.masonry-item { height: 18rem; }
@media (min-width: 640px) { .masonry-item { height: 20rem; } }
.masonry-item > * { height: 100%; }
.masonry-item img { width: 100%; height: 100%; object-fit: cover; }
/* Body copy for a service comes straight from the WordPress editor, so the paragraphs
   and lists it produces are styled here instead of carrying utility classes. */
.service-row { scroll-margin-top: 96px; }
.service-row img { transition: transform .5s ease; }
.service-row:hover img { transform: scale(1.03); }
.service-body { color: rgba(33, 33, 52, .8); }
.service-body > :first-child { margin-top: 1.5rem; }
.service-body p { margin-top: .75rem; line-height: 1.625; }
.service-body ul, .service-body ol { margin-top: .75rem; padding-left: 1.25rem; list-style-position: outside; }
.service-body ul { list-style-type: disc; }
.service-body ol { list-style-type: decimal; }
.service-body li { margin-top: .25rem; }
.service-body a { color: var(--apc-orange); text-decoration: underline; }
/* Mirrored rows are right-aligned, where an outside bullet would hang away from the text. */
.service-body--right ul, .service-body--right ol { padding-left: 0; list-style-position: inside; }

.article-card img { transition: transform .4s ease; }
.article-card:hover img { transform: scale(1.05); }
.article-filter.active { background-color: var(--apc-orange); color: #fff; }
.page-numbers { display: inline-flex; align-items: center; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.page-numbers li { margin: 0; }
.page-numbers a, .page-numbers .current { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; border-radius: .75rem; padding: 0 .9rem; font-weight: 700; }
.page-numbers a { background: #fff; color: var(--apc-navy); }
.page-numbers a:hover, .page-numbers .current { background: var(--apc-orange); color: #fff; }
/* The portfolio filters are links now, not buttons, so that a chosen category survives
   paging and can be shared as a URL. Orange matches the approved portofolio.html design;
   this rule previously used navy and quietly diverged from it. */
.filter-btn { display: inline-block; text-decoration: none; }
.filter-btn.active { background-color: var(--apc-orange); color: #fff; border-color: var(--apc-orange); }
.apc-form input, .apc-form textarea { width: 100%; border: 1px solid rgba(33,33,52,.35); border-radius: .75rem; padding: .875rem 1rem; color: var(--apc-navy); background: #fff; }
.apc-form input:focus, .apc-form textarea:focus { border-color: var(--apc-orange); box-shadow: 0 0 0 3px rgba(240,90,36,.15); outline: none; }
.wp-block-image img { height: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation-duration: .01ms!important; animation-iteration-count: 1!important; transition-duration: .01ms!important; } }