/*
Theme Name:   Securinvest
Theme URI:    https://sifs.com.au/
Description:  Securinvest child theme of Twenty Twenty-Five. Brand palette, type scale, and reusable button styles per the 2026 build brief.
Author:       Smith Brothers Media
Author URI:   https://smithbrothers.com.au/
Template:     twentytwentyfive
Version: 0.14.31
Text Domain:  securinvest
*/

:root {
  /* Primary brand */
  --si-blue: #220871;
  --si-mint: #23F2B4;

  /* Business units */
  --si-financial: #00A2E2;
  --si-bat:       #F89F33;
  --si-mortgages: #EE5783;

  /* Neutral system */
  --si-black:  #111111;
  --si-grey:   #6B7280;
  --si-border: #E8E8F0;
  --si-light:  #F8F8FB;
  --si-white:  #FFFFFF;

  /* Tints — Securinvest Blue */
  --si-blue-80: #4E3A8E;
  --si-blue-60: #7B6CAA;
  --si-blue-40: #A79DC7;
  --si-blue-20: #D3CEE3;

  /* Tints — Mint */
  --si-mint-80: #4FF5C3;
  --si-mint-60: #7BF7D2;
  --si-mint-40: #A7FAE1;
  --si-mint-20: #D3FCF0;

  /* Tints — Financial Advice */
  --si-financial-80: #33B5E8;
  --si-financial-60: #66C7EE;
  --si-financial-40: #99DAF3;
  --si-financial-20: #CCECF9;

  /* Tints — Business Advisory & Tax */
  --si-bat-80: #F9B25C;
  --si-bat-60: #FBC585;
  --si-bat-40: #FCD9AD;
  --si-bat-20: #FEECD6;

  /* Tints — Mortgages */
  --si-mortgages-80: #F1799C;
  --si-mortgages-60: #F59AB5;
  --si-mortgages-40: #F8BCCD;
  --si-mortgages-20: #FCDDE6;

  /* Type */
  --si-font-display: "Circular Std", "Circular", Inter, system-ui, sans-serif;
  --si-font-body:    "Avenir 55 Roman", "Avenir Next", "Segoe UI", sans-serif;

  /* Header / mega-panel tokens (Stage 2E) */
  --si-surface-accent: #F5F3FF;
  --si-text-body:      #111111;
  --si-shadow-lg:      0 18px 40px rgba(34, 8, 113, 0.10);
  --si-radius-lg:      18px;
  --si-max-width:      1280px;
  --si-panel-max:      min(1180px, calc(100vw - 32px));
}

/* Base typography */
body {
  font-family: var(--si-font-body);
  color: var(--si-black);
  background: var(--si-white);
  font-size: 18px;
  line-height: 1.555;
  font-feature-settings: "liga" 0; /* disable standard ligatures per brand guide */
}

h1, h2, h3, h4, .si-display {
  font-family: var(--si-font-display);
  color: var(--si-blue);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}

h1, .si-h1 { font-size: 48px; line-height: 56px; }
h2, .si-h2 { font-size: 36px; line-height: 44px; }
h3, .si-h3 { font-size: 28px; line-height: 36px; }
h4, .si-h4 { font-size: 22px; line-height: 30px; }
p, li      { font-size: 18px; line-height: 28px; }
.si-small  { font-size: 14px; line-height: 22px; color: var(--si-grey); }

/* Buttons — primary + secondary */
.si-btn,
.wp-block-button .wp-block-button__link.is-style-si-primary,
.wp-block-button .wp-block-button__link.is-style-si-secondary {
  display: inline-block;
  font-family: var(--si-font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.01em;
  padding: 16px 28px;
  border-radius: 6px;
  border: 2px solid var(--si-blue);
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
}

.si-btn--primary,
.wp-block-button .wp-block-button__link.is-style-si-primary {
  background: var(--si-blue);
  color: var(--si-white);
}
.si-btn--primary:hover,
.si-btn--primary:focus-visible,
.wp-block-button .wp-block-button__link.is-style-si-primary:hover,
.wp-block-button .wp-block-button__link.is-style-si-primary:focus-visible {
  background: var(--si-mint);
  color: var(--si-blue);
  border-color: var(--si-mint);
}

.si-btn--secondary,
.wp-block-button .wp-block-button__link.is-style-si-secondary {
  background: transparent;
  color: var(--si-blue);
}
.si-btn--secondary:hover,
.si-btn--secondary:focus-visible,
.wp-block-button .wp-block-button__link.is-style-si-secondary:hover,
.wp-block-button .wp-block-button__link.is-style-si-secondary:focus-visible {
  background: var(--si-blue);
  color: var(--si-white);
}

/* Vertical rhythm — alternate white / light */
.si-section {
  padding: 64px 0;
}
.si-section--light { background: var(--si-light); }
.si-section__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Business-unit accent helpers — applied to a section wrapper */
.si-unit--financial  { --si-accent: var(--si-financial); }
.si-unit--bat        { --si-accent: var(--si-bat); }
.si-unit--mortgages  { --si-accent: var(--si-mortgages); }

.si-unit-card {
  border-top: 6px solid var(--si-accent, var(--si-blue));
  background: var(--si-white);
  padding: 32px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(17, 17, 17, 0.06);
}
.si-unit-card .si-eyebrow { color: var(--si-accent, var(--si-blue)); }
.si-unit-card .si-h3      { color: var(--si-accent, var(--si-blue)); }

/* Eyebrow */
.si-eyebrow {
  display: inline-block;
  font-family: var(--si-font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--si-blue);
  margin: 0 0 12px;
}

/* Compliance footer */
.si-footer {
  background: var(--si-blue);
  color: var(--si-white);
  padding: 48px 0 32px;
}
.si-footer a { color: var(--si-mint); text-decoration: none; }
.si-footer a:hover, .si-footer a:focus-visible { text-decoration: underline; }
.si-footer__inner {
  box-sizing: border-box;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
/* Landing template content wraps to 1200px (--ll-max). Match the footer
   on those pages so the footer text doesn't sit wider than the content. */
body.page-template-landing .si-footer__inner { max-width: 1200px; }
.si-footer__compliance {
  font-size: 14px;
  line-height: 22px;
  color: var(--si-white);
  opacity: 0.92;
}
.si-footer__utility {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
}

/* Demo page layout */
.si-demo__hero {
  background: var(--si-blue);
  color: var(--si-white);
  padding: 96px 24px;
  text-align: center;
}
.si-demo__hero .si-h1 { color: var(--si-white); }
.si-demo__hero .si-eyebrow { color: var(--si-mint); }
.si-demo__hero p { color: rgba(255, 255, 255, 0.92); max-width: 760px; margin: 0 auto; }

.si-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

@media (max-width: 781px) {
  h1, .si-h1 { font-size: 36px; line-height: 44px; }
  h2, .si-h2 { font-size: 28px; line-height: 36px; }
  h3, .si-h3 { font-size: 22px; line-height: 30px; }
  .si-section { padding: 48px 0; }
  .si-demo__hero { padding: 64px 20px; }
}