/*
 * Global Styles for Printer Help Hub
 *
 * This stylesheet defines a modern, clean aesthetic inspired by the visual
 * language of contemporary support sites. The design uses a restrained
 * palette of blues and neutrals, generous whitespace, soft shadows and
 * rounded corners to foster trust and ease of use. Fluid typography via
 * clamp() scales text gracefully across screen sizes, while CSS grid
 * layouts respond to various breakpoints without relying on heavy
 * frameworks. A dark‑mode palette is provided for users who prefer
 * reduced brightness.
 */

/* CSS Variables: define colour tokens and sizing constants */
:root {
  --color-primary: #004e8a;
  --color-primary-light: #006ab3;
  --color-accent: #0091ea;
  --color-text: #1a1a1a;
  --color-muted: #586174;
  --color-surface: #f5f7fa;
  --color-background: #ffffff;
  --color-border: #e1e7ed;
  --radius: 0.5rem;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.06);
  --transition: 0.2s ease;
  --header-height: 60px;
  --font-family-sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* High contrast variables (overridden when body has .high-contrast) */
  --color-hc-primary: #00008b;
  --color-hc-accent: #0000cd;
  --color-hc-text: #000000;
  --color-hc-muted: #222222;
  --color-hc-surface: #ffffff;
  --color-hc-background: #ffffff;
  --color-hc-border: #000000;
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #f5f5f5;
    --color-muted: #9aa5b1;
    --color-surface: #1f2a37;
    --color-background: #15202b;
    --color-border: #2d3e50;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
  }
}

/* High contrast theme overrides: applied when body has class 'high-contrast'.
   We override colour variables to meet WCAG contrast requirements. */
body.high-contrast {
  --color-primary: var(--color-hc-primary);
  --color-accent: var(--color-hc-accent);
  --color-text: var(--color-hc-text);
  --color-muted: var(--color-hc-muted);
  --color-surface: var(--color-hc-surface);
  --color-background: var(--color-hc-background);
  --color-border: var(--color-hc-border);
}

/* Accessible skip link
   Provides a way for keyboard and screen reader users to bypass navigation and
   jump directly to the main content. It remains off‑screen until
   focused, when it appears at the top left of the viewport. */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background-color: var(--color-primary);
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 10000;
  text-decoration: none;
  border-radius: var(--radius);
  transition: top var(--transition);
}
.skip-link:focus {
  top: 0;
}

/* Style for the high contrast toggle button */
.contrast-toggle {
  font-size: 0.8rem;
  margin-right: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-primary);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), box-shadow var(--transition);
}

.contrast-toggle:hover,
.contrast-toggle:focus {
  background-color: var(--color-primary);
  color: #fff;
}

.contrast-toggle[aria-pressed="true"] {
  background-color: var(--color-primary);
  color: #fff;
}

/* Global resets and typography */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-sans);
  color: var(--color-text);
  background-color: var(--color-background);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  color: var(--color-primary);
  line-height: 1.3;
}

p {
  margin: 0 0 1rem;
  color: var(--color-text);
}

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

a:hover,
a:focus {
  color: var(--color-primary-light);
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}

/* Utility classes */
.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius);
  background-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
  line-height: 1;
  border: none;
  cursor: pointer;
  transition: background-color var(--transition), box-shadow var(--transition);
}

.btn:hover,
.btn:focus {
  background-color: var(--color-primary-light);
  box-shadow: var(--shadow-md);
}

.btn.secondary {
  background-color: var(--color-surface);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
}

.btn.secondary:hover,
.btn.secondary:focus {
  background-color: var(--color-primary);
  color: #fff;
}

/* Header */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--header-height);
  background-color: var(--color-background);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  position: relative;
}

header h1 {
  margin: 0;
  font-size: clamp(1.25rem, 4vw, 1.5rem);
  color: var(--color-primary);
  font-weight: 700;
}

header nav {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* Burger menu button */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin-left: 0.5rem;
  border: none;
  background: none;
  cursor: pointer;
}

.burger span {
  width: 100%;
  height: 3px;
  background-color: var(--color-primary);
  border-radius: 3px;
  transition: transform var(--transition), opacity var(--transition);
}

.burger.open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.burger.open span:nth-child(2) {
  opacity: 0;
}

.burger.open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile responsive navigation */
@media (max-width: 768px) {
  header nav {
    display: none;
    position: absolute;
    right: 1rem;
    top: calc(var(--header-height) - 2px);
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: var(--shadow-md);
    padding: 0.75rem 1rem;
    width: 200px;
    z-index: 1001;
  }
  header nav.open {
    display: flex;
  }
  header nav a {
    padding: 0.25rem 0;
  }
  .burger {
    display: flex;
  }
}

header nav a {
  font-weight: 500;
  color: var(--color-text);
}

header nav a:hover,
header nav a:focus {
  color: var(--color-primary);
}

/* Hero section */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  padding: 4rem 0 3rem;
}

.hero .content {
  max-width: 600px;
}

.hero h2 {
  font-size: clamp(2rem, 6vw, 3rem);
  margin-bottom: 0.5rem;
}

.hero p {
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}

.hero .cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* Search & chips */
.search-section {
  margin: 2rem 0;
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  box-shadow: var(--shadow-sm);
}

.search-bar input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1rem;
  background-color: transparent;
  color: var(--color-text);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.chip {
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), box-shadow var(--transition);
  user-select: none;
}

.chip.active {
  background-color: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.chip:hover,
.chip:focus {
  background-color: var(--color-primary-light);
  color: #fff;
  border-color: var(--color-primary-light);
}

/* Issues grid */
.issues-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}

.issue-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}

.issue-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.issue-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.issue-card h3 {
  font-size: 1.1rem;
  margin: 0.75rem 1rem 0.25rem;
  color: var(--color-primary);
}

.issue-card ul {
  padding-left: 1.5rem;
  margin: 0 1rem 1rem;
  color: var(--color-muted);
  font-size: 0.9rem;
}

/* Issues listing on the issues index page */
.issues-list {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin-top: 1.5rem;
}

.issue-entry {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}

.issue-entry:hover,
.issue-entry:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.issue-entry h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  color: var(--color-primary);
}

.issue-entry p {
  margin: 0;
  color: var(--color-muted);
}

.issue-entry a {
  color: var(--color-primary);
  text-decoration: none;
}

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

.issue-card ul li {
  margin-bottom: 0.5rem;
}

.issue-card .more {
  margin: auto 1rem 1rem;
  font-size: 0.85rem;
  color: var(--color-accent);
  text-decoration: underline;
  cursor: pointer;
}

/* Highlights section */
.highlights {
  margin: 3rem 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.highlight-card {
  background-color: var(--color-primary);
  color: #fff;
  padding: 1.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--transition), box-shadow var(--transition);
}

.highlight-card:hover {
  background-color: var(--color-primary-light);
  box-shadow: var(--shadow-md);
}

.highlight-card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #fff;
}

.highlight-card p {
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, 0.9);
}

.highlight-card a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
}

/* FAQ section */
.faq {
  margin: 3rem 0;
}

.faq details {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}

.faq details:hover,
.faq details:focus-within {
  box-shadow: var(--shadow-md);
}

.faq summary {
  font-weight: 600;
  cursor: pointer;
  outline: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '▼';
  float: right;
  transition: transform var(--transition);
}

details[open] summary::after {
  transform: rotate(180deg);
}

/* Footer */
footer {
  margin-top: 4rem;
  padding: 2rem 0;
  background-color: var(--color-surface);
  color: var(--color-muted);
  text-align: center;
  font-size: 0.85rem;
  border-top: 1px solid var(--color-border);
}

footer a {
  color: var(--color-accent);
  margin: 0 0.5rem;
}

/* Sticky call button on mobile */
.sticky-call {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1000;
  display: none;
}

.sticky-call a {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent);
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  font-weight: 600;
  transition: background-color var(--transition), box-shadow var(--transition);
}

.sticky-call a:hover {
  background-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

@media (max-width: 768px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero .content {
    margin-bottom: 2rem;
  }
  .sticky-call {
    display: block;
  }
}

/* ===== Footer (Professional) ===== */
.site-footer{
  margin-top: 48px;
  background: #0f172a; /* deep slate */
  color: rgba(255,255,255,.88);
  border-top: 1px solid rgba(255,255,255,.10);
}
.site-footer .container{
  padding-top: 28px;
  padding-bottom: 18px;
}
.site-footer .footer-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}
.site-footer .footer-title{
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 18px;
  color: #ffffff;
  margin-bottom: 10px;
}
.site-footer .footer-heading{
  font-weight: 700;
  color: #ffffff;
  font-size: 14px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.site-footer .footer-text{
  margin: 0 0 10px 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.82);
}
.site-footer .footer-label{
  display:block;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: rgba(255,255,255,.70);
  margin-bottom: 6px;
}
.site-footer .footer-address{
  display:inline-block;
}
.site-footer .footer-nav{
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer .footer-nav li{
  margin: 0 0 8px 0;
}
.site-footer .footer-link{
  color: rgba(255,255,255,.82);
  text-decoration: none;
}
.site-footer .footer-link:hover,
.site-footer .footer-link:focus{
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer .footer-bottom{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,.75);
}
@media (max-width: 900px){
  .site-footer .footer-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px){
  .site-footer .footer-grid{
    grid-template-columns: 1fr;
  }
}
/* ===== End Footer ===== */