/*
Theme Name:   Astra Child
Description:  Child theme for Astra
Author:       Eleanor O'Callaghan
Template:     astra
Version:      1.2
*/


/* =====================================================
   GLOBAL
   ===================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --card-bg:  #ffffff;
  --back-bg:  #fffdf9;
  --accent:   #b87333;
  --text:     #1c1308;
  --muted:    #7a6e60;
  --border:   #ebd5ef;

  /* Card layout — fitted to 1100px content container, 3 columns:
     gap(18) : card(334) : gap(18) : card(334) : gap(18) : card(334) : gap(18)
     total = 18*4 + 334*3 = 72 + 1002 = 1074px — fits in 1100px */
  --gap:  18px;
  --card: 334px;
}

div#content {
  background-image: url('/wp-content/uploads/2026/04/purple_paper_bg.jpg');
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto;
}


/* =====================================================
   GENERAL PAGE LAYOUT
   ===================================================== */

div#primary {
  margin-top: 10px;
}

div.primary {
  margin-top: 20px;
  margin-bottom: 10px;
}

header.entry-header {
  text-align: center;
  margin-bottom: 0;
}

.entry-content {
  font-family: 'Lora', serif;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--text);
  letter-spacing: 0.04em;
  max-width: 1400px;
  margin: 0 auto;
}

div.about {
  font-size: 1rem;
}

div.wp-block-columns {
  padding-top: 20px;
}

div.wp-block-group {
  padding: 0;
}


/* =====================================================
   CONTACT PAGE
   ===================================================== */

article.post-113 {
  max-width: 1100px;
  margin: auto;
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--ast-global-color-0);
  background-color: var(--ast-global-color-0);
  color: white;
}

.cf7-field p {
  margin-bottom: 5px;
}


/* =====================================================
   HEADER & NAVIGATION
   ===================================================== */

span.am {
  font-size: 20px;
  color: #000;
}

span.am:hover {
  color: var(--ast-global-color-1);
}

a.menu-link,
a.menu-link:hover {
  color: var(--ast-global-color-3) !important;
}

/* Underline effect on current and hovered menu items */
.main-header-menu .menu-link {
  text-decoration-color: transparent;
}

li.current-menu-item .menu-link,
.main-header-menu .menu-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

/* Mobile hamburger icon */
[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg {
  fill: purple;
}

/* Menu layout - two items per menu spread across each section */
li.menu-item {
  width: 50%;
}

ul#ast-hf-menu-2,
ul#ast-hf-menu-1 {
  width: 100%;
}

div.main-navigation,
div.ast-builder-menu-1,
div.ast-builder-menu-2,
div.ast-main-header-bar-alignment {
  width: 100%;
}

/* needed to push Hook menu towards the right */
div.ast-main-header-bar-alignment {
  margin-left: 20% !important;
}


/* =====================================================
   INSTAGRAM LINK
   ===================================================== */

a.instagram {
  text-decoration: none;
  padding-bottom: 3px;
}


/* =====================================================
   CARD GRID CONTAINER
   ===================================================== */

/* Suppress empty paragraphs WordPress injects between blocks */
.card-grid > p {
  display: none;
}

.card-grid {
  display: flex;
  flex-wrap: wrap;
  padding: var(--gap);
  padding-top: 0;
  gap: var(--gap);
  background: transparent;
  justify-content: flex-start;
}

/* Invisible filler keeps orphan cards left-aligned */
.card-grid::after {
  content: '';
  flex: 0 0 var(--card);
}

/* Explicit placeholder element for rows with 2 orphans */
.card-placeholder {
  flex: 0 0 var(--card);
  visibility: hidden;
  pointer-events: none;
}


/* =====================================================
   CARD - SHARED (flip and no-flip)
   ===================================================== */

.card-flip,
.card-no-flip {
  flex: 0 0 var(--card);
  aspect-ratio: 1 / 1.45;
}


/* =====================================================
   CARD — NO FLIP
   ===================================================== */

.card-no-flip {
  border: 10px solid var(--border);
  background-color: var(--card-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  text-align: center;
  padding: 20px 5% 1px 5%;
  position: relative;
}

.card-no-flip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 28px,
    #b8733308 28px,
    #b8733308 29px
  );
  pointer-events: none;
}


/* =====================================================
   CARD - FLIP CONTAINER
   ===================================================== */

.card-flip {
  perspective: 1200px;
  transition: box-shadow 0.25s ease;
}

@media (hover: hover) {
  .card-flip:hover {
    box-shadow: 0 20px 44px #00000033;
  }
}

/* The rotating inner element */
.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

/* Both faces share these rules */
.card-front,
.card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  border: 10px solid var(--border);
}


/* =====================================================
   CARD — FRONT FACE
   ===================================================== */

.card-front {
  background-color: var(--card-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 40px 5% 0 5%;
}

/* Lined texture */
.card-front::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 28px,
    #b8733308 28px,
    #b8733308 29px
  );
  pointer-events: none;
}

/* Front typography */
.card-front .title {
  font-family: 'Lora', serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

.card-front .series {
  font-family: 'Lora', serif;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--accent);
  font-style: italic; 
}

.card-front .by {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 300;
}

.card-front .author {
  font-family: 'Lora', serif;
  /*font-style: italic; */
  font-size: 0.8rem;
  color: var(--muted);
}

.card-front .quote {
  font-size: 0.7rem;
  line-height: 1.65;
  color: var(--muted);
  font-style: italic;
  position: relative;
  padding: 20px 4% 0 4%;
}

.card-front .quote::before {
  content: '\201C';
  font-family: 'Lora', serif;
  font-size: 2em;
  color: var(--accent);
  opacity: 0.35;
  position: absolute;
  top: 0.3em;
  left: -0.05em;
  line-height: 1;
}

.card-front img {
  object-fit: contain;
}


/* =====================================================
   CARD — BACK FACE
   ===================================================== */

/* Pre-rotated so it faces the right way after the flip */
.card-back {
  background-color: var(--back-bg);
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  padding: 5% 8%;
  gap: 0.5em;
}

/* Lined texture */
.card-back::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 28px,
    #b8733306 28px,
    #b8733306 29px
  );
  pointer-events: none;
}

/* Decorative background quote mark */
.card-back::after {
  content: '\201C';
  font-family: 'Lora', serif;
  font-size: 10rem;
  color: var(--accent);
  opacity: 0.05;
  position: absolute;
  bottom: -2rem;
  right: 0.5rem;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* Back typography */
.card-back .back-title {
  font-family: 'Lora', serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--accent);
  position: relative;
  z-index: 1;
  margin-bottom: 10px;
  text-align: center;
}
.card-back .back-rule {
  border: none;
  border-top: 1px solid var(--accent);
  opacity: 0.4;
  width: 100%;
  margin: 0;
  position: relative;
  z-index: 1;
}

.card-back .back-by {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 300;
  position: relative;
  z-index: 1;
}

.card-back .back-rule {
  border: none;
  border-top: 1px solid var(--accent);
  opacity: 0.4;
  width: 100%;
  margin: 0;
  position: relative;
  z-index: 1;
}

.card-back .back-body {
  font-size: 0.70rem;
  line-height: 1.1;
  color: var(--muted);
  position: relative;
  z-index: 1;
}

.card-back .back-subhead {
  font-family: 'Lora', serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
  margin-bottom: 0;
}


/* =====================================================
   CARD - NO-FLIP TYPOGRAPHY
   (mirrors front face but scoped to .card-no-flip)
   ===================================================== */

.card-no-flip .title {
  font-family: 'Lora', serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

.card-no-flip .by {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 300;
}

.card-no-flip .author {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--muted);
}

.card-no-flip .quote {
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--muted);
  font-style: italic;
  position: relative;
  padding: 0 4%;
}

.card-no-flip .quote::before {
  content: '\201C';
  font-family: 'Lora', serif;
  font-size: 2em;
  color: var(--accent);
  opacity: 0.35;
  position: absolute;
  top: -0.3em;
  left: -0.05em;
  line-height: 1;
}

.card-no-flip img {
  max-height: 80%;
  /*max-width: 70%;
  object-fit: contain;
  opacity: 0.85;
  filter: sepia(0.1); */
}

p.gifts { margin: 0 ; }

/* =====================================================
   RESPONSIVE — MOBILE (single column, tap to flip)
   ===================================================== */

@media (max-width: 600px) {
  .card-grid {
    padding: 5vw;
    gap: 5vw;
  }

  .card-flip,
  .card-no-flip {
    flex: 0 0 100%;
    width: 100%;
    aspect-ratio: 1 / 1.5;
  }

  .card-flip {
    perspective: 1200px;
    box-shadow: 0 4px 16px #00000022;
    transform: none !important;
  }

  .card-placeholder {
    display: none;
  }
}


/* =====================================================
   RESPONSIVE — TABLET (two columns)
   ===================================================== */

@media (min-width: 601px) and (max-width: 900px) {
  :root {
    --gap:  18px;
    --card: calc((100% - 18px * 3) / 2);
  }

  .card-flip,
  .card-no-flip {
    flex: 0 0 var(--card);
  }
}