<?php
/*
Theme Name: Silverminds LLC OnePage Pro
Author: Silverminds LLC
Version: 1.0
*/

?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?php bloginfo('name'); ?> | <?php bloginfo('description'); ?></title>
  <style>
    :root {
      --orange: #ff6a00;
      --dark: #0f172a;
      --gray: #6b7280;
      --light: #f8fafc;
      --white: #ffffff;
      --radius: 14px;
      --shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    }

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

    body {
      font-family: 'Segoe UI', sans-serif;
      background: var(--light);
      color: var(--dark);
      line-height: 1.6;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .container {
      width: min(1200px, 90%);
      margin: auto;
    }

    header {
      background: var(--white);
      border-bottom: 1px solid #e5e7eb;/*
Theme Name: Silverminds LLC
Theme URI: https://silvermindsllc.com/
Author: Silverminds LLC
Author URI: https://silvermindsllc.com/
Description: Lightweight, professional WordPress theme for Silverminds LLC (OPI/VRI & contact center services). Optimized for speed and clean B2B presentation.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: silverminds
Tags: custom-logo, custom-menu, featured-images, one-column, two-columns, full-width-template, block-styles, editor-style
*/

/* --------------------------------------------------------------------------
   Silverminds Theme — CLEAN / ORGANIZED CSS
   Structure:
   1) Design Tokens
   2) Reset / Base
   3) Layout Helpers
   4) Header + Navigation
   5) Buttons + Badges
   6) Hero
   7) Sections + Cards
   8) Content / Prose
   9) Footer
   10) WordPress Core Helpers
   11) Responsive
--------------------------------------------------------------------------- */

/* 1) DESIGN TOKENS -------------------------------------------------------- */
:root{
  /* Brand */
  --sm-navy:       #00162e;
  --sm-navy-2:     #001a33;
  --sm-orange:     #ff7a1a; /* STRONG ORANGE (replace with your exact logo HEX if needed) */
  --sm-sky:        #60dafc;

  /* UI */
  --sm-ink:        #0b1220;
  --sm-muted:      #64748b;
  --sm-bg:         #f7fafc;
  --sm-white:      #ffffff;
  --sm-border:     rgba(15, 23, 42, .12);

  /* Effects */
  --sm-shadow-sm:  0 8px 18px rgba(2, 8, 23, .10);
  --sm-shadow-md:  0 10px 25px rgba(2, 8, 23, .08);
  --sm-shadow-lg:  0 18px 44px rgba(2, 8, 23, .10);

  /* Radius / sizing */
  --sm-radius-sm:  12px;
  --sm-radius:     18px;
  --sm-radius-lg:  22px;
  --sm-max:        1180px;

  /* Typography */
  --sm-font: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* 2) RESET / BASE --------------------------------------------------------- */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }

body{
  margin:0;
  font-family: var(--sm-font);
  color: var(--sm-ink);
  background: var(--sm-bg);
  line-height: 1.6;
}

img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }

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

/* 3) LAYOUT HELPERS ------------------------------------------------------- */
.sm-container{ width: min(100% - 2rem, var(--sm-max)); margin-inline:auto; }
.sm-section{ padding: 2.75rem 0; }
.sm-section--tint{
  background: rgba(0, 22, 46, .03);
  border-top: 1px solid rgba(2,8,23,.06);
  border-bottom: 1px solid rgba(2,8,23,.06);
}

/* 4) HEADER + NAVIGATION -------------------------------------------------- */
.sm-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(90deg, var(--sm-navy), var(--sm-navy-2));
  color: var(--sm-white);
  box-shadow: 0 8px 18px rgba(2, 8, 23, .25);
}

.sm-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  padding: .9rem 0;
}

.sm-brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  min-width: 180px;
}
.sm-brand img{ width: 42px; height: 42px; object-fit: contain; }
.sm-brand__name{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 1.05rem;
  line-height: 1.1;
}
.sm-brand__tag{
  color: rgba(255,255,255,.78);
  font-size: .82rem;
  margin-top: .1rem;
}

/* Nav */
.sm-nav{ display:flex; align-items:center; gap: .75rem; }
.sm-nav ul{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  align-items:center;
  gap: .25rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.sm-nav a{
  display:inline-flex;
  align-items:center;
  padding: .55rem .75rem;
  border-radius: var(--sm-radius-sm);
  color: rgba(255,255,255,.92);
  font-weight: 650;
  font-size: .95rem;
  text-decoration:none;
}
.sm-nav a:hover{ text-decoration:none; background: rgba(96,218,252,.14); }

.sm-nav .current-menu-item > a,
.sm-nav .current_page_item > a{
  background: rgba(255,122,26,.18);
  color: var(--sm-white);
}

/* Dropdown */
.sm-nav li{ position: relative; }
.sm-nav .menu-item-has-children > a:after{
  content:"▾";
  font-size:.75rem;
  margin-left:.35rem;
  opacity:.85;
}
.sm-nav .sub-menu{
  position:absolute;
  top: calc(100% + .35rem);
  left:0;
  min-width: 240px;
  background: rgba(255,255,255,.98);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  box-shadow: var(--sm-shadow-md);
  padding: .45rem;
  display:none;
}
.sm-nav li:hover > .sub-menu,
.sm-nav li:focus-within > .sub-menu{ display:block; }

.sm-nav .sub-menu a{
  color: var(--sm-ink);
  width:100%;
  justify-content:flex-start;
  border-radius: var(--sm-radius-sm);
  padding: .55rem .7rem;
  font-weight: 650;
}
.sm-nav .sub-menu a:hover{ background: rgba(2, 8, 23, .06); }

/* Mobile toggler */
.sm-burger{
  display:none;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--sm-white);
  border-radius: var(--sm-radius-sm);
  padding: .55rem .75rem;
  font-weight: 900;
  cursor:pointer;
}

/* 5) BUTTONS + BADGES ----------------------------------------------------- */
.sm-cta{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background: var(--sm-orange);
  color: #111827;
  padding: .6rem .95rem;
  border-radius: 999px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(255,122,26,.28);
  text-decoration:none;
  white-space:nowrap;
}
.sm-cta:hover{ text-decoration:none; filter: brightness(1.02); }

.sm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding: .72rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: var(--sm-white);
  font-weight: 850;
  text-decoration:none;
  white-space:nowrap;
}
.sm-btn:hover{ text-decoration:none; background: rgba(255,255,255,.14); }

.sm-btn--primary{
  background: var(--sm-sky);
  color: #00162e;
  border-color: transparent;
  box-shadow: 0 14px 26px rgba(96,218,252,.20);
}
.sm-btn--primary:hover{ filter: brightness(1.02); }

.sm-badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-weight: 900;
  font-size: .78rem;
  letter-spacing:.08em;
  text-transform: uppercase;
  color: #0b1220;
  background: rgba(96,218,252,.18);
  border: 1px solid rgba(96,218,252,.30);
  padding: .35rem .55rem;
  border-radius: 999px;
}

/* 6) HERO ----------------------------------------------------------------- */
.sm-hero{
  background: linear-gradient(180deg, rgba(0,22,46,.96), rgba(0,26,51,.96));
  color: var(--sm-white);
  padding: 3.4rem 0 2.6rem;
  position: relative;
  overflow:hidden;
}
.sm-hero:before{
  content:"";
  position:absolute;
  inset: -40%;
  background: radial-gradient(circle at 20% 10%, rgba(96,218,252,.22), transparent 45%),
              radial-gradient(circle at 90% 30%, rgba(255,122,26,.18), transparent 40%),
              radial-gradient(circle at 40% 90%, rgba(255,255,255,.08), transparent 45%);
  transform: rotate(6deg);
  pointer-events:none;
}
.sm-hero__grid{
  position:relative;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 2rem;
  align-items:center;
}
.sm-kicker{
  color: rgba(255,255,255,.78);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .78rem;
}
.sm-h1{
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.12;
  margin: .55rem 0 .8rem;
  font-weight: 950;
  letter-spacing: -0.02em;
}
.sm-lead{
  color: rgba(255,255,255,.86);
  font-size: 1.08rem;
  margin: 0 0 1.2rem;
  max-width: 62ch;
}
.sm-hero__buttons{ display:flex; gap: .8rem; flex-wrap:wrap; align-items:center; }

.sm-hero__card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--sm-radius-lg);
  padding: 1rem;
}
.sm-metric{
  display:flex;
  gap:.85rem;
  align-items:flex-start;
  padding: .85rem;
  border-radius: var(--sm-radius);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
}
.sm-metric + .sm-metric{ margin-top: .65rem; }
.sm-metric b{ display:block; font-size: 1rem; }
.sm-metric span{ display:block; font-size: .9rem; color: rgba(255,255,255,.82); }

/* 7) SECTIONS + CARDS ------------------------------------------------------ */
.sm-section__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 1rem;
  margin-bottom: 1.1rem;
  flex-wrap: wrap;
}
.sm-h2{
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1.2;
  margin: 0;
  font-weight: 950;
  letter-spacing:-0.01em;
}
.sm-sub{ color: var(--sm-muted); max-width: 70ch; margin: .4rem 0 0; }

.sm-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.sm-card{
  background: rgba(255,255,255,.96);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  box-shadow: var(--sm-shadow-md);
  padding: 1.1rem;
}
.sm-card h3{ margin: 0 0 .35rem; font-weight: 950; font-size: 1.1rem; }
.sm-card p{ margin: 0; color: var(--sm-muted); }

/* 8) CONTENT / PROSE ------------------------------------------------------ */
.sm-content{ padding: 2rem 0 3rem; }
.sm-prose{
  background: rgba(255,255,255,.96);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  box-shadow: var(--sm-shadow-md);
  padding: 1.4rem;
}
.sm-prose h1, .sm-prose h2, .sm-prose h3{ margin-top: 1.3rem; }
.sm-prose h1:first-child, .sm-prose h2:first-child, .sm-prose h3:first-child{ margin-top: 0; }
.sm-prose a{ color: #0b5ed7; text-decoration: underline; }

/* 9) FOOTER --------------------------------------------------------------- */
.sm-footer{
  background: #0b1220;
  color: rgba(255,255,255,.86);
  padding: 2.2rem 0;
  margin-top: 2rem;
}
.sm-footer__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 1.5rem;
  align-items:start;
}
.sm-footer a{ color: rgba(255,255,255,.92); }
.sm-footer a:hover{ text-decoration: underline; }
.sm-footer__small{
  margin-top: 1rem;
  color: rgba(255,255,255,.62);
  font-size: .9rem;
}

/* 10) WORDPRESS CORE HELPERS ---------------------------------------------- */
.alignwide{ width: min(100% - 2rem, 1320px); margin-inline:auto; }
.alignfull{ width: 100vw; margin-left: calc(50% - 50vw); }

/* 11) RESPONSIVE ---------------------------------------------------------- */
@media (max-width: 980px){
  .sm-burger{ display:inline-flex; }
  .sm-hero__grid{ grid-template-columns: 1fr; }
  .sm-grid{ grid-template-columns: 1fr; }
  .sm-footer__grid{ grid-template-columns: 1fr; }

  .sm-nav{ position: relative; }
  .sm-nav ul{
    display:none;
    position:absolute;
    right:0;
    top: calc(100% + .6rem);
    width: min(92vw, 380px);
    background: rgba(255,255,255,.98);
    color: var(--sm-ink);
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius);
    box-shadow: var(--sm-shadow-md);
    padding: .55rem;
    flex-direction:column;
    align-items:stretch;
    gap: .25rem;
  }
  .sm-nav ul.is-open{ display:flex; }
  .sm-nav a{ color: var(--sm-ink); justify-content:space-between; }
  .sm-nav a:hover{ background: rgba(2, 8, 23, .06); }

  /* Dropdown on mobile: always visible inside menu */
  .sm-nav .sub-menu{
    position: static;
    display:block;
    background: transparent;
    border: 0;
    box-shadow:none;
    padding: 0 0 .25rem 0;
  }
  .sm-nav .sub-menu a{ padding-left: 1rem; }
  .sm-cta{ width:100%; justify-content:center; }
}

      padding: 1.5rem 0;
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .header-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      font-weight: 800;
      font-size: 1.5rem;
    }

    .nav {
      display: flex;
      gap: 2rem;
    }

    .nav a {
      font-weight: 600;
      color: var(--dark);
    }

    .nav a:hover {
      color: var(--orange);
    }

    .hero {
      background: linear-gradient(135deg, var(--orange), #ff8124);
      color: var(--white);
      padding: 6rem 0;
    }

    .hero h1 {
      font-size: 3rem;
      font-weight: 900;
      margin-bottom: 1rem;
    }

    .hero p {
      font-size: 1.2rem;
      max-width: 600px;
      opacity: 0.95;
    }

    .btn {
      display: inline-block;
      margin-top: 2rem;
      background: var(--dark);
      color: white;
      padding: 0.8rem 1.4rem;
      border-radius: var(--radius);
      font-weight: bold;
    }

    .btn:hover {
      background: #000;
    }

    .section {
      padding: 4rem 0;
    }

    .section h2 {
      font-size: 2rem;
      margin-bottom: 1rem;
    }

    .section .lead {
      font-size: 1.1rem;
      color: var(--gray);
      max-width: 700px;
      margin-bottom: 2rem;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.5rem;
    }

    .card {
      background: var(--white);
      padding: 2rem;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      border: 1px solid #e5e7eb;
    }

    .card h3 {
      margin-bottom: 0.5rem;
      font-size: 1.2rem;
    }

    .card p {
      color: var(--gray);
    }

    .footer {
      background: var(--dark);
      color: #cbd5f5;
      text-align: center;
      padding: 2rem 0;
      font-size: 0.9rem;
      margin-top: 4rem;
    }

    @media (max-width: 768px) {
      .header-inner {
        flex-direction: column;
        gap: 1rem;
      }

      .hero h1 {
        font-size: 2.3rem;
      }
    }
  </style>
</head>
<body <?php body_class(); ?>>

<header>
  <div class="container header-inner">
    <div class="logo"><?php bloginfo('name'); ?></div>
    <nav class="nav">
      <a href="#services">Services</a>
      <a href="#contact">Contact</a>
    </nav>
  </div>
</header>

<section class="hero">
  <div class="container">
    <h1>Fast & Reliable OPI Services</h1>
    <p>Instant over-the-phone interpretation trusted by leading healthcare and enterprise teams. 24/7 access. Certified interpreters. No delays.</p>
    <a href="#contact" class="btn">Get Started</a>
  </div>
</section>

<section class="section" id="services">
  <div class="container">
    <h2>Why Choose Silverminds</h2>
    <p class="lead">We help you break language barriers with high-speed, enterprise-grade interpretation services — anytime, anywhere.</p>
    <div class="cards">
      <div class="card">
        <h3>⚡ On-Demand Access</h3>
        <p>Connect to interpreters in under 15 seconds. 200+ languages. 24/7/365.</p>
      </div>
      <div class="card">
        <h3>🔒 Compliance-Ready</h3>
        <p>HIPAA, GDPR, and industry-standard secure protocols built-in.</p>
      </div>
      <div class="card">
        <h3>📈 Scalable Solutions</h3>
        <p>From small clinics to global enterprises — we scale with your needs.</p>
      </div>
    </div>
  </div>
</section>

<section class="section" id="contact">
  <div class="container">
    <h2>Let’s Talk</h2>
    <p class="lead">Need a quote or custom demo? Contact us directly and we’ll respond fast.</p>
    <p><strong>Email:</strong> <a href="mailto:contact@silvermindsllc.com">contact@silvermindsllc.com</a></p>
    <p><strong>Phone:</strong> <a href="tel:+1234567890">+1 (234) 567‑890</a></p>
  </div>
</section>

<footer class="footer">
  &copy; <?php echo date('Y'); ?> Silverminds LLC. All rights reserved.
</footer>

<?php wp_footer(); ?>
</body>
</html>
