/*
Theme Name: Lone Star Roofing
Theme URI: https://lone-star-roofing.com/
Description: Child theme of Hello Elementor for Lone Star Roofing, Houston TX. Built by Bizopia.
Author: Bizopia
Author URI: https://bizopia.com/
Template: hello-elementor
Version: 1.0.0
Text Domain: lone-star-roofing
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ==========================================================================
   Brand tokens
   Sourced from the original lone-star-roofing.com build:
   red #AB0D22 (top infobar), deep teal #004C66, Poppins + Montserrat.
   Elementor's Global Colors/Fonts are set to match these, so edit them in
   Site Settings first -- these vars are the fallback for non-Elementor output
   (WooCommerce, plugin markup, the block editor, etc.).
   ========================================================================== */

:root {
  /* These mirror the original design system's tokens (see
     assets/lsr-design-system.css :root). Kept as aliases so theme-level
     rules read clearly; change the values there, not here. */
  --lsr-red: var(--accent, #c8102e);
  --lsr-red-dark: var(--accent-dark, #a00d24);
  --lsr-navy: var(--primary, #1a2332);
  --lsr-gold: var(--gold, #d4a843);

  --lsr-ink: var(--primary, #1a2332);
  --lsr-body: var(--text, #2d3748);
  --lsr-muted: var(--text-light, #64748b);
  --lsr-line: var(--border, #e2e8f0);
  --lsr-bg-soft: var(--light, #f7f8fa);
  --lsr-white: #ffffff;

  --lsr-font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lsr-font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lsr-font-accent: "Montserrat", system-ui, sans-serif;

  --lsr-radius: var(--radius, 8px);
  --lsr-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
  --lsr-shadow-lg: 0 10px 34px rgba(0, 0, 0, 0.12);
  --lsr-maxw: 1180px;
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
  font-family: var(--lsr-font-body);
  color: var(--lsr-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--lsr-font-heading);
  color: var(--lsr-ink);
  line-height: 1.2;
  font-weight: 700;
}

/* Link colour is deliberately NOT set globally. The carried-over design
   system colours links per component (white on the red info bar, navy in
   cards, and so on); a blanket a:hover rule overrode those and, on the info
   bar, turned white text dark red on red. Style links per component instead. */
.entry-content a,
.elementor-widget-text-editor a {
  color: var(--lsr-red);
}

.entry-content a:hover,
.elementor-widget-text-editor a:hover {
  color: var(--lsr-red-dark);
}

/* Visible focus ring -- Hello ships almost no focus styling, and this site
   takes phone/form conversions, so keyboard users need to see where they are. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--lsr-red);
  outline-offset: 2px;
  border-radius: 2px;
}

img {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   Buttons -- applies to Elementor buttons and plain theme/plugin markup
   ========================================================================== */

.elementor-button,
.wp-block-button__link,
input[type="submit"],
button.lsr-btn,
.lsr-btn {
  font-family: var(--lsr-font-heading);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--lsr-radius);
  transition: background-color 160ms ease, color 160ms ease,
              transform 160ms ease, box-shadow 160ms ease;
}

.elementor-button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
.lsr-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--lsr-shadow);
}

.lsr-btn {
  display: inline-block;
  padding: 14px 30px;
  background: var(--lsr-red);
  color: var(--lsr-white);
  text-decoration: none;
}

.lsr-btn:hover {
  background: var(--lsr-red-dark);
  color: var(--lsr-white);
}

.lsr-btn--ghost {
  background: transparent;
  color: var(--lsr-white);
  border: 2px solid var(--lsr-white);
}

.lsr-btn--ghost:hover {
  background: var(--lsr-white);
  color: var(--lsr-red);
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Helpers used by the rebuilt pages
   ========================================================================== */

.lsr-eyebrow {
  font-family: var(--lsr-font-accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lsr-red);
}

.lsr-lede {
  font-size: 1.12rem;
  color: var(--lsr-muted);
}

/* Phone links: on mobile these are the primary conversion path. */
a[href^="tel:"] {
  white-space: nowrap;
  font-weight: 600;
}

/* ==========================================================================
   Editorial content (blog posts imported from the old site)
   The imported posts carry inline widths/styles from the old CMS; these rules
   keep them readable without having to hand-edit 23 posts.
   ========================================================================== */

.entry-content img,
.elementor-widget-theme-post-content img {
  height: auto;
  border-radius: var(--lsr-radius);
}

.entry-content table,
.elementor-widget-theme-post-content table {
  width: 100% !important;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

.entry-content td,
.entry-content th {
  border: 1px solid var(--lsr-line);
  padding: 10px 12px;
}

.entry-content h2 {
  margin-top: 1.9em;
}

.entry-content h3 {
  margin-top: 1.5em;
}

/* Old CMS pasted fixed pixel widths into post markup; stop them overflowing. */
.entry-content [style*="width"] {
  max-width: 100%;
}

/* ==========================================================================
   Print -- quotes and estimates get printed in this industry
   ========================================================================== */

@media print {
  .elementor-location-header,
  .elementor-location-footer,
  .lsr-no-print {
    display: none !important;
  }

  body {
    color: #000;
    font-size: 12pt;
  }
}