/**************************************
/* VARIABLES & RESET
/**************************************/
:root {
     --primary-brown: #5D4037;
     --light-brown: #8D6E63;
     --cream-bg: #fdfbf7;
     --pale-pink: #FFE4EF;
     --mute-pink: #FDEDED;
     --text-color: black;
     --white: #fff;
     --light-turqoise: #3BC1A8;
     --dark-turqoise: #005461;
     --nav-padding: 20px;
} 

html, body {
     max-width: 100%;
     overflow-x: hidden;
}

/* Box Model Hack */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: border-box;
}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
	clear: both;
}
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/******************************************
/* GLOBAL TYPOGRAPHY & LAYOUT
/*******************************************/
/* Updating Body selector to handle the "sticky footer" and global fonts */
body#fonts {
     font-family: "Nunito", sans-serif;
     font-size: 18px;
     line-height: 1.6;
     color: var(--text-color);
     background-color: var(--mute-pink);
     display: flex;
     flex-direction: column;
     min-height: 100vh; /* Sticky footer setup */
}

/* Headers */
h1, h2, h3 {
     font-family: "Quicksand", sans-serif;
     font-weight: 700;
     color: var(--text-color);
     margin-bottom: 1rem;
     line-height: 1.2;
}

h1 {
     font-size: 5rem;
     margin-top: 20px;
     text-align: center;
}

h2 {
     font-size: 3.7rem;
     text-align: center;
}

h3 {
     font-size: 2.5rem;
     text-align: center;
}

p {
     margin-bottom: 1.5rem;
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
     font-size: 1.5rem;
}

img {
     max-width: 100%;
     height: auto;
     display: block;
     margin: 0 auto;
}

strong {
     font-weight: bold;
}

em {
     font-style: italic;
}

/* Wrapper to prevent content touching edges */
section {
     width: 90%;
     max-width: 1200px;
     margin: 0 auto;
     padding: 40px 0;
     flex: 1; /* Pushes the footer down */
     text-align: center;
}

/******************************************
/* NAVIGATION (Desktop and Mobile)
/*******************************************/
nav {
     background-color: var(--white);
     padding: 10px 20px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     position: relative; /* Needed for absolute mobile menu */
     display: flex;
     justify-content: center;
     align-items: center;
}

/* The Container for Links */
.nav-links {
     display: flex;
     gap: 15px;
     flex-wrap: wrap;
     justify-content: center;
}

/* The Links (Buttons) */
.nav-links a{
     text-decoration: none;
     background-color: var(--light-turqoise);
     color: white;
     font-family: "Quicksand", sans-serif;
     font-weight: 700;
     padding: 12px 25px;
     border-radius: 50px;
     transition: all 0.3s ease;
     white-space: nowrap;
}

.nav-links a:hover {
     background-color: var(--dark-turqoise);
     transform: translateY(-2px);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Hamburger Icon (Hidden on Desktop) */
.hamburger {
     display: none;
     font-size: 2rem;
     color: var(--dark-turqoise);
     cursor: pointer;
     background: none;
     border: none;
     position: absolute;
     right: 20px;
     top: 15px;
}

/******************************************
/* PAGE SPECIFIC STYLES
/*******************************************/

/* --- Horses Grid --- */
.horses {
     display: grid;
     /* This creates responsive stacking automatically */
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 40px;
     margin-top: 40px;
}

.horse {
     background: var(--white);
     padding: 30px;
     border-radius: 15px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
     border-bottom: 5px solid var(--pale-pink);
     display: flex;
     flex-direction: column;
     align-items: center;
}

/* New CSS for more rectangular, full picture of horses */
/* This version does not have object-fit, object-position, border-radius: 50%, fixed-dimensions, or thick-grey border */
.horse img {
     width: 100%; /* Makes image fill width of card */
     max-width: 100%; /* Ensures it doesn't overflow */
     height: auto; /* Maintains the natural aspect ration (no squish or crop) */
     border-radius: 12px; /* Optional setting: Adds a slight rounding to match the card corners */
     box-shadow: 0 4px 8px rgba(0, 0,  0, 0.1); /* Optional: adds a little shadow and pop */
     margin-bottom: 25px;
}


.fabio > img {
     object-fit: fill;
}

/* -- Gallery Grid -- */
section.gallery {
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 40px 20px;
}

section.gallery h1 {
     margin-bottom: 10px;
}

section.gallery p {
     max-width: 900px;
     margin-bottom: 20px;
}

.image-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 20px;
     margin: 30px 0;
     width: 100%;
}

.image-container img {
     height: 250px;
     width: auto;
     object-fit: cover;
     border-radius: 8px;
     display: block;
     margin: 0;
     transition: transform 0.3s ease;
     background-color: transparent;
     padding: 0;
     box-shadow: none;
     border: none;
}

.image-container img:hover {
     transform: scale(1.75);
}

/*--- Support page ---*/

/* Center all content on Support Page */
.support-page {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     padding: 40px 20px;
}

/* Shrink book image */
.book-image {
     max-width: 400px;
     width: 100%;
     height: auto;
     margin-bottom: 20px;
}

/* Center row for GoFundMe and QR Code */
.donation-container {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 30px;
     margin-top: 40px;
     font-size: 22px;
}

.qr-code {
     width: 400px;
     height: auto;
}

/* --- Contact Page --- */

/* Center everything on page */
.contact-page {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     padding: 40px 20px
}

/* Shrink main contact image */
.contact-image {
     max-width: 450px; /* adjust to make smaller or larger as necessary */
     width: 100%;
     height: auto;
     border-radius: 15px;
     margin-bottom: 25px;
}

/* Stack email and phone with some space */
.contact-info {
     display: flex;
     flex-direction: column;
     gap: 10px;
     margin-bottom: 30px;
     font-size: 2.5rem;
}

/* Put follow us and logos in a row */
.social-row {
     display: flex;
     align-items: center; /* vertical centering */
     justify-content: center;
     gap: 15px; /* space between text and icons */
}

/* Size the social logos */
.social-icons {
     display: flex;
     gap: 10px;
}

.social-icons img {
     width: 50px; /* size for logos */
     height: 50px;
     margin: 0; /* remove any previous margins */
}

/* --- Media Page --- */
/* The wrapper (the "Card")*/
.media-feature {
     background: var(--white);
     border-radius: 15px;
     padding: 30px;
     margin: 40px auto;
     max-width: 900px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
     border: 1px solid var(--pale-pink);
     display: flex;
     flex-direction: column; /* Stacks the header, scroll-box, and caption */
}

/* The scolling window (the "Glass") */
.scroll-window {
     height: 500px; /* How tall the viewing area is */
     overflow-y: auto; /* Shows scrollbar only as needed */
     border: 2px solid var(--pale-pink);
     border-radius: 8px;
     background: #f9f9f9;

     /* Smooth scrolling for mobile */
     -webkit-overflow-scrolling: touch;
}

.caption-box {
     padding-top: 25px; /* creates whitespace that's needed */
     border-top: 1px solid #f0f0f0; /* Optional: adds a subtle line between scroll and text. May take this out */
     margin-top: 10px;
}

/* The Caption below the scroll box */
.caption-box p {
     font-size: 1.2rem;
     color: var(--text-color);
     margin-bottom: 0;
     text-align: left;
}

/* Styling the actual link at the bottom */
.article-link {
     display: inline-block;
     margin-top: 5px;
     color: var(--dark-turqoise);
     text-decoration: underline;
     font-weight: 700; 
     font-size: 1.3rem; /* Slightly larger than standard text */
     transition: colo 0.3s ease;
}

.article-link:hover {
     color: var(--light-turqoise);
     text-decoration: none; 
}


/******************************************
/* FOOTER
/*******************************************/
footer {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     background-color: #3E2723;
     color: #fdfbf7;
     padding: 40px 60px;
     margin-top: auto; /* Ensures footer stays at bottom */
}

/* Usiung individual zones with flex to stack their own text vertically */
.footer-side, .footer-center {
     display: flex;
     flex-direction: column;
     gap: 8px;
     flex: 1; /* forcing all three zones to take up equal width */
}

.footer-center {
     align-items: center; /* keep middle content centered */
     text-align: center;
}

.footer-side:first-child {
    align-items: flex-start;
    text-align: left; 
}

.footer-side:last-child {
     align-items: flex-end;
     text-align: right
}

/* Size the footer social icons */
.footer-social img {
     width: 50px;
     height: 50px;
     margin: 5px;
}

.footer-side a{
     color: white;
     padding: 12px 25px;
     border-radius: 50px;
     transition: all 0.3s ease;
     white-space: nowrap;
}

/******************************************
/* MEDIA QUERIES
/*******************************************/

/* Tablet & Mobile (Below 768px) */
@media screen and (max-width: 768px) {
     h1 {
          font-size: 2.5rem;
     }

     h2 {
          font-size: 1.8rem;
     }

     /* Navigation Switch to Hamburger */
     .hamburger {
          display: block;
     }

     .nav-links {
          display: none;
          flex-direction: column;
          width: 100%;
          position: absolute;
          top: 60px;
          left: 0;
          background-color: var(--white);
          padding: 20px 0;
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
          z-index: 100;
     }

     .nav-links.active {
          display: flex;
     }

     .nav-links a {
          background-color: transparent;
          color: var(--primary-brown);
          border-radius: 0;
          width: 100%;
          text-align: center;
          padding: 15px;
          border-bottom: 1px solid #eee;
     }

     .nav-links a:hover {
          background-color: #f0f0f0;
          box-shadow: none;
          transform: none;
     }

     .gallery img {
          width: 100%;
          height: auto;
     }

     footer {
          flex-direction: column;
          text-align: center;
          width: 100%;
          padding: 30px 15px;
     }

     .footer-side, .footer-center {
          width: 100%;
          margin-bottom: 20px;
          align-items: center !important; /* Forces all footer items to center */
          text-align: center !important;
     }

     /* -- Fix: Padding and Text Wrapping -- */
     .about-page, .support-page, .contact-page, section {
          width: 100% !important;
          padding: 20px 15px !important; /* Adds breathing room on the edges */
          overflow-wrap: break-word; /* Forces long emails to wrap to next line */
     }

     .support-page img,
     .support-page iframe,
     .gofundme-container,
     .contact-page img {
          max-width: 100% !important;
          height: auto !important;
     }

     /* -- Fix: Shrink huge contact text -- */
     .contact-info {
          font-size: 1.2rem; /* Reduced fromn 2.5rem so it fits on screen */
          word-break: break-all; /* Ensures email breaks if still too long */
     }

     .donation-container {
          flex-direction: column; /* Stacks GoFundMe and QR code if needed */
          gap: 15px;
     }
}