/*
Theme Name: Astra Child - True North Virtual Assistance
Theme URI: https://tnva.co.uk/
Author: Andrea Clayson & M365 Copilot
Author URI: https://tnva.co.uk/
Description: Child theme for Astra with TNVA brand styles, curved separators, and soft UI.
Template: astra
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tnva-astra-child
*/

/* ===== Brand Variables ===== */
:root{
  --tnva-navy:#003366;
  --tnva-teal:#008080;
  --tnva-teal-dark:#007070;
  --tnva-teal-light:#66B2B2;
  --tnva-bg:#F8F8F8;
  --tnva-blush:#FDECEC;
}

/* ===== Typography ===== */
body{
  font-family: 'Lato', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: #222;
  background: #fff;
}

h1,h2,h3,h4,h5,h6{
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  color: var(--tnva-navy);
}

/* Elementor headings can inherit */
.elementor-widget-heading .elementor-heading-title{ font-family: 'Playfair Display', serif; color: var(--tnva-navy); }

/* ===== Links ===== */
a{ color: var(--tnva-teal); }
a:hover{ color: var(--tnva-teal-dark); }

/* ===== Buttons (Elementor) ===== */
.elementor-button{
  border-radius: 999px;
  padding: 12px 24px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: .2px;
  transition: all .25s ease;
}

/* Soft filled brand button */
.btn-soft .elementor-button{
  background: var(--tnva-teal);
  color:#fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.btn-soft .elementor-button:hover,
.btn-soft .elementor-button:focus{
  background: var(--tnva-teal-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

/* Outline to fill */
.btn-outline .elementor-button{
  background: transparent;
  color: var(--tnva-teal);
  border:2px solid var(--tnva-teal);
}
.btn-outline .elementor-button:hover,
.btn-outline .elementor-button:focus{
  color:#fff;
  background: var(--tnva-teal);
  box-shadow: 0 8px 18px rgba(0,128,128,.20);
}

/* Ghost text with underline sweep */
.btn-ghost .elementor-button{
  background: transparent;
  color: var(--tnva-navy);
  border: none;
  padding-bottom: 8px;
  position: relative;
}
.btn-ghost .elementor-button::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0;
  height:2px; background: var(--tnva-teal-light);
  transition: right .25s ease;
}
.btn-ghost .elementor-button:hover::after,
.btn-ghost .elementor-button:focus::after{ right:0; }

/* Focus ring for accessibility */
.elementor-button:focus{ outline: 3px solid #99D9D9; outline-offset: 2px; }

/* ===== Sections: Curves and Waves ===== */
.elementor-section{ border-radius: 20px; overflow: hidden; }

/* Curved top */
.elementor-section.curve-top{ position: relative; background: var(--tnva-bg); z-index:0; }
.elementor-section.curve-top::before{
  content:""; position:absolute; left:50%; top:-80px; transform: translateX(-50%);
  width:140%; height:160px;
  background: radial-gradient(100% 100% at 50% 100%, transparent 49%, var(--tnva-bg) 50%);
  z-index:-1;
}

/* Curved bottom */
.elementor-section.curve-bottom{ position: relative; background: var(--tnva-bg); z-index:0; }
.elementor-section.curve-bottom::after{
  content:""; position:absolute; left:50%; bottom:-80px; transform: translateX(-50%) rotate(180deg);
  width:140%; height:160px;
  background: radial-gradient(100% 100% at 50% 100%, transparent 49%, var(--tnva-bg) 50%);
  z-index:-1;
}

/* Section with blush gradient */
.section-with-blush{ background: linear-gradient(180deg, #fff 0%, var(--tnva-blush) 100%); border-radius: 28px; }

/* SVG waves */
.tnva-wave{ display:block; width:100%; height:100px; }
.wavy-bottom .tnva-wave{ margin-top:-1px; }
.wavy-top .tnva-wave{ transform: rotate(180deg); margin-bottom:-1px; }

/* Soft cards for services */
.soft-card{
  background:#fff;
  border-radius: 24px;
  box-shadow: 0 8px 28px rgba(0,0,0,.04);
  padding: 28px;
  transition: transform .25s ease, box-shadow .25s ease;
  border:1px solid rgba(0,0,0,.04);
}
.soft-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
}

/* Hero helper */
.tnva-hero{ background: linear-gradient(135deg, var(--tnva-bg) 0%, var(--tnva-blush) 100%); padding: 80px 0; }

/* Responsive adjustments */
@media (max-width: 767px){
  .elementor-section.curve-top::before,
  .elementor-section.curve-bottom::after{ height: 100px; top: -50px; bottom: -50px; }
  .tnva-wave{ height:70px; }
}