/*
Theme Name: ROIal Labs
Theme URI: https://roiallabs.com
Author: ROIal Labs
Description: ROIal Labs performance marketing website. Pure Performance.
Version: 1.3.15
Requires at least: 6.0
Requires PHP: 7.4
License: All rights reserved
Text Domain: roial-labs
*/

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #F7F4EC; }
img { max-width: 100%; }
a { color: #0F6B4E; }
a:hover { color: #0E5A42; }
:focus-visible { outline: 2px solid #12805C; outline-offset: 2px; }
[hidden] { display: none !important; }
@keyframes roialMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Floating WhatsApp button */
.roial-wa { position: fixed; right: 20px; bottom: 20px; z-index: 45; width: 56px; height: 56px; border-radius: 999px; background: #25D366; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,0.2); transition: transform .2s; }
.roial-wa:hover { transform: scale(1.06); }
/* Sticky header + mobile menu */
.roial-bar { position: sticky; top: 0; z-index: 100; background: rgba(247, 244, 236, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.roial-bar.is-scrolled { border-bottom-color: #EAE5D8; }
.admin-bar .roial-bar { top: 32px; }
@media (max-width: 782px) { .admin-bar .roial-bar { top: 46px; } }
@media (max-width: 600px) { .admin-bar .roial-bar { top: 0; } }
.roial-burger { display: none; }
@media (max-width: 1024px) {
  .roial-header { flex-wrap: wrap !important; padding-top: 12px !important; padding-bottom: 12px !important; }
  .roial-burger { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 44px; height: 44px; padding: 0; border-radius: 999px; border: 1px solid #EAE5D8; background: #FFFFFF; cursor: pointer; }
  .roial-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #0B3D2E; transition: transform .2s, opacity .2s; }
  .roial-header.is-open .roial-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .roial-header.is-open .roial-burger span:nth-child(2) { opacity: 0; }
  .roial-header.is-open .roial-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .roial-nav { display: none !important; order: 5; width: 100%; flex-direction: column; align-items: stretch !important; border-radius: 20px !important; padding: 8px !important; }
  .roial-header.is-open .roial-nav { display: flex !important; }
  .roial-nav a { padding: 12px 16px !important; font-size: 16px; }
  .roial-cta { margin-left: auto; }
}
@media (max-width: 600px) {
  .roial-header img { height: 40px !important; }
  .roial-cta { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .marq { animation: none !important; } html { scroll-behavior: auto; } }

/* Theme toggle */
.roial-logo-l { display: none !important; }
.roial-theme { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 999px; border: 1px solid #EAE5D8; background: #FFFFFF; color: #0B3D2E; cursor: pointer; }
.roial-theme .i-sun { display: none; }
html[data-theme="dark"] .roial-theme { color: #C9A24B; }
html[data-theme="dark"] .roial-theme .i-sun { display: block; }
html[data-theme="dark"] .roial-theme .i-moon { display: none; }
.roial-tools { display: inline-flex; align-items: center; gap: 8px; }
/* Dark mode */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body { background: #0F1513 !important; }
html[data-theme="dark"] [style*="overflow-x: clip; background: #F7F4EC"] { background-color: #0F1513 !important; color: #ECE8DD !important; }
html[data-theme="dark"] [style*="background: #FFFFFF"] { background-color: #17211D !important; }
html[data-theme="dark"] [style*="background: #F7F4EC"] { background-color: #17211D !important; }
html[data-theme="dark"] [style*="background: #E1F2EA"] { background-color: #12291F !important; }
html[data-theme="dark"] [style*="background: #F1F8F4"] { background-color: #12291F !important; }
html[data-theme="dark"] [style*="background: #EAE5D8"] { background-color: #22302A !important; }
html[data-theme="dark"] [style*="background: #F7EFDD"] { background-color: #2A2414 !important; }
html[data-theme="dark"] [style*="color: #14181A"]:not([style*="background: #C9A24B"]) { color: #ECE8DD !important; }
html[data-theme="dark"] [style*="color: #0B3D2E"]:not([style*="background: #C9A24B"]) { color: #DCEFE5 !important; }
html[data-theme="dark"] [style*="color: #6B675D"]:not([style*="background: #C9A24B"]) { color: #A9A597 !important; }
html[data-theme="dark"] [style*="color: #0F6B4E"]:not([style*="background: #C9A24B"]) { color: #6FD0A4 !important; }
html[data-theme="dark"] [style*="color: #8A6B22"]:not([style*="background: #C9A24B"]) { color: #D6B66F !important; }
html[data-theme="dark"] [style*="color: #4A3810"]:not([style*="background: #C9A24B"]) { color: #E8D3A0 !important; }
html[data-theme="dark"] [style*="solid #EAE5D8"] { border-color: #2B3A33 !important; }
html[data-theme="dark"] [style*="border-bottom: 1px solid #EAE5D8"] { border-bottom-color: #2B3A33 !important; }
html[data-theme="dark"] [style*="border-top: 1px solid #EAE5D8"] { border-top-color: #2B3A33 !important; }
html[data-theme="dark"] [style*="solid #0B3D2E"] { border-color: #8FCDB4 !important; }
html[data-theme="dark"] [style*="border-top: 2px solid #0B3D2E"] { border-top-color: #8FCDB4 !important; }
html[data-theme="dark"] a { color: #6FD0A4; }
html[data-theme="dark"] a:hover { color: #8FE0BA; }
html[data-theme="dark"] .roial-bar { background: rgba(15, 21, 19, 0.92); }
html[data-theme="dark"] .roial-bar.is-scrolled { border-bottom-color: #2B3A33; }
html[data-theme="dark"] .roial-burger, .roial-theme { background: #17211D; border-color: #2B3A33; }
html[data-theme="dark"] .roial-burger span { background: #DCEFE5; }
html[data-theme="dark"] .roial-logo-d { display: none !important; }
html[data-theme="dark"] .roial-logo-l { display: block !important; }
html[data-theme="dark"] input, select, textarea { color-scheme: dark; }
html[data-theme="dark"] input[type=text], input[type=email], input[type=tel], input[type=url], textarea { -webkit-appearance: none; appearance: none; background-color: #17211D !important; color: #ECE8DD !important; border-color: #3A4A43 !important; }
html[data-theme="dark"] svg[stroke="#0B3D2E"] { stroke: #DCEFE5; }
html[data-theme="dark"] svg [stroke="#0B3D2E"] { stroke: #DCEFE5; }
html[data-theme="dark"] [style*="overflow-x: clip; background: #F7F4EC"] { background-color: #0F1513 !important; color: #ECE8DD !important; }

/* ==========================================================================
   Responsive layer (v1.3.8)
   Pages use inline styles, so small-screen rules override them with !important.
   ========================================================================== */

/* Tablet and phone: one-row header, menu drops down under it */
@media (max-width: 1024px) {
  .roial-header { position: relative; flex-wrap: nowrap !important; align-items: center !important; }
  .roial-nav {
    position: absolute !important;
    top: calc(100% - 4px);
    left: 16px;
    right: 16px;
    z-index: 110;
    margin: 0 !important;
    width: auto !important;
    background: #FFFFFF;
    box-shadow: 0 18px 40px rgba(11, 61, 46, 0.16);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
  .roial-nav a { display: block; }
  html[data-theme="dark"] .roial-nav { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); }
}

/* Phones */
@media (max-width: 768px) {
  /* Section spacing: desktop values are too large on a small screen */
  [style*="padding: 112px 24px 0"] { padding-top: 56px !important; }
  [style*="padding: 96px 24px 0"] { padding-top: 56px !important; }
  [style*="padding: 96px 24px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  [style*="padding: 72px 24px 0"] { padding-top: 44px !important; }
  [style*="padding: 64px 24px 0"] { padding-top: 40px !important; }
  [style*="padding: 56px 24px 0"] { padding-top: 36px !important; }
  [style*="padding: 40px 24px 0"] { padding-top: 28px !important; }
  [style*="padding: 72px 24px 32px"] { padding: 48px 20px 28px !important; }
  [style*="margin-top: 112px"] { margin-top: 64px !important; }
  [style*="margin-top: 96px"] { margin-top: 56px !important; }
  [style*="margin-top: 48px"] { margin-top: 32px !important; }
  [style*="margin-top: 40px"] { margin-top: 28px !important; }
  /* Footer blocks and grids collapse to one column */
  footer [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

/* Small phones */
@media (max-width: 480px) {
  .roial-header { padding-left: 16px !important; padding-right: 16px !important; }
  .roial-header img { height: 40px !important; }
  .roial-theme, .roial-burger { width: 40px; height: 40px; }
  .roial-nav { left: 12px; right: 12px; }
  [style*="padding: 0 24px"], [style*="padding: 112px 24px"], [style*="padding: 96px 24px"],
  [style*="padding: 72px 24px"], [style*="padding: 64px 24px"], [style*="max-width: 1240px; margin: 0 auto; padding"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Keep the contact form card compact */
  #form form { padding: 22px 18px !important; }
  #form form > div[style*="grid-column"] h2 { font-size: 26px !important; }
  /* Hero and section titles: give long words room */
  h1, h2 { overflow-wrap: break-word; }
}

/* Phones: grids, flex columns and labels must shrink to the screen (320px and up) */
@media (max-width: 600px) {
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="grid-template-columns"] > * { min-width: 0 !important; max-width: 100%; }
  [style*="flex:"], [style*="flex-basis"] { min-width: 0 !important; max-width: 100% !important; flex-basis: auto !important; }
  [style*="flex: 1 1"], [style*="flex: 999"] { flex: 1 1 100% !important; }
  /* Small uppercase labels and pills wrap instead of forcing width */
  [style*="align-self: flex-start"][style*="border-radius: 999px"] { max-width: 100%; white-space: normal !important; line-height: 1.4; }
  [style*="letter-spacing: 0.14em"], [style*="letter-spacing: 0.08em"] { white-space: normal; }
  /* Full-width card and form rows */
  [style*="min-width: 0"] { max-width: 100%; }
  img { height: auto; }
}

@media (max-width: 360px) {
  /* Very narrow phones: slightly smaller gutters and headings */
  [style*="padding: clamp(24px, 4vw, 48px)"] { padding: 20px !important; }
  [style*="padding: clamp(24px, 4vw, 40px)"] { padding: 20px !important; }
  [style*="padding: 0 24px"] { padding-left: 14px !important; padding-right: 14px !important; }
}

/* Article body (posts written in the editor) */
.roial-content > p { margin: 20px 0 0; }
.roial-content > p:first-child { margin-top: 0; }
.roial-content h2 { margin: 48px 0 0; font-family: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif; font-weight: 700; font-size: 32px; line-height: 1.15; letter-spacing: -0.03em; color: #0B3D2E; }
.roial-content h3 { margin: 32px 0 0; font-family: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif; font-weight: 700; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; color: #0B3D2E; }
.roial-content ul { margin: 20px 0 0; padding: 0; list-style: none; }
.roial-content li { position: relative; padding-left: 28px; margin-top: 12px; }
.roial-content li::before { content: ""; position: absolute; left: 4px; top: 0.6em; width: 9px; height: 9px; border-radius: 999px; background: #0F6B4E; }
.roial-content em { color: #6B675D; font-size: 15px; }
.roial-content a { color: #0F6B4E; font-weight: 600; }
html[data-theme="dark"] .roial-content h2, html[data-theme="dark"] .roial-content h3 { color: #DCEFE5; }
html[data-theme="dark"] .roial-content li::before { background: #6FD0A4; }
html[data-theme="dark"] .roial-content em { color: #A9A597; }