/*
Theme Name: Quanto Child
Theme URI: https://wp.framerpeak.com/quanto/
Author: Mirrortheme
Author URI: https://themeforest.net/user/mirrortheme
Template: quanto
Tested up to: 5.8
Requires PHP: 7.4
Description: Quanto Child Theme - A child theme for Quanto, the Creative Agency & Portfolio WordPress Theme.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: quanto-child
Copyright (C) 2025 Mirrortheme
*/

/* 
    Add your custom styles below 
*/

/* ========== Global Reset and Fluid Base ========== */
html { font-size: 100%; } /* respect user zoom, ~16px base */
body { line-height: 1.6; margin: 0; padding: 0; }
*, *::before, *::after { box-sizing: border-box; }

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

/* Prevent layout breaks on long strings */
.text-content, .entry-content, .elementor-widget-container {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Fluid type scale with guardrails */
:root {
  /* type steps */
  --step--1: clamp(0.875rem, 0.80rem + 0.30vw, 1rem);
  --step-0:  clamp(1rem,    0.90rem + 0.60vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.10rem + 1.20vw, 1.5rem);
  --step-2:  clamp(1.75rem, 1.30rem + 2.20vw, 2.25rem);
  --step-3:  clamp(2.25rem, 1.60rem + 3.20vw, 3rem);

  /* spacing */
  --space-1: clamp(0.5rem,  0.30rem + 0.50vw, 0.75rem);
  --space-2: clamp(1rem,    0.60rem + 1.00vw, 1.5rem);
  --space-3: clamp(1.5rem,  0.90rem + 2.00vw, 2.5rem);

  /* content width */
  --content-max: 72rem; /* ~1152px */
}

/* Base font and headings */
body { font-size: var(--step-0); color: inherit; }
h1 { font-size: var(--step-3); line-height: 1.2; margin: 0 0 var(--space-2); }
h2 { font-size: var(--step-2); line-height: 1.25; margin: 0 0 var(--space-2); }
h3 { font-size: var(--step-1); line-height: 1.3; margin: 0 0 var(--space-1); }
p, li { font-size: var(--step-0); }

/* Section spacing and container */
.section,
.elementor-section {
  padding: var(--space-3) 1rem;
}
.container,
.wrap,
.elementor-section .elementor-container {
  max-width: var(--content-max);
  margin-inline: auto;
}

/* Kill fixed heights that cause overlap */
.elementor-section,
.elementor-column,
.elementor-widget {
  min-height: 0;
  height: auto;
  overflow: visible;
}

/* Prefer flexible layout primitives */
.grid { display: grid; gap: var(--space-2); }
@media (min-width: 48rem) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}

/* Hero and media safety */
.hero {
  min-height: min(80vh, 48rem);
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-3) 1rem;
}
.media-cover { aspect-ratio: 16/9; overflow: hidden; }
.media-cover img { width: 100%; height: 100%; object-fit: cover; }

/* Component awareness via container queries (supported modern browsers) */
.card { container-type: inline-size; }
@container (min-width: 28rem) {
  .card-title { font-size: var(--step-2); }
}

/* Safer buttons and links wrapping inside Elementor columns */
.elementor-column .elementor-button,
.elementor-column a.elementor-button {
  max-width: 100%;
  white-space: normal;
}

/* Optional: smooth spacing between stacked sections */
.section + .section,
.elementor-section + .elementor-section {
  margin-top: var(--space-2);
}

/* ========== Your Existing Rules ========== */

/* Fix awkward word breaks in blog titles */
.line-clamp-2 {
  word-break: normal !important;       /* don’t split words */
  overflow-wrap: normal !important;    /* only wrap at spaces */
  hyphens: none !important;            /* disable auto-hyphenation */
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
}
/* QG Blog: keep 2-line clamp but never break inside words */
.quanto-blog-content h5.line-clamp-2,
.quanto-blog-content h5.line-clamp-2 a {
  word-break: keep-all !important;     /* stricter: don't split words */
  overflow-wrap: normal !important;    /* wrap only at spaces */
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
}

/* Preserve the clamp behavior */
.quanto-blog-content h5.line-clamp-2 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}
/* QG Blog: style links in blog body */
.blog-body a {
  color: #c29f5c;              /* QG brand gold */
  text-decoration: underline;  /* visible difference from body text */
}

.blog-body a:hover {
  color: #a07f49;              /* slightly darker gold on hover */
  text-decoration: underline;  /* keep underline for consistency */
}