/*
Theme Name: ProxySmart Minimalist
Description: Apple-inspired minimalist design for ProxySmart
Version: 1.0
*/

/* CSS Variables for Light/Dark Theme */
:root {
  --background: hsl(0, 0%, 100%);
  --foreground: hsl(0, 0%, 0%);
  --muted: hsl(0, 0%, 98%);
  --muted-foreground: hsl(0, 0%, 40%);
  --popover: hsl(0, 0%, 100%);
  --popover-foreground: hsl(0, 0%, 0%);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(0, 0%, 0%);
  --border: hsl(0, 0%, 90%);
  --input: hsl(0, 0%, 90%);
  --primary: hsl(0, 0%, 0%);
  --primary-foreground: hsl(0, 0%, 100%);
  --secondary: hsl(0, 0%, 98%);
  --secondary-foreground: hsl(0, 0%, 13%);
  --accent: hsl(0, 0%, 98%);
  --accent-foreground: hsl(0, 0%, 13%);
  --destructive: hsl(0, 84%, 60%);
  --destructive-foreground: hsl(0, 0%, 98%);
  --ring: hsl(0, 0%, 0%);
  --radius: 0px;

  /* Brand & functional colors (calm, professional) */
      --brand: hsl(215, 85%, 43%);         /* deep blue */
      --brand-foreground: hsl(0, 0%, 100%);
      --brand-muted: hsl(215, 60%, 96%);

      --lilac: hsl(188, 70%, 37%);        /* teal for highlights */
      --lilac-foreground: hsl(0, 0%, 100%);

      --info: hsl(206, 92%, 40%);
      --info-foreground: hsl(0, 0%, 100%);
      --success: hsl(145, 65%, 35%);
      --success-foreground: hsl(0, 0%, 100%);
      --warning: hsl(38, 92%, 50%);
      --warning-foreground: hsl(32, 100%, 12%);
      --destructive: hsl(0, 72%, 50%);
      --destructive-foreground: hsl(0, 0%, 100%);

      --ring: hsl(215, 85%, 43%);
      --link: var(--brand);
      --link-hover: hsl(215, 88%, 36%);
}

.dark {
    --background: hsl(210, 10%, 10%);
    --foreground: hsl(0, 0%, 98%);
    --muted: hsl(210, 10%, 15%);
    --muted-foreground: hsl(215, 12%, 70%);
    --card: hsl(210, 10%, 11%);
    --card-foreground: hsl(0, 0%, 98%);
    --border: hsl(210, 10%, 25%);
    --input: hsl(210, 10%, 25%);

    --brand: hsl(215, 80%, 60%);         /* slightly brighter in dark */
    --brand-foreground: hsl(222, 44%, 11%);
    --brand-muted: hsl(215, 22%, 18%);

    --accent: hsl(188, 70%, 48%);
    --accent-foreground: hsl(210, 10%, 10%);

    --info: hsl(206, 92%, 60%);
    --info-foreground: hsl(222, 44%, 11%);
    --success: hsl(145, 60%, 45%);
    --success-foreground: hsl(222, 44%, 11%);
    --warning: hsl(38, 92%, 56%);
    --warning-foreground: hsl(24, 100%, 9%);
    --destructive: hsl(0, 72%, 56%);
    --destructive-foreground: hsl(222, 44%, 11%);

    --ring: hsl(215, 80%, 60%);
    --link: var(--brand);
    --link-hover: hsl(215, 80%, 72%);
  }

/* Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.6;
  font-feature-settings: 'cv11', 'ss01';
  font-variation-settings: 'opsz' 32;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

/* Layout */
.ps-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .ps-container {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .ps-container {
    padding: 0 2rem;
  }
}

.ps-section {
  padding: 6rem 0;
}

@media (min-width: 1024px) {
  .ps-section {
    padding: 8rem 0;
  }
}

/* Navigation */
.ps-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  /* background-color: var(--background); */
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.ps-navbar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4rem;
}

.ps-logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--foreground);
  text-decoration: none;
  transition: color 0.2s;
}

.ps-logo:hover {
  color: var(--muted-foreground);
}

.ps-nav-desktop {
  display: none;
  align-items: center;
  gap: 2rem;
}

.ps-nav-mobile {
  display: flex;
}

.mobile-menu {
  position: fixed;
  left: 0;
  right: 0;
  top: 64px;
  display: none;  
  /* background: var(--background); */
}

.mobile-menu__dropdown {
  backdrop-filter: blur(12px);
  background: var(--background);
}

@media (min-width: 768px) {
  .ps-nav-desktop {
    display: flex;
  }

  .ps-nav-mobile {
    display: none;
  }
}

.ps-nav-link {
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color 0.2s;
}

.ps-nav-link:hover {
  color: var(--link-hover);
}

/* Buttons */
.ps-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  /* background-color: var(--foreground); */
  color: var(--background);
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.ps-button:hover {
  background-color: var(--muted-foreground);
}

.ps-button:focus {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.ps-button-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  border: 2px solid var(--foreground);
  color: var(--foreground);
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.ps-button-outline:hover {
  background-color: var(--foreground);
  color: var(--background);
}

/* Cards */
.ps-card {
  background-color: var(--card);
  border: 1px solid var(--border);
  transition: box-shadow 0.3s;
  color: var(--card-foreground);
}

.ps-card:hover {
  box-shadow: 0 10px 25px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);
}

.dark-blue-border {
  border-top: 3px solid var(--brand) !important;
}

.lilac-border {
  border-top: 3px solid var(--lilac) !important;
}

.light-blue-border {
  border-top: 3px solid color-mix(in oklab, var(--brand), var(--accent) 35%) !important;
}

/* Forms */
.ps-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: var(--background);
  border: 1px solid var(--border);
  color: var(--foreground);
}

.ps-input:focus {
  outline: 2px solid var(--ring);
  border-color: transparent;
}

.ps-select {
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: var(--background);
  border: 1px solid var(--border);
  color: var(--foreground);
}

.ps-select:focus {
  outline: 2px solid var(--ring);
  border-color: transparent;
}

/* Hero Section */
.ps-hero {
  padding-top: 6rem;
  padding-bottom: 4rem;
  text-align: center;
}

/* Stats Section */
.ps-stats {
  padding: 4rem 0;
  background-color: var(--muted);
}

.ps-stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .ps-stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ps-stats-item {
  text-align: center;
}

.ps-stats-number {
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--foreground);
  margin-bottom: 0.5rem;
}

.ps-stats-label {
  color: var(--muted-foreground);
}

/* Features Section */
.ps-features {
  padding: 6rem 0;
  background-color: var(--background);
}

.ps-features-header {
  text-align: center;
  margin-bottom: 4rem;
}

.ps-features-title {
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--foreground);
  margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
  .ps-features-title {
    font-size: 3rem;
  }
}

.ps-features-subtitle {
  font-size: 1.25rem;
  color: var(--muted-foreground);
  max-width: 32rem;
  margin: 0 auto;
}

.ps-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .ps-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .ps-features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ps-feature-card {
  padding: 2rem;
}

.ps-feature-icon {
  color: var(--foreground);
  margin-bottom: 1rem;
}

.ps-feature-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 0.75rem;
}

.ps-feature-description {
  color: var(--muted-foreground);
}

/* Pricing Calculator */
.ps-pricing-calculator {
  /* max-width: 32rem; */
  margin: 0 auto;
}

.ps-calculator-card {
  padding: 2rem;
}

.ps-calculator-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .ps-calculator-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.ps-calculator-label {
  display: block;
  color: var(--foreground);
  font-weight: 500;
  margin-bottom: 1rem;
}

.ps-price-display {
  text-align: center;
  margin-bottom: 2rem;
}

.ps-price-amount {
  font-size: 3rem;
  font-weight: bold;
  color: var(--foreground);
  margin-bottom: 0.5rem;
}

.ps-price-average {
  color: var(--muted-foreground);
}

/* Table Styles */
.ps-table {
  width: 100%;
  border-collapse: collapse;
}

.ps-table th,
.ps-table td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.ps-table th {
  font-weight: 600;
  color: var(--foreground);
  background-color: var(--muted);
}

.ps-table td {
  color: var(--muted-foreground);
}

/* Footer */
.ps-footer {
  background-color: var(--muted);
  color: var(--muted-foreground);
  padding: 4rem 0;
}

.ps-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .ps-footer-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.ps-footer-section h4 {
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 1rem;
}

.ps-footer-links {
  list-style: none;
}

.ps-footer-links li {
  margin-bottom: 0.5rem;
}

.ps-footer-link {
  color: var(--muted-foreground);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s;
}

.ps-footer-link:hover {
  color: var(--foreground);
}

/* Theme Toggle */
.ps-theme-toggle {
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--foreground);
  transition: color 0.2s;
}

.ps-theme-toggle:hover {
  color: var(--muted-foreground);
}

/* Slider */
.ps-slider {
  width: 100%;
  height: 6px;
  background: var(--muted);
  outline: none;
  -webkit-appearance: none;
}

.ps-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--foreground);
  cursor: pointer;
}

.ps-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--foreground);
  cursor: pointer;
  border: none;
}

/* Badge */
.ps-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: var(--secondary);
  color: var(--secondary-foreground);
  border: 1px solid var(--border);
}

/* Responsive */
@media (max-width: 767px) {
  .ps-hero h1 {
    font-size: 2.5rem;
  }
  
  .ps-features-title {
    font-size: 2rem;
  }
  
  .ps-section {
    padding: 4rem 0;
  }
}

/* WordPress specific */
.site-header {
  padding: 0;
}

.site-content {
  /* padding-top: 4rem; */
}

.entry-content {
  max-width: none;
}

.wp-block-group {
  margin: 0;
}

/* Custom */
.page-content p {
  margin-bottom: 1rem;
}

.page-content ul,
.ps-article ul,
.ps-article ol,
.page-content ol {
  margin: 0 0 1rem 0;
  padding-left: 2.25rem;
}

.page-content code,
.ps-article code {
  background-color: #f5f5f5;
  padding: 1em;
  overflow-x: auto;
  font-family: monospace, monospace;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  white-space: pre-wrap;
  word-wrap: break-word;
  border: 1px solid #ddd;
  margin-bottom: 1rem;
  display: block;
}

.page-content h2,
.ps-article h2 {
  font-size: 1.5rem;
  line-height: 2rem;
}

.page-content h3 {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}

.page-content a,
.ps-article a {
  color: var(--brand);
}



 /* Back-to-top */
#toTop { position: fixed; bottom: 30px; right: 30px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--brand); color: var(--background); border: none; font-size: 18px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s ease, background .2s ease, color .2s ease; }
#toTop.show { opacity: .85; pointer-events: auto; }
#toTop:hover { opacity: 1; }

body.dark #toTop  {
 background: var(--foreground);
  color: var(--background);
}

/* @media (prefers-color-scheme: dark) {
  #toTop {
    background: #fff;
    color: #000;
  }
}

@media (prefers-color-scheme: light) {
  #toTop {
    background: var(accent);
    color: #fff;
  }
} */


/* Buttons */
    .btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; height: 44px; font-weight: 600; border: 1px solid transparent; background: transparent; color: var(--foreground); cursor: pointer; user-select: none; outline: none; line-height: 1; text-decoration: none; }
    .btn:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring), transparent 60%); }
    .btn-primary { background: var(--brand); color: var(--brand-foreground); border-color: var(--brand); }
    .btn-primary:hover { background: var(--brand); color: var(--brand-foreground); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand), transparent 75%); }
    .btn-outline { border-color: var(--foreground); color: var(--foreground); }
    .btn-outline:hover { background: var(--foreground); color: var(--background); }
    .btn-subtle { background: var(--brand-muted); color: hsl(215, 60%, 22%); border-color: color-mix(in oklab, var(--brand), transparent 84%); }
    .dark .btn-subtle { color: var(--brand); }

    /* Cards */
    .grid { display: grid; gap: 24px; }
    @media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 899px) { .grid-3 { grid-template-columns: 1fr; } }
    .card { background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); }
    .card .bar { height: 3px; background: var(--brand); }
    .card .content { padding: 20px; }
    .card h3 { margin: 0 0 8px; font-size: 18px; }
    .card p { margin: 0; color: var(--muted-foreground); }

    /* Feature cards */
    .feature-icon { width: 32px; height: 32px; color: var(--foreground); margin-bottom: 10px; }
    .feature-card .content { padding: 18px 20px 20px; }

    /* Hover lift effect */
    .card, .feature-card, .modem-card, .slide-card { transition: box-shadow .2s ease; }
    .card:hover, .feature-card:hover, .modem-card:hover, .slide-card:hover {
      box-shadow: 0 10px 25px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);
    }

    /* Pricing icons */
    .price-icon { width: 32px; height: 32px; margin-bottom: 10px; color: var(--foreground); }

    /* Alerts */
    .alert { border: 1px solid; padding: 14px 16px; display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
    .alert.info { background: color-mix(in oklab, var(--info), white 92%); border-color: color-mix(in oklab, var(--info), transparent 60%); color: color-mix(in oklab, var(--info), black 35%); }
    .alert.success { background: color-mix(in oklab, var(--success), white 92%); border-color: color-mix(in oklab, var(--success), transparent 60%); color: color-mix(in oklab, var(--success), black 35%); }
    .alert.warning { background: color-mix(in oklab, var(--warning), white 90%); border-color: color-mix(in oklab, var(--warning), transparent 60%); color: color-mix(in oklab, var(--warning), black 45%); }
    .alert.destructive { background: color-mix(in oklab, var(--destructive), white 90%); border-color: color-mix(in oklab, var(--destructive), transparent 60%); color: color-mix(in oklab, var(--destructive), black 40%); }
    .dark .alert.info { background: color-mix(in oklab, var(--info), black 84%); border-color: color-mix(in oklab, var(--info), transparent 75%); color: color-mix(in oklab, var(--info), white 22%); }
    .dark .alert.success { background: color-mix(in oklab, var(--success), black 84%); border-color: color-mix(in oklab, var(--success), transparent 75%); color: color-mix(in oklab, var(--success), white 22%); }
    .dark .alert.warning { background: color-mix(in oklab, var(--warning), black 84%); border-color: color-mix(in oklab, var(--warning), transparent 75%); color: color-mix(in oklab, var(--warning), white 12%); }
    .dark .alert.destructive { background: color-mix(in oklab, var(--destructive), black 84%); border-color: color-mix(in oklab, var(--destructive), transparent 75%); color: color-mix(in oklab, var(--destructive), white 18%); }

    /* Icons gallery */
    .icons-toolbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 8px 0 16px; }
    .icons-toolbar .search { display: flex; align-items: center; gap: 8px; }
    .icons-toolbar input[type="search"] { height: 36px; padding: 0 10px; border: 1px solid var(--border); background: var(--background); color: var(--foreground); outline: none; }
    .icons-toolbar input[type="search"]:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring), transparent 70%); border-color: transparent; }
    .icons-grid { display: grid; gap: 12px; }
    @media (min-width: 1200px) { .icons-grid { grid-template-columns: repeat(8, 1fr); } }
    @media (min-width: 900px) and (max-width: 1199px) { .icons-grid { grid-template-columns: repeat(6, 1fr); } }
    @media (min-width: 600px) and (max-width: 899px) { .icons-grid { grid-template-columns: repeat(4, 1fr); } }
    @media (max-width: 599px) { .icons-grid { grid-template-columns: repeat(3, 1fr); } }
    .icon-item { border: 1px solid var(--border); background: var(--card); color: var(--card-foreground); display: grid; grid-template-rows: 1fr auto; align-items: center; justify-items: center; padding: 14px 10px; }
    .icon-box { width: 28px; height: 28px; color: var(--foreground); }
    .icon-name { margin-top: 10px; font-size: 11px; color: var(--muted-foreground); text-align: center; line-height: 1.2; word-break: break-word; }

    .brand { font-weight: 700; letter-spacing: -0.02em; font-size: 20px; display: flex; flex-direction: column; align-items: flex-start; }
    .brand-em { color: var(--brand); }
    .brand-sub { margin-top: 2px; font-weight: 600; font-size: 11px; letter-spacing: 0.18em; color: var(--muted-foreground); }

        .extended-license ul {
        padding-left: 1rem;
        padding-bottom: 1rem;
        margin: 0;
    }
    .extended-license p {
        padding-bottom: 1rem;
    }

    .extended-license a {
  color: var(--brand);
}