/* Consolidated from: gfw.css, style.css, stylengfw.css */
/* NOTE: order preserved as listed to keep cascade behaviour. */


/* ===== Source: gfw.css ===== */
@charset "utf-8";


@media (max-width: 600px) {




    .card-grid {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: space-around;
        background: #ffffff;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
        padding: 5px 0;
        z-index: 1000;
    }

    .card {
        flex: 1;
        text-align: center;
        padding: 8px 4px;
        text-decoration: none;
        color: #333;
    }

    .card h3 {
        font-size: 11px;
        margin: 2px 0 0;
    }

    .card p {
        display: none; /* hide descriptions */
    }

    .card-icon {
        font-size: 18px;
        margin-bottom: 2px;
    }
	body {
        padding-bottom: 90px; /* match nav height */
    }


    .section-title {
        display: none; /* hide title on small screens */
    }
}

:root{
  --green:#1b5e20;
  --green2:#2e7d32;
  --dark:#102315;
  --light:#f4f7f4;
  --white:#ffffff;
  --shadow:0 4px 14px rgba(0,0,0,0.12);
  --radius:18px;
}

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

body{
    font-family:Arial,sans-serif;
    background:linear-gradient(180deg,#eef7ef 0%,#f7fafc 100%);
    color:#222;
    line-height:1.5;
}

.hero{
    background:
    linear-gradient(rgba(0,0,0,0.55),rgba(0,0,0,0.55)),
    url("https://agriculture-4-u.co.uk/wp-content/uploads/2025/02/200811NHolladCR9080-Soames-34-scaled.jpg");
    background-size:cover;
    background-position:center;
    color:#fff;
    padding:60px 20px 50px;
    text-align:center;
    border-bottom-left-radius:30px;
    border-bottom-right-radius:30px;
    box-shadow:0 4px 18px rgba(0,0,0,0.2);
}

.hero h1{
    font-size:2rem;
    margin-bottom:12px;
    font-weight:800;
}

.hero p{
    max-width:700px;
    margin:auto;
    font-size:1rem;
    opacity:0.95;
}

.hero i{
    color:#ffd54f;
    margin-right:10px;
}

.container{
    max-width:1100px;
    margin:auto;
    padding:22px 16px 50px;
}

.gfw-container{
  font-family:Arial,sans-serif;
  line-height:1.8;
  font-size:18px;
  max-width:900px;
  margin:auto;
  padding:12px;
  color:#222;
}

.gfw-header{
  background:linear-gradient(135deg,#1b5e20,#43a047);
  color:#fff;
  padding:22px 18px;
  border-radius:22px;
  font-size:18px;
  line-height:1.3;
  font-weight:800;
  text-align:left;
  box-shadow:var(--shadow);
  margin-bottom:18px;
  position:sticky;
  top:8px;
  z-index:99;
}

.gfw-sub{
  font-size:15px;
  font-weight:normal;
  margin-top:6px;
  opacity:0.95;
}

.quick-nav{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-bottom:18px;
}

.quick-nav a{
  text-decoration:none;
  background:#fff;
  border-radius:14px;
  padding:10px 6px;
  text-align:center;
  font-size: 1.2rem;
  font-weight:bold;
  color:#1b5e20;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
}

.section-title{
    margin:25px 0 15px;
    display:flex;
    align-items:center;
    gap:12px;
    font-size:1.2rem;
    font-weight:700;
    color:#1b5e20;
}

.section-title i{
    background:#1b5e20;
    color:#fff;
    width:42px;
    height:42px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1rem;
}

.gfw-section{
  margin:14px 0;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  background:#fff;
  font-size: 1.2rem;
  line-height:1.3;
}

.gfw-title{
  padding:20px;
  cursor:pointer;
  font-weight:700;
  color:#fff;
  font-size: 1.2rem;
  line-height:1.4;
  position:relative;
  transition:0.3s;
}

.gfw-title:hover{
  filter:brightness(1.05);
}

.gfw-title span{
  display:block;
  margin-top:4px;
  font-size: 1.2rem;
  font-style:italic;
  font-weight:normal;
  opacity:0.9;
}

.gfw-title::after{
  content:"+";
  position:absolute;
  right:18px;
  top:14px;
  font-size: 1.2rem;
  font-weight:bold;
}

.gfw-section.active .gfw-title::after{
  content:"−";
}

.sec1{background:linear-gradient(135deg,#c62828,#ef5350);}

.sec2{background:linear-gradient(135deg,#6a1b9a,#ab47bc);}

.sec3{background:linear-gradient(135deg,#0277bd,#29b6f6);}

.sec4{background:linear-gradient(135deg,#2e7d32,#66bb6a);}

.sec5{background:linear-gradient(135deg,#ef6c00,#ffb74d);}

.sec6{background:linear-gradient(135deg,#455a64,#90a4ae);}

.sec7{background:linear-gradient(135deg,#ad1457,#ec407a);}

.sec8{background:linear-gradient(135deg,#00695c,#26a69a);}

.sec9{background:linear-gradient(135deg,#5d4037,#8d6e63);}

.gfw-content{
  display:none;
  padding:18px;
  background:#fff;
  animation:fadeIn 0.3s ease;
}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(-6px);}
  to{opacity:1;transform:translateY(0);}
}

.card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:18px;
}

.revision-card{
  background:#f7faf7;
  border-left:5px solid var(--green2);
  padding:14px;
  margin:14px 0;
  border-radius:12px;
}

.law{
  background:#e3f2fd;
  padding:12px;
  border-radius:10px;
  margin:10px 0;
}

.trap{
  background:#ffebee;
  padding:12px;
  border-radius:10px;
  margin:10px 0;
  font-weight:bold;
}

.highlight{
  background:#fff8d6;
  padding:12px;
  border-radius:10px;
  margin:10px 0;
}

.card{
    background:#fff;
    border-radius:22px;
    padding:22px;
    text-decoration:none;
    color:#222;
    box-shadow:0 5px 18px rgba(0,0,0,0.08);
    transition:0.25s ease;
    position:relative;
    overflow:hidden;
}

.card:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 24px rgba(0,0,0,0.14);
}

.card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:6px;
}

.green::before{background:#2e7d32;}

.blue::before{background:#1565c0;}

.orange::before{background:#ef6c00;}

.red::before{background:#c62828;}

.purple::before{background:#6a1b9a;}

.card-icon{
    width:62px;
    height:62px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.5rem;
    margin-bottom:18px;
    color:#fff;
}

.green .card-icon{background:#2e7d32;}

.blue .card-icon{background:#1565c0;}

.orange .card-icon{background:#ef6c00;}

.red .card-icon{background:#c62828;}

.purple .card-icon{background:#6a1b9a;}

.card h3{
    font-size:1.1rem;
    margin-bottom:8px;
}

.card p{
    font-size:0.92rem;
    color:#555;
}

ul{
  padding-left:20px;
}

li{
  margin-bottom:8px;
}

table{
  width:100%;
  border-collapse:collapse;
  margin:14px 0;
  overflow:hidden;
  border-radius:12px;
}

th{
  background:#1b5e20;
  color:#fff;
  padding:12px;
  font-size: 1.2rem;
}

td{
  padding:12px;
  background:#fff;
  border-bottom:1px solid #eee;
  font-size: 1.2rem;
}

.tip-box{
    margin-top:28px;
    background:linear-gradient(135deg,#1b5e20,#43a047);
    color:#fff;
    padding:20px;
    border-radius:20px;
    box-shadow:0 5px 16px rgba(0,0,0,0.12);
}

.tip-box h2{
    margin-bottom:10px;
    font-size:1.2rem;
}

.tip-box p{
    font-size:0.95rem;
}

.digest-box,
.health-box,
.repro-card{
  border-radius:16px;
  overflow:hidden;
  margin-bottom:14px;
  border:1px solid #ddd;
  box-shadow:0 2px 10px rgba(0,0,0,0.06);
}

.digest-header,
.health-header,
.repro-header{
  background:#1b5e20;
  color:#fff;
  padding:15px;
  cursor:pointer;
  font-weight:bold;
  font-size: 1.2rem;
}

.digest-content,
.health-content,
.repro-content{
  display:none;
  padding:15px;
  background:#fff;
}

iframe{
  border-radius:12px;
}

button,
.repro-btn{
  background:linear-gradient(135deg,#1b5e20,#43a047);
  color:#fff;
  border:none;
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  margin:5px 5px 5px 0;
  font-size:14px;
  font-weight:bold;
}

button:hover,
.repro-btn:hover{
  opacity:0.9;
}

.feedback{
  margin-top:8px;
  font-weight:bold;
}

.reveal-box{
  display:none;
  margin-top:10px;
  padding:12px;
  border-radius:10px;
  background:#e8f5e9;
  border-left:5px solid green;
}

.footer{
    text-align:center;
    padding:30px 15px;
    color:#666;
    font-size:0.9rem;
}

.gfw-nav{
  position:fixed;
  top:0;
  z-index:999;
  background:linear-gradient(135deg,);
  padding:10px;
  border-radius:0 0 16px 16px;
  box-shadow:0 3px 10px rgba(0,0,0,0.2);
  font-size: 1.2rem;
}

.gfw-nav-scroll{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  justify-content:center;
  font-size: 1.2rem;
}

.gfw-nav-scroll::-webkit-scrollbar{
  display:none;
}

.gfw-nav a{
  flex:0 0 auto;
  text-decoration:none;
 background:#ffd54f;
color:#222;
  padding:14px 16px;
  border-radius:12px;
  font-size: 1.2rem;
  font-weight:700;
  white-space:nowrap;
  transition:0.2s;
  border:2px solid rgba(255,255,255,0.15);
}

.gfw-nav a:hover{
  background:#fff;
  color:#1b5e20;
  transform:translateY(-2px);
}

.gfw-nav a.active{
  background:#fff;
  color:#1b5e20;
}

@media(max-width:728px){
	
	.gfw-header{
  font-size: 1.2rem;
  padding:18px 12px;
}

.gfw-nav a{
    font-size: 1.2rem;
    padding:16px 20px;
  }


.quick-nav{
  grid-template-columns:repeat(2,1fr);
}

.gfw-title{
  font-size: 1.2rem;
  padding:16px;
}

.gfw-content{
  padding:15px;
}

iframe{
  height:220px;
}

table{
  font-size:13px;
}

th,td{
  padding:8px;
}

button{
  width:100%;
  margin-bottom:8px;
}

.hero{
    padding:50px 18px 40px;
}

.hero h1{
    font-size:1.7rem;
}

.card{
    padding:20px;
}

.card-icon{
    width:55px;
    height:55px;
    font-size:1.3rem;
}

}

.gfw-nav{
  position:relative;
  top:0;
  z-index:999;
  background:linear-gradient(135deg,);
  padding:10px;
  border-radius:0 0 16px 16px;
  box-shadow:0 3px 10px rgba(0,0,0,0.2);
}

.gfw-nav-scroll{
  display:flex;
  gap:10px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  justify-content:center;
}

.gfw-nav a{
  flex:0 0 auto;
  text-decoration:none;
 background:#ffd54f;
color:#222;
  padding:10px 14px;
  border-radius:12px;
  font-size:24px;
  font-weight:bold;
  white-space:nowrap;
  transition:0.2s;
  border:1px solid rgba(255,255,255,0.15);
}

.epa-container{
  font-family:Arial,sans-serif;
  max-width:900px;
  margin:auto;
  line-height:1.6;
  padding:10px;
}

.epa-header{
  background:linear-gradient(135deg,#1b5e20,#43a047);
  color:#fff;
  padding:20px;
  border-radius:18px;
  text-align:center;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  margin-bottom:15px;
}

.epa-header h4{
  margin:0;
  font-size:24px;
}

.epa-header p{
  margin-top:8px;
  font-size:15px;
}

.epa-section{
  margin-bottom:14px;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 3px 10px rgba(0,0,0,0.08);
  border:1px solid #ddd;
}

.epa-title{
  color:#fff;
  padding:16px;
  cursor:pointer;
  font-weight:bold;
  font-size:17px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.sec1{background:#2e7d32;}

.sec2{background:#00897b;}

.sec3{background:#6a1b9a;}

.sec4{background:#ef6c00;}

.sec5{background:#1565c0;}

.sec6{background:#5d4037;}

.expand{
  font-style:italic;
  font-size:13px;
  font-weight:normal;
}

.epa-content{
  display:none;
  padding:18px;
  background:#fff;
}

.tip{
  background:#e8f5e9;
  border-left:5px solid #2e7d32;
  padding:12px;
  border-radius:8px;
  margin-bottom:15px;
}

.warning{
  background:#ffebee;
  border-left:5px solid #c62828;
  padding:12px;
  border-radius:8px;
  margin-top:15px;
}

.progress{
  background:#e0e0e0;
  border-radius:20px;
  overflow:hidden;
  height:24px;
  margin:15px 0;
}

.progress-bar{
  height:100%;
  width:0;
  background:linear-gradient(90deg,#43a047,#1b5e20);
  text-align:center;
  color:#fff;
  line-height:24px;
  font-size:13px;
  font-weight:bold;
  transition:0.3s;
}

.task-box{
  background:#fff;
  border-radius:14px;
  padding:15px;
  margin-top:15px;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
  border:1px solid #ddd;
}

button{
  background:#1b5e20;
  color:#fff;
  border:none;
  padding:10px 14px;
  border-radius:10px;
  margin:5px 3px;
  cursor:pointer;
  font-weight:bold;
}

button:hover{
  background:#43a047;
}

select{
  width:100%;
  padding:10px;
  border-radius:10px;
  border:1px solid #bbb;
  margin-top:10px;
}

.correct{
  color:green;
  font-weight:bold;
}

.wrong{
  color:red;
  font-weight:bold;
}

label{
  display:block;
  margin:8px 0;
}

hr{
  border:none;
  border-top:1px solid #ddd;
  margin:20px 0;
}


/* ===== Source: style.css ===== */
:root{
  --green:#1b5e20;
  --green2:#43a047;
  --shadow:0 4px 14px rgba(0,0,0,0.12);
  --navHeight:72px;
}

#exam-container{
  max-width:900px;
  margin:auto;
  padding:12px;
  color:#222;
}

.hero{
  background:
    linear-gradient(rgba(0,0,0,0.55),rgba(0,0,0,0.55)),
    url("https://agriculture-4-u.co.uk/wp-content/uploads/2025/02/200811NHolladCR9080-Soames-34-scaled.jpg");
  background-size:cover;
  background-position:center;
  color:#fff;
  padding:60px 20px 50px;
  text-align:center;
  border-bottom-left-radius:30px;
  border-bottom-right-radius:30px;
  box-shadow:0 4px 18px rgba(0,0,0,0.2);
  margin-bottom:18px;
}

.hero h1{
  font-size:36px;
  margin-bottom:12px;
  font-weight:800;
}

.hero p{
  max-width:700px;
  margin:auto;
  font-size:22px;
  opacity:0.95;
  line-height:1.4;
}

.exam-info{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:18px;
}

.info-card{
  background:#fff;
  border-radius:16px;
  padding:14px;
  text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

.info-card b{
  display:block;
  font-size: 1.2rem;
  color:var(--green);
  margin-bottom:4px;
}

.progress-wrap{
  background:#d9e8db;
  border-radius:20px;
  overflow:hidden;
  height:18px;
  margin:18px 0;
}

.progress-bar{
  background:linear-gradient(135deg,var(--green),var(--green2));
  height:100%;
  width:0%;
  transition:0.3s;
}

.question-card{
  background:#fff;
  border-radius:20px;
  padding:18px;
  margin-bottom:16px;
  box-shadow:var(--shadow);
  border-left:6px solid var(--green);
  animation:fadeIn 0.3s ease;
}

.question-number{
  font-size:18px;
  color:#666;
  margin-bottom:6px;
  font-weight:bold;
}

.question-text{
  font-size:22px;
  font-weight:bold;
  margin-bottom:16px;
  line-height:1.4;
}

.answer-option{
  display:block;
  background:#f7f7f7;
  padding:14px;
  border-radius:14px;
  margin-bottom:10px;
  cursor:pointer;
  transition:0.2s;
  border:2px solid transparent;
  font-size:20px;
}

.answer-option:hover{
  background:#edf7ee;
  border-color:var(--green2);
}

.answer-option input{
  margin-right:10px;
  transform:scale(1.2);
}

.correct{
  background:#dff5df !important;
  border:2px solid #2e7d32 !important;
}

.incorrect{
  background:#ffe0e0 !important;
  border:2px solid #c62828 !important;
}

.exam-buttons{
  position:sticky;
  bottom:10px;
  display:flex;
  gap:10px;
  margin-top:20px;
  z-index:50;
}

.exam-btn{
  flex:1;
  border:none;
  padding:16px;
  border-radius:18px;
  font-size:22px;
  font-weight:bold;
  cursor:pointer;
  box-shadow:var(--shadow);
}

.submit-btn{
  background:linear-gradient(135deg,var(--green),var(--green2));
  color:#fff;
}

.reset-btn{
  background:#fff;
  color:var(--green);
}

#result{
  margin-top:24px;
}

.result-card{
  background:linear-gradient(135deg,var(--green),var(--green2));
  color:#fff;
  padding:24px;
  border-radius:24px;
  text-align:center;
  box-shadow:var(--shadow);
  animation:fadeIn 0.4s ease;
}

.result-card h3{
  margin:0;
  font-size:34px;
}

.result-card p{
  margin-top:10px;
  font-size:18px;
}

@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(6px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.card-grid{
  display:none;
}

@media (max-width:700px){

  body{
    padding-bottom:calc(var(--navHeight) + 12px);
  }

  /* lift buttons above nav */
  .exam-buttons{
    bottom:calc(var(--navHeight) + 10px);
  }

  .exam-info{
    grid-template-columns:1fr;
  }

  .hero h1{
    font-size: 1.2rem;
  }

  .hero p{
    font-size:18px;
  }

  .question-text{
    font-size:20px;
  }

  .answer-option{
    font-size:18px;
    padding:12px;
  }

  .exam-btn{
    font-size:18px;
    padding:14px;
  }

  /* NAV BAR */
  .card-grid{
    display:flex;
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:var(--navHeight);
    justify-content:space-around;
    align-items:center;
    background:#fff;
    box-shadow:0 -2px 10px rgba(0,0,0,0.2);
    padding:6px 0;
    z-index:9999;
  }

  .card{
    flex:1;
    text-align:center;
    text-decoration:none;
    color:#fff;
    padding:8px 4px;
    border-radius:12px;
    transition:0.15s;
  }

  /* 🌈 COLOURS */
  .card:nth-child(1){ background:#ff9800; }
  .card:nth-child(2){ background:#2196f3; }
  .card:nth-child(3){ background:#e91e63; }
  .card:nth-child(4){ background:#4caf50; }
  .card:nth-child(5){ background:#9c27b0; }

  .card-icon{
    font-size:18px;
    margin-bottom:2px;
  }

  .card h3{
    font-size:11px;
    margin:0;
    font-weight:700;
  }

  .card:active{
    transform:scale(0.96);
  }

  .card.active{
    background:#fff;
    color:var(--green);
  }

  .card.active .card-icon{
    color:var(--green);
  }
}


/* ===== Source: stylengfw.css ===== */
.tile-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:18px;
}

.tile{
    background:#fff;
    border-radius:22px;
    padding:22px;
    text-decoration:none;
    color:#222;
    box-shadow:0 5px 18px rgba(0,0,0,0.08);
    transition:0.25s ease;
    position:relative;
    overflow:hidden;
}

.tile:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 24px rgba(0,0,0,0.14);
}

.tile::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:6px;
}

.tile-icon{
    width:62px;
    height:62px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.5rem;
    margin-bottom:18px;
    color:#fff;
}

.green .tile-icon{background:#2e7d32;}

.blue .tile-icon{background:#1565c0;}

.orange .tile-icon{background:#ef6c00;}

.red .tile-icon{background:#c62828;}

.purple .tile-icon{background:#6a1b9a;}

.tile h3{
    font-size:1.1rem;
    margin-bottom:8px;
}

.tile p{
    font-size:0.92rem;
    color:#555;
}

@media (max-width: 600px) {


body {
        padding-bottom: 90px; /* match nav height */
    }


    .section-title {
        display: none; /* hide title on small screens */
    }

    .card-grid {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: space-around;
        background: #ffffff;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
        padding: 5px 0;
        z-index: 1000;
    }

    .card {
        flex: 1;
        text-align: center;
        padding: 8px 4px;
        text-decoration: none;
        color: #333;
    }

    .card h3 {
        font-size: 11px;
        margin: 2px 0 0;
    }

    .card p {
        display: none; /* hide descriptions */
    }

    .card-icon {
        font-size: 18px;
        margin-bottom: 2px;
    }
	body {
        padding-bottom: 90px; /* match nav height */
    }


    .section-title {
        display: none; /* hide title on small screens */
    }
}