/* ============================================================
   MAIN STYLESHEET — Andrew O'Bryan Wills & Estates
   Master import + global utilities + print styles
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap');

/* Design system layers */
@import 'tokens.css';
@import 'reset.css';
@import 'typography.css';
@import 'components.css';


/* ============================================================
   PAGE-LEVEL LAYOUT
   ============================================================ */

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  flex: 1;
}


/* ============================================================
   SKIP LINK — accessibility
   ============================================================ */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: calc(var(--z-nav) + 10);
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-navy);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--border-radius);
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
}


/* ============================================================
   VISUALLY HIDDEN — screen-reader only
   ============================================================ */

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


/* ============================================================
   DISPLAY UTILITIES
   ============================================================ */

.block        { display: block         !important; }
.inline-block { display: inline-block  !important; }
.inline-flex  { display: inline-flex   !important; }
.flex         { display: flex          !important; }
.grid         { display: grid          !important; }
.hidden       { display: none          !important; }


/* ============================================================
   FLEX UTILITIES
   ============================================================ */

.flex-col       { flex-direction: column  !important; }
.flex-row       { flex-direction: row     !important; }
.flex-wrap      { flex-wrap: wrap         !important; }
.flex-nowrap    { flex-wrap: nowrap       !important; }

.items-start    { align-items: flex-start  !important; }
.items-center   { align-items: center      !important; }
.items-end      { align-items: flex-end    !important; }

.justify-start   { justify-content: flex-start    !important; }
.justify-center  { justify-content: center        !important; }
.justify-end     { justify-content: flex-end      !important; }
.justify-between { justify-content: space-between !important; }
.justify-around  { justify-content: space-around  !important; }

.flex-1     { flex: 1          !important; }
.flex-auto  { flex: auto       !important; }
.flex-none  { flex: none       !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }

.mt-auto { margin-top: auto    !important; }
.ml-auto { margin-left: auto   !important; }
.mr-auto { margin-right: auto  !important; }
.mb-auto { margin-bottom: auto !important; }
.mx-auto { margin-left: auto; margin-right: auto; }


/* ============================================================
   GAP UTILITIES
   ============================================================ */

.gap-1  { gap: var(--space-1)  !important; }
.gap-2  { gap: var(--space-2)  !important; }
.gap-3  { gap: var(--space-3)  !important; }
.gap-4  { gap: var(--space-4)  !important; }
.gap-5  { gap: var(--space-5)  !important; }
.gap-6  { gap: var(--space-6)  !important; }
.gap-8  { gap: var(--space-8)  !important; }
.gap-10 { gap: var(--space-10) !important; }
.gap-12 { gap: var(--space-12) !important; }


/* ============================================================
   WIDTH UTILITIES
   ============================================================ */

.w-full   { width: 100%     !important; }
.w-auto   { width: auto     !important; }
.h-full   { height: 100%    !important; }
.max-w-prose { max-width: var(--max-width-prose) !important; }


/* ============================================================
   SPACING UTILITIES
   ============================================================ */

/* Margin top */
.mt-0  { margin-top: 0                 !important; }
.mt-2  { margin-top: var(--space-2)    !important; }
.mt-3  { margin-top: var(--space-3)    !important; }
.mt-4  { margin-top: var(--space-4)    !important; }
.mt-6  { margin-top: var(--space-6)    !important; }
.mt-8  { margin-top: var(--space-8)    !important; }
.mt-10 { margin-top: var(--space-10)   !important; }
.mt-12 { margin-top: var(--space-12)   !important; }
.mt-16 { margin-top: var(--space-16)   !important; }

/* Margin bottom */
.mb-0  { margin-bottom: 0              !important; }
.mb-2  { margin-bottom: var(--space-2) !important; }
.mb-3  { margin-bottom: var(--space-3) !important; }
.mb-4  { margin-bottom: var(--space-4) !important; }
.mb-6  { margin-bottom: var(--space-6) !important; }
.mb-8  { margin-bottom: var(--space-8) !important; }
.mb-10 { margin-bottom: var(--space-10)!important; }
.mb-12 { margin-bottom: var(--space-12)!important; }

/* Padding */
.p-4   { padding: var(--space-4)       !important; }
.p-6   { padding: var(--space-6)       !important; }
.p-8   { padding: var(--space-8)       !important; }
.py-4  { padding-top: var(--space-4); padding-bottom: var(--space-4) !important; }
.py-6  { padding-top: var(--space-6); padding-bottom: var(--space-6) !important; }
.py-8  { padding-top: var(--space-8); padding-bottom: var(--space-8) !important; }
.px-4  { padding-left: var(--space-4); padding-right: var(--space-4) !important; }
.px-6  { padding-left: var(--space-6); padding-right: var(--space-6) !important; }


/* ============================================================
   BORDER UTILITIES
   ============================================================ */

.rounded    { border-radius: var(--border-radius)      !important; }
.rounded-md { border-radius: var(--border-radius-md)   !important; }
.rounded-lg { border-radius: var(--border-radius-lg)   !important; }
.rounded-full { border-radius: var(--border-radius-full) !important; }

.border        { border: var(--border-width) solid var(--color-border) !important; }
.border-top    { border-top: var(--border-width) solid var(--color-border) !important; }
.border-bottom { border-bottom: var(--border-width) solid var(--color-border) !important; }


/* ============================================================
   SHADOW UTILITIES
   ============================================================ */

.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow    { box-shadow: var(--shadow)    !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }


/* ============================================================
   OVERFLOW UTILITIES
   ============================================================ */

.overflow-hidden { overflow: hidden !important; }
.overflow-auto   { overflow: auto   !important; }


/* ============================================================
   POSITION UTILITIES
   ============================================================ */

.relative { position: relative !important; }
.absolute { position: absolute !important; }
.sticky   { position: sticky   !important; }
.fixed    { position: fixed    !important; }


/* ============================================================
   CUSTOM SCROLLBAR (webkit)
   ============================================================ */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-cream-dark);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-navy-muted);
  border-radius: 4px;
  border: 2px solid var(--color-cream-dark);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-navy);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-navy-muted) var(--color-cream-dark);
}


/* ============================================================
   SELECTION COLOUR
   ============================================================ */

::selection {
  background-color: rgba(27, 58, 107, 0.15);
  color: var(--color-navy-dark);
}


/* ============================================================
   PRINT STYLES
   ============================================================ */

@media print {
  /* Hide navigation and footer */
  .site-nav,
  .site-footer,
  .cta-band,
  .trust-bar,
  .site-nav__hamburger,
  .skip-link,
  .btn,
  .breadcrumb {
    display: none !important;
  }

  /* Reset backgrounds */
  *,
  *::before,
  *::after {
    background-color: transparent !important;
    box-shadow: none !important;
    color: #000 !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
  }

  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    color: #000 !important;
  }

  p, blockquote, table, li {
    page-break-inside: avoid;
  }

  /* Show URLs after links */
  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #555 !important;
  }

  /* Don't show URLs for local anchor links */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: '';
  }

  /* Ensure images don't overflow */
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  /* Show full content */
  .faq__answer {
    max-height: none !important;
    overflow: visible !important;
  }

  /* Page margins */
  @page {
    margin: 2cm;
  }

  .container {
    max-width: 100%;
    padding: 0;
  }
}