/*!
Theme Name: Luxe
Theme URI: http://underscores.me/
Author: Glenn Andressen
Author URI: https://eastcoastit.net
Description: Custom theme for Unique Sails
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: uniquesails
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Luxe is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

:root {
--gold:#C5A572;
--gold-600:#b18f4f;
--cream:#FAF9F6;
--beige:#F2EEE6;
--ink:#1A1A1A;
--charcoal:#2A2A2A;
--white:#fff;
--radius:18px;
--shadow:0 10px 24px rgba(0,0,0,.08);
}

/* 
Logo and header background
#f8f6f4
 */

* {
box-sizing:border-box;
}

body {
font-family:Lato,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
color:var(--ink);
background:var(--cream);
line-height:1.6;
margin:0;
}

img {
max-width:100%;
display:block;
border-radius:var(--radius);
}

a {
color:var(--gold) !important;
}

header.site-header {
position:sticky;
top:0;
z-index:50;
background: #f8f6f4;
backdrop-filter:saturate(1.2) blur(8px);
border-bottom:1px solid #eee;
}

.site-title {
  color: #2A2A2A;
  font-weight: 500;
  font-size: 1.25rem;
}

.navbar .brand-wrapper {
  display: inline-flex;   /* sit inline */
  align-items: center;    /* vertical centering */
  width: auto !important; /* stop hogging 100% */
}

/* === Brand: keep it a small inline-flex item === */
.navbar .navbar-brand {
  display: inline-flex !important; /* inline so it doesn't take full row */
  align-items: center;
  gap: .5rem;                       /* space between svg and title */
  flex: 0 0 auto;                   /* don't grow or shrink */
  
  padding: 0;
}

/* === SVG sizing + allow strokes to draw outside viewBox if needed === */
.navbar .navbar-brand svg {
  display: block;                   /* avoid inline baseline shenanigans */
  width: 40px;                      /* explicit size so it won't collapse */
  height: 40px;
  flex: 0 0 auto;
  background: var(--gold);
  overflow: visible;                /* prevents stroke clipping */
}

/* === Make sure SVG paths/lines are white regardless of parent color === */
.navbar .navbar-brand svg path,
.navbar .navbar-brand svg line,
.navbar .navbar-brand svg circle,
.navbar .navbar-brand svg rect {
  stroke: #ffffff !important;
  fill: none !important;            /* keep it an outline, remove accidental fills */
}

/* === Site title styling: keep it outside and on top of logo area === */
.navbar .navbar-brand .site-title,
.navbar .navbar-brand .site-title * {
  color: #2A2A2A !important;
  z-index: 2;
  white-space: nowrap;              /* prevent wrapping into the svg area */
  margin: 0;
  line-height: 1;
  font-size: 1rem;
}

.nav a {
color:var(--ink) !important;
text-decoration:none;
margin-left:18px;
font-weight:600;
padding: 0 40px;
}

.navbar-nav li a {
  margin-right: 10px;
}

.btn {
display:inline-block !important;
background:var(--gold) !important;
color:var(--white) !important;
border-radius:999px !important;
border:0 !important;
cursor:pointer !important;
font-weight:700 !important;
font-size: 0.9rem !important;
letter-spacing:.02em !important;
text-decoration:none !important;
box-shadow:var(--shadow) !important;
padding:12px 20px !important;
margin-right: 10px !important;
}

.btn:hover {
background:var(--gold-600) !important;
}

.btn-outline {
background:transparent !important;
color:var(--gold) !important;
border:2px solid var(--gold) !important;
box-shadow:none !important;
border-radius:999px !important;
font-weight:700 !important;
font-size: 0.9rem !important;
letter-spacing:.02em !important;
text-decoration:none !important;
padding:12px 20px !important;
margin-right: 10px !important;
text-align: center;
}

.btn-outline a:hover {
color:var(--white) !important;
text-decoration: none;
}

.btn-outline:hover {
background:var(--gold) !important;
color:var(--white) !important;
}

.menu-btn {
background:var(--gold) !important;
border-radius: 999px;
padding: 0 14px 0 20px; 
}

.menu-btn:hover {
background:var(--gold-600) !important;
}

.menu-btn a {
  color:var(--white) !important;
}

h1,h2,h3 {
font-family:"Playfair Display",serif !important;
line-height:1.2 !important;
margin:0 0 10px;
}

h1 {
font-size:clamp(36px,5vw,56px) !important;
}

h2 {
font-size:clamp(26px,3vw,36px) !important;
}

h3 {
	font-size: 1.2rem !important;
	line-height: 1.2 !important;
	margin: 0 0 10px !important;
	font-weight: bolder !important;
}

section {
padding:56px 0;
}

.container {
    width: min(1120px, 90%);
    margin-inline: auto;
}

.hero {
position:relative;
background:var(--beige);
color:#fff;
padding:96px 0 72px;
}

.hero {
/* display:grid;	Causes mis-alignment with WordPress!!! */
grid-template-columns:1.2fr .8fr;
gap:40px;
color:var(--charcoal);
}

.hero h1 {
  color:var(--gold);
 }

.hero .card {
background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.35);
border-radius:var(--radius);
padding:24px;
}

.btn a {
  color: #ffffff !important;
}
.btn a:hover {
  text-decoration: none;
}

.hero p {
font-size:18px;
margin:12px 0 24px;
}

.about {
background:var(--cream);
}

.grid-2 {
display:grid;
grid-template-columns:1fr 1fr;
gap:36px;
}

.lead {
font-size:18px;
color:#444;
}

.cards {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px;
margin-top:18px;
}

.card {
background:#fff;
border-radius:var(--radius) !important;
border:1px solid #eee;
box-shadow:var(--shadow);
padding:22px !important;
}

.card-header {
padding: .75rem 1.25rem;
margin-bottom: 0;
background-color: rgba(0,0,0,.00) !important;
border-bottom: none !important;
}

.icon {
width:36px !important;
height:36px !important;
color:var(--gold) !important;
}

.card h3 {
margin-top:8px;
}

.card p {
color:#555;
margin:6px 0 0;
}

.steps .items {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-top:18px;
}

.step {
background:#fff;
border:1px dashed var(--gold);
border-radius:var(--radius);
text-align:center;
padding:22px;
}

.why {
background:var(--beige);
}

.why .cards {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
}

.pricing .cards {
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
}

.plan {
position:relative;
}

.plan.popular {
border:2px solid var(--gold);
}

.tag {
position:absolute;
top:14px;
right:14px;
background:var(--gold);
color:#fff !important;
font-size:14px;
border-radius:999px;
padding:4px 8px;
}

.price {
font-size:32px;
font-weight:800;
}

blockquote {
margin:0;
}

.quote {
font-family:"Playfair Display",serif;
font-style:italic;
color:#333;
}

.author {
display:flex;
align-items:center;
gap:10px;
margin-top:12px;
}

.avatar {
width:36px;
height:36px;
border-radius:50%;
object-fit:cover;
}

.cta {
text-align:center;
}

footer {
background:#000;
color:#fff;
}

.footer-grid {
display:grid;
grid-template-columns:1.2fr .8fr;
gap:36px;
padding:40px 0;
}

label {
font-weight:700;
display:block;
margin-bottom:6px;
}

input,textarea,select {
border-radius:12px;
border:1px solid #ddd;
background:#fff;
padding:12px;
}

textarea {
min-height:120px;
}

.small {
font-size:13px;
color:#777;
}

.pricing .plans,.testimonials .cards {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:22px;
}

/* Responsive layout adjustments */

/* Large tablets and down */
@media (max-width: 1024px) {
  .hero .container,
  .grid-2,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .cards,
  .steps .items,
  .pricing .plans,
  .testimonials .cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .why .cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero {
    padding: 72px 0 52px;
  }
}

/* Small tablets / large phones */
@media (max-width: 768px) {
  .cards,
  .steps .items,
  .pricing .plans,
  .testimonials .cards,
  .why .cards {
    grid-template-columns: 1fr;
  }
}

/* Very small phones */
@media (max-width: 480px) {
  .cards,
  .steps .items,
  .pricing .plans,
  .testimonials .cards,
  .why .cards {
    grid-template-columns: 1fr;
  }
}

/* ================================================== */
/* FINAL FIX: Eliminate Card Overlapping on Mobile */
/* Replace your mobile section with this clean version */
/* ================================================== */

@media (max-width: 768px) {
  
  /* Container setup */
  .wp-block-columns,
  .cards,
  .grid-2,
  .steps .items,
  .pricing .plans,
  .testimonials .cards,
  .why .cards {
    display: block !important; /* Use block instead of flex */
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Individual cards with generous spacing */
  .hero .card, .hero .wp-block-column {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
  }


  .wp-block-column,
  .card,
  .step,
  .plan {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    float: none !important;
    
    /* Spacing - generous margins to prevent overlap */
    margin: 0 0 32px 0 !important; /* Increased from 24px to 32px */
    padding: 24px !important;
    
    /* Card appearance */
    background: #fff !important;
    border-radius: 18px !important;
    border: 1px solid #eee !important;
    
    /* Lighter, contained shadow */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    
    /* Ensure proper positioning */
    position: relative !important;
    z-index: 1 !important;
    
    /* Reset any flex properties */
    flex: none !important;
    flex-basis: auto !important;
  }

  /* Remove margin from last card */
  .wp-block-column:last-child,
  .card:last-child,
  .step:last-child,
  .plan:last-child {
    margin-bottom: 0 !important;
  }

  /* Ensure content inside cards doesn't cause issues */
  .wp-block-column *,
  .card *,
  .step *,
  .plan * {
    max-width: 100% !important;
  }

  /* Container constraints */
  .container {
    width: 90% !important;
    padding: 0 20px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  /* Specific fix for sections */
  section {
    overflow: visible !important;
    padding: 32px 0 !important;
  }

}

/* Even smaller screens */
@media (max-width: 480px) {
  
  .wp-block-column,
  .card,
  .step,
  .plan {
    margin: 0 0 28px 0 !important;
    padding: 20px !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06) !important; /* Even lighter shadow */
  }

  .container {
    width: 95% !important;
    padding: 0 15px !important;
  }

  section {
    padding: 28px 0 !important;
  }

}