/*
Theme Name:   Roametik Child
Theme URI:    https://roametik.com
Description:  Blocksy child theme for Roametik — gear for people who work from anywhere. Carries the brand design tokens (colors, type, radius) on top of Blocksy.
Author:       Roametik
Template:     blocksy
Version:      1.0.0
Text Domain:  roametik-child
*/

/* ==========================================================================
   Roametik brand design tokens — ported 1:1 from the prototype style.css.
   Most colors/fonts are also set in the Blocksy Customizer; these variables
   are here so custom blocks & overrides can reuse the exact brand palette.
   ========================================================================== */

:root {
  /* Brand palette — "calm productivity" */
  --emerald:        #0e6b5c;   /* primary brand */
  --emerald-strong: #0a5346;
  --emerald-soft:   #e6f2ef;
  --sand:           #e9ddc7;   /* warm accent */
  --sand-soft:      #f6f0e4;
  --accent:         #0e6b5c;   /* highlight / sale — emerald (orange removed) */

  /* Neutrals */
  --paper:   #fbfaf7;          /* page background */
  --surface: #ffffff;
  --ink:     #16201d;          /* headings / strong text */
  --body:    #3c4a46;          /* body text */
  --muted:   #6c7a75;
  --line:    #e7e3da;          /* borders */

  /* Dark / "night" surfaces */
  --night:    #0a110e;
  --night-2:  #0f1a15;
  --mint:     #5eead4;
  --on-night: rgba(255,255,255,0.72);

  /* Type */
  --font-display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Shape & motion */
  --radius:    16px;
  --radius-sm: 10px;
  --ease:      0.2s ease;
}

/* --------------------------------------------------------------------------
   Brand overrides on top of Blocksy / WooCommerce.
   Keep these minimal — prefer the Customizer for global colors & fonts.
   -------------------------------------------------------------------------- */

/* Rounded buttons to match the prototype */
.wp-block-button__link,
.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  border-radius: var(--radius-sm);
}

/* Brand primary buttons */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background-color: var(--emerald);
  color: #fff;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background-color: var(--emerald-strong);
}

/* Product cards: softer corners to match brand */
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img {
  border-radius: var(--radius);
}

/* Sale badge in brand emerald (no orange) */
.woocommerce span.onsale {
  background-color: var(--accent);
  color: #fff;
}

/* Star ratings: WooCommerce/Blocksy default to gold/orange — recolor to brand */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before,
.woocommerce p.stars a:hover::before {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   "Why Roametik" checklist — emerald check marks instead of bullets.
   Used on the homepage Why section (ul.roametik-checklist).
   -------------------------------------------------------------------------- */
.roametik-checklist {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.roametik-checklist li {
  position: relative;
  padding-left: 2rem;
  font-weight: 500;
}
.roametik-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   FAQ accordion — premium native <details> cards on a soft sand band.
   Layout: sticky aside (heading + CTA) on the left, accordion on the right.
   Used on the homepage FAQ section (.roametik-faq-aside + details.roametik-faq).
   -------------------------------------------------------------------------- */
@media (min-width: 782px) {
  .roametik-faq-aside { position: sticky; top: 96px; align-self: flex-start; }
}

.roametik-faq {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 0 1.5rem;
  margin-bottom: 0.85rem;
  box-shadow: 0 1px 2px rgba(22,32,29,0.04);
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.roametik-faq:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  box-shadow: 0 14px 30px -18px rgba(22,32,29,0.28);
  transform: translateY(-1px);
}
.roametik-faq[open] {
  border-color: var(--accent);
  box-shadow: 0 18px 40px -22px rgba(14,107,92,0.45);
}
.roametik-faq summary {
  list-style: none;            /* remove default triangle */
  cursor: pointer;
  padding: 1.25rem 2.5rem 1.25rem 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  position: relative;
  outline: none;
}
.roametik-faq summary::-webkit-details-marker { display: none; }
/* round emerald +/- toggle */
.roametik-faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--emerald-soft);
  color: var(--accent);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  transition: background var(--ease), color var(--ease), transform var(--ease);
}
.roametik-faq[open] summary::after {
  content: "−";
  background: var(--accent);
  color: #fff;
}
.roametik-faq summary:hover { color: var(--accent); }
.roametik-faq summary:hover::after { background: var(--accent); color: #fff; }
.roametik-faq summary:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.roametik-faq > p,
.roametik-faq .wp-block-paragraph,
.roametik-faq p {
  margin: 0 0 1.25rem;
  color: var(--body);
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Footer — dark brand footer (group.roametik-footer) ported from the
   prototype. Link colors need CSS (Gutenberg can't set hover inline).
   -------------------------------------------------------------------------- */
.roametik-footer-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.roametik-footer-list li { margin: 0; }
.roametik-footer a {
  color: #a9bab5;
  text-decoration: none;
  transition: color var(--ease);
}
.roametik-footer a:hover { color: #fff; }
.roametik-footer-list a { display: inline-block; padding: 2px 0; }

/* --------------------------------------------------------------------------
   Homepage "Bestsellers" — premium product cards.
   Targets the REAL live markup: the [products] shortcode rendered through
   Blocksy's card (.roametik-bestsellers ul.products li.product). Blocksy
   already hides the add-to-cart and reveals it on hover (data-add-to-cart=
   "auto-hide"); here we add the brand card styling + emerald button.
   -------------------------------------------------------------------------- */
.roametik-bestsellers ul.products li.product {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 1px 2px rgba(22,32,29,0.05);
  transition: box-shadow var(--ease), transform var(--ease), border-color var(--ease);
}
.roametik-bestsellers ul.products li.product:hover {
  box-shadow: 0 22px 44px -24px rgba(22,32,29,0.32);
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}

/* image: clip + subtle zoom on hover */
.roametik-bestsellers li.product .ct-media-container {
  display: block;
  overflow: hidden;
  border-radius: 16px;
}
.roametik-bestsellers li.product .ct-media-container img {
  transition: transform 0.35s ease;
}
.roametik-bestsellers li.product:hover .ct-media-container img {
  transform: scale(1.05);
}

/* title + price polish */
.roametik-bestsellers li.product .woocommerce-loop-product__title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  font-size: 1rem;
}
.roametik-bestsellers li.product .woocommerce-loop-product__title a { color: inherit; }
.roametik-bestsellers li.product .price { color: var(--body); font-weight: 600; }

/* add-to-cart / "View product" button — emerald brand styling.
   (Blocksy's auto-hide handles the reveal-on-hover behaviour.) */
.roametik-bestsellers li.product .ct-woo-card-actions .button {
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.roametik-bestsellers li.product .ct-woo-card-actions .button:hover {
  background: var(--emerald-strong);
  color: #fff;
}

/* Grid layout — consistent gaps, and 2 cards per row on phones instead of one
   huge single-column card. Overrides WooCommerce's float-based columns. */
.roametik-bestsellers ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin: 0;
  padding: 0;
}
.roametik-bestsellers ul.products::before,
.roametik-bestsellers ul.products::after { content: none; display: none; }
.roametik-bestsellers ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
}
@media (max-width: 1024px) {
  .roametik-bestsellers ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .roametik-bestsellers ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .roametik-bestsellers ul.products li.product { padding: 10px; border-radius: 16px; }
  .roametik-bestsellers li.product .woocommerce-loop-product__title { font-size: 0.9rem; }
  .roametik-bestsellers li.product .ct-woo-card-actions .button { padding: 8px 10px; font-size: 0.85rem; }
}

/* --------------------------------------------------------------------------
   "You may also like" — single product page related/up-sell products.
   Same brand card aesthetic as the homepage bestsellers, with a branded
   section heading and a subtle divider above.
   -------------------------------------------------------------------------- */
.related.products,
.up-sells.products {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
  clear: both;
}
.related.products > h2,
.up-sells.products > h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-align: center;
  margin: 0 0 32px;
}

/* card grid */
.related.products ul.products,
.up-sells.products ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin: 0;
  padding: 0;
}
.related.products ul.products::before,
.related.products ul.products::after,
.up-sells.products ul.products::before,
.up-sells.products ul.products::after { content: none; display: none; }

.related.products li.product,
.up-sells.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 1px 2px rgba(22,32,29,0.05);
  transition: box-shadow var(--ease), transform var(--ease), border-color var(--ease);
}
.related.products li.product:hover,
.up-sells.products li.product:hover {
  box-shadow: 0 22px 44px -24px rgba(22,32,29,0.32);
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}
.related.products li.product .ct-media-container,
.up-sells.products li.product .ct-media-container {
  display: block;
  overflow: hidden;
  border-radius: 16px;
}
.related.products li.product .ct-media-container img,
.up-sells.products li.product .ct-media-container img {
  transition: transform 0.35s ease;
}
.related.products li.product:hover .ct-media-container img,
.up-sells.products li.product:hover .ct-media-container img {
  transform: scale(1.05);
}
.related.products li.product .woocommerce-loop-product__title,
.up-sells.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  font-size: 1rem;
}
.related.products li.product .price,
.up-sells.products li.product .price { color: var(--body); font-weight: 600; }
.related.products li.product .ct-woo-card-actions .button,
.up-sells.products li.product .ct-woo-card-actions .button {
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.related.products li.product .ct-woo-card-actions .button:hover,
.up-sells.products li.product .ct-woo-card-actions .button:hover {
  background: var(--emerald-strong);
  color: #fff;
}

@media (max-width: 1024px) {
  .related.products ul.products,
  .up-sells.products ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .related.products ul.products,
  .up-sells.products ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .related.products li.product,
  .up-sells.products li.product { padding: 10px; border-radius: 16px; }
}

/* --------------------------------------------------------------------------
   Homepage hero — premium dark with tech grid + emerald glow + glass cards.
   Applied to the hero Group block via the class "roametik-hero".
   -------------------------------------------------------------------------- */
.roametik-hero { position: relative; isolation: isolate; overflow: hidden; }

/* faint tech grid */
.roametik-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 55%, transparent 100%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 55%, transparent 100%);
}
/* emerald glow */
.roametik-hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 60%; height: 70%; top: -10%; right: -8%;
  background: radial-gradient(circle, rgba(16,185,129,0.28), transparent 65%);
  filter: blur(20px);
}
.roametik-hero > * { position: relative; z-index: 1; }

/* Eyebrow "pill" with dot */
.roametik-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem; width: auto;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--mint);
  background: rgba(94,234,212,0.08);
  border: 1px solid rgba(94,234,212,0.22);
  padding: 0.4rem 0.85rem; border-radius: 999px;
}
.roametik-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent);
}

/* Glass visual panel + floating cards */
.roametik-hero-visual {
  min-height: 360px;
  display: flex; flex-direction: column; justify-content: center; gap: 1.1rem;
  padding: 2rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(80% 80% at 70% 25%, rgba(16,185,129,0.18), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.roametik-hero-card {
  margin: 0; width: -moz-fit-content; width: fit-content; max-width: 100%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px -20px rgba(0,0,0,0.7);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1.1rem;
  font-family: var(--font-mono); font-weight: 500; font-size: 0.85rem;
  letter-spacing: 0.02em; color: #eafaf5;
  animation: roametik-float 6s ease-in-out infinite;
}
.roametik-hero-card-1 { align-self: flex-start; }
.roametik-hero-card-2 { align-self: flex-end; animation-delay: 1.2s; }
.roametik-hero-card-3 { align-self: center; animation-delay: 2.4s; }

@keyframes roametik-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Hide the decorative visual on small screens (cards are children -> hidden too) */
@media (max-width: 781px) {
  .roametik-hero-visual { display: none !important; }
}

/* --------------------------------------------------------------------------
   Header logo — pull it flush to the top-left.
   The brand SVG itself is now tightly cropped (no baked-in whitespace), so
   these rules just lock a clean height and kill any residual left padding
   that Blocksy adds around the logo container.
   -------------------------------------------------------------------------- */
.ct-logo-container,
.site-logo-container { padding-inline-start: 0 !important; }

.ct-logo-container img,
.ct-logo-container svg,
.site-logo-container img {
  height: 38px !important;
  width: auto !important;
  display: block;
}

/* --------------------------------------------------------------------------
   Announcement bar — emerald strip in the Blocksy header Top Row.
   Customizer sets the colors too; this is the brand-accurate fallback and
   keeps the text centered + compact like the prototype.

   Blocksy renders a separate desktop and mobile header, both inside
   .ct-header. We style the top row on BOTH so the bar shows on phones too
   (also requires the Top Row to be enabled in the Mobile header builder and
   the element's Visibility kept on for tablet/mobile).
   -------------------------------------------------------------------------- */
.ct-header [data-row="top"],
.ct-header[data-device="mobile"] [data-row="top"] {
  background-color: var(--emerald);
  color: #eafaf5;
}
.ct-header [data-row="top"] a { color: #fff; }
.ct-header [data-row="top"] .ct-container,
.ct-header [data-row="top"] [data-items] {
  justify-content: center;
}
.ct-header [data-row="top"] .ct-header-text,
.ct-header [data-row="top"] p {
  margin: 0;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* On small screens give the bar a touch more breathing room and keep the
   message readable even if it wraps to two lines. */
@media (max-width: 768px) {
  .ct-header [data-row="top"] .ct-header-text,
  .ct-header [data-row="top"] p {
    font-size: 0.78rem;
    line-height: 1.3;
    padding-block: 2px;
  }
}