/*
Theme Name: Girlfriend Gifts
Author: Your Name
Version: 1.5
*/

@import url("https://fonts.googleapis.com/css2?family=Gotu&family=Inter:wght@400;600;700&family=Share+Tech+Mono&display=swap");

/* ==============  VARIABLES  ============== */
:root{
  --brand-red:#dc2626;
  --brand-blue:#60a5fa;
  --brand-gray-700:#374151;
  --brand-gray-500:#6b7280;

  --headline-font:var(--wp--preset--font-family--gotu,"Gotu",sans-serif);
  --body-font:"Inter",Arial,sans-serif;
  --mono-font:"Share Tech Mono",monospace;
  --brand-purple:#9641ae;
  --content-max-width:42rem;
}

/* ==============  GLOBAL  ============== */
*,*::before,*::after{box-sizing:border-box;}
html,body{overflow-x:hidden;}

body{
  margin:0;
  padding:0 1rem;
  font-family:var(--body-font);
  display:flex;
  flex-direction:column;
  align-items:center;
  background:#f0f1f5;
  scroll-padding-top: 3rem;  /* prevent content jumping under fixed ribbon */
}

.content,.daily-content{max-width:var(--content-max-width);width:100%;}

/* ==============  SR-ONLY UTILITY  ============== */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}

/* ==============  HERO BLOCK  ============== */
.hero{
  text-align:center;
  padding:2rem .5rem 2.5rem;
  border-radius:0;
  background:#f0f1f5;
  box-shadow:none;
  transition:padding .35s ease,transform .35s ease;
  transform-origin:top center;
  will-change: transform, opacity;  /* hint to browser for smoother paint */
}

/* ----- headline (scoped to hero) ----- */
.hero h1{
  font-family:var(--headline-font);
  font-size: clamp(1.05rem, 3vw, 1.55rem); /* HALVED from original */
  letter-spacing:.04em;
  text-transform:uppercase;
  color: var(--brand-purple); /* CHANGED from red to purple */
  margin:0 0 .35rem;
  line-height:1.1;
  max-width:20ch;
  margin-inline:auto;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  transition: opacity .25s ease, visibility .25s step-end;
}

/* ----- Main Hero Logo ----- */
.hero h1 .logo {
    height: clamp(19.2rem, 48vw, 28.8rem); /* FIXED: Restored original large size */
    width: auto;
    vertical-align: -0.18em;
    flex-shrink: 0;
}

/* ----- tagline ----- */
#tagline{
    font-size:1rem;
    font-family:var(--mono-font);
    font-weight:600;
    text-transform:uppercase;
    color:var(--brand-purple);
    line-height:1.3;
    height:auto;
    margin-bottom:1rem;
    transition:all .3s ease;
    -webkit-text-stroke:0.1px #404339;
    text-shadow:
        -0.1px -0.1px 0 #404339, .1px -0.1px 0 #404339,
        -0.1px .1px 0 #404339, .1px .1px 0 #404339;
}

/* Override where -webkit-text-stroke is supported */
@supports (-webkit-text-stroke:1px #000){
    #tagline{
        -webkit-text-fill-color:#9641ae;
        -webkit-text-stroke:.1px #404339;
        text-shadow:none;
    }
}

/* ----- countdown ----- */
#countdown,#timer{
  font-family:var(--mono-font);
  font-size:0.98rem;
  color:var(--brand-purple);
  transition:font-size .3s ease;
}

/* ==============  STICKY RIBBON (Consolidated)  ============== */
.hero.sticky {
  position: fixed; /* FIXED: Restored property to make the header stick */
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0.65rem 0.75rem;
  background: #f0f1f5;
  box-shadow: 0 3px 15px rgb(0 0 0 / .08);
  border-radius: 0;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center; /* This will now center the timer correctly */
  z-index: 1000;
}

/* Hide title text, tagline, and the entire H1 (logo container) in sticky state */
.hero.sticky .title-text,
.hero.sticky #tagline,
.hero.sticky h1 {
  display: none; /* FIXED: Hide logo and its container */
}

/* Style the timer in the ribbon */
.hero.sticky #countdown,
.hero.sticky #timer {
  font-size: 1.35rem;
  color: var(--brand-purple);
  font-family: var(--mono-font);
}

/* Hide the old headline text span */
.title-text{display:none;}

/* ==============  CONTENT & LINKS  ============== */
#daily-content, .daily-content{
    color: #404339 !important;
    text-align: justify;
    text-align-last: left;
    hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    overflow-wrap: normal;
    word-break: normal;
    line-height: 1.6;
}
#daily-content p, #daily-content li{
    color: #404339 !important;
    text-align: justify;
    text-align-last: left;
    hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    overflow-wrap: normal;
    word-break: normal;
    line-height: 1.6;
}

/* Style for headings inside the blog post content, ignoring sr-only */
#daily-content h1:not(.sr-only),
#daily-content h2:not(.sr-only),
#daily-content h3:not(.sr-only) {
  font-family: var(--headline-font);
  color: var(--brand-purple);
  font-size: 1.5rem;
  text-align: left; /* override justify for headings */
}

#daily-content h3:not(.sr-only){font-size: 1.15rem;}


#daily-content a,
#daily-content a:visited,
#daily-content h3 a,
#daily-content h3 a:visited{
  color:#292929 !important;
  font-family:var(--headline-font);
  font-weight:700;
  text-decoration:none;
  font-size:1.05rem;
}
#daily-content h3 a{font-size:1.15rem;}
#daily-content a:hover{text-decoration:underline;}

#daily-content ol>li>a:first-child,
#daily-content ol>li>strong:first-child{
  color:#292929 !important;
  font-family:var(--headline-font);
  font-weight:700;
  font-size:1.15rem;
}

#daily-content .intro,
#daily-content .intro-text,
#daily-content .entry-intro,
#daily-content > p:first-of-type{
    margin-bottom:2rem;
}

/* responsive images */
#daily-content img{
  max-width:100%;
  height:auto;
  display:block;
  margin:0 auto;
}

/* ==============  FOOTER  ============== */
.site-footer{
  width:100%;
  border-top:1px solid #e5e7eb;
  padding:2rem 0 1.5rem;
  text-align:center;
  font-size:.85rem;
  color:var(--brand-gray-500);
}
.site-footer a{color:var(--brand-blue);text-decoration:none;}
.site-footer a:hover{text-decoration:underline;}

/* ==============  MOBILE REFINEMENTS (≤480 px)  ============== */
@media(max-width:480px){
  body{padding:0 .6rem;}
  .hero{padding:2.5rem .6rem 3.5rem;}
  .hero h1{font-size:1.5rem;max-width:22ch;}
  #countdown, #timer { font-size: 1.00rem; }
  .hero.sticky #countdown, .hero.sticky #timer { font-size: 0.75rem; }

  .content, .daily-content{
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
}

/* optional desktop image max-width tweak */
@media(min-width:481px){
  #daily-content img{max-width:80%;}
}