/*
Theme Name:   Portum Child
Theme URI:    https://portumwellness.com/
Description:  Portum Wellness & Recovery — child theme of Hello Elementor. Adds the Portum brand styling: navy/blue/peach palette, Fraunces serif headings, Inter body text, and component styles for a clean, warm behavioral-health design.
Author:       Portum Wellness & Recovery
Author URI:   https://portumwellness.com/
Template:     hello-elementor
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:  portum-child
Tags:         elementor, healthcare, accessibility-ready, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments
*/

/* ==========================================================================
   Portum Brand Tokens — used across the site
   You can also set these in Elementor → Site Settings → Global Colors
   to keep Elementor and this stylesheet in sync.
   ========================================================================== */

:root{
  --portum-navy:#1F4767;
  --portum-navy-deep:#163A56;
  --portum-primary:#3683B5;
  --portum-primary-dark:#2A6A93;
  --portum-primary-light:#7EBFE8;
  --portum-accent:#F8A358;
  --portum-accent-soft:#FBD3AE;
  --portum-accent-deep:#E08840;
  --portum-ink:#1F2937;
  --portum-muted:#607179;
  --portum-bg:#F3F8FB;
  --portum-bg-soft:#FAF7F2;
  --portum-line:#E2EAF1;
}

/* ==========================================================================
   Typography
   ========================================================================== */

body{
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--portum-ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6,
.elementor-heading-title,
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3{
  font-family:'Fraunces','Inter',Georgia,serif;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--portum-navy);
  line-height:1.15;
}

h4.eyebrow,
.elementor-widget .eyebrow{
  font-family:'Inter',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-size:0.75rem;
  font-weight:700;
  color:var(--portum-accent);
}

a{color:var(--portum-primary);transition:color 0.2s}
a:hover{color:var(--portum-primary-dark)}

/* ==========================================================================
   Buttons (Elementor button override + .portum-btn utility)
   ========================================================================== */

.elementor-button,
.portum-btn{
  font-family:'Inter',sans-serif;
  font-weight:600;
  border-radius:999px !important;
  padding:0.75rem 1.5rem !important;
  transition:transform 0.15s,box-shadow 0.15s;
  text-decoration:none;
  display:inline-block;
  font-size:0.9375rem;
}
.elementor-button:hover,
.portum-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(248,163,88,0.35);
}

.portum-btn-accent{background:var(--portum-accent);color:var(--portum-navy)}
.portum-btn-primary{background:var(--portum-primary);color:#fff}
.portum-btn-outline{background:transparent;border:2px solid var(--portum-navy);color:var(--portum-navy)}
.portum-btn-ghost{background:#fff;color:var(--portum-navy);border:1px solid var(--portum-line)}

/* ==========================================================================
   Cards
   ========================================================================== */

.portum-card{
  background:#fff;
  border:1px solid var(--portum-line);
  border-radius:18px;
  padding:1.75rem;
  transition:transform 0.2s,box-shadow 0.2s,border-color 0.2s;
}
.portum-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px rgba(31,71,103,0.08);
  border-color:var(--portum-primary-light);
}
.portum-card .portum-icon{
  width:56px;
  height:56px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--portum-primary-light),var(--portum-primary));
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:1.5rem;
  font-weight:700;
  margin-bottom:1.25rem;
}

/* ==========================================================================
   Section utilities
   ========================================================================== */

.portum-section-bg-soft{background:var(--portum-bg)}
.portum-section-bg-warm{background:var(--portum-bg-soft)}
.portum-section-bg-dark{
  background:linear-gradient(135deg,var(--portum-navy) 0%,var(--portum-primary-dark) 100%);
  color:#fff;
}
.portum-section-bg-dark h1,
.portum-section-bg-dark h2,
.portum-section-bg-dark h3{color:#fff}

/* Hero with gradient overlay */
.portum-hero-image{
  background:linear-gradient(135deg,rgba(31,71,103,0.6),rgba(54,131,181,0.55));
  color:#fff;
  text-align:center;
  padding:6rem 1rem;
}
.portum-hero-image h1,
.portum-hero-image h2{color:#fff}

/* ==========================================================================
   Big CTA block
   ========================================================================== */

.portum-cta-big{
  background:linear-gradient(135deg,var(--portum-primary) 0%,var(--portum-navy) 100%);
  color:#fff;
  border-radius:24px;
  padding:4rem 3rem;
  text-align:center;
  box-shadow:0 30px 60px rgba(31,71,103,0.2);
}
.portum-cta-big h2{color:#fff;margin-bottom:1rem}
.portum-cta-big p{color:rgba(255,255,255,0.9);max-width:36rem;margin:0 auto 2rem}

/* ==========================================================================
   FAQ accordion (works with native <details>)
   ========================================================================== */

.portum-faq{
  background:#fff;
  border:1px solid var(--portum-line);
  border-radius:14px;
  padding:1.25rem 1.5rem;
  margin-bottom:0.875rem;
}
.portum-faq summary{
  font-weight:600;
  color:var(--portum-navy);
  font-size:1.0625rem;
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.portum-faq summary::-webkit-details-marker{display:none}
.portum-faq summary::after{
  content:'+';
  color:var(--portum-accent);
  font-size:1.5rem;
  transition:transform 0.2s;
}
.portum-faq[open] summary::after{transform:rotate(45deg)}

/* ==========================================================================
   Eyebrow text utility
   ========================================================================== */

.portum-eyebrow{
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-size:0.75rem;
  font-weight:700;
  color:var(--portum-accent);
  display:inline-block;
}
.portum-eyebrow-blue{color:var(--portum-primary)}

/* ==========================================================================
   Header / nav refinements
   ========================================================================== */

.elementor-location-header{
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--portum-line);
}

/* ==========================================================================
   Footer dark style
   ========================================================================== */

.elementor-location-footer{
  background:var(--portum-navy);
  color:rgba(255,255,255,0.8);
}
.elementor-location-footer a{color:rgba(255,255,255,0.7)}
.elementor-location-footer a:hover{color:var(--portum-accent)}

/* ==========================================================================
   Form styling (works with most form plugins)
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea{
  border:1px solid var(--portum-line) !important;
  border-radius:10px !important;
  padding:0.875rem 1rem !important;
  font-family:'Inter',sans-serif;
  font-size:1rem;
  transition:border-color 0.15s,box-shadow 0.15s;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus{
  outline:none !important;
  border-color:var(--portum-primary) !important;
  box-shadow:0 0 0 3px rgba(54,131,181,0.15) !important;
}

/* ==========================================================================
   Responsive niceties
   ========================================================================== */

@media (max-width: 600px){
  .portum-cta-big{padding:2.5rem 1.5rem}
}