<?php
/**
 * Template Name: Fidya Kaffarah
 */
get_header();
$site_url = get_site_url();
$uploads = get_site_url() . '/wp-content/uploads/2026/03';
?>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">

<style>
  .fk, .fk * {
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    margin: 0; padding: 0;
  }
  .fk, .fk h1, .fk h2, .fk h3, .fk h4, .fk span, .fk div, .fk p, .fk li, .fk strong, .fk .fk-amount, .fk .fk-card-label { color: #fff !important; }
  .fk {
    padding: 0 !important;
    background: #0a0a0a !important;
    color: #fff;
  }
  .fk-inner {
    max-width: 1200px;
    padding: 0 24px;
    margin: 0 auto;
  }

  /* Hero section with background image */
  .fk-hero {
    position: relative;
    padding: 120px 20px 80px;
    overflow: hidden;
    min-height: 480px;
    display: flex;
    align-items: flex-end;
  }
  .fk-hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('<?php echo $uploads; ?>/fidya-hero.jpg');
    background-size: cover;
    background-position: center 25%;
    z-index: 0;
  }
  .fk-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(10,10,10,0.3) 0%,
      rgba(10,10,10,0.6) 40%,
      rgba(10,10,10,0.92) 100%
    );
  }
  .fk-hero .fk-inner {
    position: relative;
    z-index: 1;
  }

  .fk h1 {
    color: #fff !important;
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 12px;
    letter-spacing: -0.03em;
  }
  .fk h1 span { color: #e42281 !important; }
  .fk .fk-sub {
    font-size: 1.05rem;
    color: #ccc !important;
    font-weight: 300;
    line-height: 1.6;
    max-width: 600px;
    margin-bottom: 0;
  }

  /* Content section */
  .fk-content {
    padding: 60px 20px 80px;
  }

  /* Cards */
  .fk-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 60px;
  }
  .fk-card {
    background: #141414;
    border: 1px solid #222;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s, background 0.3s;
  }
  .fk-card:hover {
    border-color: #e42281 !important;
    background: #1a1a1a;
  }

  /* Card images */
  .fk-card-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    filter: brightness(0.85);
    transition: filter 0.3s, transform 0.4s;
  }
  .fk-card:hover .fk-card-img {
    filter: brightness(1);
    transform: scale(1.03);
  }
  .fk-card-img-wrap {
    overflow: hidden;
    position: relative;
  }
  .fk-card-img-wrap::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    background: linear-gradient(to bottom, transparent, #141414);
  }
  .fk-card:hover .fk-card-img-wrap::after {
    background: linear-gradient(to bottom, transparent, #1a1a1a);
  }

  .fk-card-body {
    padding: 32px 32px 40px;
  }

  .fk-card-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #e42281 !important;
    margin-bottom: 20px;
    display: block;
  }
  .fk-card h2 {
    color: #fff !important;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
  }
  .fk-card p {
    font-size: 0.92rem;
    color: #999 !important;
    line-height: 1.65;
    margin-bottom: 24px;
    font-weight: 300;
  }
  .fk-card .fk-amount {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
  }
  .fk-card .fk-amount span {
    color: #e42281 !important;
    font-size: 1.4rem;
  }
  .fk-card .fk-calc {
    font-size: 0.82rem;
    color: #666 !important;
    margin-bottom: 28px;
    font-weight: 400;
  }

  .fk-btn {
    display: inline-block;
    background: #e42281;
    color: #fff !important;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 14px 32px;
    text-decoration: none !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 2px;
    transition: background 0.2s, transform 0.2s;
  }
  .fk-btn:hover {
    background: #c2185b;
    transform: translateY(-1px);
  }
  .fk-btn:visited { color: #fff !important; }

  /* Who is this for sections */
  .fk-who {
    margin-top: 20px;
    padding-top: 24px;
    border-top: 1px solid #222;
  }
  .fk-who-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #555 !important;
    margin-bottom: 12px;
    display: block;
  }
  .fk-who ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .fk-who li {
    font-size: 0.85rem;
    color: #bbb !important;
    line-height: 1.5;
    padding: 6px 0 6px 20px;
    position: relative;
    font-weight: 400;
  }
  .fk-who li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e42281;
  }

  /* Full-width image strip */
  .fk-image-strip {
    position: relative;
    width: 100%;
    height: 320px;
    overflow: hidden;
    margin-bottom: 60px;
  }
  .fk-image-strip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
    filter: brightness(0.7);
  }
  .fk-image-strip::before,
  .fk-image-strip::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 80px;
    z-index: 1;
  }
  .fk-image-strip::before {
    top: 0;
    background: linear-gradient(to bottom, #0a0a0a, transparent);
  }
  .fk-image-strip::after {
    bottom: 0;
    background: linear-gradient(to top, #0a0a0a, transparent);
  }
  .fk-image-strip-text {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.6) !important;
  }

  /* Not sure section */
  .fk-unsure {
    text-align: center;
    margin-bottom: 60px;
    padding: 32px;
    background: #141414;
    border: 1px solid #222;
  }
  .fk-unsure h3 {
    color: #fff !important;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: #fff;
  }
  .fk-unsure p {
    font-size: 0.92rem;
    color: #999 !important;
    line-height: 1.6;
    margin-bottom: 12px;
    font-weight: 300;
  }
  .fk-unsure p:last-child { margin-bottom: 0; }
  .fk-unsure strong {
    color: #fff;
    font-weight: 600;
  }

  /* Bottom quote with background */
  .fk-quote-section {
    position: relative;
    padding: 80px 20px;
    overflow: hidden;
  }
  .fk-quote-bg {
    position: absolute;
    inset: 0;
    background-image: url('<?php echo $uploads; ?>/fidya-child-meal.jpg');
    background-size: cover;
    background-position: center;
    z-index: 0;
  }
  .fk-quote-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(10,10,10,0.82);
  }
  .fk-quote {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
  }
  .fk-quote p {
    font-size: 1.05rem;
    color: #ccc !important;
    font-style: italic;
    line-height: 1.7;
    font-weight: 300;
  }
  .fk-quote .fk-attr {
    font-size: 0.8rem;
    color: #888 !important;
    font-style: normal;
    margin-top: 8px;
  }

  @media (max-width: 700px) {
    .fk-cards {
      grid-template-columns: 1fr;
    }
    .fk, .fk h1, .fk h2, .fk h3, .fk h4, .fk span, .fk div, .fk p, .fk li, .fk strong, .fk .fk-amount, .fk .fk-card-label { color: #fff !important; }
    .fk-hero { padding: 80px 16px 50px; min-height: 380px; }
    .fk-content { padding: 40px 16px 60px; }
    .fk-card-body { padding: 24px 24px 32px; }
    .fk-card-img { height: 180px; }
    .fk-image-strip { height: 220px; }
  }
</style>

<div class="fk">

  <!-- Hero with background photography -->
  <div class="fk-hero">
    <div class="fk-hero-bg"></div>
    <div class="fk-inner">
      <h1>Missed Fasts?<br><span>Make it Right.</span></h1>
      <p class="fk-sub">If you are unable to fast during Ramadan, or have broken a fast without a valid reason, Islam provides a way to fulfil your obligation. Choose the option that applies to you.</p>
    </div>
  </div>

  <!-- Main content -->
  <div class="fk-content">
    <div class="fk-inner">

      <div class="fk-cards">

        <!-- FIDYA -->
        <div class="fk-card">
          <div class="fk-card-img-wrap">
            <img class="fk-card-img" src="<?php echo $uploads; ?>/fidya-quran-elder.jpg" alt="An elderly man in prayer — for those who are unable to fast" loading="lazy">
          </div>
          <div class="fk-card-body">
            <span class="fk-card-label">Fidya</span>
            <h2>I am unable to fast<br>and cannot make it up.</h2>
            <p>Fidya is a <strong style="color:#fff;font-weight:600;">compensation</strong> for those who cannot fast during Ramadan due to a long-term illness, old age, or a condition that is not expected to improve. For each day of fasting missed, you are required to feed one person in need.</p>

            <div class="fk-amount"><span>&pound;5</span> per missed fast</div>
            <div class="fk-calc">Feeds one person for each day you are unable to fast</div>

            <a href="https://app.charityright.org.uk/donate/?v=2&project=18" class="fk-btn">Pay Fidya</a>

            <div class="fk-who">
              <span class="fk-who-label">This applies if you</span>
              <ul>
                <li>Have a long-term or chronic illness with no expectation of recovery</li>
                <li>Are elderly and physically unable to fast</li>
                <li>Have a medical condition requiring daily medication that prevents fasting</li>
                <li>Have been advised by a doctor that fasting would be harmful to your health</li>
              </ul>
            </div>
          </div>
        </div>

        <!-- KAFFARAH -->
        <div class="fk-card">
          <div class="fk-card-img-wrap">
            <img class="fk-card-img" src="<?php echo $uploads; ?>/kaffarah-community.jpg" alt="Children receiving meals at a community feeding programme" loading="lazy">
          </div>
          <div class="fk-card-body">
            <span class="fk-card-label">Kaffarah</span>
            <h2>I deliberately broke<br>my fast without reason.</h2>
            <p>Kaffarah is an <strong style="color:#fff;font-weight:600;">expiation</strong> required when a person deliberately breaks their Ramadan fast without a valid Islamic reason. The obligation is to fast for 60 consecutive days. If you are genuinely unable to do so, you must feed 60 people in need for each fast broken.</p>

            <div class="fk-amount"><span>&pound;300</span> per broken fast</div>
            <div class="fk-calc">Equivalent to feeding 60 people in need</div>

            <a href="https://app.charityright.org.uk/donate/?v=2&project=28" class="fk-btn">Pay Kaffarah</a>

            <div class="fk-who">
              <span class="fk-who-label">This applies if you</span>
              <ul>
                <li>Deliberately ate or drank during fasting hours without a valid reason</li>
                <li>Intentionally broke your fast in a way that invalidates it</li>
                <li>Are unable to fast for 60 consecutive days as the primary expiation</li>
              </ul>
            </div>
          </div>
        </div>

      </div>

      <!-- Full-width image strip — feeding the hungry -->
      <div class="fk-image-strip">
        <img src="<?php echo $uploads; ?>/fidya-feeding.jpg" alt="Food being served to those in need" loading="lazy">
        <span class="fk-image-strip-text">Every meal matters</span>
      </div>

      <div class="fk-unsure">
        <h3>Can you make up your fasts?</h3>
        <p>If you missed fasts due to a <strong>temporary</strong> illness, travel, menstruation, or pregnancy, you are expected to make up the missed days before the next Ramadan. In this case, neither Fidya nor Kaffarah is required.</p>
        <p>Fidya applies only when you are <strong>permanently unable</strong> to fast. Kaffarah applies only when you <strong>deliberately</strong> broke a fast without a valid reason. If you are unsure, consult a scholar.</p>
      </div>

    </div>
  </div>

  <!-- Quote section with background photography -->
  <div class="fk-quote-section">
    <div class="fk-quote-bg"></div>
    <div class="fk-quote">
      <p>&ldquo;And upon those who are able [to fast, but with hardship] &mdash; a ransom of feeding a poor person.&rdquo;</p>
      <p class="fk-attr">&mdash; Qur&rsquo;an, Surah Al-Baqarah (2:184)</p>
    </div>
  </div>

</div>

<?php get_footer(); ?>
