/*
Theme Name: TSA GeneratePress Child
Theme URI: https://staging.sentuhanajaib.my
Description: Child theme TSA untuk laman awam Sentuhan Ajaib.
Author: Afif Corporation
Template: generatepress
Version: 0.1.1
Text Domain: tsa-generatepress-child
*/

:root {
  --tsa-navy: #1e3a5f;
  --tsa-navy-deep: #102a43;
  --tsa-gold: #d4a847;
  --tsa-cream: #f7f4ed;
  --tsa-sand: #e9e1d2;
  --tsa-ink: #17212b;
  --tsa-muted: #5d6b78;
  --tsa-line: rgba(30, 58, 95, 0.14);
  --tsa-radius: 18px;
  --tsa-shadow: 0 18px 50px rgba(16, 42, 67, 0.12);
}

body { background: var(--tsa-cream); color: var(--tsa-ink); }
a { color: var(--tsa-navy); }
a:hover { color: var(--tsa-navy-deep); }
.site-header { background: rgba(247, 244, 237, .96); border-bottom: 1px solid var(--tsa-line); }
.site-logo a, .main-title a { color: var(--tsa-navy-deep); }
.main-navigation { background: transparent; }
.main-navigation a { color: var(--tsa-navy-deep); font-weight: 600; }
.main-navigation a:hover { color: var(--tsa-gold); }
.site-footer, .site-info { background: var(--tsa-navy-deep); color: #eaf0f5; }
.site-footer a, .site-info a { color: #f7d889; }
.tsa-wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.tsa-section { padding: 88px 0; }
.tsa-eyebrow { margin: 0 0 16px; color: var(--tsa-gold); font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.tsa-title { max-width: 760px; margin: 0; color: var(--tsa-navy-deep); font-size: clamp(2.35rem, 6vw, 5.8rem); line-height: .98; letter-spacing: -.045em; }
.tsa-lead { max-width: 650px; color: var(--tsa-muted); font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.7; }
.wp-block-cover.tsa-hero { align-items: center; padding: 112px 0 104px; background: var(--tsa-navy-deep); }
.wp-block-cover.tsa-hero .wp-block-cover__inner-container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.tsa-hero-logo { width: 72px; margin: 0 0 22px; }
.tsa-hero-logo img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(255,255,255,.7)); }
.tsa-hero .tsa-eyebrow { color: #f7d889; }
.tsa-hero .tsa-title { max-width: 760px; color: #fff; }
.tsa-gold-text, .tsa-hero-tagline { color: var(--tsa-gold); }
.tsa-hero-tagline { margin: 0 0 18px; font-size: clamp(1.25rem, 2.5vw, 1.65rem); font-weight: 800; }
.tsa-hero .tsa-lead { color: rgba(255,255,255,.86); }
.tsa-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 56px; align-items: end; }
.tsa-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.tsa-button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: inherit; font-weight: 800; text-decoration: none; }
.tsa-button .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 13px 22px; border: 1px solid var(--tsa-navy); border-radius: 999px; background: var(--tsa-navy); color: #fff !important; font-weight: 800; text-decoration: none; }
.tsa-button .wp-block-button__link:hover { background: var(--tsa-navy-deep); border-color: var(--tsa-navy-deep); }
.tsa-button--light .wp-block-button__link { background: transparent; color: var(--tsa-navy) !important; }
.tsa-button--gold .wp-block-button__link { border-color: var(--tsa-gold); background: var(--tsa-gold); color: var(--tsa-navy-deep) !important; }
.tsa-button--gold .wp-block-button__link:hover { background: #e0b95e; border-color: #e0b95e; }
.tsa-hero-card { padding: 30px; border: 1px solid rgba(30,58,95,.14); border-radius: var(--tsa-radius); background: rgba(255,255,255,.62); box-shadow: var(--tsa-shadow); }
.tsa-hero-card strong { display: block; margin-bottom: 12px; color: var(--tsa-navy-deep); font-size: 1.25rem; }
.tsa-hero-card p { margin: 0; color: var(--tsa-muted); line-height: 1.65; }
.tsa-section--white { background: #fff; }
.tsa-heading-row { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 32px; }
.tsa-heading-row h2 { margin: 0; color: var(--tsa-navy-deep); font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.035em; }
.tsa-heading-row p { max-width: 460px; margin: 0; color: var(--tsa-muted); line-height: 1.65; }
.tsa-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tsa-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wp-block-button.tsa-button .wp-block-button__link { background: var(--tsa-navy) !important; border: 1px solid var(--tsa-navy) !important; border-radius: 999px !important; color: #fff !important; }
.wp-block-button.tsa-button--gold .wp-block-button__link { background: var(--tsa-gold) !important; border-color: var(--tsa-gold) !important; color: var(--tsa-navy-deep) !important; }
.wp-block-button.tsa-button--light .wp-block-button__link { background: transparent !important; border-color: var(--tsa-navy) !important; color: var(--tsa-navy) !important; }
.tsa-card { height: 100%; padding: 28px; border: 1px solid var(--tsa-line); border-radius: var(--tsa-radius); background: var(--tsa-cream); }
.tsa-section--navy .tsa-card { background: var(--tsa-cream); color: var(--tsa-ink); }
.tsa-section--navy .tsa-card h3 { color: var(--tsa-navy-deep); }
.tsa-section--navy .tsa-card p, .tsa-section--navy .tsa-card li { color: var(--tsa-muted); }
.tsa-card h3 { margin: 0 0 12px; color: var(--tsa-navy-deep); font-size: 1.35rem; }
.tsa-card p { margin: 0; color: var(--tsa-muted); line-height: 1.65; }
.tsa-card a { display: inline-block; margin-top: 20px; font-weight: 800; text-decoration: none; }
.tsa-band { background: var(--tsa-navy); color: #fff; }
.tsa-band h2, .tsa-band p { color: #fff; }
.tsa-band .tsa-eyebrow { color: #f7d889; }
.tsa-stat-grid { display: block !important; width: 100%; }
.tsa-stat-grid > .wp-block-group__inner-container { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding: 28px 0; width: 100%; max-width: none; }
.tsa-stat { text-align: center; }
.tsa-stat strong { display: block; color: var(--tsa-gold); font-size: clamp(1.7rem, 4vw, 2.8rem); line-height: 1; }
.tsa-stat span { display: block; margin-top: 8px; color: rgba(255,255,255,.76); font-size: .88rem; }
.tsa-list { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.tsa-list li { position: relative; padding: 14px 16px 14px 44px; border: 1px solid var(--tsa-line); border-radius: 12px; background: #fff; color: var(--tsa-muted); }
.tsa-list li::before { content: '✓'; position: absolute; left: 16px; color: var(--tsa-gold); font-weight: 900; }
.tsa-section--navy { background: linear-gradient(135deg, var(--tsa-navy-deep), var(--tsa-navy)); color: #fff; }
.tsa-section--navy h2, .tsa-section--navy h3 { color: #fff; }
.tsa-section--navy p { color: rgba(255,255,255,.8); }
.tsa-step { position: relative; padding: 30px 24px 24px; border-radius: var(--tsa-radius); background: #fff; color: var(--tsa-ink); }
.tsa-step span { position: absolute; top: -14px; left: 24px; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--tsa-gold); color: var(--tsa-navy-deep); font-weight: 900; }
.tsa-footer-note { margin-top: 20px; color: var(--tsa-navy) !important; font-size: .92rem; }
@media (max-width: 800px) { .tsa-stat-grid > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .tsa-wrap { width: min(100% - 28px, 680px); }
  .tsa-section { padding: 62px 0; }
  .tsa-hero { padding: 76px 0 68px; }
  .tsa-hero-grid, .tsa-grid { grid-template-columns: 1fr; }
  .tsa-heading-row { display: block; }
  .tsa-heading-row p { margin-top: 16px; }
  .tsa-actions { align-items: stretch; flex-direction: column; }
  .tsa-button { width: 100%; }
}