/* ==========================================
   RAIL YARD DESIGN SYSTEM
   SimplyBook Custom Page CSS
   ========================================== */


/* ================================
   Google Font
   ================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&display=swap');


/* ================================
   Base Typography + Links
   ================================ */

.ry-wrap,
.ry-wrap p,
.ry-wrap li,
.ry-wrap ul,
.ry-wrap ol,
.ry-wrap div,
.ry-wrap span,
.ry-wrap a{
  font-family: Verdana, sans-serif;
}

.ry-wrap a:not(.ry-btn){
  color:#0066cc;
  text-decoration:none;
}

.ry-wrap a:not(.ry-btn):hover{
  color:#004499;
  text-decoration:underline;
}


/* ================================
   Layout
   ================================ */

.ry-wrap{
  max-width:1000px;
  margin:0 auto;
  padding:16px 18px;
  animation:ryFadeIn 2s ease-out;
}

.ry-rates-wrap{
  max-width:1000px;
  margin:0 auto;
}

.ry-text{
  max-width:680px;
  margin-left:auto;
  margin-right:auto;
}

.ry-center{
  text-align:center;
}

.ry-grid{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.ry-col{
  flex:1 1 340px;
}


/* ================================
   Hero System
   ================================ */

.ry-hero{
  text-align:center;
  margin-top:12px;
  margin-bottom:40px;
}

.ry-hero .ry-title-xl,
.ry-hero .ry-title-lg{
  margin-bottom:12px;
}

.ry-hero-text{
  max-width:680px;
  margin:0 auto;
  font-size:16px;
  line-height:1.6;
}


/* ================================
   Divider
   ================================ */

.ry-divider{
  border:none;
  height:1px;
  background:#e6e6e6;
  margin:32px 0;
}


/* ================================
   Section Spacing
   ================================ */

.ry-section{
  margin-top:0;
}

.ry-section:first-child{
  margin-top:0;
}

.ry-section + .ry-section{
  margin-top:48px;
}

.ry-section-tight{
  margin-top:0;
}

.ry-section-tight + .ry-section-tight{
  margin-top:32px;
}


/* ================================
   Spacing Helpers
   ================================ */

.ry-mt-8{margin-top:8px;}
.ry-mt-12{margin-top:12px;}
.ry-mt-14{margin-top:14px;}
.ry-mt-16{margin-top:16px;}
.ry-mt-18{margin-top:18px;}
.ry-mt-24{margin-top:24px;}
.ry-mt-28{margin-top:28px;}
.ry-mt-32{margin-top:32px;}

.ry-mb-8{margin-bottom:8px;}
.ry-mb-12{margin-bottom:12px;}
.ry-mb-16{margin-bottom:16px;}
.ry-mb-24{margin-bottom:24px;}
.ry-mb-28{margin-bottom:28px;}
.ry-mb-34{margin-bottom:34px;}


/* ================================
   Headings
   ================================ */

.ry-title-xl,
.ry-title-lg,
.ry-title-md{
  font-family:Oswald,sans-serif !important;
  font-weight:700 !important;
  letter-spacing:-0.5px;
  line-height:1.15;
  text-align:center;
  text-decoration:underline;
  text-decoration-color:#222;
  text-decoration-thickness:3px;
  text-underline-offset:6px;
  margin:0 0 6px 0;
}

.ry-title-xl{font-size:44px;}
.ry-title-lg{font-size:36px;}
.ry-title-md{font-size:28px;}

@media(max-width:420px){
  .ry-title-xl{font-size:38px;}
  .ry-title-lg{font-size:32px;}
}


/* ================================
   Buttons
   ================================ */

.ry-btn{
  display:inline-block;
  background:#0477a4;
  color:#ffffff !important;
  padding:14px 26px;
  border-radius:12px;
  font-family:Verdana,sans-serif;
  font-size:18px;
  font-weight:bold;
  text-decoration:none !important;
  cursor:pointer;
  transition:
    opacity .15s ease,
    transform .15s ease;
}

.ry-btn:hover{
  opacity:0.7;
  transform:translateY(-2px);
}

.ry-btn-small{
  padding:10px 18px;
  font-size:16px;
}

.ry-btn-wrap{
  text-align:center;
  margin-top:16px;
}


/* ================================
   Cards
   ================================ */

.ry-card{
  border:1px solid #f0f0f0;
  border-radius:14px;
  padding:16px;
  background:#ffffff;
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

.ry-card-soft{
  background:#fafafa;
  border:1px solid #eee;
  border-radius:14px;
  padding:16px;
}

.ry-card-dashed{
  background:#ffffff;
  border:1px dashed #ddd;
  border-radius:14px;
  padding:16px;
}


/* ================================
   Callout Boxes
   ================================ */

.ry-callout{
  background:#eef7fb;
  border-left:6px solid #0477a4;
  padding:12px;
  border-radius:10px;
  font-size:13px;
  line-height:1.5;
}


/* ================================
   Text Readability
   ================================ */

.ry-wrap p{
  line-height:1.6;
  margin-bottom:12px;
}

.ry-wrap ul{
  margin-top:8px;
  margin-bottom:12px;
}

.ry-wrap li{
  line-height:1.6;
  margin-bottom:7px;
}


/* ================================
   Section Breaks
   ================================ */

.ry-section-break{
  border-bottom:1px solid #ececec;
  margin-bottom:20px;
  padding-bottom:20px;
  padding-top:15px;
}

.ry-section-break:last-child{
  border-bottom:0px solid #ececec;
  margin-bottom:20px;
}


/* ================================
   Rates Layout
   ================================ */

.ry-rate-stack{
  display:grid;
  gap:16px;
  margin-top:16px;
}

.ry-rate-row{
  position:relative;
  background:#fafafa;
  border:1px solid #eeeeee;
  border-radius:12px;
  padding:16px 18px 16px 24px;
  max-width:500px;
  width:100%;
  margin-left:0;
  margin-right:auto;
  box-shadow:0 3px 10px rgba(0,0,0,0.03);
}

.ry-rate-row::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:8px;
  background:linear-gradient(to bottom, #f3d84a 0%, #eed023 100%);
  border-radius:12px 0 0 12px;
}

.ry-rate-row + .ry-rate-row{
  margin-top:6px;
}

.ry-rate-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}

.ry-rate-name{
  font-size:16px;
  font-weight:600;
  line-height:1.4;
}

.ry-rate-price{
  font-size:28px;
  font-weight:700;
  color:#222222;
  min-width:86px;
  text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  flex-shrink:0;
  line-height:1;
}

.ry-rate-price::first-letter{
  font-size:16px;
  font-weight:600;
  color:#666666;
  opacity:1;
  margin-right:2px;
  vertical-align:top;
}

.ry-rate-sub{
  font-size:13px;
  color:#555;
  font-style:italic;
  margin-top:4px;
}

.ry-rate-meta{
  font-size:13px;
  color:#666;
  line-height:1.5;
  margin-top:6px;
}

@media(max-width:767px){
  .ry-rate-row{
    max-width:100%;
  }

  .ry-rate-price{
    font-size:26px;
  }
}


/* ================================
   Hover Effects
   ================================ */

@media (hover:hover){

  .ry-rate-row{
    transition:
      transform .15s ease,
      box-shadow .15s ease,
      border-color .15s ease,
      background .15s ease;
  }

  .ry-rate-row:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 26px rgba(0,0,0,0.10);
    border-color:#e3e3e3;
    background:#fffef7;
  }

  .ry-rate-row:hover::before{
    background:linear-gradient(to bottom, #f6df68 0%, #f3d84a 100%);
  }

}


/* ================================
   SimplyBook Homepage Fixes
   ================================ */

/* Hide forced homepage title above custom homepage HTML */
section#about-us.about-us > .section-pd > h3.title.title--h3{
  display:none !important;
}

/* Fallback if SimplyBook shifts classes slightly */
section#about-us .title.title--h3{
  display:none !important;
}


/* ================================
   Page Fade Animation
   ================================ */

@keyframes ryFadeIn{

  from{
    opacity:0;
    transform:translateY(10px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}