/*
Theme Name:   Go Child — Jubicity
Theme URI:    https://jubicity.com
Description:  Child theme of the Go theme by GoDaddy, customized for Jubicity LLC
Author:       Jennifer Luby
Author URI:   https://jubicity.com
Template:     go
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:  go-child-jubicity
*/

/* =============================================================
   JUBICITY BRAND — CSS CUSTOM PROPERTIES
   ============================================================= */

:root {
  --jub-ink:        #272023;
  --jub-deep:       #67595E;
  --jub-rose:       #D8A7B1;
  --jub-rose-light: #E8B4B8;
  --jub-mauve:      #A49393;
  --jub-blush:      #EED6D3;
  --jub-cream:      #FFE4CF
  --jub-white:      #FEFAF8;
  --jub-accent:     #67595E;
}

/* =============================================================
   TYPOGRAPHY — Google Fonts loaded in functions.php
   ============================================================= */

body {
  font-family: 'DM Sans', sans-serif;
  color: var(--jub-ink);
  background-color: var(--jub-white);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  color: var(--jub-ink);
}

/* =============================================================
   GLOBAL LINK & BUTTON STYLES
   ============================================================= */

a {
  color: var(--jub-gold);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--jub-gold-light);
}

.wp-block-button__link,
.wp-block-button .wp-block-button__link {
  background-color: transparent;
  border: 1px solid var(--jub-gold);
  color: var(--jub-gold);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.9rem 2.5rem;
  border-radius: 0;
  transition: all 0.3s ease;
}

.wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:hover {
  background-color: var(--jub-gold);
  color: var(--jub-deep);
}

/* Filled gold button variant — add class "is-style-jubicity-filled" */
.wp-block-button.is-style-jubicity-filled .wp-block-button__link {
  background-color: var(--jub-gold);
  color: var(--jub-deep);
}

.wp-block-button.is-style-jubicity-filled .wp-block-button__link:hover {
  background-color: var(--jub-gold-light);
}

/* =============================================================
   NAVIGATION
   ============================================================= */

.main-navigation,
.site-header {
  font-family: 'DM Sans', sans-serif;
}

.main-navigation a {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jub-slate);
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
  color: var(--jub-gold);
}

/* =============================================================
   HERO / COVER BLOCKS
   ============================================================= */

.wp-block-cover.jubicity-hero {
  background-color: var(--jub-deep);
  min-height: 90vh;
  padding: 6rem;
}

.wp-block-cover.jubicity-hero .wp-block-cover__inner-container h1,
.wp-block-cover.jubicity-hero .wp-block-cover__inner-container h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  color: var(--jub-white);
  line-height: 1.15;
}

.wp-block-cover.jubicity-hero .wp-block-cover__inner-container p {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 300;
  line-height: 1.8;
}

/* =============================================================
   SECTION UTILITY CLASSES
   (Apply these via "Additional CSS class" in block Advanced settings)
   ============================================================= */

/* Dark section — navy background */
.jubicity-section-dark {
  background-color: var(--jub-deep) !important;
  color: var(--jub-white);
  padding: 5rem 4rem;
}

.jubicity-section-dark h1,
.jubicity-section-dark h2,
.jubicity-section-dark h3 {
  color: var(--jub-white);
}

.jubicity-section-dark p {
  color: rgba(255, 255, 255, 0.55);
}

/* Mist/cream section */
.jubicity-section-mist {
  background-color: var(--jub-mist) !important;
  padding: 5rem 4rem;
}

/* Ink section */
.jubicity-section-ink {
  background-color: var(--jub-ink) !important;
  color: var(--jub-white);
  padding: 5rem 4rem;
}

.jubicity-section-ink h2,
.jubicity-section-ink h3 {
  color: var(--jub-white);
}

/* =============================================================
   EYEBROW / LABEL TEXT
   (Apply class "jubicity-eyebrow" to a Paragraph block)
   ============================================================= */

.jubicity-eyebrow,
p.jubicity-eyebrow {
  font-size: 0.72rem !important;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--jub-gold) !important;
  margin-bottom: 0.75rem;
  font-family: 'DM Sans', sans-serif;
}

/* =============================================================
   GOLD RULE DIVIDER
   (Apply class "jubicity-gold-rule" to a Separator block)
   ============================================================= */

hr.jubicity-gold-rule,
.jubicity-gold-rule hr,
.wp-block-separator.jubicity-gold-rule {
  background: linear-gradient(90deg, transparent, var(--jub-gold), transparent) !important;
  border: none !important;
  height: 1px !important;
  margin: 0 4rem;
  opacity: 1 !important;
}

/* =============================================================
   BLOCKQUOTE / PULL QUOTE
   ============================================================= */

blockquote,
.wp-block-pullquote blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  font-weight: 300;
  font-style: italic;
  color: var(--jub-accent);
  border-left: 3px solid var(--jub-gold);
  padding-left: 1.5rem;
  margin: 2rem 0;
  line-height: 1.6;
}

.wp-block-pullquote {
  background-color: var(--jub-mist);
  border: none;
  padding: 3rem;
}

.wp-block-pullquote cite,
.wp-block-pullquote__citation {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--jub-gold);
  font-style: normal;
}

/* =============================================================
   STATS / NUMBERS
   (Apply class "jubicity-stat-number" to a Heading block)
   ============================================================= */

.jubicity-stat-number {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 2.8rem !important;
  font-weight: 300 !important;
  color: var(--jub-gold-light) !important;
  line-height: 1;
  margin-bottom: 0.25rem;
}

/* =============================================================
   CARD / SERVICE BLOCKS
   (Apply class "jubicity-card" to a Group block)
   ============================================================= */

.jubicity-card {
  padding: 2.5rem;
  border: 1px solid rgba(201, 168, 76, 0.2);
  position: relative;
  transition: border-color 0.3s ease;
}

.jubicity-card:hover {
  border-color: var(--jub-gold);
}

.jubicity-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 2px;
  background: var(--jub-gold);
  transition: width 0.4s ease;
}

.jubicity-card:hover::before {
  width: 100%;
}

/* =============================================================
   LEFT GOLD BORDER CALLOUT
   (Apply class "jubicity-callout" to a Group block)
   ============================================================= */

.jubicity-callout {
  background-color: var(--jub-mist);
  padding: 2.5rem;
  border-left: 3px solid var(--jub-gold);
}

.jubicity-callout p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 300;
  font-style: italic;
  color: var(--jub-accent);
  line-height: 1.55;
}

/* =============================================================
   INDUSTRY / TAG CHIPS
   (Apply class "jubicity-tag" to individual Paragraph blocks)
   ============================================================= */

.jubicity-tag,
p.jubicity-tag {
  display: inline-block;
  padding: 0.65rem 1.5rem;
  border: 1px solid rgba(201, 168, 76, 0.3);
  font-size: 0.8rem;
  color: var(--jub-slate);
  letter-spacing: 0.05em;
  transition: all 0.25s ease;
  margin: 0.35rem;
}

.jubicity-tag:hover,
p.jubicity-tag:hover {
  border-color: var(--jub-gold);
  color: var(--jub-ink);
  background: rgba(201, 168, 76, 0.05);
}

/* =============================================================
   TECH GRID ITEMS
   (Apply class "jubicity-tech-item" to a Group block)
   ============================================================= */

.jubicity-tech-item {
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: border-color 0.3s ease;
}

.jubicity-tech-item:hover {
  border-color: rgba(201, 168, 76, 0.4);
}

/* =============================================================
   CTA SECTION
   (Apply class "jubicity-cta" to a Cover or Group block)
   ============================================================= */

.jubicity-cta {
  background-color: var(--jub-deep) !important;
  text-align: center;
  padding: 6rem 4rem;
  position: relative;
  overflow: hidden;
}

.jubicity-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(201, 168, 76, 0.1) 0%, transparent 60%);
  pointer-events: none;
}

.jubicity-cta h2 {
  color: var(--jub-white);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
}

.jubicity-cta p {
  color: rgba(255, 255, 255, 0.5);
  max-width: 480px;
  margin: 0 auto 2rem;
}

/* =============================================================
   ANIMATIONS — Fade up on scroll
   Add class "jubicity-fade-up" to any block
   ============================================================= */

.jubicity-fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.jubicity-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================================
   FOOTER
   ============================================================= */

.site-footer {
  border-top: 1px solid rgba(201, 168, 76, 0.15);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  color: var(--jub-slate);
}

/* =============================================================
   RESPONSIVE — Tablet and below
   ============================================================= */

@media (max-width: 768px) {
  .jubicity-section-dark,
  .jubicity-section-mist,
  .jubicity-section-ink,
  .jubicity-cta {
    padding: 3rem 1.5rem;
  }

  .wp-block-cover.jubicity-hero {
    padding: 4rem 1.5rem;
    min-height: 70vh;
  }

  .jubicity-card {
    padding: 1.75rem;
  }

  .jubicity-callout {
    padding: 1.75rem;
  }
}