/*
 * Theme Name:  Rel Accounting Child
 * Theme URI:   https://relaccounting.com
 * Description: GeneratePress Child Theme — Rel Accounting
 * Author:      Rel Accounting
 * Template:    generatepress
 * Version:     2.0.0
 * Text Domain: rel-accounting
 */

/* =========================================================
   DESIGN SYSTEM — single source of truth
   Every section inherits these tokens. Change here = everywhere.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Outfit:wght@300;400;500;600&display=swap');

:root {
  /* Colour */
  --white:   #FFFFFF;
  --stone:   #F5F2ED;
  --ash:     #EBEBEB;
  --border:  #E0DDD8;
  --ink:     #0F0F0F;
  --mid:     #6A6762;
  --green:   #0D6E00;
  --green-d: #095800;
  --green-t: rgba(13,110,0,.06);

  /* Typography */
  --display: 'Cormorant Garamond', Georgia, serif;
  --body:    'Outfit', 'Helvetica Neue', sans-serif;

  /* Spacing — the whole site uses these two variables */
  --px: clamp(1.5rem, 10vw, 10rem);          /* horizontal padding */
  --py: clamp(5rem, 9vw, 9rem);             /* vertical section padding */
  --py-sm: clamp(3rem, 5vw, 5.5rem);        /* compact vertical */

  /* Max-widths */
  --max: 1360px;   /* content max-width */
  --max-sm: 960px; /* narrow content */
}

/* =========================================================
   RESET + BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--body);
  background: var(--white);
  color: var(--ink);
  line-height: 1.6;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font-family: inherit; }

/* =========================================================
   TYPOGRAPHY SCALE
   ========================================================= */
.t-label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: .625rem;
}
.t-label::before {
  content: '';
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--green);
  flex-shrink: 0;
}

.t-display {
  font-family: var(--display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -.02em;
}
.t-display em { font-style: italic; color: var(--green); }

.t-h2 {
  font-family: var(--display);
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.t-h2 em { font-style: italic; color: var(--green); }

.t-body {
  font-size: clamp(.9375rem, 1.1vw, 1.0625rem);
  color: var(--mid);
  line-height: 1.82;
  font-weight: 300;
}

/* =========================================================
   LAYOUT UTILITIES
   ========================================================= */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--px);
  padding-right: var(--px);
}

.section {
  width: 100%;
  padding-top: var(--py);
  padding-bottom: var(--py);
}
.section--stone { background: var(--stone); }
.section--white { background: var(--white); }

/* ruled header used across multiple sections */
.sec-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: end;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: clamp(3rem, 5vw, 5rem);
}
.sec-head__body { font-size: 1rem; color: var(--mid); line-height: 1.8; font-weight: 300; }

@media (max-width: 800px) { .sec-head { grid-template-columns: 1fr; gap: 1.5rem; } }

/* =========================================================
   GENERATEPRESS — NUCLEAR WRAPPER RESET
   Scoped to home page template only so blog/other pages untouched.
   ========================================================= */
.page-template-page-home .site-content,
.page-template-page-home .inside-site-content,
.page-template-page-home #content,
.page-template-page-home .content-area,
.page-template-page-home .site-main,
.page-template-page-home article,
.page-template-page-home .inside-article,
.page-template-page-home .entry-content,
.page-template-page-home .post-content {
  all: unset !important;
  display: block !important;
  width: 100% !important;
}

.page-template-page-home .container,
.page-template-page-home .grid-container,
.page-template-page-home .inside-site-content {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.page-template-page-home .entry-header,
.page-template-page-home .entry-footer,
.page-template-page-home .entry-title,
.page-template-page-home .page-header,
.page-template-page-home .breadcrumb-trail {
  display: none !important;
}

.site-header { position: relative; z-index: 200; }

/* =========================================================
   HEADER PADDING — match site --px token
   ========================================================= */
.site-header .inside-header,
.site-header .header-inner,
.site-header .grid-container {
  max-width:     100% !important;
  padding-left:  var(--px) !important;
  padding-right: var(--px) !important;
  box-sizing:    border-box !important;
}

/* =========================================================
   FLUENT FORMS — global box-sizing fix
   ========================================================= */
.fluentform *,
.fluentform input,
.fluentform select,
.fluentform textarea,
.fluentform button {
  box-sizing: border-box !important;
  font-family: var(--body) !important;
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}