/* ==========================================================================
   SCPM College of Pharmacy — Base & Shared Components
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font-body);
  color:var(--color-text);
  background:var(--color-bg);
  font-size:var(--fs-base);
  line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
h1,h2,h3,h4 { font-family:var(--font-display); line-height:var(--lh-tight); color:var(--color-ink); font-weight:600; }
.container { max-width:var(--container); margin:0 auto; padding:0 var(--sp-6); }
main { display:block; padding-top:calc(var(--header-h) + var(--topbar-h)); }

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

:focus-visible { outline:2.5px solid var(--color-accent-green); outline-offset:3px; border-radius:4px; }

/* ---- Eyebrow / "prescription label" tag ----
   Signature motif: a small dashed-edge label styled like a
   pharmacy prescription sticker, used to introduce every section. */
.rx-label {
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  font-family:var(--font-mono);
  font-size:var(--fs-eyebrow);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--color-primary-dark);
  background:var(--color-bg-deep);
  border:1.5px dashed var(--color-primary);
  padding:.4em .9em;
  border-radius:var(--radius-pill);
  margin-bottom:var(--sp-4);
}
.rx-label::before { content:"℞"; font-family:var(--font-display); font-size:1.05em; font-weight:700; }
.rx-label.on-dark { color:#FFE7C7; border-color:rgba(255,255,255,.55); background:rgba(20,17,13,.35); }

/* ---- Section heading block ---- */
.section-head { max-width:640px; margin-bottom:var(--sp-7); }
.section-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2 { margin-bottom:var(--sp-3); }
.section-head p { color:var(--color-text-soft); font-size:var(--fs-lg); }

.section { padding:var(--sp-9) 0; position:relative; }
.section.tint { background:var(--color-bg-deep); }
.section.dark { background:var(--color-ink); color:#F3EFE8; }
.section.dark h2, .section.dark h3, .section.dark h4 { color:#FFF8EE; }
.section.dark .section-head p { color:#C9C2B6; }

/* ---- Molecular bond divider ----
   Recurring signature graphic: circles linked by bonds, echoing
   a chemical structure diagram. Used between sections & as bullets. */
.bond-divider { display:flex; align-items:center; justify-content:center; gap:var(--sp-2); margin:var(--sp-7) 0; opacity:.75; }
.bond-divider .atom { width:8px; height:8px; border-radius:50%; background:var(--color-primary); }
.bond-divider .atom.alt { background:var(--color-accent-green); }
.bond-divider .bond { width:52px; height:2px; background:var(--color-border); }

.bond-bullet { display:flex; gap:var(--sp-3); align-items:flex-start; }
.bond-bullet .node { flex:0 0 auto; width:10px; height:10px; border-radius:50%; background:var(--color-primary); margin-top:.4em; position:relative; }
.bond-bullet .node::after { content:""; position:absolute; left:50%; top:100%; width:1.5px; height:14px; background:var(--color-border); }
.bond-bullet:last-child .node::after { display:none; }

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; gap:.6em;
  font-weight:700; font-size:.95rem;
  padding:.95em 1.9em;
  border-radius:var(--radius-pill);
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast);
  white-space:nowrap;
}
.btn-primary { background:var(--grad-saffron); color:#fff; box-shadow:var(--shadow-card); }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 24px 50px -18px rgba(232,106,23,.45); }
.btn-outline { background:transparent; color:var(--color-primary-dark); border:1.5px solid var(--color-primary); }
.btn-outline:hover { background:var(--color-bg-deep); transform:translateY(-3px); }
.btn-ghost-light { background:rgba(255,255,255,.12); color:#fff; border:1.5px solid rgba(255,255,255,.55); backdrop-filter:blur(4px); }
.btn-ghost-light:hover { background:rgba(255,255,255,.22); transform:translateY(-3px); }
.btn-sm { padding:.65em 1.3em; font-size:.85rem; }

/* ---- Card ---- */
.card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); box-shadow:var(--shadow-soft); }

/* ---- Utility grids ---- */
.grid { display:grid; gap:var(--sp-6); }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }

/* ---- Reveal-on-scroll ---- */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.is-visible { opacity:1; transform:none; }

/* ---- Page banner (inner pages) ---- */
.page-banner {
  padding:var(--sp-9) 0 var(--sp-7);
  background:
    radial-gradient(1100px 420px at 15% -10%, rgba(232,106,23,.14), transparent 60%),
    var(--color-bg-deep);
  border-bottom:1px solid var(--color-border);
}
.page-banner h1 { font-size:var(--fs-h2); }
.page-banner p { color:var(--color-text-soft); margin-top:var(--sp-3); max-width:640px; }
/* Mobile Hamburger */

.nav-toggle{
    display:none;
    width:44px;
    height:44px;
    border:1px solid #ddd;
    border-radius:6px;
    background:#fff;
    cursor:pointer;
    align-items:center;
    justify-content:center;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
    content:'';
    display:block;
    width:22px;
    height:2px;
    background:#000;
    position:relative;
}

.nav-toggle span::before{
    position:absolute;
    top:-6px;
    left:0;
}

.nav-toggle span::after{
    position:absolute;
    top:6px;
    left:0;
}

@media(max-width:980px){

    .nav-toggle{
        display:flex !important;
    }

    .nav-links{
        display:none;
    }

    .nav-cta{
        display:none;
    }
}
.nav-toggle{
    display:none;
    width:44px;
    height:44px;
    border:none;
    background:transparent;
    cursor:pointer;
    align-items:center;
    justify-content:center;
}

@media (max-width:980px){

    .nav-toggle{
        display:flex !important;
    }

    .nav-cta{
        display:none !important;
    }
}


/* =========================================
   SCPM PHARMACY - CLEAR HERO IMAGE
========================================= */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
}

/* Background image */
.hero-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;

  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  opacity: 0;
  transition: opacity 1s ease-in-out;
}

/* Active slide */
.hero-slide.active {
  opacity: 1;
}

/* Remove molecule graphic */
.hero-molecules {
  display: none !important;
}

/* Remove any image overlay */
.hero-slide::before,
.hero-slide::after {
  display: none !important;
  content: none !important;
}

/* Keep text above image */
.hero-content {
  position: relative;
  z-index: 10;
}

/* Keep controls above image */
.hero-dots,
.hero-scroll-cue {
  position: relative;
  z-index: 10;
}

/* Mobile */
@media (max-width: 768px) {

  .hero {
    height: 100svh;
    min-height: 600px;
  }

  .hero-slide {
    background-position: center center !important;
  }

}
/* =================================
   FULL SCREEN PHOTO ONLY
================================= */

.hero-only-image {
    position: relative !important;
    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
}

.hero-only-image .hero-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    opacity: 1 !important;
    filter: none !important;
    box-shadow: none !important;
}

/* ZERO overlay / shadow */
.hero-only-image::before,
.hero-only-image::after,
.hero-only-image .hero-slide::before,
.hero-only-image .hero-slide::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    opacity: 0 !important;
    box-shadow: none !important;
}

/* Mobile */
@media (max-width: 768px) {
    .hero-only-image {
        height: 100svh !important;
        min-height: 100svh !important;
    }
}

/* =========================================
   HERO - RESPONSIVE ALL DEVICES
========================================= */

.hero {
    position: relative !important;
    width: 100% !important;
    height: 100vh !important;
    min-height: 650px !important;
    overflow: hidden !important;
}

/* Background images */
.hero-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;

    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;

    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.hero-slide.active {
    opacity: 1;
}

/* Bottom text */
.hero-content-bottom {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 30px !important;
    z-index: 10 !important;
}

.hero-content-bottom h1,
.hero-content-bottom p,
.hero-content-bottom .rx-label {
    color: #000 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

/* =========================================
   TABLET
========================================= */

@media (min-width: 769px) and (max-width: 1199px) {

    .hero {
        height: 85vh !important;
        min-height: 600px !important;
    }

    .hero-slide {
        background-position: center center !important;
    }

    .hero-content-bottom {
        bottom: 25px !important;
    }

    .hero-content-bottom h1 {
        font-size: 2.5rem !important;
    }

    .hero-content-bottom p {
        font-size: 1rem !important;
    }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .hero {
        width: 100% !important;
        height: 75vh !important;
        min-height: 520px !important;
        max-height: 720px !important;
    }

    .hero-slide {
        width: 100% !important;
        height: 100% !important;

        background-size: cover !important;

        /* Mobile photo positioning */
        background-position: center center !important;
    }

    .hero-content-bottom {
        left: 15px !important;
        right: 15px !important;
        bottom: 20px !important;
    }

    .hero-content-bottom .rx-label {
        font-size: .75rem !important;
    }

    .hero-content-bottom h1 {
        font-size: 1.7rem !important;
        line-height: 1.15 !important;
        margin: 5px 0 8px !important;
    }

    .hero-content-bottom p {
        font-size: .85rem !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
    }

    .hero-content-bottom .hero-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .hero-content-bottom .btn {
        font-size: .78rem !important;
        padding: 9px 14px !important;
    }

    .hero-dots {
        bottom: 8px !important;
    }
}

/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .hero {
        height: 70vh !important;
        min-height: 500px !important;
    }

    .hero-slide {
        background-position: center center !important;
    }

    .hero-content-bottom {
        bottom: 18px !important;
        left: 12px !important;
        right: 12px !important;
    }

    .hero-content-bottom h1 {
        font-size: 1.45rem !important;
    }

    .hero-content-bottom p {
        font-size: .78rem !important;
    }

    .hero-content-bottom .hero-actions {
        gap: 6px !important;
    }

    .hero-content-bottom .btn {
        padding: 8px 11px !important;
        font-size: .72rem !important;
    }
}
.hero-content-bottom {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 20px !important;
    z-index: 20 !important;
}

.hero-content-bottom h1,
.hero-content-bottom p,
.hero-content-bottom .rx-label {
    margin-bottom: 0 !important;
}

.hero-content-bottom .hero-actions {
    margin-bottom: 0 !important;
}

/* Mobile */
@media (max-width: 768px) {
    .hero-content-bottom {
        bottom: 0 !important;
        padding: 0 12px !important;
    }
}.hero-content-bottom {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 0 15px !important;

    text-align: center !important;
    z-index: 20 !important;
}

.hero-content-bottom h1,
.hero-content-bottom p,
.hero-content-bottom .rx-label {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.hero-content-bottom h1 {
    margin-bottom: 5px !important;
}

.hero-content-bottom p {
    margin-bottom: 5px !important;
}

.hero-content-bottom .hero-actions {
    justify-content: center !important;
    margin-bottom: 0 !important;
}

/* Mobile */
@media (max-width: 768px) {
    .hero-content-bottom {
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        text-align: center !important;
        padding: 0 10px !important;
    }
}