/*
Theme Name: Autotek
Theme URI: https://autotek.co.za
Author: Autotek
Description: Brochure theme for Auto Tech Electronics (autotek.co.za) — auto electrical diagnosis, repairs and vehicle parts. Block theme, WooCommerce-ready.
Version: 1.1.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: autotek
*/

/* --- Base polish --- */
html { scroll-behavior: smooth; }
a { transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
.wp-block-button__link { font-weight: 700; letter-spacing: .01em; }
.is-style-outline .wp-block-button__link { border-width: 2px; }

/* --- Header --- */
.at-header { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(140%) blur(6px); }
.at-header .wp-block-navigation a { font-weight: 600; }
.at-logo { display:flex; align-items:center; text-decoration:none; }
.at-logo img { height: 62px; width: auto; display:block; }
@media (max-width: 600px) { .at-logo img { height: 48px; } }
.at-logo-footer { display:inline-block; background:#fff; border-radius: 12px; padding: .6rem .9rem; margin-bottom: .9rem; }
.at-logo-footer img { height: 70px; }

/* --- Hero --- */
.at-hero { position: relative; overflow: hidden; }
.at-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 80% at 85% 20%, rgba(28,198,255,.22) 0%, rgba(28,198,255,0) 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px);
}
.at-hero > * { position: relative; }
.at-eyebrow { display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color: var(--wp--preset--color--cyan); border:1px solid rgba(28,198,255,.5); padding:.35rem .7rem; border-radius:999px; }

/* --- Cards --- */
.at-card { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--line);
  border-radius: 14px; padding: 1.5rem; height: 100%; box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: transform .15s ease, box-shadow .15s ease; }
.at-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,23,42,.08); }
.at-card .at-icon { width: 44px; height: 44px; border-radius: 10px; display:grid; place-items:center;
  background: var(--wp--preset--color--accent-soft); color: var(--wp--preset--color--accent-deep); margin-bottom: .9rem; }
.at-card .at-icon svg { width: 24px; height: 24px; }
.at-card h3 { margin: 0 0 .4rem; font-size: 1.1rem; }
.at-card p { margin: 0; color: var(--wp--preset--color--muted); }
.at-card-dark { background: var(--wp--preset--color--ink-2); border-color: rgba(255,255,255,.08); }
.at-card-dark h3, .at-card-dark p { color: var(--wp--preset--color--base); }
.at-card-dark p { opacity: .8; }

/* --- Steps --- */
.at-step-num { font-weight: 800; font-size: 2rem; line-height:1; color: var(--wp--preset--color--accent); }

/* --- Stripe accent --- */
.at-stripe { height: 5px; background: linear-gradient(90deg, var(--wp--preset--color--ink) 0%, var(--wp--preset--color--accent) 55%, var(--wp--preset--color--cyan) 100%); }

/* --- Footer --- */
.at-footer a { text-decoration: none; }
.at-footer a:hover { color: var(--wp--preset--color--cyan); }

/* --- Floating WhatsApp button --- */
.at-wa {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: flex; align-items: center; gap: .55rem;
  background: #25D366; color: #fff !important; text-decoration: none;
  padding: .7rem 1rem .7rem .8rem; border-radius: 999px; font-weight: 700;
  box-shadow: 0 8px 24px rgba(37,211,102,.4); transition: transform .15s ease, box-shadow .15s ease;
}
.at-wa:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(37,211,102,.5); color:#fff; }
.at-wa svg { width: 26px; height: 26px; flex: none; }
@media (max-width: 600px) { .at-wa span { display: none; } .at-wa { padding: .75rem; } }

/* --- Contact list --- */
.at-contact-list { list-style: none; padding: 0; margin: 0; }
.at-contact-list li { display:flex; gap:.75rem; align-items:flex-start; padding:.6rem 0; border-bottom:1px solid var(--wp--preset--color--line); }
.at-contact-list li:last-child { border-bottom: 0; }
.at-contact-list svg { width: 22px; height: 22px; flex:none; color: var(--wp--preset--color--accent-deep); margin-top:.1rem; }
.at-contact-list a { text-decoration: none; font-weight: 600; }

/* --- Misc --- */
.at-tag { display:inline-block; font-size:.75rem; font-weight:700; padding:.2rem .55rem; border-radius:6px; background: var(--wp--preset--color--accent-soft); color: var(--wp--preset--color--accent-deep); }
.at-muted { color: var(--wp--preset--color--muted); }
.wp-block-image img { border-radius: 14px; }

/* WooCommerce readiness (light touch) */
.woocommerce ul.products li.product .button { background: var(--wp--preset--color--ink); color: #fff; border-radius: 8px; }

/* --- Layout fixes --- */
.wp-site-blocks > * + * { margin-block-start: 0; }
main > .at-section + .at-section { margin-block-start: 0; }
.at-footer .wp-block-page-list, .at-footer .wp-block-page-list li { list-style: none; padding-left: 0; margin-left: 0; }
.at-footer .wp-block-page-list li { margin-bottom: .35rem; }
.at-footer .wp-block-page-list a { color: #e6eaf0; }

/* Root side padding */
body { --wp--style--root--padding-left: clamp(1rem, 4vw, 2.5rem); --wp--style--root--padding-right: clamp(1rem, 4vw, 2.5rem); }

/* Footer headings in cyan, outline buttons on dark */
.at-footer h4 { color: var(--wp--preset--color--cyan) !important; }
.has-ink-background-color .is-style-outline .wp-block-button__link { color:#fff; border-color: rgba(255,255,255,.6); }
.has-ink-background-color .is-style-outline .wp-block-button__link:hover { background:#fff; color: var(--wp--preset--color--ink); }