/* =========================================================
   WordGeek.net Shared Stylesheet
   Version: 1.004

   IMPORTANT:
   This CSS file controls the visual appearance of the site.

   If you edit this CSS file and upload it, update the version
   number inside each HTML page that loads it.

   Example:
   OLD:
   <link rel="stylesheet" href="assets/styles.css?v=1.001" />

   NEW:
   <link rel="stylesheet" href="assets/styles.css?v=1.002" />

   Do NOT place version numbers inside this CSS file for caching.
   Versioning happens only in the HTML link/script lines.
   ========================================================= */


/* =========================================================
   Root Variables

   This section controls the main colors, spacing, shadows,
   borders, and maximum page width used across the entire site.

   Change colors here when you want the whole site to shift style.

   Color examples:
   #ffffff = white
   #000000 = black
   #f7f9fc = very light gray/blue
   #1f6fd6 = blue accent color
   ========================================================= */
:root {
  --bg: #f7f9fc;
  --surface: #ffffff;
  --surface-alt: #eef3f9;
  --text: #18212b;
  --muted: #566474;
  --line: #d6deea;
  --line-strong: #bbc7d8;
  --accent: #1f6fd6;
  --accent-soft: #e7f0ff;
  --shadow: 0 14px 34px rgba(24, 33, 43, 0.08);
  --radius: 18px;
  --max-width: 1180px;
}


/* =========================================================
   Base

   This section controls the basic behavior of the entire page:
   body spacing, fonts, link behavior, images, and containers.

   Most pages rely on this section. Be careful changing this
   unless you want the whole site affected.
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.65;
  color: var(--text);
  background: linear-gradient(180deg, #f9fbfe 0%, #f3f7fb 100%);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

.container {
  width: min(100% - 2rem, var(--max-width));
  margin: 0 auto;
}


/* =========================================================
   Accessibility Skip Link

   This creates the hidden "Skip to main content" link.
   It appears only when someone tabs into it using a keyboard.
   Good for accessibility and cleaner navigation.
   ========================================================= */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #000000;
  color: #ffffff;
  padding: 0.75rem 1rem;
  z-index: 1000;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}


/* =========================================================
   Header

   This controls the top area of the site:
   logo, branding, and navigation row.

   The header is sticky, meaning it stays at the top while
   scrolling. That is why scroll-margin-top is used later
   for blog jump links.
   ========================================================= */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem 0;
}


/* =========================================================
   Brand / Logo

   This controls the WordGeek logo area in the header.
   The .brand-badge gives the logo its rounded box appearance.
   ========================================================= */
.brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.brand-badge {
  flex: 0 0 auto;
  background: linear-gradient(135deg, #0f1722, #273750);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 0.5rem 0.75rem;
}

.brand-badge img {
  width: 260px;
  max-width: 100%;
  height: auto;
}

.brand-text {
  min-width: 0;
}

.brand-text h1,
.brand-text .brand-name {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.15;
}

.tagline {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.95rem;
  color: var(--muted);
}


/* =========================================================
   Navigation

   This controls the top menu links:
   Home, About, Blogs, Contact, Policies, Site Map.

   The nav-toggle button appears on mobile screens.
   ========================================================= */
.nav-toggle {
  display: none;
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 12px;
  padding: 0.65rem 0.85rem;
  font-weight: bold;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  display: inline-block;
  padding: 0.75rem 0.95rem;
  border-radius: 999px;
  color: var(--text);
  font-weight: bold;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus,
.site-nav a[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
}


/* =========================================================
   Optional Navigation Dropdown

   This is for future drop-down menus under items like Blogs.
   It will not affect the site unless the HTML uses:
   .nav-dropdown and .dropdown-menu
   ========================================================= */
.nav-dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 0.5rem;
  z-index: 200;
}

.dropdown-menu li {
  margin: 0;
}

.dropdown-menu a {
  display: block;
  border-radius: 10px;
  white-space: nowrap;
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
  display: block;
}


/* =========================================================
   Hero Section

   This controls large welcome sections/cards used on pages.
   Good for homepage-style introductions or featured sections.
   ========================================================= */
.hero {
  padding: 3rem 0 1.5rem;
}

.hero-card {
  background: linear-gradient(135deg, #ffffff, #f4f8fd);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 0;
}

.hero-copy,
.hero-panel {
  padding: 2rem;
}

.hero-copy h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.1;
}

.hero-copy p {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 1.02rem;
}

.hero-panel {
  background: linear-gradient(180deg, #0f1722 0%, #223553 100%);
  color: #f8fbff;
  border-radius: var(--radius);
}

.hero-panel h1,
.hero-panel h2,
.hero-panel h3 {
  margin-top: 0;
}

.hero-panel p {
  color: #e8eef7;
}


/* =========================================================
   Buttons

   This controls reusable button-style links.
   Used for calls to action like Read More, Contact, etc.
   ========================================================= */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.3rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.8rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  font-weight: bold;
  text-decoration: none;
}

.button.primary {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

.button:hover,
.button:focus {
  text-decoration: none;
  filter: brightness(0.98);
}


/* =========================================================
   Page Intro

   This controls page title sections like:
   About, Contact, Policies, Media, Site Map, etc.
   ========================================================= */
.page-intro {
  padding: 2.25rem 0 1rem;
}

.page-intro h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
}

.page-intro p {
  margin: 0;
  max-width: 70ch;
  color: var(--muted);
}


/* =========================================================
   Content Layout

   This controls the common page layout areas:
   main content spacing, two-column layouts, sidebars, cards,
   policy boxes, notices, and sitemap blocks.
   ========================================================= */
.content-wrap {
  padding: 1.25rem 0 3rem;
}

.two-column {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.5rem;
}

.sidebar,
.card,
.article-card,
.policy-list,
.notice,
.sitemap-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.sidebar {
  padding: 1.25rem;
  align-self: start;
  position: sticky;
  top: 6.5rem;
}

.sidebar h3 {
  margin-top: 0;
  margin-bottom: 0.85rem;
  font-size: 1.05rem;
}

.sidebar ul {
  margin: 0;
  padding-left: 1rem;
}

.sidebar li + li {
  margin-top: 0.55rem;
}

.card {
  padding: 1.5rem;
}

.card h2:first-child,
.card h3:first-child,
.card h4:first-child {
  margin-top: 0;
}

.card p:last-child,
.card ul:last-child {
  margin-bottom: 0;
}

/* Blog Sidebar Scroll Box */
.blog-sidebar {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 120px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  padding-right: 0.35rem;
}

/* Blog Sidebar Scrollbar */
.blog-sidebar::-webkit-scrollbar {
  width: 8px;
}

.blog-sidebar::-webkit-scrollbar-track {
  background: var(--surface-alt);
  border-radius: 999px;
}

.blog-sidebar::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 999px;
}

.blog-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* Media Card Images */
.media-card img {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  margin-bottom: 0.75rem;
  user-select: none;
}

/* =========================================================
   Grid Layouts

   These create clean card grids.
   grid-2 = two cards per row
   grid-3 = three cards per row

   section-grid is included as an alias for subdomain pages.
   ========================================================= */
.grid-2,
.grid-3,
.section-grid {
  display: grid;
  gap: 1.2rem;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3,
.section-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* =========================================================
   Blog Layout

   This controls the main Blogs page layout:
   sidebar on the left, blog posts on the right.

   On mobile, this stacks vertically using the responsive
   section near the bottom.
   ========================================================= */
.blog-layout {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.blog-sidebar {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 120px;
}

.blog-main {
  flex: 1;
  min-width: 0;
}

.sidebar-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
  margin-bottom: 1.2rem;
}

.sidebar-box h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 18px;
}


/* =========================================================
   Blog Post Jump List

   This controls the clickable blog post links in the sidebar.
   The JavaScript automatically fills #post-jump-list based
   on each .blog-entry article in blogs.html.
   ========================================================= */
#post-jump-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#post-jump-list li {
  margin-bottom: 10px;
}

#post-jump-list a {
  display: block;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

#post-jump-list a:hover,
#post-jump-list a:focus {
  background: var(--accent-soft);
  border-color: var(--accent);
  text-decoration: none;
  transform: translateY(-1px);
}


/* =========================================================
   Blog Entries

   This controls individual blog posts.
   scroll-margin-top fixes the jump-link issue where the
   sticky header covers the top of the post.
   ========================================================= */
.blog-entry {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 30px;
  box-shadow: var(--shadow);
  scroll-margin-top: 185px;
}

.blog-entry h2 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 28px;
}

.post-meta {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 20px;
}

.blog-entry p {
  line-height: 1.7;
  margin-bottom: 16px;
}


/* =========================================================
   Blog Floating Images

   This lets a blog photo sit on the right side while the
   blog text wraps around it.

   Use this HTML:
   <img class="blog-float-image" src="..." alt="..." />
   ========================================================= */
.blog-float-image {
  float: right;
  width: min(40%, 320px);
  margin: 0.25rem 0 1rem 1.5rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.blog-entry::after {
  content: "";
  display: block;
  clear: both;
}


/* =========================================================
   Article Cards

   These are used for preview cards, feature cards, and
   possible homepage/blog/media teasers.
   ========================================================= */
.article-list {
  display: grid;
  gap: 1.2rem;
}

.article-card {
  overflow: hidden;
}

.article-card .article-body {
  padding: 1.4rem;
}

.article-kicker {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: bold;
}

.article-card h3 {
  margin: 0.4rem 0 0.8rem;
}

.media-placeholder {
  min-height: 180px;
  background:
    linear-gradient(135deg, rgba(31, 111, 214, 0.14), rgba(24, 33, 43, 0.04)),
    linear-gradient(90deg, #eaf1fb, #f7faff);
  border-bottom: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: bold;
  text-align: center;
  padding: 1rem;
}


/* =========================================================
   Policy Lists

   This controls legal/policy-style sections:
   privacy, terms, accessibility, policies hub, etc.
   ========================================================= */
.policy-list {
  padding: 1.25rem 1.4rem;
}

.policy-list h3 {
  margin-top: 0;
}

.policy-list ul {
  margin: 0;
  padding-left: 1rem;
}


/* =========================================================
   Notice Boxes

   This creates yellow/cream informational boxes.
   Good for reminders, warnings, coming soon notes,
   privacy notices, or "do not send sensitive info" messages.
   ========================================================= */
.notice {
  padding: 1rem 1.15rem;
  background: #fffdf7;
  border-color: #ead7a3;
}

.notice p {
  margin: 0;
}


/* =========================================================
   Site Map

   This controls the full sitemap page layout.
   ========================================================= */
.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.sitemap-block {
  padding: 1.25rem;
}

.sitemap-block h3 {
  margin-top: 0;
}

.sitemap-block ul {
  margin: 0;
  padding-left: 1rem;
}


/* =========================================================
   Footer

   This controls the bottom of every page:
   footer links and copyright text.
   ========================================================= */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  margin-top: 3rem;
}

.footer-top {
  padding: 1.35rem 0 1rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.8rem;
  margin-bottom: 0.85rem;
}

.footer-links a {
  color: var(--muted);
  font-weight: bold;
}

.footer-copy {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0;
}


/* =========================================================
   Utility Classes

   These are small helper classes used throughout the site.

   section-stack adds spacing between stacked elements.
   small makes text slightly smaller and muted.
   list-tight reduces spacing between list items.
   ========================================================= */
.section-stack > * + * {
  margin-top: 1.2rem;
}

.small {
  font-size: 0.95rem;
  color: var(--muted);
}

.list-tight li + li {
  margin-top: 0.45rem;
}


/* =========================================================
   Tablet / Medium Screen Responsive Rules

   This section makes layouts stack better on medium screens.
   It affects tablets, small laptops, and narrow browser widths.
   ========================================================= */
@media (max-width: 980px) {
  .header-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-grid,
  .two-column,
  .grid-2,
  .grid-3,
  .section-grid,
  .sitemap-grid {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
  }
}


/* =========================================================
   Blog Mobile Fix

   This controls how the blog page behaves on phones.
   Sidebar stacks above posts, and everything becomes full width.
   ========================================================= */
@media (max-width: 900px) {
  .blog-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .blog-sidebar {
    width: 100%;
    max-width: 100%;
    position: static;
    top: auto;
    order: 1;
  }

  .blog-main {
    width: 100%;
    max-width: 100%;
    order: 2;
  }

  .sidebar-box,
  .blog-entry {
    width: 100%;
    max-width: 100%;
  }

  .blog-entry {
    padding: 18px;
    margin-bottom: 20px;
  }

  .blog-entry h2 {
    font-size: 24px;
    line-height: 1.2;
  }

  .post-meta {
    font-size: 13px;
  }

  #post-jump-list a {
    display: block;
    width: 100%;
  }
}


/* =========================================================
   Phone Responsive Rules

   This section controls the smallest screens:
   phones, narrow mobile browsers, and small tablets.

   It also adjusts the blog jump offset because the mobile
   header/menu takes up more vertical room.
   ========================================================= */
@media (max-width: 760px) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    width: 100%;
  }

  .site-nav ul {
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding-top: 0.75rem;
  }

  .site-nav.is-open ul {
    display: flex;
  }

  .site-nav a {
    border-radius: 12px;
  }

  .brand {
    align-items: flex-start;
    flex-direction: column;
  }

  .brand-badge img {
    width: 220px;
  }

  .hero-copy,
  .hero-panel {
    padding: 1.5rem;
  }

  .container {
    width: min(100% - 1rem, var(--max-width));
  }

  .blog-entry {
    scroll-margin-top: 220px;
  }

  .blog-entry p {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .blog-float-image {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 1rem 0;
  }
}