/*
Theme Name: Circuit Hosting
Theme URI: https://circuithosting.com
Author: Circuit Hosting
Author URI: https://circuithosting.com
Description: A block theme (Site Editor / Gutenberg) for a game server hosting brand whose USP is connecting server management with paid, live in-game events. Purple/yellow palette, sharp cut-corner shapes, no rounded corners. Every section on the front page is a normal, editable block — use the block inserter's "Circuit Hosting" pattern category to add more feature cards, pricing tiers, or connection steps.
Version: 2.0.0
Requires at least: 6.4
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: circuit-hosting
*/

/* Brand-wide safety net: nothing gets rounded corners, ever — even
   blocks/plugins added later that default to rounded styles. */
*, *::before, *::after { border-radius: 0 !important; }

body { -webkit-font-smoothing: antialiased; }

/* ---- cut-corner block style variation (available on Group + Button
   from the block toolbar, so new sections/buttons can match the brand
   without any custom CSS) ---- */
.wp-block-group.is-style-circuit-cut {
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.wp-block-button__link.is-style-circuit-cut {
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

/* ---- sticky header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(21, 3, 41, .92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--wp--preset--color--purple-line);
}
.site-header .wp-block-site-title a { text-decoration: none; }

/* ---- hero background + decorative console mockup (Custom HTML block) ---- */
.hero-section {
  background:
    repeating-linear-gradient(0deg, rgba(146,87,230,.08) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(146,87,230,.08) 0 1px, transparent 1px 48px),
    radial-gradient(circle at 80% 10%, rgba(246,201,14,.12), transparent 45%),
    var(--wp--preset--color--purple-950);
  border-bottom: 1px solid var(--wp--preset--color--purple-line);
}
.console-panel {
  background: var(--wp--preset--color--purple-900);
  border: 1px solid var(--wp--preset--color--purple-line);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 13px;
}
.console-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--wp--preset--color--purple-800);
  border-bottom: 1px solid var(--wp--preset--color--purple-line);
}
.console-titlebar i { width: 10px; height: 10px; background: var(--wp--preset--color--text-faint); display: block; }
.console-titlebar i:first-child { background: var(--wp--preset--color--yellow-400); }
.console-titlebar span { margin-left: 8px; color: var(--wp--preset--color--text-faint); font-size: 12px; }
.console-body { padding: 18px; color: var(--wp--preset--color--text-soft); }
.console-body .line { margin-bottom: 8px; }
.console-body .ok { color: var(--wp--preset--color--yellow-300); }
.console-body .prompt { color: var(--wp--preset--color--purple-500); }
.console-bars { display: flex; gap: 6px; align-items: flex-end; height: 54px; margin: 0; padding: 0 18px 18px; list-style: none; }
.console-bars li { flex: 1; background: linear-gradient(180deg, var(--wp--preset--color--yellow-400), var(--wp--preset--color--purple-500)); }

/* ---- connection / USP columns ---- */
.connection-card { background: var(--wp--preset--color--purple-950); border: 1px solid var(--wp--preset--color--purple-line); padding: 36px 30px; height: 100%; }
.connection-card .step-number { font-family: var(--wp--preset--font-family--heading); color: var(--wp--preset--color--purple-500); font-size: 14px; font-weight: 700; letter-spacing: .1em; }

/* ---- feature cards ---- */
.feature-card { background: var(--wp--preset--color--purple-900); border: 1px solid var(--wp--preset--color--purple-line); padding: 28px 26px; height: 100%; }

/* ---- pricing tiers ---- */
.plan-card { background: var(--wp--preset--color--purple-900); border: 1px solid var(--wp--preset--color--purple-line); padding: 32px 26px; height: 100%; position: relative; }
.plan-card.is-popular { border-color: var(--wp--preset--color--yellow-400); background: var(--wp--preset--color--purple-800); }
.plan-tag {
  position: absolute; top: 0; right: 26px; transform: translateY(-50%);
  background: var(--wp--preset--color--yellow-400) !important; color: var(--wp--preset--color--ink) !important;
  font-family: var(--wp--preset--font-family--heading); font-size: 11px !important; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; display: inline-block;
}
.plan-card .plan-price { font-family: var(--wp--preset--font-family--heading); font-size: 36px; color: var(--wp--preset--color--yellow-400); }

/* ---- CTA banner ---- */
.cta-banner {
  background: repeating-linear-gradient(-45deg, var(--wp--preset--color--purple-800) 0 22px, var(--wp--preset--color--purple-700) 22px 44px);
  border-top: 1px solid var(--wp--preset--color--purple-line);
  border-bottom: 1px solid var(--wp--preset--color--purple-line);
}
.cta-banner-inner { background: var(--wp--preset--color--purple-950); border: 1px solid var(--wp--preset--color--yellow-400); max-width: 760px; margin: 0 auto; }

/* ---- contact form (rendered via [circuit_contact_form] shortcode) ---- */
.circuit-contact-form { background: var(--wp--preset--color--purple-950); border: 1px solid var(--wp--preset--color--purple-line); padding: 32px; }
.circuit-contact-form .form-field { margin-bottom: 18px; }
.circuit-contact-form label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--wp--preset--color--text-faint); margin-bottom: 8px; font-weight: 600; }
.circuit-contact-form input, .circuit-contact-form select, .circuit-contact-form textarea {
  width: 100%; background: var(--wp--preset--color--purple-950); border: 1px solid var(--wp--preset--color--purple-line);
  color: var(--wp--preset--color--paper); padding: 13px 14px; font-size: 14px; font-family: var(--wp--preset--font-family--body);
}
.circuit-contact-form input:focus, .circuit-contact-form select:focus, .circuit-contact-form textarea:focus { outline: none; border-color: var(--wp--preset--color--yellow-400); }
.circuit-contact-form textarea { resize: vertical; min-height: 110px; }
.circuit-contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.circuit-contact-form .form-note { font-size: 12px; color: var(--wp--preset--color--text-faint); margin-top: 14px; }
.circuit-contact-form .form-success { background: var(--wp--preset--color--purple-800); border: 1px solid var(--wp--preset--color--yellow-400); padding: 14px 16px; font-size: 14px; color: var(--wp--preset--color--yellow-300); margin-bottom: 18px; }
.circuit-contact-form .form-error { background: var(--wp--preset--color--purple-800); border: 1px solid #ff5c5c; padding: 14px 16px; font-size: 14px; color: #ff5c5c; margin-bottom: 18px; }

@media (max-width: 720px) {
  .circuit-contact-form .form-row { grid-template-columns: 1fr; }
  .plan-tag { right: 16px; }
}