/*
Theme Name:  Samarpan Recovery
Theme URI:   https://www.samarpanrecovery.com
Author:      Samarpan Recovery
Author URI:  https://www.samarpanrecovery.com
Description: Custom WordPress theme for Samarpan Recovery — India's only CARF-accredited
             rehabilitation centre. Built on Bootstrap 5.3 with ACF Pro for content management.
Version:     1.0.0
Requires at least: 6.4
Tested up to:      6.7
Requires PHP:      8.1
License:     Proprietary
Text Domain: samarpan
Tags:        custom-menu, featured-images, threaded-comments, full-width-template
*/

/* ==========================================================================
   BASE RESET & VARIABLES
   ========================================================================== */

:root {
    /* ── Brand colours ── */
    --sp-teal:          #00978D;
    --sp-teal-dark:     #1a6b5a;
    --sp-teal-light:    #d0ede8;
    --sp-gold:          #C9A84C;
    --sp-white:         #ffffff;
    --sp-off-white:     #f7f7f7;
    --sp-dark:          #1a1a1a;
    --sp-mid:           #555555;
    --sp-border:        #e0e0e0;

    /* ── Typography ── */
    --font-body:        'Nunito Sans', sans-serif;
    --font-display:     'Tenor Sans', sans-serif;
    --font-size-base:   16px;
    --line-height-base: 1.65;

    /* ── Spacing ── */
    --sp-section-y:     80px;
    --sp-section-y-mob: 48px;
    --sp-container:     1200px;

    /* ── Transitions ── */
    --sp-transition:    all 0.2s ease-in-out;
}

/* ── Box-sizing & body reset ── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family:    var(--font-body);
    font-size:      var(--font-size-base);
    line-height:    var(--line-height-base);
    color:          var(--sp-dark);
    background:     var(--sp-white);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* ── Images ── */
img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ── Links ── */
a {
    color: var(--sp-teal);
    text-decoration: none;
    transition: var(--sp-transition);
}

a:hover {
    color: var(--sp-teal-dark);
}

/* ── Lists ── */
ul,
ol {
    list-style: none;
}

/* ── Headings ── */
h1, h2, h3, h4, h5, h6 {
    font-family:    var(--font-display);
    line-height:    1.2;
    color:          var(--sp-dark);
}

/* ==========================================================================
   UTILITY CLASSES
   (Preserve existing PHP site class names for safe migration)
   ========================================================================== */

/* Responsive visibility — matches existing PHP classes exactly */
@media (max-width: 768px) {
    .hide-on-mobile  { display: none !important; }
    .show-on-mobile  { display: block !important; }
}

@media (min-width: 769px) {
    .show-on-mobile  { display: none !important; }
    .hide-on-mobile  { display: block !important; }
}

/* Brand text colours */
.sp-teal          { color: var(--sp-teal); }
.sp-teal-bg       { background-color: var(--sp-teal); }
.sp-gold          { color: var(--sp-gold); }
.sp-off-white-bg  { background-color: var(--sp-off-white); }

/* Consistent section padding */
.sp-section {
    padding-top:    var(--sp-section-y);
    padding-bottom: var(--sp-section-y);
}

@media (max-width: 768px) {
    .sp-section {
        padding-top:    var(--sp-section-y-mob);
        padding-bottom: var(--sp-section-y-mob);
    }
}

/* ==========================================================================
   COMPONENTS — minimal base styles
   Full styles live in assets/css/main.css (ported from index.css)
   ========================================================================== */

/* ── Ticker Bar ── */
.sp-ticker {
    background-color: var(--sp-teal);
    color:            var(--sp-white);
    font-size:        0.85rem;
    padding:          8px 0;
    overflow:         hidden;
    white-space:      nowrap;
}

/* ── Site Header ── */
.site-header {
    position: relative;
    z-index:  1000;
}

/* ── Hero Banner ── */
.sp-hero {
    position:   relative;
    width:      100%;
    min-height: 100vh;
    display:    flex;
    align-items: center;
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
    overflow: hidden;
}

.sp-hero__video {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    z-index:    0;
    pointer-events: none;
}

.sp-hero__content {
    position: relative;
    z-index:  1;
}

/* ── Buttons ── */
.sp-btn {
    display:         inline-block;
    padding:         12px 32px;
    border-radius:   4px;
    font-family:     var(--font-body);
    font-weight:     600;
    font-size:       0.95rem;
    cursor:          pointer;
    transition:      var(--sp-transition);
    text-align:      center;
    border:          2px solid transparent;
}

.sp-btn--primary {
    background-color: var(--sp-teal);
    color:            var(--sp-white);
    border-color:     var(--sp-teal);
}

.sp-btn--primary:hover {
    background-color: var(--sp-teal-dark);
    border-color:     var(--sp-teal-dark);
    color:            var(--sp-white);
}

.sp-btn--outline {
    background-color: transparent;
    color:            var(--sp-teal);
    border-color:     var(--sp-teal);
}

.sp-btn--outline:hover {
    background-color: var(--sp-teal);
    color:            var(--sp-white);
}

/* ── Card ── */
.sp-card {
    background:    var(--sp-white);
    border-radius: 8px;
    padding:       28px 24px;
    border:        1px solid var(--sp-border);
    height:        100%;
    transition:    var(--sp-transition);
}

.sp-card:hover {
    box-shadow: 0 8px 24px rgba(0, 151, 141, 0.12);
    transform:  translateY(-2px);
}

/* ── Section heading decoration ── */
.sp-section-heading {
    display:        flex;
    align-items:    center;
    gap:            16px;
    margin-bottom:  32px;
}

.sp-section-heading__text {
    font-family:    var(--font-display);
    font-size:      clamp(1.8rem, 4vw, 2.8rem);
    line-height:    1.15;
}

.sp-section-heading__text span {
    color: var(--sp-teal);
}

/* ── Sticky CTA floating bar (mobile) ── */
.sp-sticky-bar {
    position:         fixed;
    bottom:           0;
    left:             0;
    right:            0;
    z-index:          9999;
    display:          flex;
    background-color: var(--sp-teal);
}

.sp-sticky-bar__btn {
    flex:           1;
    display:        flex;
    align-items:    center;
    justify-content: center;
    gap:            8px;
    padding:        14px 12px;
    color:          var(--sp-white);
    font-weight:    700;
    font-size:      0.9rem;
    border-right:   1px solid rgba(255,255,255,0.3);
}

.sp-sticky-bar__btn:last-child {
    border-right: none;
}

.sp-sticky-bar__btn:hover {
    background-color: var(--sp-teal-dark);
    color:            var(--sp-white);
}

/* ── Screen-reader only ── */
.sr-only {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0, 0, 0, 0);
    white-space: nowrap;
    border:     0;
}

/* ==========================================================================
   WORDPRESS CORE ALIGNMENTS
   Required for block editor / Gutenberg compatibility
   ========================================================================== */

.alignleft  { float: left; margin: 0.5em 1.5em 1em 0; }
.alignright { float: right; margin: 0.5em 0 1em 1.5em; }
.aligncenter,
.alignfull  { display: block; margin-left: auto; margin-right: auto; clear: both; }

figure.wp-block-image img { height: auto; }

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {
    .sp-ticker,
    .site-header,
    .site-footer,
    .sp-sticky-bar,
    .sp-hero__video { display: none !important; }
    body { font-size: 12pt; color: #000; }
    a { text-decoration: underline; color: #000; }
}

.ticker{
  background:#00978D !important;
  color:#fff !important;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:9999;

  padding:10px 0;

  display:flex;
  align-items:center;
}

.ticker marquee{
  width:100%;
}

@media (max-width: 760px) {

  .ticker{
    position:fixed;
    top:0;
    left:0;
    width:100%;
  }

}