/*
Theme Name: NextCloud MSP
Theme URI: https://example.com/
Author: NextCloud
Author URI: https://example.com/
Description: A lightweight, modern WordPress theme for Managed Service Providers. Uses a clean layout and a blue–purple palette extracted from the NextCloud logo. Fully supports the block editor.
Version: 1.0.0
Tested up to: 6.6
Requires at least: 5.9
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: nextcloud-msp
*/

/* CSS Variables — brand palette */
:root {
  --nc-primary: #259EFD;
  --nc-accent: #74CEFE;
  --nc-secondary: #B193FC;
  --nc-bg-soft: #F1F3FE;
  --nc-bg-muted: #D3D8FD;
  --nc-text: #0f172a;
  --nc-muted: #475569;
  --nc-radius: 14px;
  --nc-container: 1200px;
}

/* Base Reset */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--nc-text);
  background: #ffffff;
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

a { color: var(--nc-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.btn {
  display: inline-block; padding: .75rem 1rem; border-radius: var(--nc-radius);
  background: linear-gradient(135deg, var(--nc-primary), var(--nc-secondary));
  color: white; font-weight: 600; border: none;
}
.btn:hover { filter: brightness(1.05); text-decoration: none; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid #eef2ff;
}
.brand { display:flex; align-items:center; gap:.75rem; padding:.75rem 0; }
.brand img { width:40px; height:40px; border-radius: 10px; }
.brand .title { font-weight:800; font-size:1.25rem; background: linear-gradient(90deg, var(--nc-primary), var(--nc-secondary)); -webkit-background-clip:text; color: transparent; }

nav.primary { display:flex; gap:1rem; flex-wrap: wrap; }
nav.primary a { padding:.5rem .75rem; border-radius: 10px; font-weight:600; color: var(--nc-muted); }
nav.primary a:hover, nav.primary .current-menu-item > a { background: var(--nc-bg-soft); color:#0b1220; }

/* Hero */
.hero { background: radial-gradient(1200px 400px at 10% -10%, var(--nc-bg-soft), transparent 60%), linear-gradient(135deg, #fff, var(--nc-bg-soft));
  border-bottom: 1px solid #eef2ff; }
.hero .inner { padding: 4rem 0 2rem; }
.hero h1 { font-size: clamp(2rem, 1rem + 4vw, 3rem); margin: 0 0 .5rem; }
.hero p { color: var(--nc-muted); max-width: 60ch; }

/* Cards / content */
.cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.card { background:#fff; border:1px solid #eef2ff; border-radius: var(--nc-radius); padding:1rem; box-shadow: 0 2px 6px rgba(0,0,0,.03); }
.card h3 { margin-top:0; }

/* Footer */
.site-footer { margin-top: 3rem; background: linear-gradient(180deg, #fff, var(--nc-bg-soft)); border-top:1px solid #eef2ff; }
.site-footer .inner { padding: 2rem 0; color: var(--nc-muted); }

/* Gutenberg tweaks */
.wp-block-button__link { background: linear-gradient(135deg, var(--nc-primary), var(--nc-secondary)); border-radius: var(--nc-radius); }
.wp-block-quote { border-left: 4px solid var(--nc-secondary); padding-left: 1rem; color: var(--nc-muted); }

/* Utility */
.section { padding: 2rem 0; }
.badge { display:inline-block; padding:.35rem .6rem; border-radius:999px; background: var(--nc-bg-muted); color:#1e293b; font-weight:700; }
.gradient-text { background: linear-gradient(90deg, var(--nc-primary), var(--nc-secondary)); -webkit-background-clip:text; color: transparent; }



/* =====================
   Dark mode (prefers + toggle)
===================== */
@media (prefers-color-scheme: dark) {
  :root {
    --nc-text: #e5e7eb;
    --nc-muted: #9ca3af;
    --nc-bg-soft: #0b1220;
    --nc-bg-muted: #111827;
    background: #0b1220;
  }
  body { background:#0b1220; }
  .card { background:#0f172a; border-color:#1f2937; }
  .site-header { background: rgba(17,24,39,.7); border-bottom-color:#1f2937; }
  .site-footer { background: linear-gradient(180deg, #0b1220, #0f172a); border-top-color:#1f2937; }
}
/* Manual toggle via .dark on html */
html.dark :root, html.dark body { background:#0b1220; color: var(--nc-text); }
html.dark .card { background:#0f172a; border-color:#1f2937; }
html.dark .site-header { background: rgba(17,24,39,.7); border-bottom-color:#1f2937; }
html.dark .site-footer { background: linear-gradient(180deg, #0b1220, #0f172a); border-top-color:#1f2937; }
html.dark nav.primary a { color: var(--nc-muted); }
html.dark .wp-block-quote { color: var(--nc-muted); border-left-color: var(--nc-secondary); }

/* Toggle button */
.theme-toggle { margin-left:auto; display:inline-flex; gap:.5rem; align-items:center; padding:.4rem .6rem; border-radius:12px; border:1px solid #e5e7eb; }
html.dark .theme-toggle { border-color:#1f2937; color:#e5e7eb; }
.theme-toggle button { background:none; border:none; cursor:pointer; font-weight:700; }

/* Contact Form 7 basic styling */
.wpcf7 form { display:grid; gap:.75rem; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
  width:100%; padding:.7rem .8rem; border-radius:12px;
  border:1px solid #e5e7eb; background:#fff; color:#0f172a;
}
html.dark .wpcf7 input[type="text"],
html.dark .wpcf7 input[type="email"],
html.dark .wpcf7 input[type="tel"],
html.dark .wpcf7 textarea,
html.dark .wpcf7 select {
  border-color:#1f2937; background:#0f172a; color:#e5e7eb;
}
.wpcf7 input[type="submit"] {
  appearance:none;
  padding:.75rem 1rem; border-radius:14px; border:none; color:#fff; font-weight:700;
  background: linear-gradient(135deg, var(--nc-primary), var(--nc-secondary));
}
.wpcf7-spinner { margin-left:.5rem; }

/* Services page sections */
.services-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:1rem; }
.service { padding:1rem; border:1px solid #eef2ff; border-radius: var(--nc-radius); background:#fff; }
html.dark .service { background:#0f172a; border-color:#1f2937; }
.service h3 { margin:0 0 .25rem; }
.service ul { margin:.25rem 0 0 1.1rem; }