/* ==========================================================
   ToolFluency BASE CSS (SYSTEM / LAYOUT / RHYTHM / UTILITIES)
   Authoritative rules:
   - base.css owns: layout grid, spacing rhythm, typography defaults,
     utilities, print rules, breadcrumbs, visibility helpers.
   - style.css owns: components (cards, forms, buttons, results, etc).
   ========================================================== */

/* -------------------------
   0) Reset / Box model
------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: #0f172a;
    background: #f3f4f6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg, video, canvas {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
}

button, input, select, textarea {
    font: inherit;
}

/* -------------------------
   1) Design tokens
------------------------- */
:root {
    /* Column system */
    --tf-nav-width: 260px;
    --tf-content-width: 760px;
    --tf-ad-width: 300px;

    /* Rhythm & spacing (20–40px breathing room rules) */
    --tf-gap: 32px;          /* column gap */
    --tf-frame-x: 24px;      /* outer frame padding */
    --tf-frame-top: 32px;    /* top frame padding */
    --tf-frame-bottom: 72px; /* bottom frame padding */
    --tf-stack-1: 12px;
    --tf-stack-2: 18px;
    --tf-stack-3: 24px;
    --tf-stack-4: 32px;

    /* Borders/radius/shadows (bold lines, soft shadows) */
    --tf-line: rgba(0, 0, 0, 0.10);
    --tf-line-strong: rgba(0, 0, 0, 0.16);
    --tf-radius-md: 10px;
    --tf-radius-lg: 16px;
    --tf-shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.06);

    /* Brand */
    --tf-color-primary: #2563eb;
    --tf-color-primary-hover: #1d4ed8;

    /* Typography */
    --tf-text: #0f172a;
    --tf-muted: #4b5563;
    --tf-muted-2: #6b7280;
}

/* -------------------------
   2) Global vertical rhythm
------------------------- */

/* Prevent surprise margins from creating “collisions” */
h1, h2, h3, h4, p, ul, ol {
    margin: 0;
}

.tf-stack-1 { margin-top: var(--tf-stack-1); }
.tf-stack-2 { margin-top: var(--tf-stack-2); }
.tf-stack-3 { margin-top: var(--tf-stack-3); }
.tf-stack-4 { margin-top: var(--tf-stack-4); }

/* -------------------------
   3) Core 3-column layout
   (Left Nav | Main | Right Ad)
------------------------- */
.layout {
    display: grid;
    grid-template-columns:
        var(--tf-nav-width)
        minmax(0, var(--tf-content-width))
        var(--tf-ad-width);

    /* Center and frame the system */
    width: 100%;
    max-width: calc(var(--tf-nav-width) + var(--tf-content-width) + var(--tf-ad-width) + (var(--tf-frame-x) * 2));
    margin: 0 auto;

    /* ✅ This is where your spacing “feel” lives */
    gap: var(--tf-gap);
    padding: var(--tf-frame-top) var(--tf-frame-x) 0;
}

#leftNav { grid-column: 1; }
.page-content { grid-column: 2; }
.right-ad { grid-column: 3; }

/* Sticky inner wrapper (stable scan path, zero-jank) */
.left-nav-inner {
    position: sticky;
    top: var(--tf-frame-top);
}

/* Main content column */
.page-content {
    width: 100%;
    max-width: var(--tf-content-width);
    padding: 0;       /* no double padding; layout gap + frame handle it */
    margin: 0 auto;
}

/* Right ad column should stick as a whole */
.right-ad {
  position: sticky;
  top: var(--tf-frame-top);
  align-self: start;   /* important inside grid */
  height: fit-content; /* prevents stretch issues */
}

/* Wrapper becomes inert (safe if present, not required) */
.ad-sticky-wrap {
  position: static;
  top: auto;
}


/* -------------------------
   4) Breadcrumbs (tool pages only)
   - Home should not show breadcrumbs
------------------------- */
.breadcrumbs {
    margin: 8px 0 14px;
    font-size: 13px;
    color: var(--tf-muted-2);
}

.breadcrumbs a {
    color: #1e293b;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.breadcrumbs a:hover {
    color: var(--tf-color-primary);
    border-bottom-color: rgba(37, 99, 235, 0.35);
}

/* -------------------------
   5) Utility helpers
------------------------- */
.tf-hidden {
    display: none !important;
}

/* Prevent layout shift if anything loads late */
#tfNavContainer,
#breadcrumbsContainer,
#topAdSlot,
#inlineAdSlot,
#rightAdSlot,
#footerContainer {
    width: 100%;
}

/* -------------------------
   6) Responsive behavior (Layout Variables)
   - 3-column tightens as screen narrows
   - Preserve gutters + rhythm without forcing overflow
------------------------- */
@media (max-width: 1100px){
  :root{
    --tf-nav-width: 240px;
    --tf-ad-width: 280px;
    --tf-content-width: 680px;
    --tf-gap: 22px;
    --tf-frame-x: 18px;
  }
}

/* Mobile: remove left rail (avoid “second header” above the tool) */
@media (max-width: 920px){
  #leftNav{ display: none !important; }
}


@media (max-width: 980px) {
    /* Collapse to one column: Nav above content; Right ad below */
    .layout {
        grid-template-columns: 1fr;
        max-width: 960px;
        gap: 18px;
        padding: 20px 14px 56px;
    }
    
    .left-nav-inner,
    .ad-sticky-wrap {
        position: static; /* no sticky on small screens */
        top: auto;
    }

    .page-content {
        max-width: 100%;
    }
}

/* -------------------------
   7) Print rules (print-safe, ad-safe)
------------------------- */
@media print {
    body {
        background: #ffffff;
    }

    /* Hide navigation + ads in print */
    #leftNav,
    .right-ad,
    #topAdSlot,
    #inlineAdSlot,
    #rightAdSlot {
        display: none !important;
    }

    /* Single clean column */
    .layout {
        display: block;
        padding: 0;
        max-width: none;
    }

    .page-content {
        padding: 0;
        max-width: none;
        margin: 0;
    }

    /* Remove shadows/borders that waste ink */
    .ad-card,
    .ad-vertical,
    .left-nav-card,
    .calc-mode-block,
    .results-box,
    .tf-tool-info,
    .affiliate-section,
    .tf-footer,
    .tf-global-header,
    .tf-category-card,
    .tool-card {
        box-shadow: none !important;
    }

    a {
        text-decoration: underline;
    }
}
/* -----------------------------------------
   Mobile: move right ad below main content
----------------------------------------- */
@media (max-width: 900px) {
  .layout {
    display: block;
  }

  .right-ad {
    width: 100%;
    margin-top: 16px;
  }

  /* ensure the right ad slot is not sticky on mobile */
  .ad-sticky-wrap {
    position: static !important;
    top: auto !important;
  }
}
/* -----------------------------------------
   Mobile: avoid double “ToolFluency” (header + hero)
----------------------------------------- */
@media (max-width: 700px) {
  /* Hide header logo on mobile to avoid duplicate brand in same viewport */
  .tf-nav-logo {
    display: none;
  }

  /* Keep nav buttons aligned nicely */
  .tf-global-header-inner {
    justify-content: flex-start;
    gap: 12px;
  }
}
@media (max-width: 700px) {
  .tf-home-hero-actions {
    display: none !important;
  }

}
@media (max-width: 700px) {
  /* Tighten homepage hero now that buttons are hidden */
  .tf-home-hero {
    padding-bottom: 4px !important;
    margin-bottom: 0 !important;
  }

  .tf-home-hero .tf-header-divider {
    margin-top: 12px !important;
    margin-bottom: 6px !important;
  }

  #topAdSlot {
    margin-top: 6px !important;
  }
}