/* --- 0. Table of Contents --- */
/*
    1.  Reset & Base Styles
    2.  Variables (Custom Properties)
    3.  Utility Classes
    4.  Header & Navigation
    5.  Hero Section
    6.  Main Content (General)
    7.  Blog Post List (Index Page)
    8.  Article Page Styles
    9.  Forms
    10. Key Takeaways
    11. Blockquotes
    12. Tables
    13. Asides
    14. Images & Figures
    15. Embedded Videos
    16. Footer
    17. Cookie Banner
    18. FAQ
    19. Media Queries (Responsive Adjustments)
*/

/* --- 1. Reset & Base Styles --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "IBM Plex Sans", sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--body-bg-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
    color: var(--link-color);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--link-hover-color);
}

/* --- 2. Variables (Custom Properties) --- */
:root {
    /* Colors */
    --primary-color: #054ada;
    --primary-color-dark: #003eaa; /* Darker shade */
    --secondary-color: #f97316;
    --accent-color: #0d6efd; /* Example accent color */
    --text-color: #333;
    --text-color-light: #6c757d; /* For meta, captions, etc. */
    --body-bg-color: #ffffff;
    --header-bg-color: var(--primary-color);
    --footer-bg-color: var(--primary-color);
    --link-color: #1e40af;
    --link-hover-color: #2563eb;
    --white: #fff;
    --light-gray: #f5f5f5;
    --medium-gray: #f8f9fa;
    --dark-gray: #555;
     --success-color: #4CAF50;
    --success-hover-color:#45a049;
    --button-hover-color:#0b5ed7;

    /* Fonts */
    --base-font-size: 1rem; /* 16px (usually) */
    --heading-font: "IBM Plex Sans", sans-serif;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* Border Radius */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;

    /* Box Shadow */
    --box-shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1);
    --box-shadow-md: 0 4px 10px rgba(0, 0, 0, 0.1);

	/* Other */
	--article-max-width: 800px; /* Example max-width for article content */
	--breakpoint-tablet: 768px;
	--breakpoint-desktop: 1024px;
}

/* --- 3. Utility Classes --- */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.container {
    width: 90%;
    max-width: 1200px; /* Adjust as needed */
    margin: 0 auto;
    padding: 0 var(--space-md);
}
.article-container {
    max-width: var(--article-max-width);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* --- 4. Header & Navigation --- */
.header {
    background-color: var(--header-bg-color);
    color: var(--white);
    position: relative; /* For mobile menu positioning */
}

.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) 0;
}

.header__logo {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--secondary-color); /* Example */
     display: flex; /* For aligning logo and text, if needed */
    align-items: center;
}
.header__logo1{
    font-size: 1.20rem;
    font-weight: bold;
    background: #6199fc;
    /* Ahrefs gradient */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-left: 5px;
}
.header__logo img {
    height: 40px; /* Adjust as needed */
    margin-right: var(--space-sm); /* Space between logo and text */
}

.nav__menu {
    list-style: none;
    display: flex;
    gap: var(--space-lg);
}

.nav__link {
    color: var(--white);
    font-size: 1rem;
    display: block; /* Make the link fill the list item */
    padding: var(--space-sm) 0; /* Vertical padding */
}
.nav__link:hover{
    color:var(--white);
}
/* Mobile Menu Button */
.nav__toggle {
    font-size: 1.75rem;
    background: none;
    border: none;
    color: var(--white);
    cursor: pointer;
    display: none; /* Hidden by default */
}

/* Mobile Menu (Hidden by Default) */
@media (max-width: 768px) {
    .nav__toggle {
        display: block;
    }

    .nav__menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px; /* Adjust based on header height */
        right: var(--space-md);
        background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent */
        border-radius: var(--border-radius-sm);
        width: 200px;
        text-align: left;
        z-index: 100; /* Ensure it's above other content */
    }

    .nav__menu.active {
        display: flex;
    }

    .nav__item {
        padding: var(--space-sm);
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

     .nav__item:last-child {
        border-bottom: none; /* Remove border from last item */
    }

    .nav__link {
        display: block;
        padding: var(--space-sm);
    }
}

/* --- 5. Hero Section --- */
.hero {
    background-color: var(--primary-color);
    color: var(--white);
    text-align: center;
    padding: 1rem var(--space-md); /* Responsive padding */
    position: relative;
}

.hero__content {
    margin-top: 70px;
    margin-bottom: 100px;
    max-width: 700px;
}

.hero__title {
    font-size: 2.5rem; 
    font-weight: bold;
    margin-bottom: var(--space-md);
    line-height: 1.2;
}

.hero__subtitle {
    font-size: 1.125rem;
    line-height: 1.5;
    margin-bottom: var(--space-lg);
}

.hero__bookmark {
     position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    /* Reduced width */
    height: 35px;
    /* Increased height */
    background-color: var(--secondary-color);
    z-index: 1;
    clip-path: polygon(0 0,
            /* Top-left */
            100% 0,
            /* Top-right */
            100% 100%,
            /* Bottom-right */
            50% 80%,
            /* Adjusted for better proportion */
            0 100%
            /* Bottom-left */
        );
}

/* --- 6. Main Content (General) --- */
main {
    padding: var(--space-2xl) 0;
}

/* --- 7. Blog Post List (Index Page) --- */
.blog-posts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
    gap: var(--space-lg);
}

.blog-post {
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--medium-gray); /* Subtle separator */
}
.blog-post:last-child {
		border-bottom: none; /* Remove border from the last post */
	}

.blog-post__category {
    display: inline-block;
    font-size: 0.875rem;
    color: var(--text-color);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    font-weight: 600;
}

.blog-post__title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: var(--space-xs);
    line-height: 1.3;
}

.blog-post__title a {
    color: var(--primary-color-dark);
}
.blog-post__title a:hover {
   color:var(--primary-color-dark)
}
.blog-post__excerpt {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: var(--space-md);
    color: var(--text-color-light);
}

.blog-post__meta {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: var(--text-color-light);
}

.blog-post__author-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: var(--space-xs);
    flex-shrink: 0;
    object-fit: cover;
}

.blog-post__author-name {
    font-weight: 600;
    margin-right: var(--space-xs);
}

/* --- 8. Article Page Styles --- */

.article-header {
    background-color: var(--primary-color); /* Or a different background */
    color: var(--white);
    padding: var(--space-2xl) 0;
    text-align: center;
}

.article-header__title {
    font-size: 2.5rem;
    margin-bottom: var(--space-sm);
    font-weight: bold;
     line-height: 1.2;
}

.article-header__category {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--space-xs);
    font-size: 0.875rem;
    text-transform: uppercase;
}

.article-header__meta {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
     display: flex; /*  Align items horizontally */
    align-items: center; /*  Center items vertically */
    justify-content: center; /* Center horizontally */
}

.article-content {
    padding: var(--space-lg) 0;
     max-width: var(--article-max-width); /* Add this line */
    margin-left: auto; /* Center the content */
    margin-right: auto;
}

.article-content p {
    margin-bottom: var(--space-md);
    line-height: 1.6;
}

/* Headings */
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: var(--space-sm);
    color: var(--primary-color-dark);
}

.article-content h2 {
    font-size: 2rem;
    margin-top: var(--space-xl);
}

.article-content h3 {
    font-size: 1.5rem;
    margin-top: var(--space-lg);
}

.article-content h4,
.article-content h5,
.article-content h6 {
    font-size: 1.25rem;
    margin-top: var(--space-md);
}

/* Lists */
.article-content ul,
.article-content ol {
    margin-left: var(--space-lg);
    margin-bottom: var(--space-md);
    padding-left: 0; /* Remove default padding */
    list-style: none; /*  <--- ADD THIS LINE */
}

.article-content li {
    margin-bottom: var(--space-xs);
    position: relative;
    padding-left: 1.75rem;
}

.article-content ul li::before {
   content: "\2022";  /* Unicode bullet character */
    color: var(--accent-color);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1.75rem;
}

.article-content ol li {
    counter-increment: list-counter;
}

.article-content ol li::before {
    content: counter(list-counter) ".";
    color: var(--accent-color);
    font-weight: bold;
    display: inline-block;
     width: 1em;
    margin-left: -1.75rem;
}
/* --- 9. Forms --- */
    .article-content input[type="text"],
	.article-content input[type="email"],
	.article-content input[type="password"],
	.article-content input[type="search"],
	.article-content input[type="number"],
	.article-content input[type="tel"],
	.article-content input[type="url"],
	.article-content input[type="date"],
	.article-content input[type="month"],
	.article-content input[type="week"],
	.article-content input[type="time"],
	.article-content input[type="datetime"],
	.article-content input[type="datetime-local"],
	.article-content input[type="color"],
    .article-content select,
    .article-content textarea {
        width: 100%;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        line-height: 1.5;
        color: var(--input-color);
        background-color: var(--input-bg);
        background-clip: padding-box;
        border: 1px solid var(--input-border-color);
		border-radius: var(--border-radius-sm);
        box-shadow: var(--input-box-shadow, none);
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

	/* Focus and hover states */
	.article-content input[type]:focus,
    .article-content select:focus,
    .article-content textarea:focus {
        color: var(--input-focus-color);
        background-color: var(--input-focus-bg);
        border-color: var(--input-focus-border-color);
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25); /* Example focus ring */
    }

    .article-content input[type]:hover,
    .article-content select:hover,
    .article-content textarea:hover {
        border-color: var(--input-hover-border-color);
    }
	/* Placeholder text color */
    .article-content ::placeholder {
        color: var(--input-placeholder-color);
        opacity: 1; /* Firefox */
    }

    /* --- 10. Key Takeaways --- */
.key-takeaways {
    background-color: var(--light-gray);
    border-left: 4px solid var(--accent-color);
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
    border-radius: var(--border-radius-md);
}

.key-takeaways__title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: var(--space-sm);
}

.key-takeaways ul {
    list-style: none;
    padding-left: 0;
    margin-left:0;
}

.key-takeaways li {
   margin-bottom: var(--space-xs);
   padding-left:var(--space-md);
}
 .key-takeaways li::before{
    content:none;/*remove bullet*/
}
/* --- 11. Blockquotes --- */
.article-content blockquote {
    border-left: 4px solid var(--accent-color);
    padding: var(--space-md);
    margin: var(--space-lg) 0;
    background-color: var(--light-gray);
    font-style: italic;
    color: var(--dark-gray);
}

/* --- 12. Tables --- */
.article-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-md);
    background-color: var(--white);
    border: 1px solid var(--medium-gray);
}

.article-content th,
.article-content td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-right: 1px solid var(--medium-gray);
    border-bottom: 1px solid var(--medium-gray);
}

.article-content tr > th:last-child,
.article-content tr > td:last-child {
    border-right: none;
}

.article-content thead th {
    background-color: var(--primary-color-dark);
    color: var(--white);
    border-bottom: 2px solid var(--medium-gray);
}

.article-content tbody tr:last-child > td {
    border-bottom: none;
}

.article-content tbody tr:nth-child(even) > td {
    background-color: var(--light-gray);
}

/* --- 13. Asides --- */
.aside {
    background-color: #dce8ff;
    border: 1px solid var(--medium-gray);
    padding: var(--space-lg);
    margin-top: var(--space-lg);
    border-radius: var(--border-radius-md);
    padding-top: 20px;
    padding-bottom: 8px;
}

.aside__title {
    font-size: 1.25rem;
    margin-bottom: var(--space-md);
    color: var(--text-color);
}

.aside ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.aside li {
    margin-bottom: var(--space-sm);
}

.aside a {
    color: var(--link-color);
    text-decoration: none;
    display: block;
    padding: var(--space-xs) 0;
    transition: color 0.2s ease;
}

.aside a:hover,
.aside a:focus {
    color: var(--link-hover-color);
    text-decoration: underline;
}

/* --- 14. Images & Figures --- */
.article-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: var(--space-lg) auto;
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-sm);
}
/* --- Image captions --- */
figcaption {
    display: block;  /* Already a block-level element, but good for clarity */
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-color-light);
    margin-top: var(--space-xs);
    font-style: italic; /*  Make the entire figcaption italic, which is standard for captions */
  
    /* Optional additions, but generally good practices */
    padding: 0.5em; /* Some padding is usually visually appealing */
    line-height: 1.4; /* Improve readability for multi-line captions*/
  }
/* --- 15. Embedded Videos --- */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    margin-bottom: var(--space-md);
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* --- 16. Footer --- */
.footer {
    background-color: var(--footer-bg-color);
    color: rgba(255, 255, 255, 0.7);
    padding: var(--space-2xl) 0;
    text-align: center;
    margin-top:var(--space-2xl);
}

.footer__content {
  width: 90%;
    max-width: 1200px; /* Adjust as needed */
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.footer__columns {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}

.footer__column {
    flex: 1 1 200px;
    margin-bottom: var(--space-md);
    text-align: left;
}
.footer__column:last-child{
     text-align: center;
}
.footer__title {
    font-size: 1.125rem;
    font-weight: bold;
    margin-bottom: var(--space-sm);
    color: var(--white);
}

.footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__links li {
    margin-bottom: var(--space-xs);
}

.footer__links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    display: inline-block;
    padding: var(--space-xs) 0;
}

.footer__links a:hover {
    text-decoration: underline;
     color: var(--white);
}

.footer__copyright {
    font-size: 0.875rem;
}

/* --- 17. Cookie Banner --- */
.cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #222;
    color: white;
    padding: 1rem;
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    max-width: 400px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    z-index: 1000; /* Very high z-index */
}

.cookie-banner.show {
    opacity: 1;
    visibility: visible;
}

.cookie-banner__content {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.cookie-banner__emoji {
    font-size: 1.5rem;
}

.cookie-banner__buttons {
    display: flex;
    gap: var(--space-sm);
}

.cookie-banner__button {
    border: none;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: 0.875rem;
}

.cookie-banner__button--accept {
    background-color: var(--success-color);
    color: var(--white);
}
.cookie-banner__button--accept:hover{
  background-color: var(--success-hover-color);
}
.cookie-banner__button--decline {
    background-color: #444;
    color: var(--white);
}
.cookie-banner__button--decline:hover{
    background-color: #555;
}

/* --- 18. FAQ --- */
.faq-section {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
    max-width: var(--article-max-width);
    margin-left: auto;
    margin-right: auto;
    width:90%;
}

.faq-section details {
    margin-bottom: var(--space-xs);
    border: 1px solid var(--medium-gray);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    background-color: var(--white);
}

.faq-section summary {
    padding: var(--space-md);
    cursor: pointer;
    font-weight: bold;
    background-color: var(--light-gray);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.2s ease;
}

.faq-section summary:focus {
    outline: 2px solid var(--primary-color); /* Or another visually distinct style */
    outline-offset: 2px; /* Add some space between the outline and the element */
}

.faq-section details summary::-webkit-details-marker {
    display: none; /* Remove default arrow */
}

.faq-section summary::after {
    content: '\002B'; /* Plus sign */
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-color);
    transition: transform 0.2s ease;
}

.faq-section details[open] summary::after {
    content: '\2212'; /* Minus sign */
    transform: rotate(0deg);
}

.faq-section details[open] summary {
    background-color: #e8f0fe;
}

.faq-section summary:hover {
    background-color: #e8f0fe;
}

.faq-section details p {
    padding: var(--space-md);
    margin: 0;
    line-height: 1.6;
    border-top: 1px solid var(--medium-gray);
     color: var(--text-color);
}

.faq-section summary b {
    margin-right: var(--space-xs);
    color: var(--primary-color);
}

.faq-section details[open] {
    box-shadow: var(--box-shadow-sm);
}

.faq-section {
    font-size: 1.05rem;
}

/* --- 19. Media Queries (Responsive Adjustments) --- */

/* Tablet Styles */
@media (max-width: 768px) {
  .article-header__title {
        font-size: 2rem;
    }
  .article-content h2{
    font-size:1.75rem;
  }
  .article-content h3{
    font-size:1.375rem;
  }
    .hero__title {
        font-size: 2rem;
    }
    .footer__columns {
        flex-direction: column;
    }
    .footer__column {
        text-align: center;
    }
     .cookie-banner {
        width: 95%;
        padding: var(--space-sm);
    }

    .cookie-banner__buttons {
        flex-direction: column;
        width: 100%;
    }

    .cookie-banner__button {
        width: 100%;
        padding: var(--space-sm);
    }
}

/* Larger Desktop Styles (Optional) */
@media (min-width: 1200px) {
    .container {
        max-width: 1300px; 
    }
    .article-container{
        max-width: 850px;
    }
}

@media (max-width: 700px) {
    .container {
         max-width: 1300px; 
     }
     
 }
/* Print Styles */
@media print {
  body {
    color: #000;
    background-color: #fff;
    font-size: 12pt;
  }

  .header,
  .footer,
  .nav,
  .aside,
  .cookie-banner,
  .hero__bookmark,
  .nav__toggle
  {
    display: none;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

    /* Ensure images don't overflow */
    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    /* Avoid page breaks within key elements*/
    p, h2, h3, blockquote, ul, ol, table {
        page-break-inside: avoid;
    }

    /* Remove background colors and box shadows */
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

}




/* --- CRITICAL CSS PLACEHOLDER --- */
/*
    To implement critical CSS, you would:

    1.  Identify the CSS rules needed to render the above-the-fold content
        of your *most important* pages (homepage, key landing pages).
    2.  Use a tool (like Critical, criticalCSS, or Penthouse) to automatically
        extract this critical CSS.
    3.  Inline the extracted CSS directly into the `<head>` of your HTML,
        *before* any other CSS links.  It would go *here*, within <style> tags.
    4.  Load the full CSS file (this file) asynchronously, typically using
        `rel="preload"` and JavaScript.  Example:

        <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
        <noscript><link rel="stylesheet" href="styles.css"></noscript>

    This significantly improves the First Contentful Paint (FCP) and
    Largest Contentful Paint (LCP) metrics.
*/