/*
  PT JAVA COLA INDONESIA
  CORPORATE VISUAL POLISH LAYER

  Scope:
  - visual consistency only
  - no navigation logic
  - no backend logic
  - no transaction logic
  - no content-role changes
*/


:root{
  --jc-radius-sm:10px;
  --jc-radius-md:16px;
  --jc-radius-lg:24px;

  --jc-shadow-soft:
    0 12px 34px rgba(7,31,28,.055);

  --jc-shadow-hover:
    0 18px 44px rgba(7,31,28,.085);

  --jc-transition:
    180ms ease;

  --jc-reading:
    760px;
}


/* -----------------------------------------
   GLOBAL TYPOGRAPHY
----------------------------------------- */

html{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

body{
  font-kerning:normal;
}

h1,
h2,
h3{
  text-wrap:balance;
}

p{
  text-wrap:pretty;
}

.lead{
  max-width:var(--jc-reading);
  line-height:1.72;
}

.eyebrow{
  line-height:1.35;
}

.section-head > p{
  max-width:760px;
  line-height:1.72;
}


/* -----------------------------------------
   RHYTHM
----------------------------------------- */

.section{
  position:relative;
}

.section + .section{
  border-top:1px solid rgba(23,34,31,.035);
}

.hero{
  position:relative;
  overflow:hidden;
}

.hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:rgba(255,255,255,.10);
}


/* -----------------------------------------
   CARD SYSTEM
----------------------------------------- */

article,
.role-card,
.definition,
.boundary,
.identity-card,
.contact-card,
.location-card,
.credential-intro,
.evidence-guardrail,
.purpose-card,
.vision-card,
.catalog-status{
  transition:
    transform var(--jc-transition),
    box-shadow var(--jc-transition),
    border-color var(--jc-transition);
}

.architecture-grid article,
.input-grid article,
.readiness article,
.capability-grid article,
.position-grid article,
.value-grid article,
.credential-grid article,
.route-grid a,
.journey-cards a,
.distinction-cards a,
.evidence-links a,
.pillar-grid a,
.product-card{
  border-radius:var(--jc-radius-sm);
}

.role-card,
.definition,
.boundary,
.identity-card,
.contact-card{
  border-radius:var(--jc-radius-lg);
}

.location-card,
.credential-intro,
.evidence-guardrail,
.purpose-card,
.vision-card,
.catalog-status{
  border-radius:var(--jc-radius-md);
}


/* cards on light surfaces */

.architecture-grid article:hover,
.input-grid article:hover,
.readiness article:hover,
.capability-grid article:hover,
.position-grid article:hover,
.value-grid article:hover,
.credential-grid article:hover,
.route-grid a:hover,
.journey-cards a:hover,
.distinction-cards a:hover,
.evidence-links a:hover,
.product-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--jc-shadow-hover);
}


/* -----------------------------------------
   BUTTONS
----------------------------------------- */

.btn,
.button{
  letter-spacing:.01em;
  transition:
    transform var(--jc-transition),
    box-shadow var(--jc-transition),
    opacity var(--jc-transition);
}

.btn:hover,
.button:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 25px rgba(0,0,0,.11);
}

.btn:active,
.button:active{
  transform:translateY(0);
}


/* -----------------------------------------
   LINKS
----------------------------------------- */

a{
  text-underline-offset:3px;
}

main a:not(.btn):focus-visible,
footer a:focus-visible,
nav a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:3px solid rgba(183,149,81,.55);
  outline-offset:3px;
}


/* -----------------------------------------
   NAVIGATION VISUAL RHYTHM
----------------------------------------- */

.top{
  box-shadow:
    0 1px 0 rgba(8,44,39,.035);
}

.brand strong{
  font-weight:850;
}

.fallback-nav a{
  transition:
    background var(--jc-transition),
    color var(--jc-transition),
    border-color var(--jc-transition);
}

.fallback-nav a:not(.shop):not(.portal):hover{
  background:rgba(16,61,52,.055);
  border-radius:7px;
}


/* -----------------------------------------
   PRODUCT / PORTFOLIO
----------------------------------------- */

.product-card{
  box-shadow:var(--jc-shadow-soft);
}

.product-description{
  line-height:1.7;
}

.product-foot{
  min-height:56px;
}


/* -----------------------------------------
   PROCESS / QUALITY GRIDS
----------------------------------------- */

.process article,
.quality-flow article,
.mission-grid article,
.principles article,
.pillar-grid a{
  transition:
    background var(--jc-transition),
    transform var(--jc-transition);
}

.process article:hover,
.quality-flow article:hover,
.mission-grid article:hover,
.principles article:hover,
.pillar-grid a:hover{
  background:rgba(255,255,255,.085);
}


/* -----------------------------------------
   CORPORATE ROUTING / JOURNEY
----------------------------------------- */

.journey-cards a,
.distinction-cards a,
.route-grid a{
  box-shadow:0 5px 16px rgba(7,31,28,.025);
}

.journey-cards a.current,
.distinction-cards a.current{
  box-shadow:
    inset 4px 0 0 #b79551,
    var(--jc-shadow-soft);
}


/* -----------------------------------------
   FOOTER
----------------------------------------- */

footer{
  border-top:1px solid rgba(255,255,255,.06);
}

.footer-links a{
  opacity:.86;
  transition:opacity var(--jc-transition);
}

.footer-links a:hover{
  opacity:1;
}


/* -----------------------------------------
   FORMS
----------------------------------------- */

input,
textarea,
select{
  max-width:100%;
  font:inherit;
}

input,
textarea,
select{
  border-radius:8px;
}


/* -----------------------------------------
   RESPONSIVE — TABLET
----------------------------------------- */

@media(max-width:1080px){

  .section-head{
    gap:24px !important;
  }

  .hero-grid{
    gap:42px !important;
  }

  .cta-grid{
    gap:32px !important;
  }

}


/* -----------------------------------------
   RESPONSIVE — MOBILE
----------------------------------------- */

@media(max-width:700px){

  body{
    overflow-x:hidden;
  }

  .top-inner{
    gap:12px !important;
  }

  .brand strong{
    font-size:12px !important;
  }

  .brand span{
    font-size:7px !important;
  }

  .fallback-nav{
    gap:2px !important;
  }

  .fallback-nav a{
    padding:7px 8px !important;
    font-size:11px !important;
  }

  .hero{
    padding-top:56px !important;
    padding-bottom:64px !important;
  }

  .hero h1{
    font-size:
      clamp(38px,11vw,48px) !important;
    line-height:1.04 !important;
  }

  .lead{
    font-size:17px !important;
  }

  .section{
    padding-top:62px !important;
    padding-bottom:62px !important;
  }

  .section-head{
    margin-bottom:32px !important;
  }

  .section-head h2{
    font-size:
      clamp(32px,9vw,42px) !important;
  }

  .hero-actions,
  .cta-actions{
    width:100%;
  }

  .hero-actions .btn,
  .cta-actions .btn{
    width:100%;
    min-height:50px;
  }

  .role-card,
  .definition,
  .boundary,
  .identity-card,
  .contact-card{
    padding:24px !important;
  }

  .footer-links{
    gap:10px 16px !important;
  }

}


/* -----------------------------------------
   ACCESSIBILITY
----------------------------------------- */

@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    transition:none !important;
    animation:none !important;
  }

}