/* =========================================================
   about.css — PACIFIC MAIDS (ABOUT PAGE STYLES)
   PURPOSE: Page-specific styling for about.html.
   NOTE: This file is meant to sit ON TOP of style.css (global).
         It should NOT reset global fonts or base typography unless needed.

   =========================================================
   FILE CONTENTS (SECTIONS INSIDE THIS about.css)
   =========================================================
   0) ABOUT.CSS OVERVIEW + RULES (this header)
   1) ABOUT HERO SECTION (.about-page)
      - Background + text tone
      - Left image card styling (.custom-img)
      - Headings + subtitle (.lead)
      - Paragraph sizing + spacing
      - Button spacing
      - Responsive tuning (tablet + mobile)
   2) "PACIFIC MAIDS DIFFERENCE" ARTICLE CARD (.blog-article)
      - White card container with border/shadow/padding
      - Headings (h1/h2/h3)
      - Paragraph typography
      - Lists (ul/li) formatting
      - Links (a) styling
      - Mobile padding tweak

   =========================================================
   IMPORTANT NOTES
   =========================================================
   - Keep your font-family in style.css (global). Don’t override here.
   - Prefer using CSS variables from style.css if available:
       var(--heading), var(--text), var(--primary), etc.
   - Keep selectors scoped to .about-page and .blog-article to avoid
     accidentally changing other pages.
========================================================= */


/* =========================================================
   1) ABOUT HERO SECTION
   Targets: <section class="about-page ..."> in about.html

   NOTES:
   - Uses subtle gray background so the section feels separated.
   - Typography aligns with global style.css (Josefin Sans, etc.).
========================================================= */
.about-page{
  /* Do NOT override the site font-family here.
     Your global style.css already sets Josefin Sans. */
  background-color: #f9f9f9;
  color: #3b4045;
}

/* Left image card */
.about-page .custom-img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

/* Headings in About section */
.about-page h1,
.about-page h2,
.about-page h3{
  color: #1d3557; /* matches your site heading tone */
  font-weight: 700;
  line-height: 1.2;
}

/* Main title (h1) */
.about-page h1{
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
}

/* Subtitle (Bootstrap .lead) */
.about-page .lead{
  font-size: 1.55rem;
  font-weight: 600;
  color: #374c61;
  line-height: 1.35;
  margin-bottom: 1rem;
}

/* Paragraphs */
.about-page p{
  font-size: 18px;
  line-height: 1.65;
  color: #555;
  margin-bottom: 1.25rem;
}

/* Button spacing */
.about-page .btn{
  margin-top: 0.5rem;
}

/* Responsive tuning */
@media (max-width: 991px){
  .about-page h1{ font-size: 2.15rem; }
  .about-page .lead{ font-size: 1.35rem; }
}

@media (max-width: 576px){
  .about-page h1{ font-size: 1.95rem; }
  .about-page p{ font-size: 17px; }
}


/* =========================================================
   2) "PACIFIC MAIDS DIFFERENCE" ARTICLE SECTION
   Targets: <section class="blog-article ..."> in about.html

   NOTES:
   - Styled as a readable “content card” (white background + shadow).
   - Keeps headings consistent and easy to scan.
========================================================= */
.blog-article{
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
  padding: 28px;
}

/* Headings inside the article card */
.blog-article h1,
.blog-article h2,
.blog-article h3{
  color: #1d3557;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 12px;
}

/* If you still use h1 inside article card */
.blog-article h1{ font-size: 2rem; }

/* h2 + h3 sizes */
.blog-article h2{
  font-size: 1.65rem;
  margin-top: 18px;
}

.blog-article h3{
  font-size: 1.35rem;
  margin-top: 16px;
}

/* Paragraphs inside article */
.blog-article p{
  font-size: 18px;
  line-height: 1.7;
  color: #3b4045;
  margin-bottom: 1rem;
}

/* List spacing + readability */
.blog-article ul{
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0 0 1rem;
  color: #3b4045;
  font-size: 18px;
  line-height: 1.7;
}

.blog-article li{ margin-bottom: 0.4rem; }

/* Links inside article */
.blog-article a{
  color: #4a6fa5; /* matches your CTA button color */
  text-decoration: underline;
  font-weight: 600;
}

.blog-article a:hover{
  color: #2f5f9a;
}

/* Mobile padding */
@media (max-width: 576px){
  .blog-article{ padding: 20px; }
}