/* ==========================================================================
   MTD Performance - garansi.css
   garansi.html only. Everything structural (container, section, panel, fields,
   buttons, the FAQ accordion, the header, sheet and footer) comes from
   site.css and shop.css; this file shapes only what the Garansi page adds:

     1. the jump ledger under the page head
     2. the numbered section heading
     3. the policy card and the warranty table garansi.js builds
     4. the three claim requirement cards
     5. the FAQ block's own rhythm
     6. the claim form column

   Motion is transform and opacity only, and the entrances are the shared
   [data-reveal] system, so the reduced motion block in site.css already owns
   them. Nothing here animates on its own.
   ========================================================================== */

/* ==========================================================================
   1. The jump ledger
   Four anchors to the page's own sections, set as a mono ledger rather than
   a second nav bar so it never competes with the header.
   ========================================================================== */

.gr-jump{
  display:flex;flex-wrap:wrap;gap:8px 10px;
  margin-top:clamp(20px,2.4vw,28px);
}
.gr-jump a{
  display:inline-flex;align-items:center;
  min-height:34px;
  padding:6px 13px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel-2);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-secondary);
  transition:color .24s var(--ease-out),border-color .24s var(--ease-out),transform .24s var(--ease-out);
}
.gr-jump a:hover{color:var(--text-primary);border-color:var(--line-interactive);transform:translateY(-1px)}
.gr-jump a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ==========================================================================
   2. The numbered section heading
   The same baseline row the events page uses, so this page and the events page
   read as one family. The number is the quiet half of the pair.
   ========================================================================== */

.gr-h2{
  display:flex;align-items:baseline;gap:.7em;flex-wrap:wrap;
  margin-bottom:clamp(20px,2.4vw,30px);
}
.gr-h2 h2{font-size:clamp(26px,3vw,42px)}
.gr-h2-num{
  font-size:12px;font-weight:600;letter-spacing:.18em;
  color:var(--accent-label);
}

/* ==========================================================================
   3. The policy card and the warranty table
   ========================================================================== */

.gr-policy{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(16px,2.2vw,28px);
  align-items:start;
}
@media (max-width:940px){.gr-policy{grid-template-columns:1fr}}

.gr-policy-card,
.gr-table-card{
  position:relative;
  background:linear-gradient(178deg,var(--panel) 0%,#050505 100%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(20px,2.4vw,32px);
  overflow:hidden;
}

/* the reference's red-to-white-to-red hairline, once, on the policy card:
   this page's one loud edge, and the rest of it stays quiet */
.gr-policy-card::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:2px;z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,
     rgba(233,32,42,0) 0%,
     var(--accent) 20%,
     var(--text-primary) 55%,
     var(--accent) 80%,
     rgba(233,32,42,0) 100%);
}

.gr-card-title{
  display:flex;align-items:center;gap:10px;
  font-family:var(--display);
  font-size:clamp(19px,1.5vw,24px);font-weight:800;font-style:italic;
  text-transform:uppercase;letter-spacing:.01em;line-height:1.1;
  padding-left:12px;
  border-left:4px solid var(--accent);
}
.gr-card-title--sub{margin-top:clamp(22px,2.6vw,30px)}

.gr-ico{width:22px;height:22px;flex:none;display:inline-flex}
.gr-ico svg{width:100%;height:100%;fill:none;stroke:var(--accent);stroke-width:1.6}

.gr-check{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.gr-check li{display:flex;align-items:flex-start;gap:11px;color:var(--text-primary);max-width:60ch}
.gr-tick{
  width:20px;height:20px;flex:none;margin-top:2px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--accent-muted);border-radius:5px;
  background:rgba(233,32,42,.10);
}
.gr-tick svg{width:13px;height:13px;fill:none;stroke:var(--accent-label);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.gr-retur{
  margin-top:clamp(24px,2.8vw,34px);
  padding-top:clamp(20px,2.4vw,26px);
  border-top:1px solid var(--line);
}
.gr-retur h3{
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-label);
}
.gr-retur ul{margin:14px 0 0;padding-left:1.15em;display:grid;gap:10px}
.gr-retur li{color:var(--text-secondary);max-width:56ch}
.gr-retur li::marker{color:var(--accent-muted)}

.gr-table-card h3{
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-label);
  margin-bottom:16px;
}

/* a table is the one block on this page that can be wider than a phone, so it
   scrolls inside its own box and is reachable from the keyboard while it does */
.gr-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.gr-table-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius)}

.gr-table{width:100%;border-collapse:collapse}
.gr-table th,.gr-table td{
  text-align:left;vertical-align:top;
  padding:12px 14px 12px 0;
  border-bottom:1px solid var(--line);
}
.gr-table thead th{
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-secondary);
  padding-bottom:10px;
}
.gr-table tbody th{
  font-family:var(--mono);font-size:12.5px;font-weight:600;
  color:var(--text-primary);
  padding-right:20px;
  min-width:15ch;
}
.gr-table tbody td{color:var(--text-secondary);font-size:14px;line-height:1.55}
.gr-table tbody tr:last-child th,.gr-table tbody tr:last-child td{border-bottom:0}

/* On a phone two mono columns cannot both fit, and a table nobody can read
   without dragging it sideways is not a table. Under 560px each row becomes
   its own block: the warranty line, then the families it covers. */
/* Same corner, same rule as promo.css: the fixed WhatsApp button must never
   sit on top of the policy a claimant is reading. */
@media (max-width:560px){
  .gr-policy-card,
  .gr-table-card{padding-right:calc(clamp(20px,2.4vw,32px) + 24px)}
}

@media (max-width:560px){
  .gr-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .gr-table tbody tr,.gr-table tbody th,.gr-table tbody td{display:block;width:100%}
  .gr-table tbody tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .gr-table tbody tr:last-child{border-bottom:0}
  .gr-table tbody th{border-bottom:0;padding:0 0 6px;min-width:0}
  .gr-table tbody td{border-bottom:0;padding:0}
}

.gr-table-note{
  margin-top:14px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--text-secondary);
}

/* ==========================================================================
   4. The three claim requirement cards
   ========================================================================== */

.gr-req{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.8vw,22px);
}
@media (max-width:880px){.gr-req{grid-template-columns:1fr}}

.gr-req-card{
  display:flex;flex-direction:column;gap:12px;
  padding:clamp(18px,2vw,26px);
  background:var(--panel);
  border:1px solid var(--line);
  border-left:2px solid var(--accent-muted);
  border-radius:var(--radius);
  transition:transform .4s var(--ease-out),border-color .4s var(--ease-out);
}
.gr-req-card:hover{transform:translateY(-3px);border-color:var(--line-strong);border-left-color:var(--accent)}
.gr-req-ico{width:30px;height:30px;flex:none;display:inline-flex}
.gr-req-ico svg{
  width:100%;height:100%;fill:none;stroke:var(--accent);
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
.gr-req-card h3{font-size:clamp(17px,1.2vw,20px)}
.gr-req-card p{color:var(--text-secondary);font-size:14.5px;line-height:1.6;max-width:38ch}

/* ==========================================================================
   5. The FAQ block
   The accordion itself lives in site.css; only its width is set here, so the
   answers keep a comfortable measure on a wide screen.
   ========================================================================== */

.gr-faq{max-width:900px}
.gr-faq .faq-q:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ==========================================================================
   6. The claim form
   ========================================================================== */

.gr-claim{max-width:860px}
.gr-claim-lede{margin-bottom:clamp(22px,2.6vw,30px)}

/* the required mark is decorative punctuation: the label already says it and
   the input carries `required`, so it never reaches the accessible name */
.req-mark{color:var(--accent-label);margin-left:.35em}

.gr-count{
  margin-top:2px;
  font-size:11px;letter-spacing:.08em;
  color:var(--text-secondary);
  text-align:right;
}

.gr-confirm{gap:6px}
.gr-confirm .checkline{margin-bottom:0;min-height:44px;align-items:center}
.gr-confirm .checkline span{color:var(--text-primary);font-size:14.5px;line-height:1.5}
.gr-confirm.has-error .checkline input[type=checkbox]{outline:2px solid var(--accent);outline-offset:2px}
.gr-form .checkline input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.gr-submit{width:100%;min-height:48px;margin-top:10px}
.gr-privacy{max-width:52ch}
.gr-after{margin-top:16px;max-width:60ch}

/* site.css drops the outline on :focus and marks the field with an accent
   border instead. A claim form is filled once, under stress, so the keyboard
   user gets the ring back for :focus-visible only, on top of that border. */
.gr-form .input:focus-visible,
.gr-form .select:focus-visible,
.gr-form .textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

@media (pointer:coarse){
  .gr-form .input,
  .gr-form .select{min-height:44px}
  .gr-form .btn{min-height:48px}
  .gr-jump a{min-height:44px}
}