/*
Theme Name: Reflex Peptides
Theme URI: https://reflexpeptides.com
Author: Reflex Peptides
Author URI: https://reflexpeptides.com
Description: A minimal, fast, Elementor-compatible WordPress theme built for Reflex Peptides. Designed as a clean canvas — Elementor (or the block editor) controls headers, footers, and all page content. WooCommerce-ready. Pairs perfectly with Elementor Pro Theme Builder.
Version: 1.0.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: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: reflex-peptides
Tags: one-column, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, full-site-editing, elementor, woocommerce
*/

/* =========================================================
   1. BRAND TOKENS
   ========================================================= */
:root {
    --rp-navy:        #1f2d3d;
    --rp-navy-soft:   #34495e;
    --rp-blue-gray:   #7d97a8;
    --rp-blue-light:  #a4b8c6;
    --rp-bg:          #ffffff;
    --rp-bg-alt:      #f7fafc;
    --rp-text:        #2d3748;
    --rp-text-muted:  #6b7c8c;
    --rp-border:      #e2e8f0;
    --rp-accent:      #2b6cb0;

    --rp-font-body:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --rp-font-head:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --rp-font-mono:   'IBM Plex Mono', Menlo, Monaco, 'Courier New', monospace;

    --rp-radius:      6px;
    --rp-container:   1240px;
    --rp-gutter:      1.5rem;
}

/* =========================================================
   2. RESET / BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--rp-font-body);
    font-size: 17px;
    line-height: 1.65;
    color: var(--rp-text);
    background: var(--rp-bg);
}

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }

a { color: var(--rp-accent); text-decoration: none; transition: color .15s ease; }
a:hover, a:focus { color: var(--rp-navy); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--rp-font-head);
    color: var(--rp-navy);
    line-height: 1.25;
    margin: 0 0 0.5em;
    font-weight: 700;
}
h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); letter-spacing: -0.015em; }
h3 { font-size: clamp(1.25rem, 2.25vw, 1.6rem); }
h4 { font-size: 1.2rem; }

p { margin: 0 0 1em; }

hr { border: 0; height: 1px; background: var(--rp-border); margin: 2rem 0; }

blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--rp-blue-gray);
    color: var(--rp-text-muted);
    font-style: italic;
    background: var(--rp-bg-alt);
}

/* =========================================================
   3. LAYOUT
   ========================================================= */
.rp-container {
    width: 100%;
    max-width: var(--rp-container);
    margin: 0 auto;
    padding: 0 var(--rp-gutter);
}

.rp-site { display: flex; flex-direction: column; min-height: 100vh; }
.rp-site-content { flex: 1 0 auto; }

/* Default fallback header/footer (overridden when Elementor Theme Builder is used) */
.rp-site-header {
    background: #fff;
    border-bottom: 1px solid var(--rp-border);
    padding: 1.25rem 0;
}
.rp-site-header__inner {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.rp-site-branding { display: flex; align-items: center; gap: 0.75rem; }
.rp-site-branding a { color: var(--rp-navy); font-weight: 700; letter-spacing: 0.04em; }
.rp-site-branding img { max-height: 48px; width: auto; }

.rp-nav ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.rp-nav a { color: var(--rp-navy); font-weight: 500; }
.rp-nav a:hover { color: var(--rp-accent); text-decoration: none; }

.rp-site-footer {
    background: var(--rp-navy);
    color: #cbd5e0;
    padding: 2.5rem 0;
    margin-top: 4rem;
}
.rp-site-footer a { color: #cbd5e0; }
.rp-site-footer a:hover { color: #fff; }
.rp-site-footer__inner { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: center; }
.rp-site-footer__copy { font-size: 0.9rem; opacity: 0.8; }

/* =========================================================
   4. CONTENT / ARTICLE
   ========================================================= */
.rp-entry { padding: 3rem 0; }
.rp-entry-title { margin-bottom: 1rem; }
.rp-entry-meta { color: var(--rp-text-muted); font-size: 0.9rem; margin-bottom: 2rem; }
.rp-entry-content > * + * { margin-top: 1rem; }

/* =========================================================
   5. BUTTONS / FORMS
   ========================================================= */
.button, .wp-block-button__link, button, input[type="submit"], .rp-btn {
    display: inline-block;
    background: var(--rp-navy);
    color: #fff;
    border: 0;
    padding: 0.75rem 1.5rem;
    border-radius: var(--rp-radius);
    font-weight: 600;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}
.button:hover, .wp-block-button__link:hover, button:hover, input[type="submit"]:hover, .rp-btn:hover {
    background: var(--rp-accent);
    color: #fff;
    text-decoration: none;
}

input[type="text"], input[type="email"], input[type="search"], input[type="url"],
input[type="password"], input[type="tel"], textarea, select {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--rp-border);
    border-radius: var(--rp-radius);
    font-family: inherit;
    font-size: 1rem;
    background: #fff;
    color: var(--rp-text);
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--rp-accent);
    box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.15);
}

/* =========================================================
   6. ALIGNMENT (WordPress core)
   ========================================================= */
.alignleft  { float: left;  margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin: 1rem auto; }
.alignwide  { max-width: calc(var(--rp-container) + 200px); margin-left: auto; margin-right: auto; }
.alignfull  { width: 100vw; margin-left: calc(50% - 50vw); max-width: none; }

.screen-reader-text {
    border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
    height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
    word-wrap: normal !important;
}

/* =========================================================
   7. ELEMENTOR COMPATIBILITY
   When Elementor Theme Builder takes over header/footer/page,
   the fallback styles above stay out of the way.
   ========================================================= */
.elementor-section { box-sizing: border-box; }
.elementor-template-canvas .rp-site-header,
.elementor-template-canvas .rp-site-footer { display: none; }

/* =========================================================
   8. WOOCOMMERCE LIGHT TOUCHES
   ========================================================= */
.woocommerce ul.products li.product .price { color: var(--rp-navy); font-weight: 700; }
.woocommerce span.onsale { background: var(--rp-accent); }
.woocommerce-message, .woocommerce-info { border-top-color: var(--rp-accent); }

/* =========================================================
   9. RESPONSIVE
   ========================================================= */
@media (max-width: 768px) {
    .rp-nav ul { gap: 1rem; }
    .rp-site-footer__inner { flex-direction: column; text-align: center; }
}