/* 
    Root CSS Variables for Reusable Values
    --------------------------------------
    The :root selector allows us to define custom properties (variables) at the highest level in the CSS. 
    These values can be reused throughout the document. This makes it easier to maintain and customize the design.
*/
:root {
    --link-color: #007bff; /* Default color for links (blue) */
    --highlight-color: #ff0; /* Yellow for highlighted text or links */
    --secure-color: #0056b3; /* Dark blue for secure links (HTTPS) */
    --pdf-color: #8b0000; /* Dark red for PDF links */
    --nofollow-color: #808080; /* Gray for nofollow links */
    --selection-bg: #0056b3; /* Background color for selected text */
    --selection-color: white; /* Text color for selected text */
    --hover-bg: #e0e0e0; /* Light gray background for hover effects */
    --hover-text-color: darkgreen; /* Dark green text color for hover effects */
}

/* 
    Basic Attribute Exists (for links with the 'target' attribute)
    --------------------------------------------------------------
    This rule applies to all anchor elements (<a>) that have a 'target' attribute. 
    It applies the color red to any link with a target attribute, irrespective of the target value.
    The links are styled to make them more prominent, and their appearance is customized with the ::before, ::after, ::first-letter, and ::first-line pseudo-elements.
*/
a[target] {
    color: red; /* Set the text color to red for links with the 'target' attribute */
    font-family: 'Arial', sans-serif; /* Arial font for the links */
    text-transform: uppercase; /* Transform text to uppercase */
    letter-spacing: 0.1em; /* Increase letter spacing for better readability */
}

/* Add content before the link text indicating that it has a target attribute */
a[target]::before {
    content: "Target Attribute: "; /* Precede the link text with a label */
    font-weight: bold; /* Make the prefix text bold */
    color: blue; /* Blue color for the prefix */
    font-size: 14px; /* Slightly smaller font size for the prefix */
    text-decoration: underline dotted blue; /* Dotted underline style in blue */
}

/* Add content after the link text with information about the behavior (opens in a new window) */
a[target]::after {
    content: " (Opens a new window)"; /* Clarifying the behavior of the link */
    font-style: italic; /* Italicized text to differentiate from the main content */
    color: gray; /* Gray color for the explanatory text */
}

/* Style the first letter of the link's text */
a[target]::first-letter {
    font-size: 2em; /* Make the first letter larger */
    color: purple; /* Purple color for the first letter */
    font-weight: bold; /* Bold the first letter */
}

/* Style the first line of the link's text */
a[target]::first-line {
    text-transform: uppercase; /* Uppercase the first line */
    font-style: italic; /* Italicize the first line */
    color: darkorange; /* Dark orange color for the first line */
}

/* 
    Exact Match (for links with target="_blank")
    -------------------------------------------
    This rule applies specifically to links that open in a new tab/window (i.e., those with target="_blank").
    Links with this attribute are styled with a green color and additional styles such as bold font, no underline, and a smooth transition effect on hover.
*/
a[target="_blank"] {
    color: green; /* Green color for links that open in a new tab */
    font-weight: bold; /* Bold text to make these links more noticeable */
    text-decoration: none; /* Remove the default underline */
    background-color: #f0f0f0; /* Light background color for emphasis */
    padding: 4px 8px; /* Padding around the text for better spacing */
    border-radius: 5px; /* Rounded corners for a softer appearance */
    transition: all 0.3s ease; /* Smooth transition effect for hover */
}

/* Add a hover effect for links that open in a new tab */
a[target="_blank"]:hover {
    background-color: var(--hover-bg); /* Light gray background on hover */
    color: var(--hover-text-color); /* Dark green color on hover */
}

/* Add content before the link to indicate it's for a new tab */
a[target="_blank"]::before {
    content: "[New Tab] "; /* Label the link as a new tab link */
    color: orange; /* Orange color for the prefix */
    font-size: 14px; /* Slightly smaller font size for the prefix */
}

/* Add content after the link with additional info */
a[target="_blank"]::after {
    content: " - Opens in a new tab"; /* Describes the behavior of the link */
    color: purple; /* Purple color for the explanatory text */
    font-style: italic; /* Italicized text to distinguish it */
}

/* Style the first letter of the link's text */
a[target="_blank"]::first-letter {
    font-size: 2em; /* Larger size for the first letter */
    color: teal; /* Teal color for the first letter */
}

/* Style the first line of the link's text */
a[target="_blank"]::first-line {
    font-weight: normal; /* Set the first line text weight to normal */
    text-transform: lowercase; /* Make the first line lowercase */
}

/* 
    Attribute Value Starts With (for links starting with "https")
    --------------------------------------------------------------
    This rule applies to all links whose href attribute starts with "https", indicating a secure link.
    Secure links are styled with a blue color and are emphasized with a bold font. 
    Additionally, a border is applied to the bottom of the link with a smooth transition effect for hover.
*/
a[href^="https"] {
    color: blue; /* Blue color for secure links */
    font-weight: bold; /* Bold styling for secure links */
    text-decoration: none; /* Remove the default underline */
    border-bottom: 2px solid var(--secure-color); /* Blue bottom border for secure links */
    padding-bottom: 2px; /* Padding for spacing below the text */
    transition: border-color 0.3s ease-in-out; /* Smooth border color transition */
}

/* Add a hover effect for secure links */
a[href^="https"]:hover {
    border-color: #0056b3; /* Darker blue color for hover */
}

/* Add content before the secure link to label it */
a[href^="https"]::before {
    content: "[Secure] "; /* Precede the link with a secure label */
    font-size: 16px; /* Slightly larger font for the prefix */
    color: darkblue; /* Dark blue color for the prefix */
}

/* Add content after the secure link with extra details */
a[href^="https"]::after {
    content: " - Secure Link"; /* Label indicating it's a secure link */
    color: darkcyan; /* Dark cyan color for the description */
}

/* Style the first letter of the link's text */
a[href^="https"]::first-letter {
    font-size: 2em; /* Larger font size for the first letter */
    font-weight: bold; /* Bold the first letter */
    color: green; /* Green color for the first letter */
}

/* Style the first line of the link's text */
a[href^="https"]::first-line {
    font-style: italic; /* Italicize the first line */
    text-transform: uppercase; /* Uppercase the first line */
}

/* 
    Attribute Value Ends With (for links ending with ".pdf")
    --------------------------------------------------------
    This rule targets links that point to PDF files (i.e., links ending with ".pdf").
    Such links are styled with a bold font and a red color to make them stand out as downloadable content. 
    The text is underlined by default, and hover effect changes it to a strikethrough style for emphasis.
*/
a[href$=".pdf"] {
    font-weight: bold; /* Bold styling for PDF links */
    color: var(--pdf-color); /* Dark red color for PDF links */
    text-decoration: underline; /* Underline PDF links */
    transition: color 0.3s ease, text-decoration 0.3s ease; /* Smooth transition for hover effects */
}

/* Add a hover effect for PDF links */
a[href$=".pdf"]:hover {
    color: crimson; /* Crimson color for PDF links on hover */
    text-decoration: line-through; /* Strike through text on hover */
}

/* Add content before the PDF link */
a[href$=".pdf"]::before {
    content: "[PDF] "; /* Precede the link with a PDF label */
    color: red; /* Red color for the prefix */
    font-weight: 600; /* Bold the prefix */
}

/* Add content after the PDF link with additional details */
a[href$=".pdf"]::after {
    content: " - Downloadable PDF"; /* Describes the link as a downloadable PDF */
    color: black; /* Black color for the description */
}

/* Style the first letter of the PDF link */
a[href$=".pdf"]::first-letter {
    font-size: 1.5em; /* Larger first letter */
    color: darkred; /* Dark red color for the first letter */
}

/* Style the first line of the PDF link */
a[href$=".pdf"]::first-line {
    font-style: italic; /* Italicize the first line */
    color: darkgray; /* Dark gray color for the first line */
}

/* 
    Attribute Value Contains Substring (for links with "example" in their href)
    --------------------------------------------------------------------------
    This rule applies to links whose href attribute contains the substring "example".
    Links with this substring are styled with underlined text, a font-size of 18px, and a yellow color to stand out.
    The hover effect changes the text color to red and applies a dotted underline for interactivity.
*/
a[href*="example"] {
    text-decoration: underline; /* Underline links with "example" in their href */
    font-size: 18px; /* Larger font size for links with "example" */
    color: var(--highlight-color); /* Yellow color for links with "example" */
    transition: color 0.3s ease, text-decoration 0.3s ease; /* Smooth transition for hover */
}

/* Hover effect for links containing "example" */
a[href*="example"]:hover {
    color: red; /* Red color on hover */
    text-decoration: underline dotted red; /* Dotted underline in red on hover */
}

/* Add content before the link */
a[href*="example"]::before {
    content: "[Example] "; /* Label links with "example" */
    color: orange; /* Orange color for the prefix */
}

/* Add content after the link with details */
a[href*="example"]::after {
    content: " - Example link"; /* Describes the link as an example link */
    color: green; /* Green color for the description */
}

/* Style the first letter of the "example" link */
a[href*="example"]::first-letter {
    font-size: 2em; /* Larger size for the first letter */
    color: purple; /* Purple color for the first letter */
}

/* Style the first line of the "example" link */
a[href*="example"]::first-line {
    text-transform: capitalize; /* Capitalize the first line */
    color: darkgreen; /* Dark green color for the first line */
}